ES6学习笔记（4）——字符串\正则\数值\数组\函数\对象的扩展

野性酷女 2022-11-26 10:55 191阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70_pic_center]

# 字符串的扩展 #

ES6 加强了对 Unicode 的支持，并且扩展了字符串对象

## 方法 ##

*  `codePointAt()`
 *  `String.fromCodePoint()`
 *  `at()`：ES5对字符串对象提供`charAt`方法，返回字符串给定位置的字符，但不能识别码点大于`0xFFFF`的字符。这个可以
 *  `normalize()`
 *  `includes(), startsWith(), endsWith()`：是否找到了参数字符串|是否在源字符串的头部|是否在源字符串的尾部
 *  `repeat()`：返回一个新字符串，表示将原字符串重复`n`次
 *  `padStart()，padEnd()`：字符串补全长度的功能，一个用于头部补全，一个用于尾部
    
        '1'.padStart(10, '0') // "0000000001"
 *  `String.raw()`：返回一个斜杠都被转义的字符串

## 其他 ##

*  码点放入大括号解读字符
    
        //以前：表示法只限于码点在\u0000~\uFFFF之间的字符
        "\uD842\uDFB7"	// ""
    
        //现在：码点放入大括号解读字符
        "\u{20BB7}"		// ""

## 字符串遍历接口(Iterator) ##

字符串可以被`for...of`循环遍历，

for (let codePoint of 'foo') { 
      console.log(codePoint)
    }
    // "f"
    // "o"
    // "o"

## 模板字符串 ##

//以往：
 $('#result').append(
 'There are ' + basket.count + ' ' +
 'items in your basket, ' +
 '' + basket.onSale +
 ' are on sale!'
 );
 
 //现在：
 $('#result').append(` There are ${ basket.count} items in your basket, ${ basket.onSale} are on sale! `);

## 标签模板 ##

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）

var a = 5;
    var b = 10;
    
    //tag是一个函数，整个表达式的返回值，就是tag函数处理模板字符串后的返回值。
    tag`Hello ${ a + b } world ${ a * b }`;
    
    // 等同于
    tag(['Hello ', ' world ', ''], 15, 50);

# 正则的扩展 #

## 字符串的正则方法 ##

字符串对象共有4个方法可以使用正则表达式：`match()`、`replace()`、`search()`和`split()`。ES6将这4个方法全都定义在RegExp对象上:

*  `String.prototype.match` 调用 `RegExp.prototype[Symbol.match]`
 *  `String.prototype.replace` 调用 `RegExp.prototype[Symbol.replace]`
 *  `String.prototype.search` 调用 `RegExp.prototype[Symbol.search]`
 *  `String.prototype.split` 调用 `RegExp.prototype[Symbol.split]`

**举例**–以replace为例：替换符合正则表达式的字符

var str="小明睡懒觉了"	==>将睡懒觉替换成起床
    
    //es5写法:
    str=str.replace(/睡懒觉/,"起床")
    
    //es6写法
    /睡懒觉/[Symbol.replace](str, '起床');

## 修饰符 ##

### u修饰符 ###

含义为“Unicode模式”，用来正确处理大于`\uFFFF`的Unicode字符

### y 修饰符 ###

`y`修饰符叫做“粘连”（sticky）修饰符。作用与`g`修饰符类似，也是全局匹配。但`y`修饰符确保匹配必须从剩余的第一个位置开始

### s 修饰符：dotAll 模式 ###

引入`/s`修饰符，使得`.`可以匹配任意单个字符

//以前
    /foo.bar/.test('foo\nbar')	// false
    
    //现在
    /foo.bar/s.test('foo\nbar') // true

## 属性 ##

*  sticky属性：表示是否设置了`y`修饰符
 *  flags属性：返回正则表达式的修饰符
 *  dotAll属性，返回一个布尔值，表示该正则表达式是否处在`dotAll`模式

# 数值的扩展 #

## 方法 ##

