JS 数组方法

m0_56168677

已于 2024-07-14 15:45:38 修改

阅读量334

点赞数

分类专栏： js 文章标签： javascript 前端

于 2022-10-29 15:47:14 首次发布

本文链接：https://blog.csdn.net/m0_56168677/article/details/127587059

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、创建数组

// 1、使用对象字面量方式创建数组
const array1 = [1, 2, 3, 4, 5]; 

// 2、使用Array构造方法
// 无参构造
const array1 = new Array();
// 带参构造
const array2 = new Array(3);

3、Array.of方法创建数组(es6新增)
// Array.of()方法总会创建一个包含所有传入参数的数组，而不管参数的数量与类型。
// 在使用Array.of()方法创建数组时，只需将想要包含在数组内的值作为参数传入。
let arr = Array.of(1, 2);
console.log(arr.length); //2

4、Array.from() 方法用于将类数组对象或可迭代对象转换为真正的数组。
Array.from({length:3})  // [undefined,undefined,undefined]

5、fill() 方法用于填充数组，可以创建一个指定长度并填充同一值的数组。
new Array(5).fill('foo');  // ["foo","foo","foo","foo","foo"]

二、数组方法

数组原型方法：

join()：用指定的分隔符将数组每一项拼接为字符串
push() ：向数组的末尾添加新元素
pop()：删除数组的最后一项
shift()：删除数组的第一项
unshift()：向数组首位添加新元素
sort()：对数组的元素进行排序
reverse()：对数组进行倒序
concat()：用于连接两个或多个数组
slice()：按照条件查找出其中的部分元素
splice()：对数组进行增删改
indexOf()：检测当前值在数组中第一次出现的位置索引
lastIndexOf()：检测当前值在数组中最后一次出现的位置索引
forEach()：ES5 及以下循环遍历数组每一项
map()：ES6 循环遍历数组每一项
filter():“过滤”功能
fill(): 方法能使用特定值填充数组中的一个或多个元素
every()：判断数组中每一项都是否满足条件
some()：判断数组中是否存在满足条件的项
includes()：判断一个数组是否包含一个指定的值
reduce()：方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
toLocaleString()、toString():将数组转换为字符串
find():返回匹配的值、findIndex():返回匹配位置的索引
copyWithin():用于从数组的指定位置拷贝元素到数组的另一个指定位置中
flat()、flatMap()：扁平化数组
entries() 、keys() 、values():遍历数组

1、join

join() 方法用于把数组中的所有元素转换一个字符串。

元素是通过指定的分隔符进行分隔的。默认使用逗号作为分隔符

const array1 = [22, 3, 31, 12, 'arr'];
const str = array1.join('~');
console.log(str); // 22~3~31~12~arr

const str1 = array1.join();
console.log(str1); // 22,3,31,12,arr

2、push

push()方法从数组末尾向数组添加元素，可以添加一个或多个元素。

const array1 = [22, 3, 31, 12, 'arr', 19, 31, 56, 43];
array1.push(11, 16, 18);
console.log(array1); // [22, 3, 31, 12, "arr", 19, 31, 56, 43, 11, 16, 18]

3、pop

pop() 方法用于删除数组的最后一个元素并返回删除的元素。

const array1 = [22, 3, 31, 12, 'arr', 19, 31, 56, 43];
const item = array1.pop();

console.log(item); // 43
console.log(array1); // [22, 3, 31, 12, "arr", 19, 31, 56]

4、shift

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

const array1 = [22, 3, 31, 12];
const item = array1.shift();

console.log(item); // 22
console.log(array1); // [3, 31, 12]

5、unshift

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

该方法将改变数组的数目。

const array1 = [22, 3, 31, 12];
const item = array1.unshift(11);
console.log(item); // 5 新数组的长度
console.log(array1); // [11, 22, 3, 31, 12]

6、sort

sort() 方法用于对数组的元素进行排序。

排序顺序可以是字母或数字，并按升序或降序。

默认排序顺序为按字母升序。

const array1 = [22, 3, 31, 12];
array1.sort((a, b) => {
  return a > b ? 1 : -1;
});

console.log(array1); // 数字升序 [3, 12, 22, 31]

7、reverse

reverse() 方法用于颠倒数组中元素的顺序。

const array1 = [22, 3, 31, 12];
array1.reverse();

console.log(array1); // [12, 31, 3, 22]

8、concat

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

