JavaScript数组常用的方法整理

JavaScript数组常用的方法整理

以下或许是一些在实际工作中你或许会使用到的数组方法。

1. splice()

• 方法名称splice()
• 返回值返回被删除的元素数组
• 是否改变原数组是
• 参数
  • start开始删除的索引例如第一个就是0。
  • deleteCount删除元素的数量
  • …items将要新添加的元素。
• 描述splice()方法可以实现增删改。

let arr1 = ["游小北", "youxiaobei", "JaketYou"];
let res1 = arr1.splice(0, 1, "增加一个元素", "再增加一个元素", '又增加一个元素');
console.log(res1); // ['游小北']得到删除的元素
console.log(arr1); // ['增加一个元素', '再增加一个元素', '又增加一个元素', 'youxiaobei', 'JaketYou']

2. slice()

• 方法名称slice()
• 返回值返回截取的元素数组
• 是否改变原数组否
• 参数
  • start开始位置例如1就是删除索引为1的元素
  • end结束位置例如3就删除索引3之前的元素
• 描述slice()方法用来截取元素。

let arr2 = ["游小北", "youxiaobei", "JaketYou"];
let res2 = arr2.slice(1, 3);
console.log(res2); //[ 'youxiaobei', 'JaketYou' ]
console.log(arr2); //[ '游小北', 'youxiaobei', 'JaketYou' ]  // 不改变原数组

3. pop()

• 方法名称pop()
• 返回值返回被截取的元素
• 是否改变原数组是
• 参数无
• 描述pop()方法截取最后一个元素并返回被截取的元素。

let arr3 = ["游小北", "youxiaobei", "JaketYou"];
let res3 = arr3.pop();
console.log(res3); // JaketYou
console.log(arr3); // [ '游小北', 'youxiaobei' ]

4. shift/unshift

• 方法名称shift() / unshift()
• 是否改变原数组是
• 描述shift()方法截取第一个元素返回被截取的元素unshift()将新的元素添加到数组开头并返回新数组的长度。

let arr4 = ["游小北", "youxiaobei", "JaketYou"];
let res4 = arr4.shift();
console.log(res4); // 游小北
console.log(arr4); //[ 'youxiaobei', 'JaketYou' ]
console.log(arr4.unshift('jk')) // 3  // 数组的长度

5. reduce()

• 方法名称reduce()
• 返回值返回累积计算的结果
• 是否改变原数组否
• 参数
  • callback函数用于执行累积计算的逻辑。回调的参数为pre上次的值item当前项indexarr原数组
  • initialValue初始值可选作为第一次调用回调函数时的第一个参数传入。
• 描述reduce()方法遍历数组按顺序迭代每个元素返回累积计算的结果。

let arr5 = [1, 2, 3];

// 第一种情况加默认值会多一次循环
const res = arr5.reduce((pre, item, index, arr) => {
    return pre + item;
}, 10);

console.log(res); //16

// 第二种不加默认值少一次循环
const res5 = arr5.reduce((pre, item, index, arr) => {
    return pre + item;
});

console.log(res5); // 6

6. forEach()

• 方法名称forEach()
• 返回值无返回值 (undefined)
• 是否改变原数组否
• 参数
  • callback函数用于对每个元素执行的操作。回调的参数为 value当前项indexarr原数组。
• 描述forEach()方法遍历数组对每个元素执行回调函数中定义的操作没有返回值。

let arr6 = [1, 2, 3];

let sum = 0;
arr6.forEach((item, index, arr) => {
  sum = sum + item;
});

console.log(sum); // 6

7. concat()

• 方法名称concat()
• 返回值连接后的新数组
• 是否改变原数组否
• 参数要连接到原数组的其他数组或值。
• 备注concat()方法将参数中的数组或值连接到原数组的末尾并返回一个新的数组。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];

let newArr = arr1.concat(arr2, arr3);
console.log(newArr); // 输出[1, 2, 3, 4, 5, 6, 7, 8, 9]

let newArr2 = arr1.concat(4, 5);
console.log(newArr2); // 输出[1, 2, 3, 4, 5]

8. some()

• 方法名称some()
• 返回值布尔值
• 是否改变原数组否
• 参数回调函数返回一个条件判断。
• 描述some()方法对数组中的每个元素调用回调函数如果有任何元素满足回调函数的条件则返回 true否则返回 false。

let arr8 = [1, 2, 3, 4, 5];
let hasEven = arr8.some((element) => {
    return element % 2 === 0;
});
console.log(hasEven); // 输出true因为2是偶数

9. every()

• 方法名称every()
• 返回值布尔值
• 是否改变原数组否
• 参数回调函数返回一个条件判断。
• 描述every()方法对数组中的每个元素调用回调函数如果所有元素都满足回调函数的条件则返回 true否则返回 false。

let arr8 = [1, 2, 3, 4, 5];
let allPositive = arr8.every((element) => {
    return element > 0;
});
console.log(allPositive); // 输出true因为所有元素都大于0

10. find()

• 方法名称find()
• 返回值满足条件的第一个元素值如果没有找到则返回 undefined。
• 是否改变原数组否
• 参数回调函数。
• 备注find()方法对数组中的每个元素调用回调函数返回第一个满足回调函数条件的元素。

