ES6: Set 与 Map

Set

  • let my_set = new Set();
  • let my_set = new Set([1, 1, 2, 2]);
  • my_set.add(5);
  • my_set.delete(5);
  • my_set.has(5);
  • my_set.forEach(function(value){});
  • let my_set = WeakSet() // 只允许对象作为set的元素,便于垃圾回收

Map

  • let my_map = new Map();
  • let map = new Map([[“name”, “Nicholas”], [“age”, 25]]);
  • my_map.set(key, value);
  • my_map.get(key)
  • my_map.has(key)
  • my_map.delete(key);
  • my_map.clear();
  • my_map.size;
  • my_map.forEach(function(value, key, ownerMap) {
    console.log(key + ” ” + value);
    console.log(ownerMap === map);
    });
  • let map = new WeakMap();

ES6: 符号类型

引入原因:

  • 实现私有属性
     
     
    let s = Symbol()
    let obj = {[s]: 'hello world'};
    console.log(obj.s); //undefined
  • 符号值唯一
     
     
    let s = Symbol()
    let m = Symbol()
    console.log(s === m)

创建:

  • 不能用字面量形式创建
  • 使用Symbol(desc)函数创建,不需要添加new
  • Symbol.for(key)在全局符号注册表中查找key符号值,如果找到就返回,没找到就创建一个新的符号值
  • Symbol.keyFor(symbol): 返回符号值的key

枚举:

  • 符号类型的key是不能被枚举的,Object.keys()以及Object.getOwnPropertyNames()都不能返回符号类型的key
  • Object.getOwnPropertySymbols()则会返回对象中所有符号类型的key

共享符号值:

  • Symbol.for(desc): 在全局符号注册表中查找描述为desc的符号,如果找到,返回这个符号值,如果没有,则创建一个新的符号值并返回
  • Symbol.keyFor(var): 返回全局符号注册表中符号值为var的desc.

转换:

  • 不能强制转化为字符串或者数值类型, 所以 symbol + “hello” 或者 symbol/1 会报错
  • 可以调用String()来转换

知名符号:

  • Symbol.hasInstance(obj): 判断obj是不是但前函数的实例,如Array[Symbol.hasInstance](obj); 可以通过以下代码改变instanceof的默认行为:
     
     
        Object.defineProperty(MyObject, Symbol.hasInstance, {
            value: function(v) {
                return false;
            }
        });
  • Symbol.isConcatSpreadable
     
     
    let collection = {
    0: "Hello",
    1: "world",
    length: 2,
    [Symbol.isConcatSpreadable]: true
    };
    let messages = [ "Hi" ].concat(collection);
    console.log(messages.length); // 3
    console.log(messages); // ["hi","Hello","world"]
  • Symbol.match 、 Symbol.replace 、 Symbol.search 、Symbol.split
  • Symbol.toPrimitive
     
     
    function Temperature(degrees) {
        this.degrees = degrees;
    }
    Temperature.prototype[Symbol.toPrimitive] = function(hint) {
        switch (hint) {
        case "string":
            return this.degrees + "\u00b0"; // 温度符号
        case "number":
            return this.degrees;
        case "default":
            return this.degrees + " degrees";
        }
    };
    let freezing = new Temperature(32);
    console.log(freezing + "!"); // "32 degrees!"
    console.log(freezing / 2); // 16
    console.log(String(freezing)); // "32°"
  • Symbol.toStringTag
     
     
    > age[Symbol.toStringTag] = 'Node';
    'Node'
    > age
    { age: 32,
    [Symbol(Symbol.toPrimitive)]: [Function],
    [Symbol(Symbol.toStringTag)]: 'Node' }
    > age.toString();
    '[object Node]'

ES6: 对象和数组解构

所谓解构,指的是将数据结构分解为更小的部分,从而使数据提取变得容易。

对象解构:

  • 使用解构时,必须提供初始化值

    [code lang=”js” collapse=”false”]
    let Person = {
    name: ‘sen’,
    age: 18
    }
    let {name, age} = Person;
    [/code]

  • 解构表达式的值为=右侧的值
  • 如果对象中没有同名属性时,解构表达式新赋值的变量的值为undefined
  • 解构对象只是赋值时,需要加()
  • 赋值给不同名的变量

    [code lang=”js” collapse=”false”]
    let Person = {
    name: ‘sen’,
    age: 18
    }
    let {name: localName, age: localAge} = Person;
    [/code]

  • 设置默认值

    [code lang=”js” collapse=”false”]
    let Person = {
    name: ‘sen’,
    age: 18
    }
    let {name, age: localAge = 18} = Person;
    [/code]

  • 嵌套解构

    [code lang=”js” collapse=”false”]
    let Person = {
    name: ‘sen’,
    age: 18,
    score: {
    maths: 100
    }
    }
    let {name, score: {maths}} = Person;
    console.log(maths);
    [/code]

