8，ECMAScript6进阶

8.1, 内置对象的扩展

8.1.1, 字符串的扩展

1，模板字符串

使用反引号（``）代替普通字符串中的双引号和单引号，可以当作普通字符串使用，也可以定义多行字符串。

使用模板字符串还可以嵌入变量，嵌入字符串或调用函数，以 $() 的形式 。

模板字符串

         // 多行字符串
         document.write('最快不是跨越,而是继续;</br>' +
             '最慢的步伐不是缓慢,而是徘徊;</br>' +
             '最好的道路不是大道,而是坦荡;</br></<hr>');
         // 字符串中嵌入变量
         let name ="Bob",time="today";
         document.write(`hollo ${name},how are you ${time}?`);

2，新增的字符串操作方法

字符串新增方法

 let str =" hello ECMAScript ";
 // includes(): 返回布尔值,表示是否找到了参数字符串
 console.log(str.includes('h'));      // true
 console.log(str.includes('w'));      // false
 ​
 // startsWith(): 返回布尔值,表示参数字符串是否在原字符串的头部
 console.log(str.startsWith(' '))     // true 因为开头是空格
 console.log(str.startsWith('t'))     // false
 ​
 // endsWith(): 返回布尔值,表示参数字符串是否在原字符串的尾部
 console.log(str.endsWith(' '));      // true 因为结尾是空格
 console.log(str.endsWith('t'));      // false
 ​
 // repeat(): 返回一个新字符串，表示将原字符串重复 n 次
 console.log(str.repeat(3));          // hello ECMAScript  hello ECMAScript  hello ECMAScript 
 ​
 // padStart(): 用于头部补全。第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串
 console.log(str.padStart(25,'ab'));  // abababa hello ECMAScript 
 ​
 // padEnd(): 用于尾部补全
 console.log(str.padEnd(25,'ab'));    //  hello ECMAScript abababa
 ​
 // trimStart(): 消除字符串头部的空格
 console.log(str.trimStart());        // hello ECMAScript 
 ​
 // trimEnd(): 清除尾部的空格
 console.log(str.trimEnd());          //  hello ECMAScript

8.1.2，数组的扩展

1，扩展运算符

概述：扩展运算符使用 ( ... ) 表示，可以将一个数组转换为用逗号分隔的序列。

语法：

...数组

数组的扩展-扩展运算符(...)

         // 下面是代码 1 部分代码---------------------------------------------------
         let arr = [];
         // 扩展运算符的基本用法
         arr.push(...[1,2,3,4,5]);
         console.log(arr);    // 输出 [1,2,3,4,5]
         arr.push([1,2,3,4,5]);
         console.log(arr);     // 输出 [1,2,3,4,5,Array(5)]
 ​
         // 下面是代码 2 部分-------------------------------------------------------
         console.log(1,...[2,3,4],5)    // 输出 1 2 3 4 5
 ​
         // 下面是代码 3 部分-------------------------------------------------------
         // 可以放置表达式
         console.log(...(1>0?['a']:[]));       // 输出 a
 ​
         // 下面是代码 4 部分-------------------------------------------------------
         // 空数组，不产生效果
         console.log(...[],1);             // 输出 1
 ​
         // 下面是代码 5 部分-------------------------------------------------------
         // 用于函数调用
         function  add(x,y){
             console.log(x+y);
         }
         let numbers = [4,38];
         add(...numbers);                 // 输出 42

2，Array.from()方法

ES6 为 Array 对象增加了 from() 方法，from() 方法用于将 类数组对象 或 可遍历对象 转换成为一个真正的数组。其中，

类数组对象必须有 length 属性。如果没有 length 属性，则转换出来的是空数组。

数组的扩展-Array.from()方法

         // 下面是代码 1 部分 ----------------------------------
         let atrrayLike ={
             0:'tom',
             1:'666',
             2:'男',
             3:['jane','john','Mary'],
             'length':4
         }
         let arr =Array.from(atrrayLike);
         console.log(arr);                 // ['tom','666','男',['jane','john','Mary'] ]
 ​
         // 下面是代码 2 部分 ---------------------------------------
         let arrayLike1 ={
             0:'tom',
             1:'666',
             2:'男',
             3:['jane','john','Mary']
         }
         let arr1 =Array.from(arrayLike1);      //    []
 ​
         // 下面是代码 3 部分 ------------------------------------------------
         let arrayLike2 ={
             'name':'tom',
             'age':'555',
             'sex':'男',
             'friends':['jane','john','Mary'],
             length: 4
         }
         let arr2 =Array.from(arrayLike2);
         console.log(arr2);               //  [undefined,undefined,undefined,undefined]

