ECMAScript6--7.数组扩展

1.数组新增特性

1.Array.of
2.Array.from
3.copyWithin
4.find\findIndex
5.fill
6.entries\keys\values
7. includes

2.Array.of(参数1，参数2，参数3，...);把一组数据变量转换成数据类型的作用

{
    let arr = Array.of(3,4,7,9,11);
    console.log('arr=',arr); //arr= [3，4,7,9,11]

    //不传任何参数，返回的是空数组；
    let empty = Array.of();
    console.log('empty',empty); //empty [ ]
}    

3.Array.from:
1.把一些伪数组或者集合转换成真正的数组；
2.在转换数组的同时还进行了遍历，把整个数组map跑了一遍，把里面每个元素根据条件转换；

<p>ES6</p>  
<p>ES5</p> 
<p>html</p> 
<p>css</p> 
<p>javascript</p> 

{
  1.
    let p = document.querySelectorAll('p'); //得到的p的集合；
    let pArr = Array.from(p);
    
    pArr.forEach(function(item){
    
        //原生js：获取DOM节点文本内容的属性；
        console.log(item.textContent); //ES6  ES5  html  css  javascript
    });
    
    
    //2.在转换数组的同时还进行了遍历（map），把整个数组map跑了一遍，把里面每个元素乘以2；
    let arr2 = Array.from([1,3,5],function(item){return item*2});
    console.log(arr2); //[2,6,10]
}

4.fill:填充数组一个功能；（把数组所有元素都换成一个值）

{
   console.log('fill-7',[1,'a',undefined].fill(7)); //fill-7 [7,7,7]
   //['a','b','c'].fill(7,1,3);
     7指的是要替换那个元素；
     1,3表示开始和截止位置这个中间的长度，都要被7的内容替换
   console.log('fill,pos',['a','b','c'].fill(7,1,3));//fill,pos  ['a',7,7]
}

5.遍历 keys、 values、 entries

{
    for(let index of ['1','c','ks'].keys()){
        console.log('keys',index); // keys 0 1 2
    }
    
    //values()在chrome不做兼容处理是没法用的，会报错的；
     for(let value of ['1','c','ks'].values()){
        console.log('values',value); // values 1 c ks
    }

    //既想取到索引又想取到值；entries没有兼容性问题；
     for(let [index,value] of ['1','c','ks'].entries()){
        console.log('values',index,value); 
        // values 0  1 
        // values 1  c
        // values 2  ks
    }
}

6.在当前数组内部把指定位置的一个成员复制到其他位置；

{
    //copyWithin(0,3,4);把4拿过来放到了1的位置；
    //第一个参数表示从哪个位置开始替换；--（从0位置替换）；
    //第二个参数从哪个位置开始读取数据；--（第三个位置是4）；
    //第三个参数在哪个位置之前截止；--（在第4个位置之前截止）；
    console.log([1,2,3,4,5].copyWithin(0,3,4)); 
    //[4,2,3,4,5]
}

7.find:只找出第一个符合条件的数字成员就可以了，不在往后找了；
findIndex:找到第一个符合条件（当前符合条件）的数字的索引；

{
    console.log([1,2,3,4,5,6].find(function(item){return item>3})); //4
    console.log([1,2,3,4,5,6].findIndex(function(item){return item>3})); //3


}

8.includes:数组中是不是包含这个值；

{
    console.log('Number',[1,2,NaN].includes(1)); //Number true
    console.log('NaN',[1,2,NaN].includes(NaN)); //NaN true
}