ES6新增（二）

扩展运算符

• 可以用来处理数组，把它数组变成一项一项的，并返回

  let arr = [1,2,3,4,5]
  console.log(...arr);//1,2,3,4,5
  

• 可以展开数组，也可用来合并数组

  let arr1 = [1,2,3,4];
  let arr2 = [1,5,6,9,4];
  console.log([...arr1,...arr2]);//[1, 2, 3, 4, 1, 5, 6, 9, 4]
  

• 可以将数组转变成真正的数组

  let oDivs = document.getElementsByTagName('div'); 
  oDivs = [...oDivs];
  

• 可以将类数组（可遍历）的对象转换成真正的数组方法还有Array.from();

• Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。类似map。

  console.log(Array.from('hello world'));['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']
  //还可以数组和别的执行函数过后再进行合并成数组
  //Array.from()的第二个参数为一个回调函数对类数组每一项进行执行函数，回调的参数为每一项
  console.log(Array.from([1, 2, 3], x => x + x));//[ 2, 4, 6 ]
  

数组的原型方法的拓展

find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined。

find()是ES6在数组的原型（Array.prototype）上进行了添加，同样添加了还有findIndex()

find()内部有两个参数，第一个参数是回调函数，第二个参数是回调函数中this的指向对象，通常为数组本身。

回调函数内有三个参数：

• 第一个参数是遍历到的当前的元素
• 第二个参数是数组的索引（可选）
• 第三个是数组本身（可选）

find方法对数组中的每一项元素执行一次 callback 函数，直至有一个 callback 返回 true。当找到了这样一个元素后，该方法会立即返回这个元素的值，否则返回 undefined。注意 callback函数会为数组中的每个索引调用即从 0到 length - 1，而不仅仅是那些被赋值的索引，这意味着对于稀疏数组来说，该方法的效率要低于那些只遍历有值的索引的方法。

find方法不会改变数组。

注意：在第一次调用 callback函数时会确定元素的索引范围，因此在 find方法开始执行之后添加到数组的新元素将不会被 callback函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到，但是其值已经是undefined了。

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

function findCherries(fruit) { 
    return fruit.name === 'cherries';//=>return true;
}

console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

findIndex()

用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1,类似于上边的find(),只不过返回的是索引，没有对应项则返回-1.

let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9); 
console.log(index); // 2

include()

判断某个数组是否包含给定的值，返回布尔值。

[1, 2, 3].includes(2) // true 
[1, 2, 3].includes(4) // false

String的原型扩展

模板字符串

ES6新增的创建字符串的方式，使用反引号定义**`**

• 可以解析变量

  let name = `zhangsan`;
  let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan
  

• 执行代码

   let result = { 
       name: 'zhangsan', 
       age: 20,
       sex: '男' 
   } 
   let html = ` <div>
       <span>${result.name}</span>
       <span>${result.age}</span>
       <span>${result.sex}</span>
   </div> `;
  

• 还可以调用函数

  const sayHello = function () { 
      return '666666';
   }; 
   let greet = `${sayHello()} 哈哈哈哈`;
   console.log(greet); // 666666 哈哈哈哈
  

startsWith()

startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值

let uname = '尼古拉斯.赵四';
console.log(uname.startsWith('尼古拉斯'));//true
console.log(uname.startsWith('赵四'));//false

endsWith()

endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

let uname = '尼古拉斯.赵四';
console.log(uname.endsWith('尼古拉斯'));//false
console.log(uname.endsWith('赵四'));//true

repeat()

repeat方法表示将原字符串重复n次，返回一个新字符串

• 该方法的参数是次数，重复了多少次

let uname = '尼古拉斯.赵四';
console.log(uname.repeat(2));//尼古拉斯.赵四尼古拉斯.赵四

新的数据结构

Set

Set内置对象真正应用是在ES6。

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

new Set([iterable]);

参数

• iterable

  如果传递一个可迭代对象，它的所有元素将不重复地被添加到新的 Set中。如果不指定此参数或其值为null，则新的 Set为空。

• 返回值是一个新的Set对象

我们应用的时候可以用来数组去重

var arr1 = new Set([1,5,2,4,2,5,1,4]);
console.log(arr1);//Set { 1, 5, 2, 4 }

Set对象中有几个单位，我们可以用Set.prototype.size查看

var arr1 = new Set([1,5,2,4,2,5,1,4]);
console.log(arr1.size);//4

原型下还有很多方法：

• add(value)：添加某个值，返回 Set 结构本身
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
• has(value)：返回一个布尔值，表示该值是否为 Set 的成员
• clear()：清除所有成员，没有返回值

 const s = new Set();
 s.add(1).add(2).add(3); // 向 set 结构中添加值 
 s.delete(2);           // 删除 set 结构中的2值   
 s.has(1);               // 表示 set 结构中是否有1这个值 返回布尔值 
 s.clear();               // 清除 set 结构中的所有值
 //注意：删除的是元素的值，不是代表的索引

Set对象是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。

• Set对象的遍历

  类似于数组，可以用数组的方式进行遍历

Object.is

IE浏览器不支持该方法

Object.is() 方法判断两个值是否是相同的值。

Object.is(value1, value2);

参数

• value1

  第一个需要比较的值。

• value2

  第二个需要比较的值。

返回值是表示两个参数是否相同的布尔值。

类似于===，但是不同点是===运算符（和== 运算符）将数字值 -0 和 +0 视为相等，并认为 Number.NaN不等于 NaN。

Object.is(0, -0);// false                   <------
console.log(0 === -0);//true                <------
Object.is(NaN, 0/0);// true
console.log(NaN === 0/0);//false
Object.is(null, null);// true
console.log(NaN === NaN);//false            <------
console.log(Object.is(NaN,NaN));//true      <------