数组原型方法
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]