Js数组常用方法总结
1.改变原数组的方法
1.1改变数组长度的方法
-
push(element1, ..., elementN)： 将一个或多个元素添加到数组的末尾，并返回新的长度
push() 向数组的末尾添加一个或更多元素，并返回新的长度 原数组会改变 var a = [1,2,3] var b = a.push('d') console.log(a) //[ 1, 2, 3, 'd' ] console.log(b) //4 -
pop()： 从数组的末尾删除最后一个元素，并返回该元素的值。
pop() 删除数组的最后一个元素 返回最后一个元素 原数组会改变 var a = [1,2,3,4,5,6] var b = a.pop() console.log(a) //[ 1, 2, 3, 4, 5 ] console.log(b) //6 -
unshift(element1, ..., elementN)： 将一个或多个元素添加到数组的开头，并返回新的长度。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度 原数组会改变 var a = [1,2,3] var b = a.unshift('00') console.log(a) //[ '00',1, 2, 3 ] console.log(b) //4 -
shift()： 从数组的开头删除第一个元素，并返回该元素的值。
shift() 删除数组的第一个元素 返回最后第一个元素 原数组会改变 var a =[0,1,2,3,4,5] var b = a.shift() console.log(a) //[ 1, 2, 3, 4, 5 ] console.log(b) //0 -
splice(start, deleteCount, item1, ..., itemN)： 从指定位置开始删除元素，并可以添加新的元素。返回删除的元素组成的数组。
参数：删除 (下标1，下标2) 替换(开始下标,长度,替换数字) 插入 (开始下标，0，添加数字) var a = ['a','b','c','d','e'] var b = a.splice(0,2) var c = a.splice(2,2,99) var d = a.splice(3,0,77) console.log(a) //[ 'c', 'd', 'e' ] console.log(b) //[ 'a', 'b' ] console.log(a) //[ 'a', 'b', 99, 'e' ] console.log(c) //[ 'c', 'd' ] console.log(a) //[ 'a', 'b', 'c', 77, 'd', 'e' ] console.log(d) //[]
1.2不改变数组长度的方法：
-
reverse()： 反转数组的顺序。
reverse() 反转数组 颠倒数组中元素的顺序 原数组会改变 var a = [1,2,3] var b = a.reverse() console.log(a) //[ 3, 2, 1 ] console.log(b) //[ 3, 2, 1 ] -
sort(compareFunction)： 对数组进行排序，可以传入一个比较函数来定义排序规则。
var a = [5,2,9,7,6,1,0,3] a.sort(function(a,b){ return a-b//从小到大 }) console.log(a) //[0,1,2,3,5,6,7,9] a.sort(function(a,b){ return b-a //从大到小 }) console.log(a) //[9,7,6,5,3,2,1,0] -
fill()： 用静态值填充数组的所有元素。
let a = [1, 2, 3, 4, 5]; a.fill(0); // a现在是 [0, 0, 0, 0, 0]
2.不改变原数组的方法
2.1不修改数组长度的方法
-
concat(array1, array2, ..., arrayN)： 将数组与其他数组或值连接，返回新的数组，不修改原始数组。
concat() 合并数组 返回一个新的数组 原数组不会改变 （应用页面加载更多） var a = ['a','b','c'] var b = [1,2,3] var c = a.concat(b,[4,5,6]) console.log(c) // ['a','b','c',1,2,3,4,5,6] -
slice(start, end)： 从数组中截取一部分，返回新的数组，不修改原始数组。
slice() 截取数组 返回新数组 slice(参数1，参数2) 原数组不会发生改变 参数1：开始下标 参数2：结束下标 var a = [0,1,2,3,4,5,6,7] var b = a.slice(1,3) var c = a.slice(-1) var d = a.slice(2) console.log(a) //[0,1,2,3,4,5,6,7] console.log(b) //[ 1, 2 ] console.log(c) //[ 7 ] console.log(d) //[ 2, 3, 4, 5, 6, 7 ]
2.2遍历数组的方法
-
forEach(callback(currentValue, index, array))： 对数组的每个元素执行提供的函数。
forEach() forEach(function (item, index, array) 1.用来遍历索引数组 参数1: 每次取出的单元值 参数2: 每次取出的单元索引 参数3: 数组本身 2.参数是一个回调函数，并且会给我们的回调函数遍历的传入三个实参（原数组当前元素的值、当前的下标、原数组） 3.无返回值 4.不改变原数组 let a = [1, 2, 3]; a.forEach((element, index) => { console.log(`Index ${index}: ${element}`); }); // 输出: // Index 0: 1 // Index 1: 2 // Index 2: 3 -
map(callback(currentValue, index, array))： 创建一个新数组，其中每个元素都是对原始数组元素调用一个提供的函数的结果。
map() 1.读取原数组中的每个值，可进行修改，之后生成一个新数组返回 2.返回一个数组 3.不改变原数组 let a = [1, 2, 3]; let b = a.map(element => element * element); // b [1, 4, 9] -
filter(callback(element, index, array))： 创建一个新数组，其中包含通过提供的函数实现的测试的所有元素。
filter()过滤 1.遍历数组元素，将符合条件的元素过滤出来，追加到新的数组中 2.返回一个新的数组 3.参数任然是一个回调函数 4.不改变原数组 let a = [1, 2, 3, 4, 5]; let b = a.filter(element => element % 2 === 0); // b现在是 [2, 4] -
reduce(callback(accumulator, currentValue, index, array), initialValue):
callback 是一个累加函数，用来操作每个元素。 accumulator 是累加器，累积回调函数的结果。 currentValue 是当前被处理的元素。 initialValue 是可选的，是初始值，如果提供了初始值，则它将作为第一次调用回调函数时的第一个参数。 reduce() 1.遍历数组，将元素跟储存值进行处理，并返储存值 2.参数是一个回调函数和一个储存初始值，回调函数有四个参数：储存值、元素值、元素下标、数组，回调函数需要返回值 3.返回一个值（储存值） 4.不改变原数组 // 计算数组元素的总和 const numbers = [1, 2, 3, 4]; const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // 输出 10，因为 1 + 2 + 3 + 4 = 10
2.3检索元素的方法
-
indexOf(searchElement, fromIndex)： 返回数组中第一个匹配项的索引，如果没有找到则返回 -1。
indexOf() 查找 参数在数组是否存在 存在返回下标 不存在返回-1 var a = ['a','b','c','d','e'] var b = a.indexOf('c') var c = a.indexOf('p') if(a.indexOf('e') == -1){ console.log('不存在这个参数') }else{ console.log('存在这个参数') } //存在这个参数 console.log(a) //[ 'a', 'b', 'c', 'd', 'e' ] console.log(b) //2 console.log(c) //-1 -
lastIndexOf(searchElement, fromIndex)： 返回数组中最后一个匹配项的索引，如果没有找到则返回 -1。
let a = [1, 2, 3, 4, 5, 2]; let lastIndex = a.lastIndexOf(2); // lastIndex的值是 5 -
includes(element, fromIndex)： 判断数组是否包含指定的元素，返回布尔值。
includes 判断数组中是否包含指定值，如果包含返回true，否则返回false Array.includes(value) 参数: 要检测的值 返回值: arr如果包含value则返回true，否则返回false let a = [1, 2, 3, 4, 5]; let includes = a.includes(3); // includes的值是 true -
every(callback(element, index, array), thisArg):检测数组中的所有元素是否满足指定条件。它返回一个布尔值。
callback 是一个测试函数，用来测试每个元素。
thisArg 是可选的，是执行回调函数时的 this 值。
every()
1.检查数组的每个值是否都满足要求，自带循环，每次循环都会调用一次回调函数
2.参数是一个回调函数，并且会给我们的回调函数遍历的传入三个实参（原数组当前元素的值、当前的下标、原数组）
3.返回true或false
4.不改变原数组
// 检查数组中的所有元素是否都大于 10
const numbers = [12, 15, 18, 20];
const result = numbers.every((element) => element > 10);
console.log(result); // 输出 true，因为所有元素都大于 10
- some(callback(element, index, array), thisArg):检测数组中的某些元素是否满足指定条件。它返回一个布尔值。
callback 是一个测试函数，用来测试每个元素。
thisArg 是可选的，是执行回调函数时的 this 值。
Some()
1.检查数组的元素是否有满足条件的（刚好跟every相反）
2.参数是一个回调函数，并且会给我们的回调函数遍历的传入三个实参（原数组当前元素的值、当前的下标、原数组）
3.返回true或false
4.不改变原数组
// 检查数组中是否有元素大于 20
const numbers = [12, 15, 18, 25];
const result = numbers.some((element) => element > 20);
console.log(result); // 输出 true，因为有一个元素大于 20
2.4数组转换的方法
-
toString()： 将数组转换为字符串。
let a = [1, 2, 3]; let arrayString = a.toString(); // arrayString的值是 "1,2,3" -
join(separator)： 将数组的所有元素连接为一个字符串，并使用指定的分隔符。
join() 将数组的元素组成一个字符串 把数组的所有元素放入一个字符串 元素通过指定的分隔符进行分隔 默认以逗号为分隔 原数组不会改变 var a = [1,2,3] var b = a.join() var c = a.join('@') console.log(a) //[ 1, 2, 3 ] console.log(b) //1,2,3 console.log(c) //1@2@3
2.5其他方法
-
isArray(obj)： 判断一个对象是否为数组。
let a = [1, 2, 3]; let isArr = a.isArray(myArray); // isArr的值是 true -
find(callback(element, index, array))： 返回数组中第一个满足提供的测试函数的元素值，如果没有找到则返回
undefined。let a = [1, 2, 3, 4, 5]; let foundElement = a.find(element => element > 2); // foundElement的值是 3
