影响原数组方法(变异方法)
这些方法会改变原数组
push()
push()方法用于向数组末尾添加一个或多个元素,并返回修改后的数组的新长度。
const list = [1, 2];
const length = list.push(3,4,5);
console.log(list); //[1,2,3,4,5]
console.log(length); //5
const list = [1, 2];
const length = list.push(3,4,5);
console.log(list); //[1,2,3,4,5]
console.log(length); //5
pop()
pop() 方法用于删除并返回数组的最后一个元素。
const list = [1,2,3,4];
const lastElement = list.pop();
console.log(list); //[1,2,3]
console.log(lastElement); //4const list = [1,2,3,4];
const lastElement = list.pop();
console.log(list); //[1,2,3]
console.log(lastElement); //4
shift()
移除并返回数组开头的元素
const array = [1, 2, 3];
const firstElement = array.shift();
console.log(array); // [2, 3]
console.log(firstElement); // 1const array = [1, 2, 3];
const firstElement = array.shift();
console.log(array); // [2, 3]
console.log(firstElement); // 1
unshift()
在数组开头添加一个或多个元素,并返回新的长度
const array = [1, 2, 3];
const newLength = array.unshift(0, 0);
console.log(array); // [0, 0, 1, 2, 3]
console.log(newLength); // 5const array = [1, 2, 3];
const newLength = array.unshift(0, 0);
console.log(array); // [0, 0, 1, 2, 3]
console.log(newLength); // 5
splice()
splice() 方法用于从数组中删除、替换或添加元素,并返回被删除的元素组成的数组(如果有删除的话)
array.splice(start, deleteCount, item1, item2, ...)
start表示要修改的起始位置,deleteCount表示要删除的元素个数,item1、item2等表示要添加的元素。如果deleteCount为0,则表示只添加元素,不删除元素。
const array = [1, 2, 3, 4, 5];
const removed = array.splice(1, 2, "a", "b"); //从下标1开始删除2个元素并在重新插入“a”“b”两个元素
console.log(array); // [ 1, 'a', 'b',4, 5 ]
console.log(removed); // [ 2, 3 ]const array = [1, 2, 3, 4, 5];
const removed = array.splice(1, 2, "a", "b"); //从下标1开始删除2个元素并在重新插入“a”“b”两个元素
console.log(array); // [ 1, 'a', 'b',4, 5 ]
console.log(removed); // [ 2, 3 ]
reverse()
反转数组元素的顺序
const array = [1, 2, 3];
console.log(array.reverse()); // [3, 2, 1]const array = [1, 2, 3];
console.log(array.reverse()); // [3, 2, 1]
sort()
排序数组元素的顺序,
可以传入一个函数(不传则按照 Unicode 码点进行默认排序):函数接收两个参数,通常被称为 a 和 b,表示进行比较的两个元素。比较函数的返回值规则如下:(a,b)=>{return a-b}
- 如果返回值小于 0,则 a 排在 b 前面。
- 如果返回值等于 0,则 a 和 b 的相对位置不变。
- 如果返回值大于 0,则 a 排在 b 后面。
const array = [3, 1, 4, 1, 5, 9, 2];
array.sort();
console.log(array); // [1, 1, 2, 3, 4, 5, 9]
const array = [3, 1, 4, 1, 5, 9, 2];
array.sort((a,b)=>{return b-a});
console.log(array); // [9, 5, 4, 3, 2, 1,1]
const array = [3, 1, 4, 1, 5, 9, 2];
array.sort();
console.log(array); // [1, 1, 2, 3, 4, 5, 9]
const array = [3, 1, 4, 1, 5, 9, 2];
array.sort((a,b)=>{return b-a});
console.log(array); // [9, 5, 4, 3, 2, 1,1]
不影响原数组的方法
以下方法不会改变原始数组,而是返回新的数组。
concat()
合并两个或多个数组,返回一个新的数组
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];
const newArray = array1.concat(array2,array3);
console.log(newArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];
const newArray = array1.concat(array2,array3);
console.log(newArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
join()
将数组中的所有元素以指定的分隔符连接成一个字符串
const array = ["A", "B", "C"];
const result = array.join("-");
console.log(result); // "A-B-C"const array = ["A", "B", "C"];
const result = array.join("-");
console.log(result); // "A-B-C"
slice()
用于从数组中截取指定位置的元素,返回一个新的数组。
array.slice(start, end) ,其中,start和end都是可选参数,表示选取的元素的起始位置和结束位置。如果不传入参数则默认选取整个数组。该方法返回的是一个新的数组,包含从start到end(不包括end)的元素。
const array = ["A", "B", "C", "D", "E"];
const newArray1 = array.slice(1, 4);
const newArray2 = array.slice();
const newArray3 = array.slice(2);
const newArray4 = array.slice(5);
console.log(newArray1); // ["B", "C", "D"]
console.log(newArray2); // ["A", "B", "C", "D", "E"]
console.log(newArray3); // ["C", "D", "E"]
console.log(newArray4); // []const array = ["A", "B", "C", "D", "E"];
const newArray1 = array.slice(1, 4);
const newArray2 = array.slice();
const newArray3 = array.slice(2);
const newArray4 = array.slice(5);
console.log(newArray1); // ["B", "C", "D"]
console.log(newArray2); // ["A", "B", "C", "D", "E"]
console.log(newArray3); // ["C", "D", "E"]
console.log(newArray4); // []
toString()
把数组转换为字符串并以逗号隔开,并返回该字符串
const array = ["A", "B", "C"];
const result = array.toString();
console.log(result); // "A,B,C"const array = ["A", "B", "C"];
const result = array.toString();
console.log(result); // "A,B,C"
toLocaleString()
将数组转换为一个由数组元素组成的字符串,元素之间同样用逗号分隔,但是它会根据当前环境的语言和地区设置来决定元素的格式。
//根据当前环境的语言和地区设置来决定元素的格式
const arr = [123456.789, new Date()];
console.log(arr.toLocaleString()); //123,456.789,2023/5/29 07:57:19
const arr2 = [1000, 2000, 3000];
const str = arr2.toLocaleString();
console.log(str); //1,000,2,000,3,000//根据当前环境的语言和地区设置来决定元素的格式
const arr = [123456.789, new Date()];
console.log(arr.toLocaleString()); //123,456.789,2023/5/29 07:57:19
const arr2 = [1000, 2000, 3000];
const str = arr2.toLocaleString();
console.log(str); //1,000,2,000,3,000
遍历数组方法
forEach()
对数组中的每个元素执行一个回调函数
const array = [1, 2, 3, 4, 5];
array.forEach((element)=>{
console.log(element);
});const array = [1, 2, 3, 4, 5];
array.forEach((element)=>{
console.log(element);
});
map()
对数组中的每个元素执行一个回调函数,并返回一个新的数组。
const array = [1, 2, 3, 4, 5];
const newArray = array.map(function(element) {
return element * 2;
});
console.log(newArray); // [2, 4, 6, 8, 10]const array = [1, 2, 3, 4, 5];
const newArray = array.map(function(element) {
return element * 2;
});
console.log(newArray); // [2, 4, 6, 8, 10]
filter()
对数组中的每个元素执行一个回调函数,并返回一个符合条件的元素组成的新数组
const array = [1, 2, 3, 4, 5];
const newArray = array.filter(function(element) {
return element % 2 === 0;
});
console.log(newArray); // [2, 4]const array = [1, 2, 3, 4, 5];
const newArray = array.filter(function(element) {
return element % 2 === 0;
});
console.log(newArray); // [2, 4]
reduce()
对数组中的每个元素执行一个回调函数,并返回一个累加结果
array.reduce(callback, initialValue)
initialValue:初始值
callback可以接收四个参数,分别是:
- accumulator:累加器,用于存储上一次回调函数的返回值或初始值。
- currentValue:当前元素的值。
- currentIndex:当前元素的索引。
- array:数组对象本身。
const array = [1, 2, 3, 4, 5];
const sum = array.reduce(function(acc, element) {
return acc + element;
}, 0);
console.log(sum); // 15
//根据数组生成键值对
const array = [{id:1,value:'a'}, {id:2,value:'b'}];
const newArr = array.reduce(function(acc, item) {
console.log(item)
return {...acc,[item.id]:item}
}, {});
console.log(newArr); //{"1": {"id": 1,"value": "a"},"2": {"id": 2,"value": "b"}}
const array = [1, 2, 3, 4, 5];
const sum = array.reduce(function(acc, element) {
return acc + element;
}, 0);
console.log(sum); // 15
//根据数组生成键值对
const array = [{id:1,value:'a'}, {id:2,value:'b'}];
const newArr = array.reduce(function(acc, item) {
console.log(item)
return {...acc,[item.id]:item}
}, {});
console.log(newArr); //{"1": {"id": 1,"value": "a"},"2": {"id": 2,"value": "b"}}
every()
用来检测是否所有元素都符合指定条件的方法。如果所有元素都满足条件,则返回true;否则返回false。
array.every(callback[, thisArg])
其中,callback是一个函数,用来测试每个元素是否满足指定条件。callback函数可以接受以下三个参数:
- element:当前元素的值。
- index:当前元素的索引。
- array:被遍历的数组。
thisArg参数是可选的,用来指定callback函数中this的值。
const arr = [1, 2, 3, 4, 5];
const result = arr.every(item => item > 0);
console.log(result); // true
const result2 = arr.every(item => item > 2);
console.log(result2); // false
查询数组方法
indexOf()
indexOf方法只会返回第一个匹配项的位置。如果数组中存在多个相同的元素,该方法只会返回第一个元素的位置。indexOf方法还可以接受一个可选的第二个参数,用于指定从哪个位置开始查找。
const array = [1, 2, 3, 4, 5];
const index = array.indexOf(3);
const index2 = array.indexOf(3,3);
console.log(index); // 2
console.log(index2); // -1const array = [1, 2, 3, 4, 5];
const index = array.indexOf(3);
const index2 = array.indexOf(3,3);
console.log(index); // 2
console.log(index2); // -1
lastIndexOf()
用于查找数组中某个元素最后一次出现的索引(位置),如果找到则返回该索引值,否则返回 -1。
const array = [1, 5, 3, 4, 5];
const index = array.lastIndexOf(5);
console.log(index); // 4const array = [1, 5, 3, 4, 5];
const index = array.lastIndexOf(5);
console.log(index); // 4
includes()
用于检查数组中是否包含某个元素,如果包含则返回 true,否则返回 false。
const array = [1, 2, 3, 4, 5];
console.log(array.includes(3)); // true
console.log(array.includes(6)); // falseconst array = [1, 2, 3, 4, 5];
console.log(array.includes(3)); // true
console.log(array.includes(6)); // false
find()
查找数组中符合条件的第一个元素,如果找到返回该元素,否则返回undefined
const array = [{name: "A", age: 20}, {name: "B", age: 30}, {name: "C", age: 40}];
const result = array.find(function(element) {
return element.age >= 30;
});
console.log(result); // {name: "B", age: 30}const array = [{name: "A", age: 20}, {name: "B", age: 30}, {name: "C", age: 40}];
const result = array.find(function(element) {
return element.age >= 30;
});
console.log(result); // {name: "B", age: 30}
findIndex()
查找数组中符合条件的第一个元素的索引,如果找到返回该索引,否则返回-1。
const array = [{name: "A", age: 20}, {name: "B", age: 30}, {name: "C", age: 40}];
const index = array.findIndex(function(element) {
return element.age >= 30;
});
console.log(index); // 1const array = [{name: "A", age: 20}, {name: "B", age: 30}, {name: "C", age: 40}];
const index = array.findIndex(function(element) {
return element.age >= 30;
});
console.log(index); // 1
some()
返回一个布尔值,表示数组中是否存在满足指定条件的元素。当有一个元素满足条件时,立即返回true。如果数组中没有满足条件的元素,则返回false。
const arr = [1, 2, 3, 4, 5];
const result = arr.some(item => item > 3); // true
转换数组方法
Array.from()
将一个类数组对象或可迭代对象转换为数组。
const array = Array.from("ABC");
console.log(array); // ["A", "B", "C"]const array = Array.from("ABC");
console.log(array); // ["A", "B", "C"]
Array.of()
以参数形式创建一个新数组.
const array = Array.of(1, 2, 3);
console.log(array); // [1, 2, 3]const array = Array.of(1, 2, 3);
console.log(array); // [1, 2, 3]
Array.isArray()
判断一个对象是否是一个数组
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray("ABC")); // falseconsole.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray("ABC")); // false