JavaScript数组常用方法

JavaScript数组常用方法

arr.push()
从后面添加元素，返回值为添加完后的数组的长度
let arr = [1, 2, 3];
console.log(arr.push(4)); // length = 6
console.log(arr); // [1, 2, 3, 4]

arr.unshift()
从前面添加元素，返回值是添加完后的数组的长度
let arr = [1,2,3];
console.log(arr.unshift(4)); // length = 6
console.log(arr); // [4, 1, 2, 3];

arr.pop()
从后面删除元素，只能是一个，返回值是删除的元素
let arr = [1, 2, 3, 4];
console.log(arr.pop()); // 4
console.log(arr); // [1, 2, 3]

arr.shift()
从前面删除元素，只能删除一个，返回值是删除的元素
let arr = [1, 2, 3, 4]；
console.log(arr.shift()); // 1
console.log(arr); // [2, 3, 4]

arr.splice(i,n)
删除从i(索引值)开始之后的那个元素，返回值是删除的元素
let arr = [1, 2, 3, 4, 5];
console.log(arr.splice(2,2)); // [3, 4]
console.log(arr); // [1, 2, 5]

arr.concat()
连接两个数组，返回值为连接后的新数组
let arr = [1, 2, 3, 4];
console.log(arr.concat([5, 6])); // [1, 2, 3, 4, 5, 6]
console.log(arr); // [1, 2, 3, 4, 5]

–es6中可以使用数组合并、克隆
let arr1 = [1, 2, 3];
let arr2 = [4, 5];
let arr3 = […arr1, 4, 5]; //克隆
console.log(arr3); // [1, 2, 3, 4, 5]
let arr4 = […arr1, …arr2]; // 合并
console.log(arr4); // [1, 2, 3, 4, 5]

str.split()
let str = “a-b-c-d”;
let arr = str.split("-");
console.log(arr); // [‘a’, ‘b’, ‘c’, ‘d’]

arr.sort()
数组排序,，返回值是排序后的数组
let arr = [4, 2, 8, 6, 10]
// arr.sort((a, b) => a - b) 等价于 arr.sort((a, b) => {return a - b})
console.log(arr.sort((a, b) => a - b)); // [2, 4, 6, 8, 10]
console.log(arr.sort((a, b) => b - a)); // [10, 8, 6, 4, 2]

arr.reverse()
数组反转，返回值是反转后的数组
let arr = [1, 2, 3, 4];
console.log(arr.reverse()); // [4, 3, 2, 1]

arr.slice(start,end)
切除索引值start到end的数据，不包含end索引的值，返回值是切除后的数组
let arr = [1, 2, 3, 4]
console.log(arr.slice(1, 3)); // [2,3] 从数据2开始到数据4结束,，不包含数据4
console.log(arr);// [1,2,3,4,5]

arr.forEach(callback)
遍历数组，无return，并且不会改变原数组
callback的参数
value – 当前索引的值
index – 索引
array – 原数组
let arr = [1, 2, 3, 4];
arr.forEach( (value, index, array) => {
// 编写需求操作
value= value* 2
});
console.log(arr); // [1, 2, 3, 4]

arr.map(callback)
映射数组(遍历数组)，有return，返回一个新数组
callback的参数：
ivalue – 当前索引的值
index – 索引
array – 原数组
let arr = [1, 2, 3, 4];
let res = arr.map((value, index, arr)=>{
return value * 2;
})
console.log(arr); // [1, 2, 3, 4]
console.log(res); // [2, 4, 6, 8]

arr.filter(callback)
过滤数组，返回一个满足要求的数组
callback的参数：
value – 当前索引的值
index – 索引
let arr = [1, 2, 3, 4];
let res = arr.filter((value, index) => value < 3);
console.log(res); // [1, 2]

arr.every(callback)
依据判断条件，数组的元素是否全满足，若满足则返回ture
callback的参数：
value – 当前索引的值
index – 索引
复制代码
let arr = [1, 2, 3, 4]
let res = arr.every((value, index) => value < 3);

