JavaScript数组问题(ES6语法)

扩展运算符

1. 标识为三个点:...,可以将一个数组转变为参数序列

    console.log(...[1,2,3])	// 1 2 3
    console.log(1, ...[2, 3, 4], 5) //1,2,3,4,5
    [...document.querySelectorAll('div')] //[<div>,<div>,<div>]
    //该运算符主要用于函数调用
    function add(x, y) {
    	return x + y;
    }
    var numbers = [4, 38];
    add(...numbers) // 42		
   

2. 扩展运算符后面还可以放置表达式:const arr=[...(x>0 ? ['a']:[]),'b']

3. 如果扩展运算符后面是一个空数组,则不会产生任何效果:[...[], 1] //[1]

4. 应用:

   • 合并数组.ES5可以通过concat方法合并,这里不多做解释.ES6可以直接通过[...arr1,...arr2,...arr3]

   • 与解构赋值结合.const [first,...rest]=[1, 2, 3, 4, 5];first ==> 1 ,rest ==>[2,3,4,5]

   • 作为函数的返回值

   • 字符串的转换(将字符串转换为真正的数组):[...'hello'] ==> ["h","e","l","l","o"].而且可以识别Unicode32位字符

   • 实现了Iterator接口的对象转换为真正的数组.var nodeList=document.querySelectAll('div'); var array=[...nodeList];

   • Map和Set结构，Generator函数.Generator函数执行后返回的是一个遍历器对象，执行扩展运算符，就会将内部遍历到的值转为一个数组.(具体何为Map,Set,Generator函数,以后我会一一介绍)

       let map = new Map([
       	[1, 'one'],
       	[2, 'two'],
       	[3, 'three'],
       ]);
       let arr = [...map.keys()]; // [1, 2, 3]
     

     ---

       var go = function*(){
       	yield 1;
       	yield 2;
       	yield 3;
       };
       [...go()] // [1, 2, 3]
     

   • 可以用于合并两个对象:let ab={...a,...b} 等价于 let ab=Object.assign({},a,b)

Array.from()

1. 用于将两类对象转换为真正的数组:类似于数组的对象和可遍历的对象(包括Set和Map)

    let arrayLike={'0':'a','1':'b',length:2};
    //ES5写法
    var arr1=[].slice.call(arrayLike);
    //ES6写法
    var arr2=Array.from(arrayLike);
   

2. 常见的类似于数组的对象例如DOM操作返回的NodeList集合，以及函数内部的arguments对象，这些都能转为真正的数组

3. 部署了Iterator接口的数据结构，Array.from都能转为数组(Iterator接口后面的博客会提到)

4. 扩展运算符实际调用的是遍历器接口Symbol.iterator,如果对象没有这个接口就不能转换。而Array.from方法只要是有length属性就可以转换

5. Array.from可以接受第二个参数，将处理后的值放入返回的数组：Array.from([1，2，3],x = > x * x) //[1，4，9]

6. Array.of()方法用于将一组值转化为数组，总是返回参数值组成的数组，如果没有参数，就返回空数组

数组中的其他方法

1. find()和findIndex()都用于找出第一个符合条件的数组成员.这两个方法都是以前的常规方法,不多做解释
2. fill()方法用于使用给定值填充一个数组，主要用于空数组的初始化，数组中已有元素会被抹去，[].fill(value,start,end)
3. entries(),keys(),values()用于遍历数组，返回一个Iterator对象，可以用for…of循环遍历，依次是对键值对的遍历、对键名的遍历、对键值的遍历
4. Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，第二个参数表示搜索的起始位置
5. 数组的空位指数组的某一个位置没有任何值(包括undefined)
   • ES5的forEach(),filter(),every(),some()都会跳过空位，map()会跳过空位，但是会保留值，join()和toString()会将空位视为undefined，而undefined和null会被处理为空字符串
   • ES6明确将空位转为undefined。Array.from方法会将数组的空位转为undefined，不会忽略。扩展运算符也会将空位转化为undefined，copyWithin会连空位一起拷贝。fill()将空位视为正常的数组位置。for…of循环也会遍历空位。其余的将空位视为undefined
   • [,,]里面表示两个空位