let arr10 = [1, 2, 3, 4, 5];
let evenNumber = arr10.find((element) => {
    return element % 2 === 0;
});
console.log(evenNumber); // 输出2因为2是数组中的第一个偶数

11. findIndex()

• 方法名称findIndex()
• 返回值满足条件的第一个元素的索引如果没有找到则返回 -1。
• 是否改变原数组否
• 参数回调函数。
• 备注findIndex()方法对数组中的每个元素调用回调函数返回第一个满足回调函数条件的元素的索引。

let arr10 = [1, 2, 3, 4, 5];
let evenIndex = arr10.findIndex((element) => {
    return element % 2 === 0;
});
console.log(evenIndex); // 输出1因为2是数组中的第一个偶数其索引为1

12. join()

• 方法名称join()
• 返回值由数组中的每个元素转换为字符串并连接得到的字符串。
• 是否改变原数组否
• 参数分隔符可选。
• 备注join()方法会将数组中的每个元素转换为字符串并用指定的分隔符默认为逗号将它们连接起来。

let arr12 = [1, 2, 3, 4, 5];
let joinedString = arr12.join("-");
console.log(joinedString); // 输出"1-2-3-4-5"

13. toString()

• 方法名称toString()
• 返回值由数组中的每个元素转换为字符串并连接得到的字符串
• 是否改变原数组否
• 参数无意味着传递任何参数都无效
• 备注toString()方法会将数组中的每个元素转换为字符串并用逗号将他们连接起来。

let arr12 = [1, 2, 3, 4, 5];
let arrayString = arr12.toString();
console.log(arrayString); // 输出"1,2,3,4,5"

14. indexOf()

• 方法名称indexOf()
• 返回值找到的第一个匹配元素的索引如果没有找到则返回 -1。
• 是否改变原数组否
• 参数待搜索的元素可选的开始搜索的位置。
• 备注indexOf()方法从数组的开头或从指定的位置向后搜索返回第一个匹配元素的索引。

let arr14 = [1, 2, 3, 4, 2, 5, 2];
let firstIndex = arr14.indexOf(2);
console.log(firstIndex); // 输出1因为2第一次出现在索引1处

15. lastIndexOf()

• 方法名称lastIndexOf()
• 返回值找到的最后一个匹配元素的索引如果没有找到则返回 -1。
• 是否改变原数组否
• 参数待搜索的元素可选的开始搜索的位置。
• 备注lastIndexOf()方法从数组的末尾或从指定的位置向前搜索返回最后一个匹配元素的索引。

let arr14 = [1, 2, 3, 4, 2, 5, 2];
let lastIndex = arr14.lastIndexOf(2);
console.log(lastIndex); // 输出6因为2最后一次出现在索引6处

16. map()

• 方法名称map()
• 返回值由原数组每个元素经过处理后的返回值组成的新数组。
• 是否改变原数组否
• 参数回调函数。
• 备注map()方法对数组中的每个元素都执行提供的回调函数并将回调函数的返回值组成一个新数组返回。

let arr16 = [1, 2, 3, 4, 5];
let squaredArr = arr16.map(function (element) {
    return element * element;
});

console.log(squaredArr); // 输出[1, 4, 9, 16, 25]

17. reverse()

• 方法名称reverse()
• 返回值反转后的数组。
• 是否改变原数组是
• 参数无
• 备注reverse()方法反转数组中元素的顺序。

let arr17 = [1, 2, 3, 4, 5];
arr17.reverse();
console.log(arr17); // 输出[5, 4, 3, 2, 1]

18. filter()

• 方法名称filter()
• 返回值由满足回调函数条件的元素组成的新数组。
• 是否改变原数组否
• 参数回调函数
• 备注filter()方法对数组中的每个元素执行提供的条件判断函数并返回满足条件的元素组成的新数组。

let arr18 = [1, 2, 3, 4, 5];
let filteredArr = arr18.filter(function (element) {
    return element > 2;
});
console.log(filteredArr); // 输出[3, 4, 5]

19. sort()

• 方法名称sort()
• 返回值排序后的数组。
• 是否改变原数组是
• 参数排序比较函数可选
• 备注sort()方法对数组进行原地排序默认按照 Unicode 排序。可以传入一个比较函数来指定排序规则。

function compareNumbers(a, b) {
    return b - a;
}
let arr19 = [4, 2, 1, 3, 5];
arr19.sort();
console.log(arr19); // 输出[1, 2, 3, 4, 5]
arr19.sort(compareNumbers);
console.log(arr19); // 输出[5, 4, 3, 2, 1]

20. includes()

• 方法名称includes()
• 返回值布尔值。
• 是否改变原数组否
• 参数要查找的元素开始搜索的索引可选
• 备注includes()方法判断数组是否包含指定的元素返回布尔值。

let arr20 = [1, 2, 3, 4, 5];

// 示例使用 includes 方法判断数组是否包含元素
let result = arr20.includes(3);
let result1 = arr20.includes(3,2);
let result2 = arr20.includes(3,3);