concat传入的参数可以是具体的值，也可以是数组对象。可以是任意多个。

const array1 = [22, 3, 31, 12];
const array2 = [19, 33, 20];
const newArray = array1.concat(10, array2, 9);
console.log(array1); // [22, 3, 31, 12]
console.log(newArray); // [22, 3, 31, 12, 10, 19, 33, 20, 9]

9、slice

slice() 方法可从已有的数组中返回选定的元素。

slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

slice() 方法不会改变原始数组。

const array1 = [22, 3, 31, 12];
const array2 = array1.slice(1, 3);

console.log(array1); // [22, 3, 31, 12]
console.log(array2); // [3, 31]

10、splice

splice() 方法用于添加或删除数组中的元素。

// 1、删除元素,并返回删除的元素
const array1 = [22, 3, 31, 12];
const item = array1.splice(1, 2);

console.log(item); // [3, 31]
console.log(array1); // [22, 12]

// 2、向指定索引处添加元素
const array1 = [22, 3, 31, 12];
array1.splice(1, 0, 12, 35);

console.log(array1); // [22, 12, 35, 3, 31, 12]


// 3、替换指定索引位置的元素
const array1 = [22, 3, 31, 12];
array1.splice(1, 1, 8);

console.log(array1); // [22, 8, 31, 12]

11、indexOf

indexOf() 方法可返回数组中某个指定的元素位置。

该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。

如果在数组中没找到指定元素则返回 -1。

参数有两个，其中第一个是（必填）需要查找的元素值，第二个是（可选）开始查找元素的位置

const array1 = [22, 3, 31, 12, 'arr'];
const index = array1.indexOf(31);
console.log(index); // 2

const index1 = array1.indexOf(31, 3);
console.log(index1); // -1

12、lastIndexOf

lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，在一个数组中的指定位置从后向前搜索。

如果要检索的元素没有出现，则该方法返回 -1。

该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。

如果在数组中没找到指定元素则返回 -1。

const array1 = [22, 3, 31, 12, 'arr', 19, 31, 56, 43];
const index1 = array1.lastIndexOf(31);
console.log(index1); // 6

const index2 = array1.lastIndexOf(31, 5);
console.log(index2); // 2

const index3 = array1.lastIndexOf(35);
console.log(index3); // -1

13、forEach

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

let sum = 0;
const array1 = [22, 3, 31, 12];
array1.forEach((v, i, a) => {
  sum += v;
});

console.log(sum); // 68

14、map

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

该方法不会改变原数组

const array1 = [22, 3, 31, 12, 'arr', 19, 31, 56, 43];
const array2 = array1.map((v, i, a) => {
  return v + 1;
});

console.log(array1); // [22, 3, 31, 12, "arr", 19, 31, 56, 43]
console.log(array2); // [23, 4, 32, 13, "arr1", 20, 32, 57, 44]

15、filter

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。该方法不会改变原数组

const array1 = [22, 3, 31, 12];
const array2 = array1.filter((v, i, a) => {
  if (v > 13) {
    return v;
  }
});
console.log(array1); // [22, 3, 31, 12]
console.log(array2); // [22, 31]

16、fill(es6新增)

fill()方法能使用特定值填充数组中的一个或多个元素。当只是用一个参数时，该方法会用该参数的值填充整个数组。

let arr = [1, 2, 3, 'cc', 5];
arr.fill(1);
console.log(arr);//[1,1,1,1,1];



// 如果不想改变数组中的所有元素，而只是想改变其中一部分，那么可以使用可选的起始位置参数与结束位置参数（不包括结束位置的那个元素）

let arr = [1, 2, 3, 'arr', 5];

arr.fill(1, 2);
console.log(arr);//[1,2,1,1,1]

arr.fill(0, 1, 3);
console.log(arr);//[1,0,0,1,1];

17、every

every()方法用于判断数组中每一项是否都满足条件，只有所有项都满足条件，才会返回true。

const array1 = [22, 3, 31, 12];
const isRight1 = array1.every((v, i, a) => {
  return v > 1;
});

const isRight2 = array1.every((v, i, a) => {
  return v > 10;
});
console.log(isRight1); // true
console.log(isRight2); // false

18、some

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

const array1 = [22, 3, 31, 12];
const someTrue1 = array1.some((v, i, a) => {
  return v == 11;
});

const someTrue2 = array1.some((v, i, a) => {
  return v == 31;
});