数组解构

  • [code lang=”js” collapse=”false”]
    let score = [99, 88, 77];
    let [maths, english, chinese] = score;
    [,,chinese] = score;
    [/code]
  • 数组解构赋值不需要加()
    [code lang=”js” collapse=”false”]
    let a = 3;
    let b = 4;
    [a, b] = [b, a]
    [/code]
  • 嵌套的解构
    [code lang=”js” collapse=”false”]
    let score = [99, 88, [77]];
    let [,,[chinese]] = score;
    [/code]
  • 剩余项
    [code lang=”js” collapse=”false”]
    let score = [99, 88, 77];
    let [maths, …restScore] = score;
    console.log(restScore) // [88, 77]
    [/code]
  • 数组和对象可以混合解构
    [code lang=”js” collapse=”false”]
    let Person = {
    name: ‘sen’,
    age: [0, 18]
    }
    let {name: localName, age: [start]} = Person;
    console.log(start);
    [/code]

ES6: 对象扩展

  • 初始化简写:

    [code lang=”js” collapse=”false”]
    function createPerson(name, age) {
    return { name: name, age: age };
    }
    —>
    function createPerson(name, age) {
    return { name, age };
    }

    [/code]

  • 方法简写:

    [code lang=”js” collapse=”false”]
    var person = {
    name: "sen",
    sayName: function() {
    return this.name;
    }
    }
    —>
    var person = {
    name: "sen",
    sayName() {
    return this.name;
    }
    }
    [/code]

  • 需要计算的属性名用[]表示
  • Object.is() 与===表现相同,除了
    Object.is(NaN, NaN) // true
    Object.is(+0, -0) // false
  • Object.assign(target, source) 将source中的属性和方法混入target对象
  • 允许重发的属性定义,排在最后的为实际值
  • 属性枚举的顺序:
    • 所有数字类型的键按升序排列
    • 所有字符串类型的键按添加进对象的顺序排列
    • 所有符号类型的键也按照添加进对象的顺序排列
  • 可修改对象的原型:
    Object.setPrototypeOf(obj, new_prototype)
  • 使用super作为指向原型对象的指针

ES6: 函数扩展

  • 带默认值的函数:var get_name = function(url, id=1, callback){};
    • 如果传入了第二个参数,将不会使用默认值
    • 如果给第二个参数赋值为undefined,会使用默认值
    • 带有默认值的参数后,arguments的内容将不会随着形参的改变而改变
    • 排在后面的参数可以将前面的参数作为默认值,而前面的参数不能引用后面的参数作为默认值
  • 剩余参数:var get_name = function(url, …keys)
    • 除了第一个参数url外,剩余所有参数都会被放到keys数组中
    • 函数只能有一个剩余参数,且必须放到最后
    • 剩余参数不能再对象字面量的setter属性中使用
  • 延展运算符:var args = [‘url’, 123, ‘st’]; get_names(…args);
  • new.target: 使用new创建一个对象时,会被赋值为新对象的构造器
  • ES6允许在代码块中定义函数,在严格模式中,块级函数只能在块级作用域中使用,而非严格模式中,块级函数会被提升到全局
  • 箭头函数
    • 没有this,super,arguments,new.target,这些值由所在的、最靠近的非箭头函数来决定
    • 不能使用new来调用
    • 没有原型
    • 不能更改this
    • 不允许有重复的具名参数
    • 语法
      • var reflect = value => value;
      • var sum = (num1, num2) => num1 + num2;
      • var getName = () => ‘Nicholas’;
      • var sum = (numb1, num2) => {return num1 + num2};
      • var doSomething = () => {};
      • var getItem = (id) => ({id: id, name: ‘Nicholas’});
      • var person = ((name) => {return {getName: function() {return name}};})(‘Nicholas’);
  • 尾调用优化:满足以下条件的尾调用将会被优化,在尾调用时不会创建新的栈帧,而是清除当前栈帧并再次利用它
    • 尾调用不能引用当前栈帧中的变量(意味着该函数不能是闭包)
    • 进行尾调用的函数在尾调用返回结果后不能做额外操作
    • 尾调用的结果作为当前函数的返回值

ES6: 字符串处理

UTF-16编码:

  • str.codePointAt(index)
  • String.fromCodePoint(codepoint);
  • normalize()

正则表达式

  • 新增u修饰符用来处理UTF-16编码的问题  /&.$/u
  • 新增pattern.flags 属性 // ‘ig’
  • 新增pattern.sticky 属性及’y’修饰符 // 只从lastIndex处匹配,如果和’g’一起存在则’g’被忽略
  • 复制正则表达式  // let pattern = new RegEX(old_pattern, ‘gi’)

字符串处理

  • str.includes(sub_string) // true or false
  • str.startsWith(sub_string)  // true or false
  • str.endsWith(sub_string) // true or false
  • str.repeat(times);  // str * times
  • 模板字面量
    • 支持多行字符串
    • 支持变量  // `hello ${name}`

ES6: 块级作用域

var

  • 没有块级作用域的概念
  • 会被提升到定义函数的顶部
  • 可以重复声明

let

  • 有块级作用域
  • 不会被提升
  • 禁止重复声明

const

  • 有块级作用域
  • 不会被提升
  • 禁止重复声明
  • 其值不可更改
  • 必须进行初始化
"