JavaScript数组方法
数组的属性
length属性
数组的项数保存在其length属性中,这个属性始终会返回0或更大的值。数组的length属性很有特点——它不是只读的。因此,通过设置这个属性,可以从数组的末尾移除项或向数组中添加新项。
例子:
//删除数组里的值
const arr1 = [1, 2, 3];
console.log(arr1[2]); //输出:3
arr1.length = 2;
console.log(arr1[2]); //输出:undefined
//在数组末尾添加新值
const arr2 = [1, 2, 3];
console.log(arr2[3]); //输出:undefined
arr2[arr2.length] = 4;
console.log(arr2[3]); //输出:4
检测数组的方法
instanceof 操作符
例子:
console.log([] instanceof Array);
//输出:true
Object.prototype.toString.call()方法
例子:
console.log(Object.prototype.toString.call([]));
//输出:[object Array]
Array.isArray()方法
例子:
console.log(Array.isArray([]));
//输出:true
数组转为字符串的方法
toString() 方法
返回由数组中每个项拼接而成的一个以逗号分隔的字符串。
例子:
console.log([1, 2, 3].toString());
//输出:1,2,3
join() 方法
join()方法接收一个参数用作分隔符,然后返回由这个分隔符构建的字符串。如果不给join()方法传入任何值,或者给它传入undefined,则默认使用逗号作为分隔符。
例子:
console.log([1, 2, 3].join()); //输出:1,2,3
console.log([1, 2, 3].join("&")); //输出:1&2&3
添加和删除项的方法
push() 方法
push()方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
例子:
const arr = [1];
const len = arr.push(2, 3);
console.log(arr); //输出:[1, 2, 3]
console.log(len); //输出:3
pop() 方法
pop()方法从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。
例子:
const arr = [1, 2, 3];
const item = arr.pop();
console.log(arr); //输出:[1, 2]
console.log(item); //输出:3
unshift() 方法
unshift() 方法能在数组前端添加任意个项并返回新数组的长度。
例子:
const arr = [3];
const len = arr.unshift(1, 2);
console.log(arr); //输出:[1, 2, 3]
console.log(len); //输出:3
shift() 方法
shift() 方法能够移除数组中的第一个项并返回该项,同时将数组长度减1。
例子:
const arr = [1, 2, 3];
const item = arr.shift();
console.log(arr); //输出:[2, 3]
console.log(item); //输出:1
splice() 方法
splice() 方法接收的第一个参数,表示想要删除或插入的元素的索引值。第二个参数是删除元素的个数(如果不是删除元素,可以传入0)。第三个参数往后,就是要添加到数组里的值。
例子:
删除
const arr = [1, 2, 3];
const new_arr = arr.splice(0, 2);
console.log(arr); //输出:[3]
console.log(new_arr); //输出:[1, 2]
插入
const arr = [1, 2, 3];
const new_arr = arr.splice(2, 0, 9);
console.log(arr); //输出:[1, 2, 9, 3]
console.log(new_arr); //输出:[]
替换
const arr = [1, 2, 3];
const new_arr = arr.splice(2, 1, 9);
console.log(arr); //输出:[1, 2, 9]
console.log(new_arr); //输出:[3]
数组项排序的方法
reverse()方法
reverse()方法会反转数组项的顺序。
例子:
const arr = [1, 2, 3];
arr.reverse();
console.log(arr); //输出:[3, 2, 1]
sort()方法
sort()方法可以接收一个函数作为参数:如果函数返回一个小于零或等于零的值则不交换前后项的位置;如果返回一个大于零的值则交换前后项的位置。
例子:
const arr = [2, 33, 10, 9];
arr.sort((x, y) => x - y);
console.log(arr); //输出:[2, 9, 10, 33]
arr.sort((x, y) => y - x);
console.log(arr); //输出:[33, 10, 9, 2]
copyWithin() 方法
copyWithin() 方法在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。它接受三个参数:第一个参数表示从该位置开始替换数据;第二个和第三个参数表示获得数据的起始和结束位置(不包括结束位置的项)。三个参数都可以为负数。
例子:
const arr1 = [1, 2, 3],
arr2 = [1, 2, 3];
arr1.copyWithin(0, 1);
console.log(arr1); //输出:[2, 3, 3]
arr2.copyWithin(0, 1, 2);
console.log(arr2); //输出:[2, 2, 3]
复制数组的方法
concat()方法
concat()方法会复制当前数组并将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。
例子:
没有参数
const arr = [1, 2, 3];
const new_arr = arr.concat();
console.log(arr); //输出:[1,2,3]
console.log(new_arr); //输出:[1,2,3]
参数是原始值
const arr = [1, 2, 3];
const new_arr = arr.concat(4, 5);
console.log(arr); //输出:[1,2,3]
console.log(new_arr); //输出:[1,2,3,4,5]
参数是一个或多个数组
const arr = [1, 2, 3];
const new_arr = arr.concat([4], [5]);
console.log(arr); //输出:[1,2,3]
console.log(new_arr); //输出:[1,2,3,4,5]
slice()方法
slice()方法复制返回项创建一个新数组。如果只有一个参数,slice()方法返回从该索引位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。
例子:
const arr = [1, 2, 3];
const new_arr_1 = arr.slice(0);
const new_arr_2 = arr.slice(0, 2);
console.log(new_arr_1); //输出:[1,2,3]
console.log(new_arr_2); //输出:[1,2]
*如果slice()方法的参数中有一个负数,则用数组长度加上该数来确定相应的位置。
查找值的位置的方法
indexOf()和lastIndexOf()方法
这两个方法都接收两个参数:要查找的值和表示查找起点位置的索引。其中,indexOf()方法从数组的开头(位置0)开始向后查找,lastIndexOf()方法则从数组的末尾开始向前查找。这两个方法都返回要查找的值在数组中的位置,或者在没找到的情况下返回-1。
例子:
console.log([1, 2, 3].indexOf(2)); //输出:1
console.log([1, 2, 3].indexOf(0)); //输出:-1
includes() 方法
includes() 方法返回一个布尔值,表示某个数组是否包含给定的值。这个方法接收两个参数:要查找的值和表示查找起点位置的索引。如果第二个参数为负数,则表示倒数的位置。
例子:
console.log([1, 2, 3].includes(2)); //输出:true
console.log([1, 2, 3].includes(1, 1)); //输出:false
find() 和 findIndex() 方法
find() 方法接受一个回调函数作为参数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
例子:
console.log([1, 2, 3].find((v, i, a) => v > 1)); //输出:2
console.log([1, 2, 3].find((v, i, a) => v > 3)); //输出:undefined
findIndex() 方法的用法与find() 方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
例子:
console.log([1, 2, 3].findIndex((v, i, a) => v > 1)); //输出:1
console.log([1, 2, 3].findIndex((v, i, a) => v > 3)); //输出:-1
*find() 和 findIndex() 方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。
遍历数组的方法
entries(),keys() 和 values() 方法
keys()是对索引值的遍历、values()是对值的遍历,entries()是对键值对的遍历。这三个方法一般配合for…of循环使用。
例子:
for (let i of[1, 2, 3].keys()) {
console.log(i);
}
//输出:0 1 2
for (let v of[1, 2, 3].values()) {
console.log(v);
}
//输出:1 2 3
for (let [i, v] of[1, 2, 3].entries()) {
console.log(i + ":" + v);
}
//输出:0:1 1:2 2:3
every()方法
every() 方法对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。
例子:
console.log([1, 2, 3].every((v, i, a) => v < 4));
//输出:true
some()方法
some() 方法对数组中的每一项运行给定函数,如果该函数任一项返回true,则返回true。
例子:
console.log([1, 2, 3].some((v, i, a) => v > 2));
//输出:true
filter() 方法
filter() 方法对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。
例子:
const arr = [1, 2, 3, "A"];
const new_arr = arr.filter((v, i, a) => typeof(v) === "number");
console.log(arr); //输出:[1, 2, 3, "A"]
console.log(new_arr); //输出:[1, 2, 3]
map() 方法
map() 方法对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
例子:
const arr = [1, 2, 3];
const new_arr = arr.map((v, i, a) => v - 1);
console.log(arr); //输出:[1, 2, 3]
console.log(new_arr); //输出:[0, 1, 2]
forEach() 方法
forEach() 方法对数组中的每一项运行给定函数。这个方法没有返回值。可以替代for循环使用。
例子:
(function() {
[...arguments].forEach((v, i, a) => {
console.log(i);
});
})(1, 2, 3);
//输出:0 1 2
*every() 、 some()、filter()、map()和forEach()方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。
reduce()和reduceRight()方法
这两个方法都会遍历数组的所有项,然后累加一个最终返回的值。其中,reduce()方法从数组的第一项开始,逐个遍历到最后。而reduceRight()则从数组的最后一项开始,向前遍历到第一项。
例子:
console.log(["S", "O", "S"].reduce((p, c, i, a) => p + c));
//输出:SOS
*reduce()和reduceRight()方法的回调函数接收4个参数:前一个值、当前值、项的索引和数组对象。
多维数组变一维数组的方法
flat() 方法
flat() 方法接受一个数值参数,表示要“拉平”的嵌套数组的层数,默认为1。如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。flat() 方法会返回一个新数组,不改变原数组。
例子:
const arr = [1, [2], 3];
const new_arr = arr.flat();
console.log(arr); //输出:[1, [2], 3]
console.log(new_arr); //输出:[1, 2, 3]
flatMap() 方法
flatMap() 方法相当于先执行map()方法,然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。
例子:
const arr = [1, 2, 3];
const new_arr = arr.flatMap((v, i, a) => [v * 2]);
console.log(arr); //输出:[1, 2, 3]
console.log(new_arr); //输出:[2, 4, 6]
填充数组的方法
fill() 方法
fill() 方法使用给定值,填充一个数组。该方法接受三个参数,第一个参数表示将要填充数组的值,第二个和第三个参数,用于指定填充的起始位置和结束位置。该方法属于浅拷贝,会直接修改原数组的内容。
例子:
const arr = Array(3).fill(0);
const new_arr = arr.fill(1, 1, 2);
console.log(arr); //输出:[0, 1, 0]
console.log(new_arr); //输出:[0, 1, 0]
如有错误,欢迎指正,本人不胜感激。
共同学习,写下你的评论
评论加载中...
作者其他优质文章