*  `Number.isFinite(你要检测的值)`：检查一个数值是否为有限
 *  `Number.isNaN()`：检查一个值是否为`NaN`
 *  `Number.parseInt()`,`Number.parseFloat()`：ES6将全局方法`parseInt()`和`parseFloat()`，移植到Number对象上面，行为完全保持不变
 *  `Number.isInteger()`：判断一个值是否为整数
 *  `Number.EPSILON`：一个常量
 *  安全整数和`Number.isSafeInteger()`

## Math对象的扩展 ##

*  `Math.trunc`方法用于去除一个数的小数部分，返回整数部分
    
        Math.trunc(4.9) // 4
        Math.trunc(-4.1) // -4
        Math.trunc(-0.1234) // -0
 *  `Math.sign`方法用来判断一个数到底是正数、负数、还是零
    
        Math.sign(-5) // -1
        Math.sign(5) // +1
        Math.sign(0) // +0
        Math.sign(-0) // -0
        Math.sign(NaN) // NaN
 *  `Math.cbrt`方法用于计算一个数的立方根
    
        Math.cbrt(2)  // 1.2599210498948734
 *  `Math.expm1(x)`即`Math.exp(x) - 1`
    
        Math.expm1(1)  // 1.718281828459045
 *  `Math.log1p(x)`方法返回`1 + x`的自然对数，即`Math.log(1 + x)`。如果`x`小于-1，返回`NaN`
    
        Math.log1p(1)  // 0.6931471805599453
        Math.log1p(-1) // -Infinity
        Math.log1p(-2) // NaN
 *  `Math.log10(x)`返回以10为底的`x`的对数。如果`x`小于0，则返回NaN
    
        Math.log10(100000) // 5
 *  `Math.log2(x)`返回以2为底的`x`的对数。如果`x`小于0，则返回NaN
    
        Math.log2(3)       // 1.584962500721156
        Math.log2(2)       // 1
 *  `Math.sinh(x)` 返回`x`的双曲正弦（hyperbolic sine）
 *  `Math.cosh(x)` 返回`x`的双曲余弦（hyperbolic cosine）
 *  `Math.tanh(x)` 返回`x`的双曲正切（hyperbolic tangent）
 *  `Math.signbit()`：判断一个值的正负，但是如果参数是`-0`，它会返回`-0`

## 其他 ##

*  二进制和八进制表示法
 *  指数运算符（`**`）和赋值运算符（`**=`）
    
        2 ** 2 // 4
        2 ** 3 // 8
    
        a **= 2;	// 等同于 a = a * a;

# 数组的扩展 #

## 静态方法 ##

*  `Array.from（）`：用于将两类对象转为真正的数组：
    
    > 1.**类似数组的对象（array-like object）**：所谓类似数组的对象，本质特征只有一点，即必须有`length`属性
    > 
    > 2.**可遍历（iterable）的对象**（包括ES6新增的数据结构Set和Map）
    
        //类似数组的对象
        let arrayLike = { 
            '0': 'a',
            '1': 'b',
            '2': 'c',
            length: 3
        };
        
        let arr= Array.from(arrayLike); // ['a', 'b', 'c']
    
        //可遍历对象
        Array.from({  length: 3 });
        // [ undefined, undefined, undefined ]
    
    `Array.from（）`接受第二个参数，作用类似于数组的`map`方法
    
        Array.from([1, 2, 3], (x) => x * x)
        // [1, 4, 9]
 *  `Array.of()`：将一组值，转换为数组。基本上可以用来替代`Array()`或`new Array()`
    
        Array.of(3, 11, 8) // [3,11,8]

## 数组实例的方法 ##

