javascript数组的一些常用方法

心情杂货铺

于 2019-06-23 19:49:39 发布

阅读量461

点赞数

文章标签： js array 数组遍历截取

本文链接：https://blog.csdn.net/qq_42409134/article/details/93382725

版权

文章目录

整理一些项目中常用的对数组进行操作的方法

整理一些项目中常用的对数组进行操作的方法

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)