ES6 咻咻咻

雨点打透心脏的1/2处 2022-10-11 12:24 72阅读 0赞

# 1. let和const
    let：修饰局部变量
    const：修饰常量
    
    let 不存在变量提升，var 会变量提升

# 2. 解构赋值 (array/object)
    
    2.1. array 解构
    
    基本：
    let [a, b, c] = [1, 2, 3];
    // a = 1
    // b = 2
    // c = 3
    
    嵌套：
    let [a, [[b], c]] = [1, [[2], 3]];
    // a = 1
    // b = 2
    // c = 3
    
    忽略:
    let [a, , b] = [1, 2, 3];
    // a = 1
    // b = 3
    
    剩余运算符：
    let [a, ...b] = [1, 2, 3];
    //a = 1
    //b = [2, 3]
    
    字符串：
    let [a, b, c, d, e] = 'hello';
    // a = 'h'
    // b = 'e'
    // c = 'l'
    // d = 'l'
    // e = 'o'
    
    2.2. obj 解构
    
    基本
    let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
    // foo = 'aaa'
    // bar = 'bbb'
     
    let { baz : foo } = { baz : 'ddd' };
    // foo = 'ddd'
    
    可嵌套
    let obj = {p: ['hello', {y: 'world'}] };
    let {p: [x, { y }] } = obj;
    // x = 'hello'
    // y = 'world'
    let obj = {p: ['hello', {y: 'world'}] };
    let {p: [x, {  }] } = obj;
    // x = 'hello'
    
    剩余运算符
    let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
    // a = 10
    // b = 20
    // rest = {c: 30, d: 40}
    
    结构默认值
    let {a = 10, b = 5} = {a: 3};
    // a = 3; b = 5;
    let {a: aa = 10, b: bb = 5} = {a: 3};
    // aa = 3; bb = 5;

# 3. Map
    
    # Map基操
    
    3.1 key是字符串
    var myMap = new Map();
    var keyString = "a string"; 
     
    myMap.set(keyString, "和键'a string'关联的值");
     
    myMap.get(keyString);    // "和键'a string'关联的值"
    myMap.get("a string");   // "和键'a string'关联的值"
                             // 因为 keyString === 'a string'
    
    3.2. key是对象
    var myMap = new Map();
    var keyObj = {}, 
     
    myMap.set(keyObj, "和键 keyObj 关联的值");
    
    myMap.get(keyObj); // "和键 keyObj 关联的值"
    myMap.get({}); // undefined, 因为 keyObj !== {}
    
    3.3. key是函数
    var myMap = new Map();
    var keyFunc = function () {}, // 函数
     
    myMap.set(keyFunc, "和键 keyFunc 关联的值");
     
    myMap.get(keyFunc); // "和键 keyFunc 关联的值"
    myMap.get(function() {}) // undefined, 因为 keyFunc !== function () {}
    
    3.4. key是NAN
    var myMap = new Map();
    myMap.set(NaN, "not a number");
     
    myMap.get(NaN); // "not a number"
     
    var otherNaN = Number("foo");
    myMap.get(otherNaN); // "not a number"
    
    
    
    Map遍历
    
    
    3.5. for...of
    var myMap = new Map();
    myMap.set(0, "zero");
    myMap.set(1, "one");
     
    // 将会显示两个 log。 一个是 "0 = zero" 另一个是 "1 = one"
    for (var [key, value] of myMap) {
      console.log(key + " = " + value);
    }
    for (var [key, value] of myMap.entries()) {
      console.log(key + " = " + value);
    }
    /* 这个 entries 方法返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的 [key, value] 数组。 */
     
    // 将会显示两个log。 一个是 "0" 另一个是 "1"
    for (var key of myMap.keys()) {
      console.log(key);
    }
    /* 这个 keys 方法返回一个新的 Iterator 对象， 它按插入顺序包含了 Map 对象中每个元素的键。 */
     
    // 将会显示两个log。 一个是 "zero" 另一个是 "one"
    for (var value of myMap.values()) {
      console.log(value);
    }
    /* 这个 values 方法返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的值。 */
    
    3.6. foreach
    var myMap = new Map();
    myMap.set(0, "zero");
    myMap.set(1, "one");
     
    // 将会显示两个 logs。 一个是 "0 = zero" 另一个是 "1 = one"
    myMap.forEach(function(value, key) {
      console.log(key + " = " + value);
    }, myMap)
    
    
    Map方法
    
    
    3.7. Map与Array转换
    var kvArray = [["key1", "value1"], ["key2", "value2"]];
     
    // Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
    var myMap = new Map(kvArray);
     
    // 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
    var outArray = Array.from(myMap);
    
    3.8. Map克隆
    var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);
    var myMap2 = new Map(myMap1);
     
    console.log(original === clone); 
    // 打印 false。 Map 对象构造函数生成实例，迭代出新的对象。
    
    3.9. Map合并
    var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
    var second = new Map([[1, 'uno'], [2, 'dos']]);
     
    // 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的，对应值即 uno，dos， three
    var merged = new Map([...first, ...second]);

