es6-数组的扩展

数组原型方法

Array.from()
可以将类似数组的对象和可遍历对象转为真正的数组

类数组对象须为键值为数值，否则数组值为undefined、必须有length属性，决定数组的长度。
可遍历对象必须有自己的Iterator对象，查看Iterator部分，部署Iterator对象

1.类似数组的对象（DOM操作返回的NodeList集合、函数的arguments对象）
let arr = {
	'0':'hello',
	'1':'world',
	'2':'!',
	length:3
}
Array.from(arr);             //['hello','world','!']
2.可遍历的对象（Set、Map、字符串...）
//Set、Map数据结构可直接作为参数传入其构造函数中.
//可以处理各种Unicode字符，将字符串转为数组在获取长度
Array.from("大家好！").length;           //4
Array.from(" ").length        空格键        // 1
Array.from("	").length          tab键       //1

可接受第二个参数、对每个数组进行处理后，值放入返回的数组。

Array.from("123",(item)=>item*item);            //[1,4,9]

可接受第三个参数、用来绑定this

let i = 3;
let obj = {
	i:2
}
Array.from("123",(item)=>i*item);           // [3,6,9]
Array.from("123",function(item){
	this.i*item
},obj);             //[2,4,6]

使用this时注意不要使用箭头函数。

Array.of()
将一组值转换为数组。弥补数组构造函数Array()的不足。

1.Array()构造函数
Array()      //[]
Array(3)         //[,,,]
Array(1,2,3)     //[1,2,3]
2.
Array.of()      //[]
Array.of(3)        //[3]
Array.of(1,2,3)       //[1,2,3]

规范行为，使数组表现行为一致

以上两个方法都可使用Array.prototype.slice方法替代。

数组实例的方法

Array.copyWithin()
将数组内部指定的成员复制到其他位置，接受三个参数：

	target:从该位置开始替换数据
	start：从该位置开始取数据，默认为0
	end：到该位置停止度数据，默认等于数组长度

[1,2,3].copyWithin(1);          //[1,1,2]
[1,2,3,4].copyWithin(2,1);          //[1,2,2,3]
[1,2,3,4,5,6].copyWithin(2,-2);          //[1,2,5,6,5,6] 
//start值与end值
[1,2,3,4,5,6].copyWithin(2,-2,0)           //[1,2,3,4,5,6]
[1,2,3,4,5,6].copyWithin(2,-2,1)         //[1,2,3,4,5,6]
[1,2,3,4,5,6].copyWithin(2,-2,-3)      // [1,2,3,4,5,6]
[1,2,3,4,5,6].copyWithin(2,-2,-1)        //[1,2,5,4,5,6]   
[1,2,3,4,5,6].copyWithin(2,-3,-1)     //[1,2,4,5,5,6] 

start 为负值时，end须为负值且大于start
start和end顾头不顾尾

find()、findIndex()
查找符合条件的数据，接受一个回调函数作为参数；find()查找出第一个符合的数据返回该数据，findIndex()查找出第一个符合的数据返回它的下标。否则返回-1

//回调函数接收三个参数，当前的值、当前的位置、原数组。
[1,2,3,4].find((item)=>item<3);        //1
[1,2,3,4].find((item,index,arr)=>{console.log(item,index)); return item>2} ; 
// 1 0      2 1         3  2         3
[1,2,3,4].findIndex(item=>item>2);            // 2
[1,NaN,3].indexOf(NaN);             //-1
[1,NaN,3].findIndex(item=>Object.is(NaN,item));       //1

接收第二个参数，绑定回调函数中的this
借助Object.is() 都可以发现NaN，

fill()
使用给定值填充数组,接收三个参数，目标值、开始位置、结束位置

[2,3].fill(4);           //[4,4]
new Array(3).fill(2);            //[2,2,2]
[2,3,4].fill(1,0);           //[1,1,1]
[2,3,4].fill(1,0,1);         //[1,3,4]