小结 通过上述代码，可得知如果一个类数组对象转换成一个真正的数组，必须具备以下条件:

1, 类数组对象必须具有 length 属性，用于指定数组的长度。

2，如果没有 length 属性，那么转换后的数组是一个空数组。

3，类数组对象的属性必须为数值型或字符串型的数字。

3，数组遍历方法

ES6 中提供了三个新的方法 : keys() , values() 和 entries() 用来遍历数组，它们都返回一个遍历器 对象，可以用 for...of 循环进行遍历。

方法	描述
keys() : iterator	对键名的遍历
values() : iterator	对键值的遍历
entries() : iterator	对键值对的遍历

数组的扩展-数组遍历方法

         for(let index of ['勾三','股四'].keys()){
             console.log(index);                  // 0  1
         }
         for(let elem of ['勾三','股四'].values()){
             console.log(elem);                   // 勾三   股四
         }
         for(let [index,elem] of ['勾三','股四'].entries()){
             console.log(index,elem);             // 0 '勾三'   1 '股四'
         }
 ​

8.1.3，对象的扩展

1，属性的简洁表示法

 ES6 允许对象的属性直接写变量，这时，属性名变变量名，属性值为变量的值。

         let name ='弦五';
         let birth ='2000/01/01';
 ​
         // 普通写法
         const  Person={
             name : name,
             birth : birth,
             getInfo:function (){
                 console.log(`我的名字是:${this.name},我出生时间是:${this.birth}`);
             }
         };
         Person.getInfo();
 ​
         // 简洁写法
         const Person1={
             name,
             birth,
             getInfo(){
                 console.log(`我的名字是:${this.name},我出生时间是:${this.birth}`);
             }
         };
         Person1.getInfo();

2，对象新增方法

 在 ES6 中，对象的新增方法包括 Object.is() 和 Object.assign() 方法。

1）Object.is() 方法

Object.is()方法用来比较两个值是否严格相等，与 ES5 中严格相等运算符 （===） 的行为基本一致。

对象的扩展-对象新增方法

         // 下面是代码 1 部分
         console.log('abc' === 'abc');         // true
         console.log(Object.is('abc','abc'));  // true
         console.log({} === {});               // false
         console.log(Object.is({},{}));        // false
 ​
         // 下面是代码 2 部分
         console.log(NaN === NaN);             // false
         console.log(Object.is(NaN,NaN));      // true
         console.log(+0 === -0);               // true
         console.log(Object.is(+0,-0));        // false

小结：从代码 1 中可以看出 Object.is() 与严格相等运算符的效果是一致 的。

从代码 2 中可以看出 Object.is() 与严格相等运算符的区别 :

一，NAN等于自身

二，+0 不等于 -0

2）Object.assign() 方法

Object.assign() 方法用于对象的合并，将源对象（ source ）的所有可枚举属性复制到目标对象（ target ）。

Object.assign(target,source_1,...)

Object.assign() 方法第一个参数是目标对象，后面的参数是源对象，可以包含多个源对象。

         // 下面是代码 1 部分 ----------------------------------------
         // 基本用法
         const target = { a : 1 };
         const source1 = { b : 2 };
         const source2 = { c : 3 };
         Object.assign(target,source1,source2);
         console.log(target);         // { a:1}{ b:2}{ c:3}
 ​
         // 下面是代码 2 部分 ----------------------------------------
         // 如果目标对象与源对象有同名属性，或多个源对象有同名属性
         const  target1 ={a:1,b:1};
         const  source3 ={b:2,c:2};
         const  source4 ={c:3};
         Object.assign(target1,source3,source4);
         console.log(target1);          // { a:1}{ b:2}{ c:3}
 ​
         // 下面是代码 3 部分 ----------------------------------------
         // 如果只有一个参数
         const  obj ={a:1};
         Object.assign(obj);
         console.log(obj);                      // {a:1}
 ​
         // 下面是代码 4 部分
         // 如果参数不是对象
         console.log(typeof Object.assign(2));       // Object