你不知道的JavaScript（十）：解构、函数默认传参、类super、模板字面量、生成器提前完成、集合、新增API

ゝ一纸荒年。 2024-05-07 17:16 21阅读 0赞

#### 你不知道的JavaScript - 下 - 解构、函数默认传参、类super、模板字面量、生成器提前完成、集合、新增API ####

*   *  \`...\`
     *  默认参数值
     *  解构
     *  super 对象
     *  标签模板字面量
     *  生成器提前完成
     *  集合
     *   *  类 - new.target
         *  映射 - Map
         *  WeakMap
         *  Set
         *  WeakSet
     *  新增API
     *   *  静态函数 \`Array.of(..)\`
         *  静态函数 \`Array.from(..)\`
         *  原型方法 \`copyWithin(..)\`
         *  原型方法 \`fill(..)\`
         *  原型方法 \`entries()\`、\`values()\`、\`keys()\`
         *  静态函数 \`Object.is(..)\`
         *  静态函数 \`Object.getOwnPropertySymbols(..)\`
         *  静态函数 \`Object.setPrototypeOf(..)\`
         *  Math
         *  静态函数 \`Number.isFinite(..)\` 和 \`Number.isNaN(..)\`
         *  \`Number.isInteger(..)\`
         *  \`Number.isSafeInteger(..)\`
         *  Unicode 函数
         *  静态函数 \`String.raw(..)\`
         *  原型函数 \`repeat(..)\`
         *  字符串检查函数\`startsWith(..)\`、\`endsWidth(..)\` 和 \`includes(..)\`

### `...` ###

function foo(...args){
        
        console.log(args);
    }
    foo(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

### 默认参数值 ###

function foo(x = 1, y = 2){
        
        console.log(x, y);
    }
    foo(); // 1 2
    foo(undefined, null); // 1 null
    foo(3, 4); // 3 4

// function bar(x = x + 1, y = x + 2) Error ---> ReferenceError: Cannot access 'x' before initialization
    // function bar(x = y + 1, y = x + 2) Error ---> ReferenceError: Cannot access 'y' before initialization
    function bar(x = 1, y = x + 2) {
        
        console.log(x, y);
    }
    bar(); // 1 3
    bar(undefined, null); // 1 null
    bar(3, 4); // 3 4

function bar(x = 1, y = ((num) => num)(2)) {
        
        console.log(x, y);
    }
    bar(); // 1 2
    bar(undefined, null); // 1 null
    bar(3, 4); // 3 4

### 解构 ###

let data = {
        
        code: 200,
        data: {
        
            name: 'Lee',
            age: 18,
            list: [1, 2, 3]
        },
        msg: 'ok'
    }
    
    let {
         code: c, msg: m, data: d, data: {
         name: n, age: a, list: [n1, n2, n3] } } = data;
    
    console.log(c, m, d, n, a, n1, n2, n3); // 200 'ok' {name: 'Lee', age: 18, list: Array(3)} 'Lee' 18 1 2 3

var o1 = {
         a: 1, b: 2, c: 3 },
        o2 = {
        };
    
    ({
         a: o2.x, b: o2.y, c: o2.z } = o1);
    
    console.log(o2); // {x: 1, y: 2, z: 3}

var o1 = {
         a: 1, b: 2, c: 3 },
        a2 = [];
    
    ({
         a: a2[0], b: a2[1], c: a2[2] } = o1);
    
    console.log(a2); // [1, 2, 3]

var a1 = [1, 2, 3],
        o2 = {
        };
    
    [o2.a, o2.b, o2.c] = a1;
    
    console.log(o2.a, o2.b, o2.c); // 1 2 3

var a1 = [1, 2, 3],
        a2 = [];
    
    [a2[2], a2[0], a2[1]] = a1;
    
    console.log(a2); // [2, 3, 1]

var o = {
         a: 1, b: 2, c: 3 },
        a, b, c, p;
    
    p = {
         a, b, c } = o;
    
    console.log(a, b, c); // 1 2 3 
    
    p === o; // true

let data = [1, undefined, 3];
    let [a = 10, b = 20, c = 30, d = 40] = data;
    console.log(a, b, c, d); // 1 20 3 40

### super 对象 ###

### 标签模板字面量 ###

/**
     * 标签模板字面量
     *      strings:    
     *          是一个由所有普通字符串（插入表达式之间的部分）组成的数组
     *          strings.raw:
     *              原始(raw)字符串，原始版本的值保留了原始的转义码 \n 序列（\ 和 n 是独立的字符），而处理过的版本把它当作是一个单独的换行符
     *      values:
     *          插入的值组成的数组
     */
    function foo(strings, ...values) {
        
        console.log(strings);
        console.log(strings.raw);
        console.log(values);
    }
    
    var name = "Lee";
    var age = 18;
    
    // strings      --->    ['Hello, 我叫', '\n今年', '岁!', raw: Array(3)]
    // strings.raw  --->    ['Hello, 我叫', '\\n今年', '岁!']
    // values       --->    ['Lee', 18]
    foo`Hello, 我叫${
          name}\n今年${
          age}岁!`;

*  ES6 提供了一个内建函数可以用作字符串字面量标签：String.raw(…)。它就是传出 strings 的原始版本
    
        console.log(String.raw`Hello\nLee!!!`); // Hello\nLee!!!

### 生成器提前完成 ###

function* foo() {
        
        yield 1;
        yield 2;
        yield 3;
        return 4;
    }
    
    let it = foo();
    console.log(it.next()); // {value: 1, done: false}
    console.log(it.return()); // {value: undefined, done: true}
    console.log(it.return(5)); // {value: 5, done: true}

### 集合 ###

#### 类 - new.target ####

class Foo {
        
    
        static msg = 'Hello Foo';
    
        constructor() {
        
            console.log(new.target.msg);
        }
    
    }
    
    class Bar extends Foo {
        
    
        static desc = 'Hello Bar';
    
        constructor() {
        
            super();
            console.log(new.target.desc, new.target.msg);
        }
    
        baz() {
        
            console.log(new.target);
        }
    
    }
    
    new Foo(); // Hello Foo
    var b = new Bar(); // Hello Foo --- Hello Bar, Hello Foo
    b.baz(); // undefined

*  `new.target` 作用：
    
     *  `new.target` 可以访问 `静态属性 / 方法`
     *  类构造器中的 `new.target` 如果是 `undefined`，那么就可以知道这个函数不是通过 `new` 调用的，因此如果需要的话可以强制一个 `new` 调用

#### 映射 - Map ####

var m = new Map();
    var x = {
         id: 1 },
        y = {
         id: 2 };
    
    // 设置值
    m.set(x, "foo");
    m.set(y, "bar");
    
    // 元素含量
    console.log(m.size); // 2
    
    // 查询值
    console.log(m.get(x)); // foo
    console.log(m.get(y)); // bar

![在这里插入图片描述][b2373cdcee3e4c9bac2d61ff3eaa680b.png_pic_center]

console.log(m.values());
    console.log(m.values().next()); // {value: 'foo', done: false}

![在这里插入图片描述][f8157649e341496fbf86117bf8e7cee2.png_pic_center]

console.log(m.entries());        
    console.log(m.entries().next()); // {value: Array(2) [{id: 1}, 'foo'], done: false}

![在这里插入图片描述][a46be1abf72442ec92933653aeb82c6d.png_pic_center]

console.log(m.keys());
    console.log(m.keys().next()); // {value: {id: 1}, done: false}

// 删除值
    m.delete(y);

// 清空值
    m.clear();

#### WeakMap ####

> WeakMap 是 map 的变体，二者的多数外部行为特性都是一样的，区别在于内部内存分配（特别是其 GC）的工作方式
> 
> 注意：`WeakMap（只）接受对象作为键`
> 
> WeakMap 没有 size 属性或 clear() 方法，也不会暴露任何键、值或项目上的迭代器

![在这里插入图片描述][bbfc11594bc7413b84c8cb936405066e.png_pic_center]

var m = new WeakMap();
    var x = {
         id: 1 },
        y = {
         id: 2 };
    
    m.set(x, "foo");
    
    m.has(x); // true 
    m.has(y); // false

![在这里插入图片描述][5f9560cfeb424415bf1bcfe391eee323.png_pic_center]

#### Set ####

> set 是一个值的集合，其中的值唯一（重复会被忽略）
> 
> set 的 API 和 map 类似。只是 add(…) 方法代替了 set(…) 方法（某种程度上说有点讽刺），没有 get(…) 方法。

![在这里插入图片描述][cb9a1b7dd5154c2f89e5463f4edaf4af.png_pic_center]

var s = new Set();
    var x = {
         id: 1 },
        y = {
         id: 2 };
    
    s.add(x);
    s.add(y);
    s.add(x);
    
    // s.size; // 2 
    
    // s.delete(y);
    
    // s.size; // 1 
    
    // s.clear();
    
    // s.size; // 0

*  Set 迭代器
    
        var s = new Set();
        var x = {
               id: 1 },
            y = {
               id: 2 };
        
        s.add(x).add(y);
        
        var keys = [...s.keys()],
            vals = [...s.values()],
            entries = [...s.entries()];
        
        s.keys().next();
        s.values().next();
        s.entries().next();
        
        keys[0] === x; // true
        keys[1] === y; // true
        
        vals[0] === x; // true
        vals[1] === y; // true
        
        entries[0][0] === x; // true
        entries[0][1] === x; // true
        entries[1][0] === y; // true
        entries[1][1] === y; // true

#### WeakSet ####

> 就像 WeakMap 弱持有它的键（对其值是强持有的）一样，WeakSet 对其值也是弱持有的（这里并没有键）：
> 
> WeakSet 的值必须是对象，而并不像 set 一样可以是原生类型值。

![在这里插入图片描述][8aa1b6128c8443a6ab8c0e771c955dc8.png_pic_center]

var s = new WeakSet();
    var x = {
         id: 1 },
        y = {
         id: 2 };
    s.add(x);
    s.add(y);
    x = null; // x可GC 
    y = null; // y可GC

### 新增API ###

#### 静态函数 `Array.of(..)` ####

var a = Array(3);
    console.log(a);         // (3) [空属性 × 3]
    console.log(a.length);  // 3
    console.log(a[0]);      // undefined
    
    var b = Array.of(3);
    console.log(b);         // [3]
    console.log(b.length);  // 1
    console.log(b[0]);      // 3
    
    var c = Array.of(1, 2, undefined);
    console.log(c);         // (3) [1, 2, undefined]
    console.log(c.length);  // 3
    console.log(c[2]);      // undefined

#### 静态函数 `Array.from(..)` ####

> 注意 `空值` 和 `undefined`

// 类数组对象
    var arrLike = {
        
        length: 3,
        0: "foo",
        3: "bar"
    };
    Array.prototype.slice.call(arrLike); // (3) ['foo', 空属性 × 2]
    Array.from(arrLike); // (3) ['foo', undefined, undefined]

var arrLike = {
        
        length: 4,
        2: "foo"
    };
    Array.from(arrLike); // [undefined, undefined, 'foo', undefined]

![在这里插入图片描述][beacc60f6341433aa373aea0502f0abb.png_pic_center]

#### 原型方法 `copyWithin(..)` ####

> `copyWithin(..)` 从一个数组中复制一部分到同一个数组的另一个位置，覆盖这个位置所有原来的值
> 
> `copyWithin(..)` 方法不会增加数组的长度。到达数组结尾复制就会停止

[1, 2, 3, 4, 5].copyWithin(3, 0);       // [1,2,3,1,2] 
    [1, 2, 3, 4, 5].copyWithin(3, 0, 1);    // [1,2,3,1,5] 
    [1, 2, 3, 4, 5].copyWithin(0, -2);      // [4,5,3,4,5] 
    [1, 2, 3, 4, 5].copyWithin(0, -2, -1);  // [4,2,3,4,5]

*  `copyWithin`
    
     *  第1个参数: 表示目标覆盖的开始索引位置。
     *  第2个参数: 表示开始复制的开始元素索引位置。
     *  第3个参数: 表示结束复制的元素索引位置，注：不包含最后一个索引元素

#### 原型方法 `fill(..)` ####

Array(4).fill(undefined); // [undefined, undefined, undefined, undefined]

#### 原型方法 `entries()`、`values()`、`keys()` ####

> 迭代器方法

var a = [1,2,3];
    [...a.values()];            // [1,2,3] 
    [...a.keys()];              // [0,1,2] 
    [...a.entries()];           // [ [0,1], [1,2], [2,3] ] 
    [...a[Symbol.iterator]()];  // [1,2,3]

var a = []; 
    a.length = 3; 
    a[1] = 2; 
    [...a.values()];    // [undefined,2,undefined] 
    [...a.keys()];      // [0,1,2] 
    [...a.entries()];   // [ [0,undefined], [1,2], [2,undefined] ]

#### 静态函数 `Object.is(..)` ####

> 如果需要严格识别 NaN 或者 -0 值，那么应该选择 Object.is(…)

var x = NaN, y = 0, z = -0; 
    x === x;            // false 
    y === z;            // true 
    Object.is(x, x);    // true 
    Object.is(y, z);    // false

#### 静态函数 `Object.getOwnPropertySymbols(..)` ####

> 获取对象上所有的符号属性

var o = {
         
        foo: 42, 
        [Symbol("bar")]: "hello world", 
        baz: true 
    }; 
    Object.getOwnPropertySymbols(o); // [ Symbol(bar) ]

#### 静态函数 `Object.setPrototypeOf(..)` ####

> 行为委托

#### Math ####

*  三角函数：
    
     *  `cosh(..)` 双曲余弦函数
     *  `acosh(..)` 双曲反余弦函数
     *  `sinh(..)` 双曲正弦函数
     *  `asinh(..)` 双曲反正弦函数
     *  `tanh(..)` 双曲正切函数
     *  `atanh(..)` 双曲反正切函数
     *  `hypot(..)` 平方和的平方根（也即：广义勾股定理）
 *  算术：
    
     *  `cbrt(..)` 立方根
     *  `clz32(..)` 计算 32 位二进制表示的前导 0 个数
     *  `expm1(..)` 等价于 exp(x) - 1
     *  `log2(..)` 二进制对数（以 2 为底的对数）
     *  `log10(..)` 以 10 为底的对数
     *  `log1p(..)` 等价于 log(x + 1)
     *  `imul(..)` 两个数字的 32 位整数乘法
 *  元工具：
    
     *  `sign(..)` 返回数字符号
     *  `trunc(..)` 返回数字的整数部分
     *  `fround(..)` 向最接近的 32 位（单精度）浮点值取整

#### 静态函数 `Number.isFinite(..)` 和 `Number.isNaN(..)` ####

> `isFinite` 检查一个数值是否为有限的

*  `Number.isFinite(..)` 和 `Number.isNaN(..)`与传统的全局方法`isFinite()`和`isNaN()`的区别在于:
    
     *  传统方法先调用`Number()`将`非数值的值`转为`数值`，再进行判断
     *  这两个新方法只对数值有效，`Number.isFinite()`对于非数值一律返回`false`,`Number.isNaN()`只有对于`NaN`才返回`true`，非`NaN`一律返回`false`

var a = NaN, b = Infinity, c = 42; 
    Number.isFinite(a); // false 
    Number.isFinite(b); // false 
    Number.isFinite(c); // true

var a = "42"; 
    isFinite(a);        // true 
    Number.isFinite(a); // false

#### `Number.isInteger(..)` ####

> 判断`整数`

Number.isInteger(4);        // true 
    Number.isInteger(4.2;       // false
    Number.isInteger(NaN);      // false 
    Number.isInteger(Infinity); // false

*  自定义 `isFloat`
    
        function isFloat(x) {
               
            return Number.isFinite(x) && !Number.isInteger(x); 
        } 
        isFloat(4.2);       // true 
        isFloat(4);         // false 
        isFloat(NaN);       // false 
        isFloat(Infinity);  // false

#### `Number.isSafeInteger(..)` ####

> 具检查一个值以确保其为整数并且在 `Number.MIN_SAFE_INTEGER`\-`Number.MAX_SAFE_INTEGER` 范围之内（全包含）

var x = Math.pow(2, 53), 
        y = Math.pow(-2, 53); 
    Number.isSafeInteger(x - 1);    // true 
    Number.isSafeInteger(y + 1);    // true 
    Number.isSafeInteger(x);        // false 
    Number.isSafeInteger(y);        // false

#### Unicode 函数 ####

String.fromCodePoint(0x1d49e); // "?" 
    "ab?d".codePointAt(2).toString(16); // "1d49e"
    
    var s1 = "e\u0301"; 
    s1.length; // 2 
    
    var s2 = s1.normalize(); 
    s2.length; // 1 
    s2 === "\xE9"; // true

#### 静态函数 `String.raw(..)` ####

var str = "bc"; 
    String.raw`\ta${
          str}d\xE9`; 
    // '\\tabcd\\xE9', 而不是" abcdé"

#### 原型函数 `repeat(..)` ####

"foo" * 3;          // "foofoofoo"
    "foo".repeat( 3 );  // "foofoofoo"

#### 字符串检查函数`startsWith(..)`、`endsWidth(..)` 和 `includes(..)` ####

var palindrome = "step on no pets"; 
    
    palindrome.startsWith("step on");   // true 
    palindrome.startsWith("on", 5);     // true 
    
    palindrome.endsWith("no pets");     // true 
    palindrome.endsWith("no", 10);      // true 
    
    palindrome.includes("on");          // true 
    palindrome.includes("on", 6);       // false

[b2373cdcee3e4c9bac2d61ff3eaa680b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/7d573e95bc854d0fbba2368162d1d36d.png
[f8157649e341496fbf86117bf8e7cee2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/4c5a394a2bbf4a93b9bba48b763f1cc6.png
[a46be1abf72442ec92933653aeb82c6d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/7a01654d4c6d4923876d5b7cc321857c.png
[bbfc11594bc7413b84c8cb936405066e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/0c9f2f19a0184d128afb805fbe35ea51.png
[5f9560cfeb424415bf1bcfe391eee323.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/cbdf6c152a2c4cd7a2dacbc13c94070c.png
[cb9a1b7dd5154c2f89e5463f4edaf4af.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/4a81ef6ea749426fa9baab24ec95ece5.png
[8aa1b6128c8443a6ab8c0e771c955dc8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/b16c024a933c4e8c84e9a57b6b8987b9.png
[beacc60f6341433aa373aea0502f0abb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/b7e9d648960940d2ad9630354f151228.png