console.log(result); // 输出true
console.log(result1); // 输出true
console.log(result2); // 输出false

21. array.with(index, value)

• 方法名称array.with(index, value)
• 返回值修改后的数组。
• 是否改变原数组否
• 参数将被修改的索引要分配给指定索引的任何值。
• 备注array.with(index, value)是方括号表示法修改指定索引值的复制方法版本。

const arr21 = [1, 2, 3, 4, 5];
console.log(arr21.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr21); // [1, 2, 3, 4, 5]

22. isArray()

• 方法名称isArray()
• 返回值布尔值。
• 是否改变原数组否
• 参数要判断的值
• 备注isArray()方法用来判断给定的值是否是数组。

let arr22 = [1, 2, 3, 4, 5];
console.log(Array.isArray(arr22)); // 输出true

23. flat()

• 方法名称flat()
• 返回值新的一维数组
• 是否改变原数组否
• 参数表示深度例如数字1 代表展开的层级为 12 也同理。 可使用 Infinity 作为参数代表必然展开为 1 维数组
• 备注flat()方法将多维数组转化为一维。

let arr23 = [1, [2, 3], [4, [5]]];
console.log(arr23.flat()) // [1, 2, 3, 4, [5]]
console.log(arr23.flat(2)) // [1, 2, 3, 4, 5]

let arrInfinite = [1, [2, 3], [4, [5,[6]]]];
console.log(arrInfinite.flat(2)) // [1, 2, 3, 4, 5, [6]]
console.log(arrInfinite.flat(Infinity)) // [1, 2, 3, 4, 5, 6]

24. flatMap()

• 方法名称flatMap()
• 返回值新的一维数组。
• 是否改变原数组否
• 参数回调函数。
• 备注flatMap()方法对数组的每个元素执行指定操作并将结果展开成一个新数组。

let arr24 = [1, 2, 3];
let arr24fm = [1, 2, 3, [4]]
let arr24fmNan = [1, 2, 3, [4, 5]]

const res24 = arr24.flatMap(x => [x, x * 2])
const res24fm = arr24fm.flatMap(x => [x, x * 2])
const res24fmNan = arr24fmNan.flatMap(x => [x, x * 2])
console.log(res24) // [1, 2, 2, 4, 3, 6]
console.log(res24fm) // [1, 2, 2, 4, 3, 6, [4], 8]
console.log(res24fmNan) // [1, 2, 2, 4, 3, 6, [4, 5], NaN]

25. keys()

• 方法名称keys()
• 返回值迭代器对象。
• 是否改变原数组否
• 参数无
• 备注keys()方法返回一个包含数组中每个索引键的迭代器对象。

let arr25 = ['a', 'b', 'c'];
const iterator25 = arr25.keys(); // 示例获取数组arr25中每个索引键的迭代器对象
console.log('i', iterator25.next()); // i { value: 0, done: false }
console.log('i', iterator25.next()); // i { value: 1, done: false }
console.log('i', iterator25.next()); // i { value: 2, done: false }
console.log('i', iterator25.next()); // i { value: undefined, done: true } // done 为 true 表示迭代结束

26. values()

• 方法名称values()
• 返回值迭代器对象。
• 是否改变原数组否
• 参数无
• 备注values()方法返回一个包含数组中每个元素值的迭代器对象。

let arr26 = ['a', 'b', 'c'];
let iterator26 = arr26.values();

console.log(iterator26.next()); // 输出{value: 'a', done: false}
console.log(iterator26.next()); // 输出{value: 'b', done: false}
console.log(iterator26.next()); // 输出{value: 'c', done: false}
console.log(iterator26.next()); // 输出{value: undefined, done: true}

27. entries()

• 方法名称entries()
• 返回值迭代器对象。
• 是否改变原数组否
• 参数无
• 备注entries()方法返回一个包含数组中每个索引键和对应元素值的迭代器对象。

let arr27 = ['a', 'b', 'c'];
let iterator27 = arr27.entries();

console.log(iterator27.next()); // 输出{value: [0, 'a'], done: false}
console.log(iterator27.next()); // 输出{value: [1, 'b'], done: false}
console.log(iterator27.next()); // 输出{value: [2, 'c'], done: false}
console.log(iterator27.next()); // 输出{value: undefined, done: true}

28. from()

• 方法名称from()
• 返回值新的数组。
• 是否改变原数组否
• 参数类似数组或可迭代的对象, 调用数组每个元素的函数 mapFn, 执行 mapFn 时用作 this 的值。
• 备注from()方法通过类似数组或可迭代的对象创建一个新的数组。

console.log(Array.from('foo'));  // 输出["f", "o", "o"]
console.log(Array.from([1, 2, 3], (x) => x + x)); // 输出[2, 4, 6]

29. of()

• 方法名称of()
• 返回值新的数组。
• 是否改变原数组否
• 参数传入的参数作为数组的元素。
• 备注of()方法根据传入的参数创建一个新的数组。就算没有参数也会创建一个空数组。

console.log(Array.of('1', 2, '3')) // ["1", 2, "3"]
console.log(Array.of(0)) // [0]
console.log(Array.of()) // []