# 4. Set
    
    
    4.1. Set基操
    let mySet = new Set();
     
    mySet.add(1); // Set(1) {1}
    mySet.add(5); // Set(2) {1, 5}
    mySet.add(5); // Set(2) {1, 5} 这里体现了值的唯一性
    mySet.add("some text"); 
    // Set(3) {1, 5, "some text"} 这里体现了类型的多样性
    var o = {a: 1, b: 2}; 
    mySet.add(o);
    mySet.add({a: 1, b: 2}); 
    // Set(5) {1, 5, "some text", {…}, {…}} 
    // 这里体现了对象之间引用不同不恒等，即使值相同，Set 也能存储
    
    # 4.2. Array与Set转换
    // Array 转 Set
    var mySet = new Set(["value1", "value2", "value3"]);
    // 用...操作符，将 Set 转 Array
    var myArray = [...mySet];
    String
    // String 转 Set
    var mySet = new Set('hello');  // Set(4) {"h", "e", "l", "o"}
    // 注：Set 中 toString 方法是不能将 Set 转换成 String
    
    
    Set方法
    
    
    # 4.3. 数组去重
    var mySet = new Set([1, 2, 3, 4, 4]);
    [...mySet]; // [1, 2, 3, 4]
    
    # 4.4. 数组并集
    var a = new Set([1, 2, 3]);
    var b = new Set([4, 3, 2]);
    var union = new Set([...a, ...b]); // {1, 2, 3, 4}
    
    # 4.5. 数组交集
    var a = new Set([1, 2, 3]);
    var b = new Set([4, 3, 2]);
    var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}
    
    # 4.6. 数组差集
    var a = new Set([1, 2, 3]);
    var b = new Set([4, 3, 2]);
    var difference = new Set([...a].filter(x => !b.has(x))); // {1}

# 5. proxy、handler、target 为了构造对象实体的操作API
    
    let target = {
        name: 'Tom',
        age: 24
    }
    let handler = {
        get: function(target, key) {
            console.log('getting '+key);
            return target[key]; // 不是target.key
        },
        set: function(target, key, value) {
            console.log('setting '+key);
            target[key] = value;
        }
    }
    let proxy = new Proxy(target, handler)
    proxy.name     // 实际执行 handler.get
    proxy.age = 25 // 实际执行 handler.set
    // getting name
    // setting age
    // 25

# 6. 字符串
    
    模板字符串
    
    # 6.1. 多行字符串
    let string1 =  `Hey,
    can you stop angry now?`;
    console.log(string1);
    // Hey,
    // can you stop angry now?
    
    # 6.3. 变量表达式
    let name = "Mike";
    let age = 27;
    let info = `My Name is ${name},I am ${age+1} years old next year.`
    console.log(info);
    // My Name is Mike,I am 28 years old next year.
    
    # 6.4. 调用函数
    function f(){
      return "have fun!";
    }
    let string2= `Game start,${f()}`;
    console.log(string2);  // Game start,have fun!