arr.some()
依据判断条件，数组的元素是否有一个满足，若有一个满足则返回ture
callback的参数：
value – 当前索引的值
index – 索引
复制代码
let arr = [1,2,3,4,5]
let res = arr.some( (value, index) => value < 3)
console.log(res); // true

arr.keys()
遍历数组的键名
let arr = [1, 2, 3, 4];
let arr2 = arr.keys();
for (let key of arr2) {
console.log(key); // 0,1,2,3
}

arr.values()
遍历数组键值
let arr = [1, 2, 3, 4];
let res= arr.values();
for (let val of res) {
console.log(val); // 1,2,3,4
}

arr.entries()
遍历数组的键名和键值
let arr = [1, 2, 3, 4];
let arr1 = arr.entries()
for (let e of arr1) {
console.log(e);
}
entries() 方法返回迭代数组。
迭代数组中每个值 前一个是索引值作为 key， 数组后一个值作为 value。

arr.reduce(callback, initialValue)
迭代数组的所有项，累加器，数组中的每个值（从左到右）合并，最终计算为一个值
参数：
callback:
total 必选 – 上一次调用回调返回的值，或者是提供的初始值（initialValue）
currentValue 必选 – 数组中当前被处理的数组项
currentIndex 可选 – 当前数组项在数组中的索引值
arr 可选 – 原数组
initialValue: 可选 – 初始值
实行方法：回调函数第一次执行时，preValue 和 curValue 可以是一个值，如果 initialValue 在调用 reduce() 时被提供，那么第一个 preValue 等于 initialValue ，并且curValue 等于数组中的第一个值；如果initialValue 未被提供，那么preValue 等于数组中的第一个值.
let arr = [1, 2, 3, 4];
let res = arr.reduce((total,currentValue, currentIndex, arr) => preValue + curValue, 10); // 5是initialValue
console.log(res); // 20
1.计算数组中每个元素出现的次数
let names = [‘peter’, ‘tom’, ‘mary’, ‘bob’, ‘tom’,‘peter’];
let nameNum = names.reduce((total, currentValue)=>{
if(total[currentValue]) {
total[currentValue]++;
}else{
total[currentValue] = 1;
}
return total;
},{});
console.log(nameNum); //{ peter: 2, tom: 2, mary: 1, bob: 1 }
2.数组去重
let arr = [1, 1, 2, 2, 3, 3, 4, 4];
let newArr = arr.reduce((total, currentValue ) => {
if(!total.includes(currentValue)){
return total.concat(currentValue);
}else{
return total;
}
},[]);
console.log(newArr); // [1, 2, 3, 4]

arr.indexOf()
查找某个元素的索引值，若元素有重复的，则返回第一个查到的索引值，若该元素不存在，则返回 -1
let arr = [1, 2, 3, 4, 2];
let res = arr.indexOf(2);
console.log(res); // 1
let res = arr.indexOf(5);
console.log(res);// -1

arr.lastIndexOf()
查找某个元素的索引值，若元素有重复的，则返回最后一个查到的索引值，若该元素不存在，则返回 -1
let arr = [1, 2, 3, 4, 2];
let res = arr.lastIndexOf(2)
console.log(res); // 5
let res = arr.lastIndexOf(5)
console.log(res); // -1

arr.find(callback)
找到第一个符合条件的数组成员
let arr = [1, 2, 3, 4, 2, 4];
let res = arr.find((value, index, array) => value > 2);
console.log(res); // 3

arr.findIndex(callback)
let arr = [1, 2, 3, 4];
let res = arr.findIndex((value, index, array) => value > 3);
console.log(res) // 3

arr.includes()
判断数中是否包含给定的值
let arr = [1, 2, 3, 4];
let res = arr.includes(2)
console.log(res); // ture
let res = arr.includes(9)
console.log(res); // false
let res = [1,2,3,NaN].includes(NaN)
console.log(res); // true
ps:与indexOf()的区别：
indexOf()返回的是数值，而includes()返回的是布尔值
indexOf() 不能判断NaN，返回为-1 ，includes()则可以判断