1. concat(),不改变原数组
arr1.concat(arr2) 连接两个或多个数组,返回一个新的数组
const arr1 = [1, 2, 3] const arr2 = [4, 5] const newArr = arr1.concat(arr2) console.log(newArr) // [1, 2, 3, 4, 5]
2. join(),不改变原数组
join(str) 数组转字符串,方法只接受一个参数,默认为逗号分隔符
conat arr = [1, 2, 3] console.log(arr) // [1, 2, 3] console.log(arr.join()) // 1,2,3 console.log(arr.join(:)) // 1:2:3
- tips: join() 实现重复字符串
const str = new Array(4).join('啦') console.log(str) // 啦啦啦
- 长度为4的数组,有三个空格,所以是三个啦啦啦
3. push() & unshift() 添加元素操作,改变了原数组
push() 向数组的末尾添加一个或多个元素,并返回新的长度
const arr = [1, 2] console.log(arr.push(3)) // 3 console.log(arr) // [1, 2, 3]
unshift() 向数组的开头添加一个或多个元素,并返回新的长度
const arr = [1, 2] console.log(arr.unshift(3)) // 3 console.log(arr) // [3, 1, 2]
4. shift() & pop() 删除元素操作,改变了原数组
shift() 删除并返回数组第一个元素
const arr = [1, 2, 3] const deleteItem = arr.shift() console.log(arr) // [2, 3] console.log(deleteItem) // 1
pop() 删除并返回数组最后一个元素
const arr = [1, 2, 3] const deleteItem = arr.pop() console.log(arr) // [1, 2] console.log(deleteItem) // 3
5. sort() 数组排序,改变原数组
sort() 对数组的元素进行排序
const arr = [2, 4, 3, 1] console.log(arr.sort()) // [1, 2, 3, 4] console.log(arr) // [1, 2, 3, 4]
自定义排序
- tips: sort() 不按照数组元素数值的大小对数字进行排序,是按照字符编码的顺序进行排序,那怎么样根据元素数值大小进行排序呢?
const arr = [2, 4, 3, 1] const arr1 = [...arr].sort((a, b) => a - b) const arr2 = [...arr].sort((a, b) => b - a) console.log(arr1) // [1, 2, 3, 4] console.log(arr2) // [4, 3, 2, 1]
6. reverse() 反转数组,改变原数组
reverse() 颠倒数组中元素的顺序
const arr = [2, 4, 3, 1] console.log(arr.reverse()) // [1, 3, 4, 2] console.log(arr) // [1, 3, 4, 2]
7. slice() 截取数组,不改变原数组
arr.slice(start, end) 从 start 处开始选取(不包括该元素),从 end 处结束选取,如果为空的话,那么选取从 start 到数组结束的所有元素。负数代表方向,从数组尾部开始计算位置
const arr = [1, 2, 3, 4, 6] console.log(arr.slice(1)) // [2, 3, 4, 6] console.log(arr.slice(1, -2)) // [2, 3] console.log(arr.slice(-3, 1)) // [2] console.log(arr) // [1, 2, 3, 4, 6]
8. splice() 更新数组,改变原数组
arr.splice(index, howmany, item1, ..., itemX) 向 / 从数组中添加 / 删除项目,然后返回被删除的项目,返回含有被删除的元素的数组,若没有删除元素则返回一个空数组。
- [index] 必传项,整数,规定添加 / 删除项目的位置,负数表示从数组结尾处规定位置
- [howmany] 必传项,要删除的项目数量。如果设置为 0,则不会删除项目
- [item1, ..., itemX] 可选。向数组添加的新项目。
const arr = [1, 2, 3] const arr1 = arr.splice(2, 1) console.log(arr1) // [3] console.log(arr) // [1, 2] const arr2 = arr.splice(1, 0, 'ss') console.log(arr2) // ['ss'] console.log(arr) // [1,'ss', 2]
9. indexOf() & lastIndexOf() 索引方法,不改变原数组
两个方法都是返回要查找的项所在数组中首次出现的位置,没找到的话就返回 - 1。
arr.indexOf(item, start) 从数组的开头开始向后寻找。
arr.lastIndexOf(item, start) 从数组的末尾开始向前查找。
- [item] 必须项,查找的元素
- [start] 可选,在数组中开始检索的位置,默认 0
const arr = [2, 4, 1, 9, 1, 2]; console.log(arr.indexOf(2)); // 0 console.log(arr.lastIndexOf(1)); // 4 console.log(arr.indexOf(3)); // -1
10. find() & findIndex() 根据函数内的判断返回找到的数组内的第一个元素。不改变原数组。 (es6 新增方法)
arr.find((currentValue, index, arr) => {}) 返回通过测试函数内判断的数组的第一个元素的值。当数组中的元素在测试函数中返回 true 时,返回符合条件的元素,之后不再调用测试函数判断剩下的元素,如果每个元素都执行了测试函数,没有符合的元素,则返回 undefined。
- 对于空数组不执行
- [currentValue] 必须项,当前元素
- [index] 可选。当前元素的索引值
- [arr] 可选。当前元素所属的数组对象
const arr = [1, 2, 3, 4] const findItem = arr.find((item, index) => { return item > 2 }) const findItem1 = arr.find((item, index) => { return item > 5 }) console.log(findItem) // 3 console.log(findItem1) // undefined
findIndex((currentValue, index, arr) => {}) 用法和 find() 一样,不同的是不是返回数组内元素,而是返回符合测试函数判断的元素索引值,如果没有符合条件的元素返回 -1。
const arr = [1, 2, 3, 4] const findItemIndex = arr.findIndex((item, index) => { return item > 2 }) const findItemIndex1 = arr.findIndex((item, index) => { return item > 5 }) console.log(findItemIndex) // 2 console.log(findItemIndex1) // -1
11. forEach()、map()、filter()、some()、every() 迭代方法,不改变原数组。
arr.forEach((currentValue , index , arr) => {}, thisValue) 对数组进行遍历循环,这个方法没有返回值。
- 对于空数组不执行
- [currentValue] 必须项,当前元素
- [index] 可选。当前元素的索引值
- [arr] 可选。当前元素所属的数组对象
- [thisValue] 可选。传递给函数的值一般用 "this" 值。如果这个参数为空, "undefined" 会传递给 "this" 值。
const arr = [1,4,7,10]; arr.forEach((currentValue, index, arr) => { console.log(index + "--" + currentValue + "--" + (arr === Arr)) }) // 输出: // 0--1--true // 1--4--true // 2--7--true // 3--10--true
arr.map((currentValue , index , arr) => {}, thisValue) 指 “映射”,方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。(不会改变数组长度,和原数组长度保持一致)
const arr = [1, 2, 3] const arr1 = arr.map((currentValue) => { return currentValue + 1 }) console.log(arr) // [1, 2, 3] console.log(arr1) // [2, 3, 4]
arr.filter((currentValue , index , arr) => {}, thisValue) “过滤” 功能,方法
创建一个新数组,其包含通过所提供函数实现的测试的所有元素。(可以改变数组长度,不必和原数组长度保持一致)
const arr = [1, 2, 3] const arr1 = arr.filter((currentValue) => { return currentValue > 1 }) const arr2 = arr.filter((currentValue) => { return currentValue > '1' }) console.log(arr) // [1, 2, 3] console.log(arr1) // [2, 3] console.log(arr2) // [2, 3]
- arr1 和 arr2 结果一致,可以看出函数支持弱等于,不是必须全等于
arr.some((currentValue , index , arr) => {}, thisValue) 判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回 true,不再往下执行。
const arr = [1, 2, 3] const str = arr.some((currentValue) => { console.log(currentValue) return currentValue > 1 }) // 1 // 2 console.log(str) // true
arr.every((currentValue , index , arr) => {}, thisValue) 判断数组中的每一项是否都满足条件,全部符合就会返回 true,否则 false。
const arr = [1, 2, 3] const str = arr.every((currentValue) => { return currentValue > 1 }) console.log(str) // false
12. reduce()、reduceRight() 归并方法,不改变原数组
- 这两个方法都会迭代数组中的所有项,然后生成一个最终返回值。他们都接收两个参数,第一个参数是每一项调用的函数,函数接受四个参数分别是初始值,当前值,索引值,和当前数组,函数需要返回一个值,这个值会在下一次迭代中作为初始值。第二个参数是迭代初始值,参数可选,如果缺省,初始值为数组第一项,从数组第一个项开始叠加,缺省参数要比正常传值少一次运算。
- [total] 必须项,初始值, 或者计算结束后的返回值。
- [cur] 必须项,当前元素。
- [index] 可选。当前元素的索引值
- [arr] 可选。当前元素所属的数组对象
- [initialValue] 可选。传递给函数的初始值。
arr.reduce((total , cur , index , arr) => {}, initialValue) 从数组的第一项开始,逐个遍历到最后
arr.reduceRight((total , cur , index , arr) => {}, initialValue) 从数组的最后一项开始,向前遍历到第一项
const arr = [1,2,3,4,5] const result1 = arr.reduce((total,cur,index,arr) => { console.log("total:" + total + ",cur:" + cur + ",index:" + index) return total + cur }) console.log("结果:" + result1) // 输出 // total:1,cur:2,index:1 // total:3,cur:3,index:2 // total:6,cur:4,index:3 // total:10,cur:5,index:4 // 结果:15 const result2 = arr.reduce((total,cur,index,arr) => { console.log("total:" + total + ",cur:" + cur + ",index:" + index) return total + cur },10) console.log("结果:" + result2) // 输出 // total:10,cur:1,index:0 // total:11,cur:2,index:1 // total:13,cur:3,index:2 // total:16,cur:4,index:3 // total:20,cur:5,index:4 // 结果:25
传不传第二个参数的区别
- 从上面代码我们可以看出,
- 当我们不给函数传递迭代初始值时初始值 total 为数组第一项,函数从数组第二项开始迭代;
- 若我们给函数传递迭代初始值,则函数从数组第一项开始迭代。
13. keys()、values()、entries() 遍历数组方法, 不改变原数组。 (es6 新增方法)
键名
keys() 对键名的遍历
const arr = ["a","b","c","d"] for(let i of arr.keys()){ console.log(i) } //打印: // 0 // 1 // 2 // 3
键值
values() 对键值的遍历
const arr = ["a","b","c","d"] for(let i of arr.values()){ console.log(i) } //打印: // a // b // c // d
键值对
entries() 是对键值对的遍历。
const arr = ["a","b","c","d"] for(let i of arr.entries()){ console.log(i) } //打印: // [0, "a"] // [1, "b"] // [2, "c"] // [3, "d"] for(let [idx,item] of arr.entries()){ console.log(idx + ":"+item) } //打印: // 0:a // 1:b // 2:c // 3:d
14. includes() 不改变原数组。 (es6 新增方法)
arr.includes(searchElement , fromIndex) 用来判断一个数组是否包含一个指定的值,如果是返回 true,否则 false。
- [searchElement] 可选。需要查找的元素值。
- [fromIndex] 可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
const arr = ["a","b","c","d"] const result1 = arr.includes("b") const result2 = arr.includes("b",2) const result3 = arr.includes("b",-1) const result4 = arr.includes("b",-3) console.log(result1) // true console.log(result2) // false console.log(result3) // flase console.log(result4) // true
15. Array.from() (es6 新增方法)
Array.from() 用于类似数组的对象(即有 length 属性的对象)和可遍历对象转为真正的数组。
const json ={ '0':'喜', '1':'欢', '2':'你', length:3 } const arr = Array.from(json) console.log(arr) // ["喜", "欢", "你"]
16. Array.of() (es6 新增方法)
Array.of() 将一组值转变为数组,参数不分类型,只分数量,数量为 0 返回空数组。
let arr1 = Array.of(1,2,3) let arr2 = Array.of([1,2,3]) let arr3 = Array.of(undefined) let arr4 = Array.of() console.log(arr1) // [1, 2, 3] console.log(arr2) // [[1, 2, 3]] console.log(arr3) // [undefined] console.log(arr4) // []
17. fill() 改变原数组。 (es6 新增方法)
arr.fill(value, start, end) 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
- [value] 必需。填充的值。
- [start] 可选。开始填充位置。如果这个参数是负数,那么它规定的是从数组尾部开始算起。
- [end] 可选。停止填充位置 (默认为 array.length)。如果这个参数是负数,那么它规定的是从数组尾部开始算起。
let arr = [1,2,3,4,5,6] arr.fill(0) // [0, 0, 0, 0, 0, 0] arr.fill(0,1) // [1, 0, 0, 0, 0, 0] arr.fill(0,1,2) // [1, 0, 3, 4, 5, 6] arr.fill(0,-1) // [1, 2, 3, 4, 5, 0] arr.fill(0,1,-1) // [1, 0, 0, 0, 0, 6]
18. copyWithin() 不改变原数组。 (es6 新增方法)
arr.copyWithin(target, start, end) 用于从数组的指定位置拷贝元素到数组的另一个指定位置中,会覆盖原有成员。
- [target] 必需。从该位置开始替换数据。
- [start] 可选。从该位置开始读取数据,默认为 0 。如果为负值,表示倒数。
- [end] 可选。到该位置前停止读取数据 (默认为 array.length)。如果为负值,表示倒数。
console.log([1, 2, 3, 4, 5, 6].copyWithin(0)); // [1, 2, 3, 4, 5, 6] console.log([1, 2, 3, 4, 5, 6].copyWithin(0, 1)); // [2, 3, 4, 5, 6, 6] console.log([1, 2, 3, 4, 5, 6].copyWithin(1, 3, 5)); // [1, 4, 5, 4, 5, 6] console.log([1, 2, 3, 4, 5, 6].copyWithin(1, 2, -1)); // [1, 3, 4, 5, 5, 6] console.log([1, 2, 3, 4, 5, 6].copyWithin(1, -4, 6)); // [1, 3, 4, 5, 6, 6]
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!