entries()/keys()/values()
遍历数组、使用for…of循环遍历。keys()是键名，values()是键值，entries()是键值对。
includes()
是否包含给定的值，返回布尔值。接收两个参数，给定值、查询起始位置。

[1,2,3].includes(2);            //true
[1,2,3].includes(5);            //false
//可以查找出NaN
[1,2,,NaN].includes(NaN);          //true

Map数据结构的has()方法用来查找键名
Set数据结构的has()方法用来查找值。

数组的空位

1.空位没有任何值，不是undefined。
new Array(3);               //[,,,]
1 in [undefined,undefined,undefined]          //true
1 in [,,,]                         //false

	2.ES5对空值的处理
 	 - forEach(),filter(),every(),some()会跳过空位
	 - map()会跳过空位，但会保留这个值，
	 - join()/toString() 会将空值视为undefined，而undefined和null会被处理为空字符串。
	3.ES6会将空位转为undefined
	 - Array.from()会将空位转为undefined，
	 - 扩展运算符(...)会将空位转为undefined，
	 - copyWithin()会连空位一起复制
	 - fill()会将空位视为正常的数组
	 - for...of会遍历空位
	 - entries()/keys()/values()/find()/findIndex()会将空位处理为undefined。

数组推导
提供简介写法，使用现有的数组生成新数组。ES7 浏览器未支持

1、使用for...of循环处理
var arr1= [1,2,3];
var arr2 = [for(item in arr1) item*2];            //[2,4,6]
2、for...of后面可加if语句，设定限制条件。
var arr3 = [for(item in arr1) if(item>2) item*2];    //[6]
3.数组推导可代替map()和filter()
4.可使用多重for...of循环处理多个数组

数组推导的方括号构成内部的作用域，其中的变量声明类似于let声明。
字符串类数组，也可使用数组推导。

数组的方法
1、every、some、map、filter、forEach
都接收两个参数，回调函数（当前值、索引、原数组）、回调函数中this的绑定值

1.every检测数组中所有的值是否都符合条件，返回布尔值。
[1,2,3].every(item=>item>0);              //true
[1,2,3].every(item=>item>2);                //false
2.some检测数组中值是否有符合条件的，返回布尔值。
[1,2,3].some(item=>item>2);              //true 
3.map操作原数组返回一个新的数组。
4.forEach遍历数组，在回调函数中进行操作。
5.filter方法筛选出符合条件的数据，返回一个新的数组。

2、pop/push/shift/unshift
操作原数组，改变原数组。注意对空值的处理。

1.pop()方法删除最后一个元素，并返回该元素
[1,2,3,4].pop();        //4
[1,2,3,4,].pop();         //4
[1,2,3,4,,].pop();         //undefined
2.push()向数组添加元素，返回数组的长度。接收多个参数
[1,2,3].push(3,4);            //5
[1,2,,].push(3);            //4
3.shift()删除第一个数组的元素，并返回值，
[1,2,3].shift();              //1
4.unshift()向数组添加元素，返回元素长度
[1,2,3].unshift(4);            //4

3、reduce、reduceRight/slice
操作原数组,不会改变原数组。

1.reduce()方法从到右遍历数组中的元素进行计算（类似递归计算），
	接收一个回调函数（*初始值、*当前值、当前值索引、原数组）、一个初始值
	[1,2,3].reduce(function(total,num){
		return total+num;
	});                                        //6
	[1,2,3].reduce(function(total,num){
		return total+num;
	},4);                                    //10
2、用法同上，只是从有向左遍历。
3、slice()从指定位置返回选定的元素。接收两个参数，起点位置、终点位置
[1,2,3].slice();              //[1,2,3]
[1,2,3].slice(1);          //[2,3]

4、splice().
用于插入、删除、替换数组元素。参数*起始点、*删除多少个元素、要添加的值

1.返回被删除的元素
var arr = [1,2,3,4];
arr.splice(1,0);          //[]
arr;               //[1,2,3,4]
arr.splice(1);            //[2,3,4]
arr;              //[1]
2.添加元素
arr.splice(1,0,3,4);         //[]
arr;                         //[1,3,4,2,3,4]