JS中的数组常用方法

1. 会改变 原数组的方法

push()

作用：在数组的末尾添加一个或多个元素
返回值：添加数据后，数组的新长度

let arr = [1, 2, 3, 4];
let newArr = arr.push(5, 6);
console.log(newArr); // 6
console.log(arr); // [1, 2, 3, 4, 5, 6]

unshift()

作用：在数组的开头添加一个或多个元素
返回值：添加数据后数组的新长度

let arr = [1, 2, 3, 4];
let newArr = arr.unshift(-1, 0);
console.log(newArr); // 6
console.log(arr); // [-1, 0, 1, 2, 3, 4]

pop()

作用：删除数组末尾的一个元素
返回值：被删除的元素

let arr = [1, 2, 3, 4];
let newArr = arr.pop();
console.log(newArr); // 4
console.log(arr); // [1, 2, 3]

shift()

作用：删除数组开头的一个元素
返回值：被删除的元素

let arr = [1, 2, 3, 4];
let newArr = arr.shift();
console.log(newArr); // 1
console.log(arr); // [2, 3, 4]

reverse()

作用：反转数组元素
返回值：反转以后的数组

let arr = [1, 2, 3, 4];
let newArr = arr.reverse();
console.log(newArr); // [4, 3, 2, 1]
console.log(arr); // [4, 3, 2, 1]

splice()

作用：从数组中删除元素，并返回被删除的结果
参数：1. 开始删除元素的角标，2. 要删除几个元素，3. 把元素删除之后要替换的元素(不常用)
返回值：含有被删除的元素数组

let arr = [1, 2, 3, 4];
let newArr = arr.splice(0, 2);
console.log(newArr); // [1, 2]
console.log(arr); // [3, 4]

sort()

作用：用于对数组的元素进行排序
返回值：经过排序后的数组

let arr = [3, 4, 2, 1];
let newArr = arr.sort((n1, n2) => {
  return n1 - n2;
});
console.log(newArr); // [1, 2, 3, 4]
console.log(arr); // [1, 2, 3, 4]

2. 不会改变 原数组的方法

slice()

作用：选取数组的一部分，并返回一个新数组
参数：1. 从哪个角标开始截取，2. 到哪个角标结束(不包含这个角标的元素)
返回值：开始截取的元素和结束截取的元素的前一个元素
注意点：第二个参数可选，如果不写，默认截取到元素最后

let arr = [1, 2, 3, 4];
let newArr = arr.slice(0, 2);
console.log(newArr); // [1, 2]
console.log(arr); // [1, 2, 3, 4]

concat()

作用：连接两个或更多的数组，并返回结果
返回值：拼接之后的数组

let arr = [1, 2, 3, 4];
let arr1 = ["张三", "李四"];
let newArr = arr.concat(arr1);
console.log(newArr); // [1, 2, 3, 4, '张三', '李四']
console.log(arr); // [1, 2, 3, 4]

join()

作用：把所有元素放入字符串，并用指定分隔符进行分隔，如果不指定，默认是逗号(,)
返回值：分隔后的字符串

let arr = [1, 2, 3, 4];
let newArr = arr.join("%");
console.log(newArr); // 1%2%3%4
console.log(arr); // [1, 2, 3, 4]

map()

作用：返回一个新的数组，可以在里面做一些操作，例如更改数据和整理数据结构。
参数：回调函数

let arr = [
  { title: "node.js", read: 100, hot: true },
  { title: "react", read: 1, hot: true },
  { title: "vue", read: 12, hot: true },
  { title: "angular", read: 78, hot: true },
];
let newArr = arr.map((item, index, arr) => {
  let json = {};
  json.i = `^ _ ^${item.title}`;
  json.in = item.read + 100;
  json.hot = item.hot == true && "热门框架";
  return json;
});
console.log(newArr);

filter()

作用：返回一个新的数组，可以过滤掉不符合条件的数据
参数：回调函数

let arr = [1, 3, 5, 7, 9];
let newArr = arr.filter((item, index) => {
  if (item > 5) {
    return true;
  }
});
console.log(newArr); // [7, 9]
console.log(arr); // [1, 3, 5, 7, 9]

some()

作用：返回一个布尔值，如果数组中有一个元素符合条件，则返回 true，否则返回 false。
参数：回调函数
注意：不改变原数组

let arr = ["banana", "apple", "pear"];
let res = arr.some((item, index, arr) => {
  return item == "apple";
});
console.log(res); // true
console.log(arr); // ['banana', 'apple', 'pear']

其他

Array.from()

作用：将一个类数组对象或者可遍历对象转换成一个真正的数组
返回值：转换之后的真数组

let arr = {
  0: "a",
  1: "b",
  2: "c",
  length: 3,
};
let newArr = Array.from(arr);
console.log(newArr); // ['a', 'b', 'c']
console.log(arr); // {0: "a", 1: "b", 2: "c", length: 3}

Array.of()

作用：将一组值，转换为数组

Array.of(1, 2, 3);
console.log(Array.of(1, 2, 3)); // [1, 2, 3]

find()

作用：查找数组内元素，找到第一个符合条件的数组成员，返回该成员的值，如果没有找到，返回 undefined
参数：回调函数

let arr = [1, 2, 3, 4];
let newArr = arr.find((item, index, arr) => {
  return item > 2;
});
console.log(newArr); // 3
console.log(arr); // [1, 2, 3, 4]

findIndex()

作用：返回第一个符合条件的数组成员的位置(下标)，如果所有成员都不符合条件，则返回-1
参数：回调函数

let arr = [1, 2, 3, 4];
let newArr = arr.findIndex((item, index, arr) => {
  return item > 2;
});
console.log(newArr); // 2
console.log(arr); // [1, 2, 3, 4]

flat()

作用：创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中。
参数：指定要提取嵌套数组的结构深度，默认值为 1。
返回值：一个新的数组。

const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat()); // [0, 1, 2, 3, 4]

const arr2 = [0, 1, [2, [3, [4, 5]]]];
console.log(arr2.flat(Infinity)); // [0, 1, 2, 3, 4, 5]