console.log(someTrue1); // false
console.log(someTrue2); // true

19、includes(es7新增)

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

参数有两个，其中第一个是（必填）需要查找的元素值，第二个是（可选）开始查找元素的位置

const array1 = [22, 3, 31, 12, 'arr'];
const includes = array1.includes(31);
console.log(includes); // true

const includes1 = array1.includes(31, 3); // 从索引3开始查找31是否存在
console.log(includes1); // false


// 需要注意的是：includes使用===运算符来进行值比较，仅有一个例外：NaN被认为与自身相等。
let values = [1, NaN, 2];
console.log(values.indexOf(NaN));//-1
console.log(values.includes(NaN));//true

20、reduce

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

const array1 = [22, 3, 31, 12];
const sum = array1.reduce((total, number) => {
  return total + number;
});

console.log(sum); // 68

21、reduceRight

reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

const array1 = [22, 3, 31, 12];

const sum = array1.reduceRight((total, number) => {
  return total + number;
});

console.log(sum); // 68

22、toLocaleString和toString

将数组转换为字符串

const array1 = [22, 3, 31, 12];
const str = array1.toLocaleString();
const str1 = array1.toString();

console.log(str); // 22,3,31,12
console.log(str1); // 22,3,31,12

23、find()与findIndex()(es6新增)

find()与findIndex()方法均接受两个参数：一个回调函数，一个可选值用于指定回调函数内部的this。该回调函数可接受三个参数：数组的某个元素，该元素对应的索引位置，以及该数组本身。该回调函数应当在给定的元素满足你定义的条件时返回true，而find()和findIndex()方法均会在回调函数第一次返回true时停止查找。

二者的区别是：

find()方法返回匹配的值，而findIndex() 返回匹配位置的索引。

find()方法若没有符合条件的元素，则返回undefined，findIndex()方法如果没有符合条件的元素返回 -1

let arr = [1, 2, 3, 'arr', 5, 1, 9];

console.log(arr.find((value, keys, arr) => {
    return value > 2;
})); // 3 返回匹配的值

console.log(arr.findIndex((value, keys, arr) => {
    return value > 2;
})); // 2 返回匹配位置的索引

24、copyWithin(es6新增)

copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

该方法会改变现有数组

//将数组的前两个元素复制到数组的最后两个位置
let arr = [1, 2, 3, 'arr', 5];

arr.copyWithin(3, 0);
console.log(arr);//[1,2,3,1,2]



// 默认情况下，copyWithin()方法总是会一直复制到数组末尾，不过你还可以提供一个可选参数来限制到底有多少元素会被覆盖。这第三个参数指定了复制停止的位置（不包含该位置本身）。

let arr = [1, 2, 3, 'arr', 5, 9, 17];

//从索引3的位置开始粘贴
//从索引0的位置开始复制
//遇到索引3时停止复制
arr.copyWithin(3, 0, 3);
console.log(arr);//[1,2,3,1,2,3,17]

25、flat() 和 flatMap() es6 新增

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

该方法返回一个新数组，对原数据没有影响。

// 参数： 指定要提取嵌套数组的结构深度，默认值为 1。
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());  // expected output: [0, 1, 2, 3, 4]
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2));  // expected output: [0, 1, 2, [3, 4]]

//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 扁平化数组空项,如果原数组有空位，flat()方法会跳过空位
var arr4 = [1, 2, , 4, 5];
arr4.flat();  // [1, 2, 4, 5]

flatMap()方法对原数组的每个成员执行一个函数，相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。

该方法返回一个新数组，不改变原数组。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])  // [2, 4, 3, 6, 4, 8]

26、 entries(),keys() 和 values() 【ES6】

entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历

区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

for (let index of [ a ,  b ].keys()) {
    console.log(index);  
}
// 0  
// 1  

for (let elem of [ a ,  b ].values()) {  
    console.log(elem);
}  
//  a 
//  b   

for (let [index, elem] of [ a ,  b ].entries()) {  
    console.log(index, elem);
}
// 0 "a"
// 1 "b"

// 如果不使用for...of循环，可以手动调用遍历器对象的next方法，进行遍历。
let letter = [ a ,  b ,  c ];  
let entries = letter.entries();
console.log(entries.next().value); // [0,  a ]  
console.log(entries.next().value); // [1,  b ]  
console.log(entries.next().value); // [2,  c ]