我们在平时的工作中操作数组的目的只有一个,那就是一顿操作之后得到我们想要的新数组,然后该干啥干啥,但是有的时候一顿猛如虎的操作之后得到的并不是我们想要的新数组,根本原因就是出在我们对于数组的相关方法的掌握并不是很牢固,尤其是要注意注意再注意,方法的返回值是什么,原数组会不会被改变,基础不牢固的同学这两点真的很容易被忽略,好了,废话不多说~
注: ******** **ES6*的方法会有提示,未提示的均为ES5的方法 ********
第一大项:数组的基本方法
1. push(): push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度(Number)
2. pop(): pop()方法从数组中删除最后一个元素,并返回该元素的值。
注: 当数组为空时调用该方法返回undefined
3. shift(): shift()方法从数组中删除第一个元素,并返回该元素的值。
注: 当数组为空时调用该方法返回undefined
4. unshift(): unshift()方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(Number)。
5. concat(): concat()方法用于连接两个或多个数组,该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
5. join(separator): join() 方法用于把数组中的所有元素放入一个字符串,separator是分隔符,如果省略该参数,则使用逗号作为分隔符(数组转化成字符串的方法),该方法返回的是一个字符串。
6. slice(start,end): slice() 方法用于截取数组中的元素,返回值是一个子数组,原数组不会被改变。使用的时候就是从数组的start位(包含)截到第end位(不包含,左闭右开),只有一个参数即只有start时,表示从第start位开始截取一直到最后一位(包含)。
7. splice(index,howmany,item1,…,itemX): splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。该方法会改变原始数组。记住:如果该方法传了两个参数,那就是想要从第index位(包含)开始删除啦,删几个元素呢,删howmany个;如果该方法穿了三个参数,那就是想要从第index位开始添加啦,添加什么元素呢,添加item1,…,itemX。当你想要添加元素的时候,只需要将参数howmany设置为0就好了.
举例:
const arr = [1,2,3,4,5]
arr.splice(1,0,8)
console.log(arr ) //1,8,2,3,4,5
这里要注意的是,你添加的元素是在加在index之前的,这里一定要注意,不要想当然!
8. indexOf(item,start): indexOf() 方法可返回数组中某个指定的元素位置(Number),如果在数组中没找到指定元素则返回 -1。(该方法一般用于查找某一个元素是否在数组中)
item:必须。查找的元素。
start:可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。
(如果你想查找字符串最后出现的位置,请使用 lastIndexOf() 方法)
9. Array.from(): Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。(ES6)
注: 实际应用中,常见的类似数组的对象是 DOM 操作返回的 NodeList 集合,以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。
10. Array.of(): Array.of方法用于将一组值,转换为数组。(ES6)
例如:
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
注: 这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。如下:
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
上面代码中,Array方法没有参数、一个参数、三个参数时,返回结果都不一样。只有当参数个数不少于 2 个时,Array()才会返回由参数组成的新数组。参数个数只有一个时,实际上是指定数组的长度。Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。
11.使用扩展运算符复制数组:(ES6)
例:
const a1 = [1, 2];
const a2 = […a1]; //[1,2]
(用于一维数组的深拷贝)
12.补充一条很常用的:
判断变量是否为数组类型:
Array.isArray(value)
第二大项:数组的遍历方法
前言:我们都知道遍历数组会有很多方法,但是请记得最原始的for循环是性能最高的遍历方法,有兴趣可以自行百度关键词"JS数组遍历性能比较"
1. for(): 使用方法略过。
常规写法:for(let i = 0;i<arr.length;i++)
推荐写法:for(let i = 0,len=arr.length;i<len;i++) (性能最高)
注:该方法无返回值
2. forEach(): 功能同for()
语法:arr.forEach(function(currentValue, index, arr){
//执行…
})
currentValue:当前元素(必需)
index:当前元素的索引(可选)
arr:当前元素所属的数组对象(可选)
注:该方法无返回值
3. every(): 用于检测数组所有元素是否都符合指定条件(通过函数提供),该方法不会改变原始数组。
语法:arr.every(function(currentValue, index, arr){
//执行…
})
currentValue:当前元素(必需)
index:当前元素的索引(可选)
arr:当前元素所属的数组对象(可选)
注:该方法返回值 是布尔类型
举例:
const arr = [1,2,3,4,5]
let result = arr.every(function(currentValue, index, arr){
return currentValue>3
})
console.log(result ) //false
(every代表每一个、所有,因为不是每一项都大于3,所以遍历之后返回false)
4. some(): 用于检测数组中的元素是否满足指定条件(函数提供),该方法不会改变原始数组。
语法:arr.some(function(currentValue, index, arr){
//执行…
})
currentValue:当前元素(必需)
index:当前元素的索引(可选)
arr:当前元素所属的数组对象(可选)
注:该方法返回值 是布尔类型
举例:
const arr = [1,2,3,4,5]
let result = arr.some(function(currentValue, index, arr){
return currentValue>3
})
console.log(result ) //true
(some代表某一个,只要检测到有某一项大于3,表达式则返回true , 剩余的元素不会再执行检测)
5. filter(): 创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,该方法不会改变原始数组。
语法:arr.filter(function(currentValue, index, arr){
//执行…
})
currentValue:当前元素(必需)
index:当前元素的索引(可选)
arr:当前元素所属的数组对象(可选)
注:该方法返回值 是Array类型
举例:
const arr = [1,2,3,4,5]
let result = arr.some(function(currentValue, index, arr){
return currentValue>3
})
console.log(result ) //[4,5]
(filter代表过滤,返回满足过滤条件的值组成的新数组)
6. map(): 返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,该方法不会改变原始数组。
语法:arr.map(function(currentValue, index, arr){
//执行…
})
currentValue:当前元素(必需)
index:当前元素的索引(可选)
arr:当前元素所属的数组对象(可选)
注:该方法返回值 是Array类型
举例:
const arr = [1,2,3,4,5]
let result = arr.map(function(currentValue, index, arr){
return currentValue+1
})
console.log(result ) // [2,3,4,5,6]
7. find(): 返回通过测试(函数内判断)的数组的第一个元素的值,如果没有符合条件的元素返回 undefined,该方法不会改变原始数组。(ES6)
语法:arr.find(function(currentValue, index, arr){
//执行…
})
currentValue:当前元素(必需)
index:当前元素的索引(可选)
arr:当前元素所属的数组对象(可选)
注:该方法返回值 是String类型
举例:
const arr = [1,2,3,4,5]
let result = arr.find(function(currentValue, index, arr){
return currentValue>2
})
console.log(result ) // 3
8. findIndex(): 返回通过测试(函数内判断)的数组的第一个元素的索引(位置),如果没有符合条件的元素返回 -1,该方法不会改变原始数组。(ES6)
语法:arr.findIndex(function(currentValue, index, arr){
//执行…
})
currentValue:当前元素(必需)
index:当前元素的索引(可选)
arr:当前元素所属的数组对象(可选)
注:该方法返回值 是Number类型
举例:
const arr = [1,2,3,4,5]
let result = arr.findIndex(function(currentValue, index, arr){
return currentValue>2
})
console.log(result ) // 2
9. includes(): 用来判断一个数组是否包含一个指定的值,如果是,返回 true,否则返回false。(ES6)
语法:arr.includes(searchElement, fromIndex)
searchElement:需要查找的元素值(必需)
fromIndex:从该索引处开始查找 searchElement(可选)
注:该方法返回值 是布尔类型
举例:
const arr = [1,2,3,4,5]
let result = arr.includes(1)
console.log(result ) // true
let result = arr.includes(‘1’)
console.log(result ) // false