# 7. es6对象
    
    
    # 7.1. 对象简写
    const age = 12;
    const name = "Amy";
    const person = {age, name};
    person   //{age: 12, name: "Amy"}
    //等同于
    const person = {age: age, name: name}
    
    # 7.2. 方法简写
    const person = {
      sayHi(){
        console.log("Hi");
      }
    }
    person.sayHi();  //"Hi"
    //等同于
    const person = {
      sayHi:function(){
        console.log("Hi");
      }
    }
    person.sayHi();//"Hi"
    
    # 7.3. 合并对象 (可能会造成属性覆盖)
    let person = {name: "Amy", age: 15};
    let someone = { ...person, name: "Mike", age: 17};
    someone;  //{name: "Mike", age: 17}
    
    # 7.4. 合并对象
    let target = {a: 1};
    let object2 = {b: 2};
    let object3 = {c: 3};
    Object.assign(target,object2,object3);
    console.log(target)
    // {a: 1, b: 2, c: 3}
    
    # 7.5. 判断两个值是否严格相等
    Object.is("q","q");      // true
    Object.is(1,1);          // true
    Object.is([1],[1]);      // false
    Object.is({q:1},{q:1});  // false

# 8. es6数组
    
    创建数组
    
    # 8.1. 集成元素
    console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
     
    // 参数值可为不同类型
    console.log(Array.of(1, '2', true)); // [1, '2', true]
     
    // 参数为空时返回空数组
    console.log(Array.of()); // []
    
    #8.2. 类数组对象
    // 参数为数组,返回与原数组一样的数组
    console.log(Array.from([1, 2])); // [1, 2]
     
    // 参数含空位
    console.log(Array.from([1, , 3])); // [1, undefined, 3]
    
    
    类数组对象
    一个类数组对象必须含有 length 属性，且元素属性名必须是数值或者可转换为数值的字符
    let arr = Array.from({
      0: '1',
      1: '2',
      2: 3,
      length: 3
    });
    console.log(); // ['1', '2', 3]
     
    // 没有 length 属性,则返回空数组
    let array = Array.from({
      0: '1',
      1: '2',
      2: 3,
    });
    console.log(array); // []
    
    
    操作数组
    
    
    # 8.3. 数组元素 * 2
    console.log(Array.from([1, 2, 3], (n) => n * 2)); // [2, 4, 6]
    
    let map = {
        do: function(n) {
            return n * 2;
        }
    }
    let arrayLike = [1, 2, 3];
    console.log(Array.from(arrayLike, function (n){
        return this.do(n);
    }, map)); // [2, 4, 6]
    
    
    对象转换
    
    
    # 8.4. map转换
    let map = new Map();
    map.set('key0', 'value0');
    map.set('key1', 'value1');
    console.log(Array.from(map)); // [['key0', 'value0'],['key1',
    // 'value1']]
    
    # 8.5. 转换set
    let arr = [1, 2, 3];
    let set = new Set(arr);
    console.log(Array.from(set)); // [1, 2, 3]
    
    # 8.6. 转换字符串
    let str = 'abc';
    console.log(Array.from(str)); // ["a", "b", "c"]
    
    
    扩展方法
    
    
    # 8.7. 查找元素
    let arr = Array.of(1, 2, 3, 4);
    console.log(arr.find(item => item > 2)); // 3
     
    // 数组空位处理为 undefined
    console.log([, 1].find(n => true)); // undefined
    
    
    遍历
    
    
    # 8.8. for...of 遍历键值对
    for(let [key, value] of ['a', 'b'].entries()){
        console.log(key, value);
    }
    // 0 "a"
    // 1 "b"
    
    # 8.9. 遍历key
    for(let key of ['a', 'b'].keys()){
        console.log(key);
    }
    // 0
    // 1
    // 数组含空位
    console.log([...[,'a'].keys()]); // [0, 1]
    
    # 8.10. 遍历value
    for(let value of ['a', 'b'].values()){
        console.log(value);
    }
    // "a"
    // "b"
     
    // 数组含空位
    console.log([...[,'a'].values()]); // [undefined, "a"]
    
    # 8.11. 包含元素
    // 参数1：包含的指定值
    [1, 2, 3].includes(1);    // true
     
    // 参数2：可选，搜索的起始索引，默认为0
    [1, 2, 3].includes(1, 2); // false
     
    // NaN 的包含判断
    [1, NaN, 3].includes(NaN); // true
    
    # 8.12. 数组降维
    console.log([1 ,[2, 3]].flat()); // [1, 2, 3]
     
    // 指定转换的嵌套层数
    console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]]
     
    // 不管嵌套多少层
    console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5]
     
    // 自动跳过空位
    console.log([1, [2, , 3]].flat());<p> // [1, 2, 3]
    
    # 8.13. 数组元素处理
    // 参数1：遍历函数，该遍历函数可接受3个参数：当前元素、当前元素索引、原数组
    // 参数2：指定遍历函数中 this 的指向
    console.log([1, 2, 3].flatMap(n => [n * 2])); // [2, 4, 6]
    
    # 8.14. 复制和合并数组
    let arr = [1, 2],
        arr1 = [...arr];
    console.log(arr1); // [1, 2]
     
    // 数组含空位
    let arr2 = [1, , 3],
        arr3 = [...arr2];
    console.log(arr3); [1, undefined, 3]
    
    console.log([...[1, 2],...[3, 4]]); // [1, 2, 3, 4]

