Array数组
基本方法:增删改
方法 | 描述 |
---|---|
push() | 向数组的末尾添加一个或更多元素,并返回新的长度。 |
unshift() | 向数组的开头添加一个或更多元素,并返回新的长度。 |
pop() | 删除数组的最后一个元素并返回删除的元素。 |
shift() | 删除并返回数组的第一个元素。 |
concat() | 连接两个或更多的数组,并返回结果 |
slice() | 选取数组的一部分,并返回一个新数组。 |
splice() | 从数组中添加或删除元素。 |
查找元素在数组中的位置
方法 | 描述 |
---|---|
indexOf() | 搜索数组中的元素,并返回它所在的位置。 |
lastIndexOf() | 搜索数组中的元素,并返回它最后出现的位置。 |
数组排序
方法 | 描述 |
---|---|
reverse() | 反转数组的元素顺序。 |
sort() | 对数组的元素进行排序。 |
数组转字符串
方法 | 描述 |
---|---|
toString() | 把数组转换为字符串,并返回结果。 |
join() | 把数组的所有元素放入一个字符串。 |
判断是否为数组
方法 | 描述 |
---|---|
isArray() | 判断对象是否为数组。 |
遍历检测数组元素返回处理后的数组
方法 | 描述 |
---|---|
forEach() | 数组每个元素都执行一次回调函数。 |
every() | 检测数值元素的每个元素是否都符合条件。 |
some() | 检测数组元素中是否有元素符合指定条件。 |
filter() | 检测数值元素,并返回符合条件所有元素的数组。 |
map() | 通过指定函数处理数组的每个元素,并返回处理后的数组。 |
reduce() | 将数组元素计算为一个值(从左到右)。 |
reduceRight() | 将数组元素计算为一个值(从右到左)。 |
ES6新增方法:
方法 | 描述 |
---|---|
copyWithin() | 从数组的指定位置拷贝元素到数组的另一个指定位置中。 |
fill() | 使用一个固定值来填充数组。 |
find() | 返回符合传入测试(函数)条件的数组元素 |
findIndex() | 返回符合传入测试(函数)条件的数组元素索引。 |
from() | 通过给定的对象中创建一个数组。 |
includes() | 判断一个数组是否包含一个指定的值。 |
entries() | 返回数组的可迭代对象。 |
keys() | 返回数组的可迭代对象,包含原始数组的键(key)。 |
一. 基本方法:增删改
1. push()
定义和用法:
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
注意: 1.新元素将添加在数组的末尾。
2.此方法改变数组的长度。
语法:
array.push(item1, item2, ..., itemX)
参数 | 描述 |
---|---|
item1, item2, …, itemX | 必需。要添加到数组的元素。 |
返回值:
类型 | 描述 |
---|---|
Number | 数组新长度 |
例子:
let arr = [1, 2, 3]
arr.push(4) // 4
console.log(arr) // [1,2,3,4]
2. unshift()
定义和用法:
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
**注意:**该方法将改变数组的数目。
语法:
array.unshift(item1,item2, ..., itemX)
参数 | 描述 |
---|---|
item1,item2, …, itemX | 可选。向数组起始位置添加一个或者多个元素。 |
返回值:
类型 | 描述 |
---|---|
Number | 数组新长度 |
例子:
let arr = [1, 2, 3]
arr.unshift(0) // 4
console.log(arr) // [0,1,2,3]
3. pop()
定义和用法:
pop() 方法用于删除数组的最后一个元素并返回删除的元素。
**注意:**此方法改变数组的长度!
语法:
array.pop()
返回值:
类型 | 描述 |
---|---|
所有类型 | 返回删除的元素。 |
例子:
let arr = [1, 2, 3]
arr.pop() // 3
console.log(arr) // [1,2]
4. shift()
定义和用法:
shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
**注意:**此方法改变数组的长度!
语法:
array.shift()
返回值:
类型 | 描述 |
---|---|
所有类型 | 移除的元素 |
例子:
let arr = [1, 2, 3]
arr.shift() // 1
console.log(arr) // [2,3]
5. concat()
定义和用法:
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
语法:
array1.concat(array2,array3,...,arrayX)
参数 | 描述 |
---|---|
array2, array3, …, arrayX | 必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个。 |
返回值:
类型 | 描述 |
---|---|
Array 对象 | 返回一个新的数组。 |
例子:
let arr = [1, 2, 3]
let arr2 = [4, 5, 6]
arr2 = arr2.concat(arr) // [4,5,6,1,2,3]
console.log(arr2) // [4,5,6,1,2,3]
6. slice()
定义和用法:
slice() 方法可选取数组的一部分,并返回一个新数组
slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
slice() 方法不会改变原始数组。
语法:
array.slice(start, end)
参数 | 描述 |
---|---|
start | 可选。规定从何处开始选取。 如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,如:slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素。 |
end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标(不包含下标为end的元素)。 如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。 如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。如: slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。 |
返回值:
类型 | 描述 |
---|---|
Array | 返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素 |
例子:
//截取数组
let arr = [1, 2, 3, 4, 5]
arr.slice(0,2) // [1, 2]
//截取数组(参数为负数)
arr.slice(-4,-1) // [2, 3, 4]
//截取字符串
let str = 'hello world'
str.slice(0, 8) // hello wo
str.slice(-7, -1) // o worl
7. splice()
定义和用法:
splice() 方法用于添加或删除数组中的元素。
**注意:**这种方法会改变原始数组。
语法:
array.splice(index,howmany,item1,.....,itemX)
参数 | 描述 |
---|---|
index | 必需。规定从何处添加/删除元素。 该参数是开始插入和(或)删除的数组元素的下标,必须是数字。 |
howmany | 可选。规定应该删除多少元素。必须是数字,但可以是 “0”。 如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。 |
item1, …, itemX | 可选。要添加到数组的新元素 |
返回值:
类型 | 描述 |
---|---|
Array | 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。 |
例子:
let arr = [1, 2, 3, 4, 5]
//删除元素(删除最后3个元素)
arr.splice(2, 3) // [3, 4, 5]
console.log(arr) // [1, 2]
//添加元素(往最后添加3个元素)
arr.splice(2, 0, 3, 4, 5)
console.log(arr) // [1, 2, 3, 4, 5]
//添加元素(往前面添加1个元素)
arr.splice(0, 0, 0)
console.log(arr) // [0, 1, 2, 3, 4, 5]
//修改元素(将前三个元素改为a)
arr.splice(0, 3, 'a', 'a', 'a') // 返回值为删除的元素: [0, 1, 2]
console.log(arr) // ["a", "a", "a", 3, 4, 5]
二. 查找元素在数组中的位置
8. indexOf()
定义和用法:
indexOf() 方法可返回数组中某个指定的元素位置。
该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时,默认为0)。如果找到一个 item,则返回 item 的第一次出现的位置。
如果在数组中没找到指定元素则返回 -1。
语法:
array.indexOf(item,start)
参数 | 描述 |
---|---|
item | 必须。查找的元素。 |
start | 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。 |
返回值:
类型 | 描述 |
---|---|
Number | 元素在数组中的位置,如果没有搜索到则返回 -1。 |
例子:
let arr = [1, 5, 3, 4, 5, 6]
arr.indexOf(5) // 1
arr.indexOf(5, 0) // 1
arr.indexOf(5, 2) // 4
arr.indexOf(5, 5) // -1
9. lastIndexOf()
定义和用法:
lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置,从该字符串的后面向前查找。
如果要检索的元素没有出现,则该方法返回 -1。
该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾(没有指定 start 参数时)。如果找到一个 item,则返回 item 从尾向前检索第一个次出现在数组的位置。
如果在数组中没找到指定元素则返回 -1。
语法:
array.lastIndexOf(item,start)
参数 | 描述 |
---|---|
item | 必需。规定需检索的字符串值。 |
start | 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的最后一个字符处开始检索。 |
返回值:
类型 | 描述 |
---|---|
Number | 元素在数组中的位置。 |
例子:
let arr = [1, 5, 3, 4, 5, 6]
arr.lastIndexOf(5) // 4
arr.lastIndexOf(5, 3) // 1
arr.lastIndexOf(3, 1) // -1
三、数组排序
10. reverse()
定义和用法:
reverse() 方法用于颠倒数组中元素的顺序。
语法:
array.reverse()
返回值:
类型 | 描述 |
---|---|
Array | 颠倒顺序后的数组 |
例子:
let arr = [1, 5, 3, 4, 5, 6]
arr.reverse() // [6, 5, 4, 3, 5, 1]
console.log(arr) // [6, 5, 4, 3, 5, 1]
11. sort
定义和用法:
sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序。
默认排序顺序为按字母升序。
**注意:**当数字是按字母顺序排列时"40"将排在"5"前面。
使用数字排序,你必须通过一个函数作为参数来调用,函数指定数字是按照升序还是降序排列。
注意: 这种方法会改变原始数组!
语法:
array.sort(sortfunction)
参数 | 描述 |
---|---|
sortfunction | 可选。规定排序顺序。必须是函数。 |
返回值:
类型 | 描述 |
---|---|
Array | 对数组的引用。请注意,数组在原数组上进行排序,不生成副本。 |
例子:
// 字母排序
let arr = ['d','a','e','f','c','b']
//升序
arr.sort() // ["a", "b", "c", "d", "e", "f"]
//降序
arr.reverse() // ["f", "e", "d", "c", "b", "a"]
//数字排序
let arr = [10, 5, 33, 42, 545, 46]
//如果使用此函数给数字排序,必须要通过一个函数作为参数来调用,否则只会以第一个数字进行排序
arr.sort() // [10, 33, 42, 46, 5, 545]
//通过函数作为参数调用,升序
arr.sort((a, b)=>{
return a - b
}) // [5, 10, 33, 42, 46, 545]
//通过函数作为参数调用,降序
arr.sort((a, b)=>{
return b - a
}) // [545, 46, 42, 33, 10, 5]
四、数组转字符串
12. toString()
定义和用法:
toString() 方法可把数组转换为字符串,并返回结果。数组中的元素之间用逗号分隔。
语法:
array.toString()
返回值:
类型 | 描述 |
---|---|
String | 数组的所有值用逗号隔开 |
例子:
let arr = [1, 2, 3, 4, 5]
arr.toString() // "1,2,3,4,5"
13. join()
定义和用法:
join() 方法用于把数组中的所有元素转换一个字符串,通过参数指定的分隔符进行分隔。
语法:
array.join(separator)
参数 | 描述 |
---|---|
separator | 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。 |
返回值:
类型 | 描述 |
---|---|
String | 返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的。 |
例子:
let arr = [1, 2, 3, 4, 5]
// 不使用分隔符
arr.join() // "1,2,3,4,5"
// 使用分隔符
arr.join('-') // "1-2-3-4-5"
arr.join('*') // "1*2*3*4*5"
五、判断是否为数组
14. isArray()
定义和用法:
isArray() 方法用于判断一个对象是否为数组。
如果对象是数组返回 true,否则返回 false。
语法:
Array.isArray(obj)
参数 | 描述 |
---|---|
obj | 必需,要判断的对象。 |
返回值:
类型 | 描述 |
---|---|
布尔值 | 如果对象是数组返回 true,否则返回 false。 |
例子:
let arr = [1, 2, 3, 4, 5]
let str = '12345'
let obj = {}
let bool = false
Array.isArray(arr) // true
Array.isArray(str) // false
Array.isArray(obj) // false
Array.isArray(bool) // false
六、遍历检测数组元素返回处理后的数组
15. forEach()
定义和用法:
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
语法:
array.forEach(function(currentValue, index, arr), thisValue)
参数 | 描述 | |
---|---|---|
function(currentValue, index, arr) | 必需。 数组中每个元素需要调用的函数。 函数参数: currentValue 必需。当前元素 index 可选。 当前元素的索引值。 arr 可选。 当前元素所属的数组对象。 | |
thisValue | 可选。传递给函数的值一般用 “this” 值。 如果这个参数为空, “undefined” 会传递给 “this” 值 |
例子:
let arr = [1, 2, 3, 4, 5]
//使用for遍历
for(let i = 0; i < arr.length; i++){
console.log(arr[i], i)
// 1 0
// 2 1
// 3 2
// 4 3
// 5 4
}
//使用forEach遍历
arr.forEach((current, index)=>{
console.log(current, index)
// 1 0
// 2 1
// 3 2
// 4 3
// 5 4
})
// 计算总和
let sum = 0
arr.forEach((current, index)=>{
sum += current
})
console.log(sum) //15
16. every()
定义和用法:
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
every() 方法使用指定函数检测数组中的所有元素:
- 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
- 如果所有元素都满足条件,则返回 true。
注意: every() 不会对空数组进行检测。
every() 不会改变原始数组。
语法:
array.every(function(currentValue,index,arr), thisValue)
参数 | 描述 |
---|---|
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数 函数参数: currentValue 必需。当前元素 index 可选。 当前元素的索引值。 arr 可选。 当前元素所属的数组对象。 |
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。 如果省略了 thisValue ,“this” 的值为 “undefined” |
返回值:
类型 | 描述 |
---|---|
布尔值 | 如果所有元素都通过检测返回 true,否则返回 false。 |
例子:
let arr = [1, 2, 3, 4, 5]
let bool = arr.every((val, index)=>{
return val < 10
})
//如果所有元素都满足条件,则返回 true
console.log(bool) // true
//如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测
let bool2 = arr.every((val, index)=>{
return val < 4
})
console.log(bool2) // false
17. some()
定义和用法:
some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:
- 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素,则返回false。
注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。
语法:
array.some(function(currentValue,index,arr),thisValue)
参数 | 描述 |
---|---|
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数 函数参数: currentValue 必需。当前元素 index 可选。 当前元素的索引值。 arr 可选。 当前元素所属的数组对象。 |
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。 如果省略了 thisValue ,“this” 的值为 “undefined” |
返回值:
类型 | 描述 |
---|---|
布尔值 | 如果数组中有元素满足条件返回 true,否则返回 false。 |
例子:
let arr = [1, 2, 3, 4, 5]
let bool = arr.some((val, index)=>{
return val < 2
})
//如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测
console.log(bool) // true
//如果没有满足条件的元素,则返回false
let bool2 = arr.some((val, index)=>{
return val < 1
})
console.log(bool2) // false
18. filter()
定义和用法:
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。
语法:
array.filter(function(currentValue,index,arr), thisValue)
参数 | 描述 |
---|---|
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数 函数参数: currentValue 必需。当前元素 index 可选。 当前元素的索引值。 arr 可选。 当前元素所属的数组对象。xxx |
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。 如果省略了 thisValue ,“this” 的值为 “undefined” |
返回值:
类型 | 描述 |
---|---|
数组 | 包含了符合条件的所有元素。 如果没有符合条件的元素则返回空数组。 |
例子:
let arr = [1, 2, 3, 3, 4, 4, 5]
//过滤小于3的数
let newArr = arr.filter((val, index)=>{
return val > 3
})
console.log(newArr) // [4, 5]
//去重
let newArr2 = arr.filter((val, index)=>{
return arr.indexOf(val) == index
})
console.log(newArr2) // [1, 2, 3, 4, 5]
19. map()
定义和用法:
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。
语法:
array.map(function(currentValue,index,arr), thisValue)
参数 | 描述 |
---|---|
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数 函数参数: currentValue 必需。当前元素 index 可选。 当前元素的索引值。 arr 可选。 当前元素所属的数组对象。xxxxxx |
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。 如果省略了 thisValue ,“this” 的值为 “undefined” |
返回值:
类型 | 描述 |
---|---|
数组 | 返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。 |
例子:
let arr = [1, 2, 3, 3, 4, 4, 5]
let newArr = arr.map((val, index)=>{
return val * 2
})
console.log(newArr) // [2, 4, 6, 6, 8, 8, 10]
20. reduce()
定义和用法:
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce() 可以作为一个高阶函数,用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
语法:
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数 | 描述 |
---|---|
function(total,currentValue, currentIndex,arr) | 必须。用于执行每个数组元素的函数。 函数参数: total 必需。初始值, 或者计算结束后的返回值。 currentValue 必需。当前元素 currentIndex 可选。 当前元素的索引值。 arr 可选。 当前元素所属的数组对象。 |
initialValue | 可选。传递给函数的初始值 |
返回值:
类型 | 描述 |
---|---|
xxx | 返回计算结果 |
例子:
let arr = [1, 2, 3, 4, 5]
let num = arr.reduce((total, val)=>{
return total += val
})
console.log(num) // 15
21. reduceRight()
定义和用法:
reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
注意: reduce() 对于空数组是不会执行回调函数的。
语法:
array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
参数 | 描述 |
---|---|
function(total,currentValue, currentIndex,arr) | 必须。用于执行每个数组元素的函数。 函数参数: total 必需。初始值, 或者计算结束后的返回值。 currentValue 必需。当前元素 currentIndex 可选。 当前元素的索引值。 arr 可选。 当前元素所属的数组对象。 |
initialValue | 可选。传递给函数的初始值 |
返回值:
类型 | 描述 |
---|---|
xxx | 返回计算结果 |
例子:
let arr = [1, 2, 3, 4, 5]
//reduce
let numReduce = arr.reduce((total, val)=>{
return total -= val
})
//reduceRight
let numReduceRight = arr.reduceRight((total, val)=>{
return total -= val
})
console.log(numReduce, numReduceRight) //-13, -5
七、ES6新增方法
. xxxx
定义和用法:
xxx。
语法:
xxx
参数 | 描述 |
---|---|
xxx | xxx |
返回值:
类型 | 描述 |
---|---|
xxx | xxx |
例子:
xxxx