* `copyWithin()`：在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组，即会修改当前数组
 
 //语法:---(开始替换的位置，开始读取的位置[可选]，停止读取的位置[可选])
 Array.prototype.copyWithin(target, start = 0, end = this.length)
 
 [1, 2, 3, 4, 5].copyWithin(0, 3)	// [4, 5, 3, 4, 5] 从3号位复制到0号位
 * `find()`：用于找出第一个符合条件的数组成员,它的参数是一个回调函数
 
 [1, 4, -5, 10].find((n) => n < 0)	// -5
 * `findIndex()`：返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回`-1`
 * `fill()`：使用给定值，填充一个数组
 
 ['a', 'b', 'c'].fill(7)		// [7, 7, 7]
 
 //接受第二个和第三个参数，用于指定填充的起始位置和结束位置
 ['a', 'b', 'c'].fill(7, 1, 2)	// ['a', 7, 'c']
 * `entries()`：遍历数组-对键值对的遍历
 
 for (let [index, elem] of ['a', 'b'].entries()) { 
 console.log(index, elem);
 }
 // 0 "a"
 // 1 "b"
 * `keys()`：遍历数组-对键名的遍历
 
 for (let index of ['a', 'b'].keys()) { 
 console.log(index);
 }
 // 0
 // 1
 * `values()`：遍历数组-对键值的遍历
 
 for (let elem of ['a', 'b'].values()) { 
 console.log(elem);
 }
 // 'a'
 // 'b'
 * `includes()`：返回一个布尔值，表示某个数组是否包含给定的值。第二个参数表示搜索的起始位置，默认为0
 
 [1, 2, 3].includes(3, 3); // false

## 数组的空位 ##

数组的空位指，数组的某一个位置没有任何值。

Array(3) // [, , ,]

**ES5对空位的处理大多数情况下会忽略空位**

1. forEach(), filter(), every() 和some()会跳过空位
    2. map()会跳过空位，但会保留这个值
    3. join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串

// forEach方法
    [,'a'].forEach((x,i) => console.log(i)); // 1
    
    // filter方法
    ['a',,'b'].filter(x => true) // ['a','b']
    
    // every方法
    [,'a'].every(x => x==='a') // true
    
    // some方法
    [,'a'].some(x => x !== 'a') // false
    
    // map方法
    [,'a'].map(x => 1) // [,1]
    
    // join方法
    [,'a',undefined,null].join('#') // "#a##"
    
    // toString方法
    [,'a',undefined,null].toString() // ",a,,"

**ES6则是明确将空位转为`undefined`**

//Array.from方法
    Array.from(['a',,'b'])	// [ "a", undefined, "b" ]
    
    //扩展运算符（...）也会将空位转为undefined
    [...['a',,'b']]		// [ "a", undefined, "b" ]
    
    //copyWithin()会连空位一起拷贝
    [,'a','b',,].copyWithin(2,0) // [,"a",,"a"]
    
    //fill()会将空位视为正常的数组位置
    new Array(3).fill('a') // ["a","a","a"]
    
    //for...of循环也会遍历空位
    let arr = [, ,];
    for (let i of arr) { 
      console.log(1);
    }
    // 1
    // 1

entries()、keys()、values()、find()和findIndex()会将空位处理成undefined

// entries()
    [...[,'a'].entries()] // [[0,undefined], [1,"a"]]
    
    // keys()
    [...[,'a'].keys()] // [0,1]
    
    // values()
    [...[,'a'].values()] // [undefined,"a"]
    
    // find()
    [,'a'].find(x => true) // undefined
    
    // findIndex()
    [,'a'].findIndex(x => true) // 0

# 函数的扩展 #

## 函数参数的默认值 ##

//1. 如何设置默认值
    function log(x, y = 'World') { 
      console.log(x, y);
    }
    log('Hello') // Hello World

//2. 参数变量是默认声明的，所以不能用let或const再次声明
    function foo(x = 5) { 
      let x = 1; // error
      const x = 2; // error
    }

//3. 使用参数默认值时，函数不能有同名参数
    function foo(x, x, y = 1) { 
      // ... 
    }

//4. 如果参数默认值是变量,那么每次都重新计算默认值表达式的值。参数默认值是惰性求值的
    let x = 99;
    function foo(p = x + 1) { 
      console.log(p);
    }
    
    foo() 	// 100
    foo()	//还是100
    
    //默认值重新赋值才会改变
    x = 100;
    foo() // 101

### 1. 与解构赋值默认值结合使用 ###

function foo({ x, y = 5}) { 
      console.log(x, y);
    }
    
    foo({ }) // undefined, 5
    foo({ x: 1}) // 1, 5
    foo() // TypeError: Cannot read property 'x' of undefined

