文章目录
- 整理一些项目中常用的对数组进行操作的方法
- 1、push(将新元素追加到数组末尾)
- 2、pop(将数组末尾元素删除)
- 3、unshift(在数组的开头添加新元素)
- 4、shift(将数组首位元素删除)
- 5、for in
- 6、concat(合并两个数组)
- 7、join(将数组中的元素按顺序以指定字符串(默认英文逗号)进行拼接)
- 8、splice(截取数组)
- 9、slice(截取数组)
- 10、reverse(反转数组)
- 11、sort(数组排序)
- 12、indexOf(查找元素)
- 13、lastIndexOf(查找元素)
- 14、includes(检测元素是否存在)
- 15、forEach, map, filter, every, some, find, findIndex(数组遍历、过滤、查找)
- 16、flat(多维数组转一维)
- 17、flatMap(先map后flat)
- 18、...(扩展运算符)
整理一些项目中常用的对数组进行操作的方法
1、push(将新元素追加到数组末尾)
改变原数组,返回数组长度
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(arr.push(9)); // 9
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr.push(10, 11)); // 11
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
console.log(arr.push(12, 13, 14)); // 14
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
2、pop(将数组末尾元素删除)
改变原数组,返回删除的元素
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(arr.pop()); // 8
console.log(arr); // [1, 2, 3, 4, 5, 6, 7]
3、unshift(在数组的开头添加新元素)
改变原数组,返回数组长度
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(arr.unshift(0)); // 9
console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr.unshift(-2, -1)); // 10
console.log(arr); // [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr.unshift(-5, -4, -3)); // 14
console.log(arr); // [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8]
4、shift(将数组首位元素删除)
改变原数组,返回删除的元素
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(arr.shift()); // 1
console.log(arr); // [2, 3, 4, 5, 6, 7, 8]
5、for in
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
for (let i = 0, len = arr.length; i < len; i++) {
// do something
console.log(arr[i]);
}
// 依次输出1到8
6、concat(合并两个数组)
不改变原数组,返回一个组合后的新数据组
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const arr2 = [9, 10];
const arr3 = arr.concat(arr2);
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr2); // [9, 10]
console.log(arr3); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
7、join(将数组中的元素按顺序以指定字符串(默认英文逗号)进行拼接)
不改变原数组,返回拼接后的字符串
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const str = arr.join('-');
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(str); // 1-2-3-4-5-6-7-8
8、splice(截取数组)
接受两个参数:第一个是截取开始的索引位,第二个是要截取的长度(不传值会截取开始位后面的所有元素)
改变原数组,返回截取掉的元素组成的新数组
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const arr2 = arr.splice(3, 4);
console.log(arr); // [1, 2, 3, 8]
console.log(arr2); // [4, 5, 6, 7]
第一个参数可传负数,此时开始位索引是原数组长度 + 参数的值
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const arr2 = arr.splice(-3, 4); // arr.length + (-3) = 8 - 3 = 5, arr.splice(5, 4)
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr2); // [6, 7, 8]
9、slice(截取数组)
接受两个参数:第一个是截取开始的索引,第二个是截取结束的索引(不传值会截取开始位后面的所有元素)。不包含结束索引(左闭右开)
不改变原数组,返回截取掉的元素组成的新数组
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(arr.slice(2, 4)); // [3, 4]
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8]
两个参数均可传负数,此时索引是原数组长度 + 参数的值
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(arr.slice(-2, -1)); // 8 + (-2) = 6, 8 + (-1) = 7, arr.slice(6, 7)
// [7]
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8]
10、reverse(反转数组)
改变原数组,返回原数组
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const arr2 = arr.reverse();
console.log(arr); // [8, 7, 6, 5, 4, 3, 2, 1]
console.log(arr2); // [8, 7, 6, 5, 4, 3, 2, 1]
console.log(arr === arr2); // true
11、sort(数组排序)
改变原数组,返回原数组
对数值数组的每一项进行升序排序
const arr = [1, 6, 3, 8, 5, 2, 7, 4];
const arr2 = arr.sort();
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr === arr2); // true
对字符串数组的每一项按照首字符charCode进行升序排序。如首字符相同则对第二个字符进行比较,以此类推
const arr = ['bus', 'foot', 'cat', 'apple', 'oppo', '.+_', 'vivo', 'huawei', '&#', '中文', 'dog', 'car'];
const arr2 = arr.sort();
console.log(arr); // ["apple", "bus", "car", "cat", "dog", "foot", "huawei", "oppo", "vivo"]
console.log(arr2); // ["apple", "bus", "car", "cat", "dog", "foot", "huawei", "oppo", "vivo"]
console.log(arr === arr2); // true
console.log(arr.map(x => `${x[0]}: ${x[0].charCodeAt()}`).join(', '));
// &: 38, .: 46, a: 97, b: 98, c: 99, c: 99, d: 100, f: 102, h: 104, o: 111, v: 118, 中: 20013
如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
- 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
- 若 a 等于 b,则返回 0。
- 若 a 大于 b,则返回一个大于 0 的值。
const arr = [
{ id: 4 },
{ id: 3 },
{ id: 5 },
{ id: 9 },
{ id: 8 },
{ id: 9 },
];
console.log(arr.sort(function (a, b) {
return a.id - b.id;
}));
// [{"id":3},{"id":4},{"id":5},{"id":8},{"id":9},{"id":9}]
console.log(arr.sort(function (a, b) {
return b.id - a.id;
}));
// [{"id":9},{"id":9},{"id":8},{"id":5},{"id":4},{"id":3}]
随机打乱数组顺序
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
function sortBy(a, b) {
return .5 - Math.random(); // 随机返回正数或负数或0
}
console.log(arr.sort(sortBy)); // [8, 3, 4, 6, 2, 5, 7, 1]
console.log(arr.sort(sortBy)); // [1, 2, 5, 6, 7, 4, 3, 8]
console.log(arr.sort(sortBy)); // [4, 1, 2, 8, 3, 5, 6, 7]
12、indexOf(查找元素)
不改变原数组,返回数组中某个指定的元素第一次出现的位置,未检测到返回-1
此方法会从第二个参数指定位置开始向----后----进行检索,默认第一个元素。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。
const arr = [1, 2, 1, 4, 1, 6, 1, 8];
console.log(arr.indexOf(1)); // 0
console.log(arr.indexOf(1, 3)); // 4
console.log(arr.indexOf(1, 7)); // -1
console.log(arr.indexOf(9)); // -1
13、lastIndexOf(查找元素)
不改变原数组,返回数组中某个指定的元素第一次出现的位置,未检测到返回-1
此方法会从第二个参数指定位置开始向----前----进行检索,默认最后一个元素。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。
const arr = [1, 2, 1, 4, 1, 6, 1, 8];
console.log(arr.lastIndexOf(1)); // 6
console.log(arr.lastIndexOf(1, 3)); // 2
console.log(arr.lastIndexOf(1, 7)); // 6
console.log(arr.lastIndexOf(9)); // -1
14、includes(检测元素是否存在)
不改变原数组,检测数组中是否包含此元素, 返回Boolean
此方法会从第二个参数指定位置开始向----后----进行检索,默认第一个元素。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。
可检索NaN
const arr = [1, 2, 1, 4, 1, 6, 1, 8, NaN];
console.log(arr.includes(1)); // true
console.log(arr.includes(1, 3)); // true
console.log(arr.includes(1, -2)); // false
console.log(arr.includes(9)); // false
console.log(arr.includes(NaN)); // true
15、forEach, map, filter, every, some, find, findIndex(数组遍历、过滤、查找)
以上方法都可以接受两个参数。
第一个参数为函数,数组中的每个元素都会执行这个函数。该函数接受三个参数:当前元素的值,当前元素的索引,当前元素所属数组对象
第二个参数传递给函数,用作 “this” 的值。如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。(箭头函数无效)
不改变原数组
forEach无返回值
map返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
filter返回一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const arr2 = arr.forEach(function (x, index, $arr) {
// do something
console.log(x + this); // 依次输出2到9
console.log(index); // 依次输出0到7
console.log($arr === arr); // true
}, 1);
const arr3 = arr.map(function (x, index, $arr) {
// do something
console.log(x + this); // 依次输出2到9
console.log(index); // 依次输出0到7
console.log($arr === arr); // true
return x + this;
}, 1);
const arr4 = arr.filter(function (x, index, $arr) {
// do something
console.log(x + this); // 依次输出2到9
console.log(index); // 依次输出0到7
console.log($arr === arr); // true
return !(x % 2); // 是否为偶数
}, 1);
console.log(arr2); // undefined
console.log(arr3); // [2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr4); // [2, 4, 6, 8]
需求:对一个数组里每一项进行取反操作并把偶数过滤出来以“/”拼接为字符串
const arr = [24, 54, -34, 534, -65, -32, 2, -23, -5, 34];
const str = arr.map(x => -x).filter(x => !(x % 2)).join('/');
console.log(str); // -24/-54/34/-534/32/-2/-34
every使用指定函数检测数组中的所有元素:
- 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
- 如果所有元素都满足条件,则返回 true。
- 空数组返回true。
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(arr.every(function (x) {
return x > 0; // 检测所有元素都大于0
}));
// true
console.log(arr.every(function (x) {
return !(x % 2); // 检测所有元素都是偶数
}));
// false
console.log([].every(function (x) {
return true; // 对空数组进行检测
}));
// true
some使用指定函数检测数组中的所有元素:
- 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素,则返回false。
- 空数组返回false。
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(arr.some(function (x) {
return x > 4; // 检测是否有元素大于0
}));
// true
console.log(arr.some(function (x) {
return typeof x === 'string'; // 检测是否有字符串类型的元素
}));
// false
console.log([].some(function (x) {
return true; // 对空数组进行检测
}));
// false
find使用指定函数检测数组中的所有元素:
- 如果有一个元素满足条件,则返回该元素 , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素,则返回undefined。
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(arr.find(function (x) {
return x > 4;
}));
// 5
console.log(arr.find(function (x) {
return x < 0;
}));
// undefined
findIndex使用指定函数检测数组中的所有元素:
- 如果有一个元素满足条件,则返回该元素的索引位 , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素,则返回-1。
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(arr.findIndex(function (x) {
return x > 4;
}));
// 4
console.log(arr.findIndex(function (x) {
return x < 0;
}));
// -1
16、flat(多维数组转一维)
不改变原数组,返回展开后的数组
接受一个参数,指定展开的层数,默认一层。传入Infinity无视嵌套层数
自动跳过空值
const arr = [
1,
[2, 3],
[4, 5, [6, 7, [8, [9, [10]]]]],
[11, , 12],
];
console.log(arr.flat()); // [1,2,3,4,5,[6,7,[8,[9,[10]]]],11,12]
console.log(arr.flat(2)); // [1,2,3,4,5,6,7,[8,[9,[10]]],11,12]
console.log(arr.flat(Infinity)); // [1,2,3,4,5,6,7,8,9,10,11,12]
console.log(arr); // [1,[2,3],[4,5,[6,7,[8,[9,[10]]]]],[11,null,12]]
17、flatMap(先map后flat)
arr.flatMap(cb, thisArg);
// 等同于
arr.map(cb, thisArg).flat();
18、…(扩展运算符)
不改变原数组,返回展开后的元素们
const arr = [1, 2, 3, 4];
const arr2 = [5, 6, 7, 8];
console.log([...arr, ...arr2]); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr); // [1, 2, 3, 4]
console.log(arr2); // [5, 6, 7, 8]
console.log(...arr); // 1, 2, 3, 4
[].push(...arr);
// 等同于
[].push(1, 2, 3, 4)