ES6: 数组与对象扩展

一、数组扩展

1.Array.from方法
Array.from方法用于将两类对象转为真正的数组：类似数组的对象（本质特征是必须拥有length属性）。因此任何有length属性的对象和可遍历的对象（ES6新增的数据结构Set和Map），都可以通过Array.form方法转为数组。
（1）Array.from方法会将数组的空位转换为undefined，也就是说这个方法不会忽略空位
（2）将类数组的对象转换为真正的数组

 	 let arrayLike = {'0':'a','1':'b','2':'c',length:3};     
 	 //es5
     let arr1 = Array.prototype.slice.call(arrayLike);
     console.log(arr1);
     //["a", "b", "c"]
     
	 //es6
     let arr2 = Array.from(arrayLike);
     console.log(arr2);
     //["a", "b", "c"]
   
    

（3）数组深拷贝

	 let arr1 = [1,2];
     let arr2 = Array.from(arr1);
     arr2[0] = 10;
    console.log(arr1);
    //[1,2]
    console.log(arr2);
    //[10,2]

（4）Array.from 还可以接受第二个参数 ，作用类似于数组的map方法 用来对每个元素进行处理然后放入返回的数组之中

	  let obj = { 0: 1, 1: 2, 2: 3, length: 3 };
      let arr = Array.from(obj, x => x * x);
      console.log(arr);
      //[1,4,9]

2.Array.of方法
Array.of方法用于将一组值转换为数组
这个方法主要是弥补数组构造函数Array（）的不足，因为参数个数的不同会导致Array（）的行为有差异

	 let arr = [1，2];
	 console.log(arr);
	 //通过字面量创建数组[1,2]

     let arr1 = new Array(1,2);
     console.log(arr1);
     //通过new Array()创建数组[1,2]

但是有参数只有一个的时候会发生以下的问题：

	 let arr = [1];
     let arr1 = new Array(1);
     console.log(arr);
     //[1]
     console.log(arr1);
     //[empty]
     console.log(arr1.length);
     //1

new Array()创建的数组在这种情况下返回的数组是一个[empty]它显示为空，但它有长度。因为当我们new Array（）方法中只传一个参数的时候，它表示长度。
这个时候我们可以用Array of来解决new Array（）的问题

 	 let arr = Array.of(10);     
     console.log(arr);
     //[10]

3.数组实例方法
（1）copyWithin
数组实例的copyWithin方法 在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组
它接受三个参数。
target（必需）：从该位置开始替换数据。
start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。
end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数

	  let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
	  			 0  1  2  3  4  5  6  7  8  
      arr.copyWithin(0, 3, 6);
      //从4读取到6再将这段数据把1到3替换掉
      console.log(arr)
      //[4, 5, 6, 4, 5, 6, 7, 8, 9]

（2）find()和findIndex()
数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined

	  var arr = [1, 5, 10, 15];
      var num = arr.find(function(value, index, arr) {
        return value > 9;
      });
      console.log(num);
      //10

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

   	  var arr = [1, 5, 10, 15];
      var index = arr.findIndex(function(value, index, arr) {
        return value > 9;
      });
      console.log(index);
      //2

（3）fill方法
数组实例的fill() fill方法使用给定值，填充一个数组
fill方法还可以接受第二个参数和第三个参数，用于指定填充的起始位置和结束位置

	  let arr = new Array(10);
      arr.fill(7,1,3);
      console.log(arr)
      //[empty, 7, 7, empty × 7]

（4）entries()，keys()和values()
ES6提供三个新的方法——entries()，keys()和values()——用于遍历数组。可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

 	 for (let index of ["a", "b"].keys()) {
        console.log(index);
        // 0 1
      }
      for (let elem of ["a", "b"].values()) {
        console.log(elem);
        // a b
      }
      for (let [index, elem] of ['a', 'b'].entries()) {
         console.log(index);
         console.log(elem);
         //0
         //a
         //1
         //b
     }

（5）includes
include可以用来判断元素是否存在于数组，结果返回的是布尔值

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

这里includes可以判断NAN是否在数组里，因为includes是判断两者字符串是否相等。而indexOf()进行的是严格等于操作，而NAN并不严格等于NAN。

二、对象扩展

ES6允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。
ES6允许在对象之中，只写属性名，不写属性值。这时，属性值等于属性名所代表的变量。

  let name = 'Mike' ;
  let obj = {
    name
  }
 
  console.log(obj.name);
  //Mike

ES6中对象中函数也有了简写：

  let obj = {
   a(){
     console.log('i am fn');
   }
  }
  obj.a();
  //i am fn

ES5中不允许对象属性值是变量，但ES6支持：

	  let prop = "name";
      let obj = {
        [prop]: "Mike"
      };
      console.log(obj);
      //{name: "Mike"}

ES6中对象还支持字符串的拼接：

	 let obj = {
        ['n'+'a'+'m'+'e']: "Mike"
      };
      console.log(obj);

（1）Object.is()
ES5比较两个值是否相等，只有两个运算符：相等运算符和严格相等运算符。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。
JavaScript缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。
ES6提出“Same-value equality”（同值相等）算法，用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。

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

（2）Object.assign()
Object.assign()用于对象合并 (其实是浅拷贝)

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

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

对于Object.assign()来说，对于嵌套的对象，一旦遇到同名属性，它的处理方式是替换而不是添加，这可能不是我们想要的：

      var target = { a: { b: "c", d: "e" } };
      var source = { a: { b: "hello" } };
      console.log(Object.assign(target, source));
      // { a: { b: 'hello' } };

代码中，target对象的a属性被source对象的a属性整个替换掉了，而不会得到{ a: { b: ‘hello’, d: ‘e’ } }的结果
（3）Object.keys、Object.values和Object.entries方法
1.ES5引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。
2.Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。
3.Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

   	  var obj = { foo: "bar", baz: 42 };
      console.log(Object.keys(obj));
      // ["foo", "baz"]

      var obj = { foo: "bar", baz: 42 };
      console.log(Object.values(obj));
      // ["bar", 42]

      var obj = { foo: "bar", baz: 42 };
      console.log(Object.entries(obj));
      // [ ["foo", "bar"], ["baz", 42] ]