# 扩展知识
    
    # 9.1. 不定参数
    function f(...values){
        console.log(values.length);
    }
    f(1,2);      //2
    f(1,2,3,4);  //4
    
    
    箭头函数
    
    
    # 9.2. 基本用法
    var f = v => v;
    //等价于
    var f = function(a){
     return a;
    }
    f(1);  //1
    
    # 9.3. 求和
    var f = (a,b) => {
     let result = a+b;
     return result;
    }
    f(6,2);  // 8

# for...of 遍历
    
    # 10.1. Array
    const nums = ["zero", "one", "two"];
     
    for (let num of nums) {
      console.log(num);
    }
    TypedArray
    const typedArray1 = new Int8Array(6);
    typedArray1[0] = 10;
    typedArray1[1] = 11;
     
    for (let item of typedArray1) {
      console.log(item);
    }
    
    
    # 10.2. string
    const str = "zero";
     
    for (let item of str) {
      console.log(item);
    }
    
    
    #10.3. map
    let myMap = new Map();
    myMap.set(0, "zero");
    myMap.set(1, "one");
    myMap.set(2, "two");
     
    // 遍历 key 和 value
    for (let [key, value] of myMap) {
      console.log(key + " = " + value);
    }
    for (let [key, value] of myMap.entries()) {
      console.log(key + " = " + value);
    }
     
    // 只遍历 key
    for (let key of myMap.keys()) {
      console.log(key);
    }
     
    // 只遍历 value
    for (let value of myMap.values()) {
      console.log(value);
    }
    
    # 10.4. set
    let mySet = new Set();
    mySet.add("zero");
    mySet.add("one");
    mySet.add("two");
     
    // 遍历整个 set
    for (let item of mySet) {
      console.log(item);
    }
     
    // 只遍历 key 值
    for (let key of mySet.keys()) {
      console.log(key);
    }
     
    // 只遍历 value
    for (let value of mySet.values()) {
      console.log(value);
    }
     
    // 遍历 key 和 value ，两者会相等
    for (let [key, value] of mySet.entries()) {
      console.log(key + " = " + value);
    }

# class类和import/export 这里不再赘述

# 11. Promise异步编程
    
    
    # 11.1 保证顺序执行
    const p1 = new Promise(function(resolve,reject){
            // 一次请求，只会有一个被调用
            resolve('success');
            reject('reject');
        });
        p1.then(function(value){
            console.log(value);
            return value;
        }).then(function(value){
            console.log(value);
        }).catch(error => console.log(error));
        // success

# 12. async异步函数
    
    # 12.1. async和await和promise联合使用
    function testAwait (x) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(x);
        }, 2000);
      });
    }
     
    async function helloAsync() {
      var x = await testAwait ("hello world");
      console.log(x); 
    }
    helloAsync ();
    // hello world