function fetch(url, {  body = '', method = 'GET', headers = { } }) { 
      console.log(method);
    }
    	
    fetch('http://example.com', { })	// "GET"
    fetch('http://example.com')	// 报错
    
    //上面的写法不能省略第二个参数，如果结合函数参数的默认值，就可以省略第二个参数
    function fetch(url, {  method = 'GET' } = { }) { 
      console.log(method);
    }
    
    fetch('http://example.com')		// "GET"

**区别**

// 写法一:函数参数的默认值是空对象，但是设置了对象解构赋值的默认值
    function m1({ x = 0, y = 0} = { }) { 
      return [x, y];
    }
    
    // 写法二:函数参数的默认值是一个有具体属性的对象，但是没有设置对象解构赋值的默认值
    function m2({ x, y} = {  x: 0, y: 0 }) { 
      return [x, y];
    }

### 2. 函数的 length 属性 ###

函数的`length`属性，将返回没有指定默认值的参数个数

(function (a) { }).length // 1
    (function (a = 5) { }).length // 0
    (function (a, b, c = 5) { }).length // 2

### 3. 作用域 ###

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）

**对比：**

var x = 1;
    function f(x, y = x) { console.log(y)}
    f(2) // 2
    //解析：作用域里，默认值变量x指向第一个参数x，而不是全局变量x，所以输出是2

let x = 1;
    function f(y = x) { let x = 2;console.log(y);}
    f() // 1
    //解析：作用域里，变量x本身没有定义，所以指向外层的全局变量x。函数调用时，函数体内部的局部变量x影响不到默认值变量x；但如果全局变量x不存在，就会报错

### 4. rest参数 ###

ES6 引入 rest 参数（形式为“…变量名”），用于获取函数的多余参数，这样就不需要使用`arguments`对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中

function add(...values) { 
      let sum = 0;
      for (var val of values) { 
        sum += val;
      }
      return sum;
    }
    
    add(2, 5, 3) // 10

## 扩展运算符 ##

扩展运算符（spread）是三个点（`...`）,好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列

console.log(...[1, 2, 3])	// 1 2 3
    console.log(1, ...[2, 3, 4], 5)		// 1 2 3 4 5

### 1. 应用：函数调用 ###

function add(x, y) { 
      return x + y;
    }
    
    var numbers = [4, 38];
    add(...numbers) // 42

### 2. 替代数组的apply方法 ###

// ES5的写法
    function f(x, y, z) { // ...}
    var args = [0, 1, 2];
    f.apply(null, args);
    
    // ES6的写法
    function f(x, y, z) { // ...
    }
    var args = [0, 1, 2];
    f(...args);

// ES5的写法
    var arr1 = [0, 1, 2];
    var arr2 = [3, 4, 5];
    Array.prototype.push.apply(arr1, arr2);
    
    // ES6的写法
    var arr1 = [0, 1, 2];
    var arr2 = [3, 4, 5];
    arr1.push(...arr2);

### 3. 应用：合并数组 ###

var arr1 = ['a', 'b'];
    var arr2 = ['c'];
    
    // ES5的合并数组
    arr1.concat(arr2);
    
    // ES6的合并数组
    [...arr1, ...arr2]

### 4. 应用：与解构赋值结合 ###

const [first, ...rest] = [1, 2, 3, 4, 5];
    first // 1
    rest  // [2, 3, 4, 5]

### 5. 应用：函数的返回值 ###

var dateFields = readDateFields(database);
    var d = new Date(...dateFields);
    //解析：上面代码从数据库取出一行数据，通过扩展运算符，直接将其传入构造函数Date

### 6. 应用：字符串转数组 ###

[...'hello']	// [ "h", "e", "l", "l", "o" ]

### 7. 应用：实现了Iterator接口的对象 ###

var nodeList = document.querySelectorAll('div');
    var array = [...nodeList];
    //任何Iterator接口的对象，都可以用扩展运算符转为真正的数组。扩展运算符可以将其转为真正的数组，原因就在于NodeList对象实现了Iterator接口

### 8.应用：Map和Set结构，Generator函数 ###

//扩展运算符内部调用的是数据结构的Iterator接口，因此只要具有Iterator接口的对象，都可以使用扩展运算符，比如Map结构
    
    let map = new Map([
      [1, 'one'],
      [2, 'two'],
      [3, 'three'],
    ]);
    let arr = [...map.keys()]; // [1, 2, 3]

## 严格模式 ##

《ECMAScript 2016标准》做了一点修改，规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错

## name属性 ##

//函数的`name`属性，返回该函数的函数名
    function foo() { }
    foo.name // "foo"

## 箭头函数 ##

var f = v => v;
    //等价于
    var f = function(v) { 
      return v;
    };

### 1. 要点 ###

1.  如果箭头函数不需要参数或需要多个参数，**就使用一个圆括号代表参数部分**
    
        var f = () => 5;
        // 等同于
        var f = function () {  return 5 };
        
        var sum = (num1, num2) => num1 + num2;
        // 等同于
        var sum = function(num1, num2) { 
          return num1 + num2;
        };
2.  如果箭头函数的代码块部分多于一条语句，就要使用**大括号**将它们括起来，并且使用`return`语句返回
    
        var sum = (num1, num2) => {  return num1 + num2; }
3.  所以如果箭头函数直接返回一个对象，必须在对象外面加上括号
    
        var getTempItem = id => ({  id: id, name: "Temp" });
4.  箭头函数可以与变量解构结合使用
    
        const full = ({  first, last }) => first + ' ' + last;
        
        // 等同于
        function full(person) { 
          return person.first + ' ' + person.last;
        }

### 2. 注意 ###

*  在箭头函数中，`this`指向是固定的。函数体内的`this`对象，就是定义时所在的对象
 *  不可以当作构造函数
 *  不可以使用`arguments`对象，但可以用Rest参数代替
 *  不可以使用`yield`命令，因此箭头函数不能用作Generator函数

### 3. 嵌套的箭头函数 ###

const plus1 = a => a + 1;
    const mult2 = a => a * 2;
    
    mult2(plus1(5))
    // 12

### 4. 绑定 this ###

箭头函数并不适用于所有场合，所以ES7提出了“函数绑定”（function bind）运算符，用来取代`call`、`apply`、`bind`调用。函数绑定运算符是并排的两个双冒号（::），双冒号左边是一个对象，右边是一个函数

foo::bar;
    // 等同于
    bar.bind(foo);
    
    foo::bar(...arguments);
    // 等同于
    bar.apply(foo, arguments);

# 对象的扩展 #

## 简洁表示法 ##

var birth = '2000/01/01';
    var Person = { 
      name: '张三',
        
      //1. 属性简写----等同于birth: birth
      birth,	
        
      //2. 方法简写---等同于hello: function ()...
      hello() {  console.log('我的名字是', this.name); }
    
    };

## 属性名表达式 ##

// 方法一：标识符做属性名
    obj.foo = true;
    
    // 方法二：表达式做属性名
    obj['a' + 'bc'] = 123;

**ES5中，如果使用字面量方式定义对象，属性只能使用标识符定义**

var obj = { 
      foo: true,
      abc: 123
    };

**ES6中，如果使用字面量方式定义对象，属性可以使用表达式定义**

let obj = { 
      ['a' + 'bc']: 123
    };

**ES6中，方法名也可以用表达式定义**

let obj = { 
      ['h' + 'ello']() { return 'hi';}
    };
    
    obj.hello() // hi

## 对象方法的 name 属性 ##

const person = { 
      sayName() { 
        console.log('hello!');
      },
    };
    
    person.sayName.name   // "sayName"

## 方法 ##

### 1. `Object.is()` ###

背景：ES5比较两个值是否相等，只有两个运算符：相等运算符（`==`）和严格相等运算符（`===`）。它们都有缺点，前者会自动转换数据类型，后者的`NaN`不等于自身，以及`+0`等于`-0`。JavaScript缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等

`Object.is`就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致

Object.is('foo', 'foo')	// true
    Object.is({ }, { })	// false
    Object.is(+0, -0) // false
    Object.is(NaN, NaN) // true

### 2. `Object.assign()` ###

用于**对象的合并**。语法：`Object.assign(target,source,source...)`，第一个参数是目标对象，后面的参数都是源对象

var target = {  a: 1 };
    var source1 = {  b: 2 };
    var source2 = {  c: 3 };
    
    Object.assign(target, source1, source2);
    target // {a:1, b:2, c:3}

> 这里是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用

***用途***

1.  **为对象添加属性**
    
        class Point { 
          constructor(x, y) { 
            Object.assign(this, { x, y});
          }
        }
2.  **为对象添加方法**
    
        Object.assign(SomeClass.prototype, { 
          someMethod(arg1, arg2) { ···},
          anotherMethod() { ···}
        });
        
        // 等同于下面的写法
        SomeClass.prototype.someMethod = function (arg1, arg2) { ···};
        SomeClass.prototype.anotherMethod = function () { ···};
3.  **克隆对象**
    
        function clone(origin) { 
          return Object.assign({ }, origin);
        }
        
        //不过采用这种方法克隆，只能克隆原始对象自身的值，不能克隆它继承的值。如果想要保持继承链，可以采用下面的代码:
        
        function clone(origin) { 
          let originProto = Object.getPrototypeOf(origin);
          return Object.assign(Object.create(originProto), origin);
        }
4.  **合并多个对象**
    
        //在原数组上合并
        const merge =
          (target, ...sources) => Object.assign(target, ...sources);
        
        //合并成一个新数组
        const merge =
          (...sources) => Object.assign({ }, ...sources);
5.  **为属性指定默认值**
    
        const DEFAULTS = { 
          logLevel: 0,
          outputFormat: 'html'
        };
        function processContent(options) { 
          options = Object.assign({ }, DEFAULTS, options);
          console.log(options);
          // ...
        }
        
        //上面代码中，DEFAULTS对象是默认值，options对象是用户提供的参数。Object.assign方法将DEFAULTS和options合并成一个新对象，如果两者有同名属性，则option的属性值会覆盖DEFAULTS的属性值。
        //注意：由于存在深拷贝的问题，DEFAULTS对象和options对象的所有属性的值，最好都是简单类型，不要指向另一个对象。否则，DEFAULTS对象的该属性很可能不起作用。比如：
        const DEFAULTS = { 
          url: { 
            host: 'example.com',
            port: 7070
          },
        };
        
        processContent({  url: { port: 8000} })
        // { 
        // url: {port: 8000}
        // }

### 3. `Object.keys()`、`Object.values()`和`Object.entries()` ###

**遍历一个对象的补充手段，供`for...of`循环使用**

let { keys, values, entries} = Object;
    let obj = {  a: 1, b: 2, c: 3 };
    
    for (let key of keys(obj)) { 
      console.log(key); // 'a', 'b', 'c'
    }
    
    for (let value of values(obj)) { 
      console.log(value); // 1, 2, 3
    }
    
    for (let [key, value] of entries(obj)) { 
      console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
    }

*  `Object.keys()`：方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值
    
        var obj = {  foo: 'bar', baz: 42 };
        Object.keys(obj)	// ["foo", "baz"]
 *  `Object.values()`：只返回对象自身的可遍历属性,会过滤属性名为 Symbol 值的属性;如果`Object.values`方法的参数是一个字符串，会返回各个字符组成的一个数组
    
        var obj = {  foo: 'bar', baz: 42 };
        Object.values(obj)	// ["bar", 42]
    
        Object.values('foo')	// ['f', 'o', 'o']
 *  `Object.entries()`：返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组
    
        var obj = {  foo: 'bar', baz: 42 };
        Object.entries(obj)		// [ ["foo", "bar"], ["baz", 42] ]

### 4. `Object.getOwnPropertyDescriptors()` ###

返回指定对象所有自身属性（非继承属性）的描述对象

const obj = { 
      foo: 123,
      get bar() {  return 'abc' }
    };
    
    Object.getOwnPropertyDescriptors(obj)
    // { foo:
    // { value: 123,
    // writable: true,
    // enumerable: true,
    // configurable: true },
    // bar:
    // { get: [Function: bar],
    // set: undefined,
    // enumerable: true,
    // configurable: true } }

## 属性的可枚举性 ##

`Object.getOwnPropertyDescriptor()`：获取该属性的描述对象

let obj = {  foo: 123 };
    Object.getOwnPropertyDescriptor(obj, 'foo')
    // { 
    // value: 123,
    // writable: true,
    // enumerable: true,
    // configurable: true
    // }

`enumerable`属性，称为”可枚举性“；如果该属性为false，就表示某些操作会忽略当前属性。

> ES5有三个操作会忽略`enumerable`的`false`的属性
> 
>  *  `for...in`循环：只遍历对象自身的和继承的可枚举的属性
>  *  `Object.keys()`：返回对象自身的所有可枚举的属性的键名
>  *  `JSON.stringify()`：只串行化对象自身的可枚举的属性
> 
> ES6中，`Object.assign()`只拷贝对象自身的可枚举的属性

## 属性的遍历 ##

1.  **`for...in`**：循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）
2.  **`Object.keys(obj)`**：返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）
3.  **`Object.getOwnPropertyNames(obj)`**：返回一个数组，包含对象自身的所有属性（不含Symbol属性，但是包括不可枚举属性）
4.  **`Object.getOwnPropertySymbols(obj)`**：返回一个数组，包含对象自身的所有Symbol属性
5.  **`Reflect.ownKeys(obj)`**：返回一个数组，包含对象自身的所有属性，不管是属性名是Symbol或字符串，也不管是否可枚举

> 以上方法遍历对象的属性都遵守同样的属性遍历的次序规则：
> 
>  *  首先遍历所有属性名为数值的属性，按照数字排序。
>  *  其次遍历所有属性名为字符串的属性，按照生成时间排序。
>  *  最后遍历所有属性名为Symbol值的属性，按照生成时间排序。

## 原型对象 ##

*  `Object.setPrototypeOf()`：用来设置一个对象的`prototype`对象（原型对象），返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法
    
        //1. 格式
        Object.setPrototypeOf(object, prototype)
        //2. 用法
        var o = Object.setPrototypeOf({ }, null);
        //等同于
        function (obj, proto) { 
          obj.__proto__ = proto;
          return obj;
        }
        //3. 例子
        let proto = { };
        let obj = {  x: 10 };
        Object.setPrototypeOf(obj, proto);
        proto.y = 20;
        proto.z = 40;
        obj.x // 10
        obj.y // 20
        obj.z // 40
 *  `Object.getPrototypeOf()`：该方法与`Object.setPrototypeOf`方法配套，用于读取一个对象的原型对象
    
        //1. 格式
        Object.getPrototypeOf(obj);
        
        //2. 例子
        function Rectangle() { ...}
        var rec = new Rectangle();
        Object.getPrototypeOf(rec) === Rectangle.prototype// true
                              
        Object.setPrototypeOf(rec, Object.prototype);
        Object.getPrototypeOf(rec) === Rectangle.prototype// false

## 对象的扩展运算符 ##

### 1. **解构赋值** ###

let {  x, y, ...z } = {  x: 1, y: 2, a: 3, b: 4 };
    x // 1
    y // 2
    z // { a: 3, b: 4 }
    //解析：从一个对象取值，相当于将所有可遍历的、但尚未被读取的属性，分配到指定的对象上面。所有的键和它们的值，都会拷贝到新对象上面

### 2. **拷贝属性** ###

//用于取出参数对象的所有可遍历属性，拷贝到当前对象之中
    let z = {  a: 3, b: 4 };
    let n = {  ...z };
    n // { a: 3, b: 4 }

let aClone = {  ...a };
    // 等同于
    let aClone = Object.assign({ }, a);

## Null 传导运算符 ##

编程实务中，如果读取对象内部的某个属性，往往需要判断一下该对象是否存在

const firstName = message?.body?.user?.firstName || 'default';
    //解析：上面代码有三个?.运算符，只要其中一个返回null或undefined，就不再往下运算，而是返回undefined

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/90d7372fefe044fa8a365bfadd8d74e1.png