js数组开发常用方法

前文叙述：
记录 js 开发过程中常用到的一些数组操作方法。如果文章对你有所帮助，那就点点赞再走吧！

01、数组合并去重

关于数组去重有很多种方法，本文仅举例 set 集合去重方式。

let arr1 = [0, 1, 2, 3];
let arr2 = [1, 3, 4, 5];
let sumData = [];
sumData= sumData.concat(arr1).concat(arr2) ; //把多个数组合并为一个数组

let arrNew= new Set(sumData); // 使用set集合去重

console.log("arrNew",Array.from(arrNew)); //将set集合转化为数组,最终结果： [0, 1, 2, 3, 4, 5]

02、length 属性获取长度

作用：length 用于获取数组长度
（需要特别注意 length 和 length() 都是用于获取长度，而 length() 是字符串特有的方法）

举例1：

let arr = [1, 2, 3];

console.log(arr.length); //  3

03、concat() 数组合并

作用：concat() 方法用于合并两个或多个数组。此方法不更改现有数组，而是返回一个新数组。

语法：

• concat()
• concat(value0)
• concat(value0, value1)
• concat(value0,value1, … , valueN)

举例1：两个数组合并

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2);

console.log(arr3); //输出： [1, 2, 3, 4, 5, 6]

举例2：三个数组合并

let num1 = [1, 2, 3];
let num2 = [4, 5, 6];
let num3 = [7, 8, 9];

let numbers = num1.concat(num2, num3);
console.log(numbers); // 输出： [1, 2, 3, 4, 5, 6, 7, 8, 9]

04、join() 把数组连接成字符串

作用：join() 方法通过使用逗号（默认）或指定分隔符 连接数组中的所有元素来创建并返回一个新字符串。

语法：

• join()
• join(separator)

说明：如果 separator 是一个空字符串，所有元素之间不包含任何字符。

举例

let arr = [1, 2, 3];

// 默认逗号连接
console.log(arr.join()); // 输出： "1, 2, 3"

console.log(arr.join('')); // 输出： "123"
//将数组用 - 符号连接起来
console.log(arr.join('-'));  // 输出： "1-2-3"

05、sort() 数组排序

作用： sort() 方法可以对数组进行排序

举例：

// 根据对象的某个字段来排序
arrSort(a, b){
    return a.sortNo - b.sortNo;
  },
let arr = [
  {sortNo: "2", name: "小红"},
  {sortNo: "3", name: "小名"},
  {sortNo: "4", name: "小小"},
  {sortNo: "1", name: "小蓝"},
];
  
let newArr = arr.sort(this.arrSort); 

结果：

06、indexOf() 找元素第一次出现的索引

作用：indexOf() 查找数组中给定元素第一次出现的索引。[不改变原数组] 如果该元素不存在则返回-1

语法：

• indexOf(searchElement)
• indexOf(searchElement, fromIndex)

举例：

const array = [2, 9, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
// 查找9从索引为2开始找
array.indexOf(9, 2);  //  2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

07、push() 数组末尾添加元素

作用：push() 方法将一个或多个元素添加到数组的末尾，并返回数组的新长度。（改变原数组）

语法：

• push(element0)
• push(element0, element1)
• push(element0, element1,… elementN)

举例1：

let arr = [1, 2, 3];

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

console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

08、includes() 判断数组中是否包含某一个元素

作用：includes() 可以判断一个数组中是否包含某一个元素，并返回 true 或者 false

语法：
includes可以包含两个参数，第二个参数表示判断的起始位置。

• includes(searchElement)
• includes(searchElement, fromIndex)

举例1：

const arr = ['a', 'b', 'c'];
// 如果 fromIndex 大于或等于数组的长度，则返回 false。不会搜索数组。
arr.includes('c', 3)    // false
arr.includes('c', 100)  // false
console.log(arr.includes('a')); // true
console.log(arr.includes('d')); // false
arr.includes('a', -100) // true

09、filter() 用于对数组进行过滤

作用：filter() 用于创建一个过滤后的数组，不会更改原数组。也不会对空数组进行操作。

语法：

• filter((element) => { /* … */ } )
• filter((element, index) => { /* … */ } )
• filter((element, index, array) => { /* … */ } )

element 当前元素， index 当前元素的索引， array 被调用的数组

举例：
方式一：

// 过滤掉数组中小于10的元素
const isBigEnough(value) => {
  return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
console.log(filtered); // [12, 130, 44]

方式二：

	let filtered = [12, 5, 8, 130, 44];
    // 过滤掉数组中小于10的元素
    filtered = filtered.filter((item) => {
      return item >= 10;
    })
    console.log(filtered); // [12, 130, 44]

10、toString() 把数组转为字符串

作用：toString() 方法把数组转为字符串（默认以逗号连接）

语法：

• toString()

举例：

const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString()); // "1,2,a,1a"

11、splice() 用于插入、删除或替换数组的元素

作用：splice() 方法通过删除 或 替换现有元素 或 添加 新元素来更改数组的内容，会改变原始数组。而 slice() 方法不会改变原始数组。

语法：

• splice(start)
• splice(start, deleteCount)
• splice(start, deleteCount, item1)
• splice(start, deleteCount, item1, item2, itemN)
  

举例：

11.01 删除

11.01 例子1：

	let array = [0,1,2,3,4,5];
    array.splice(1, 2); // 从下标 1 开始，删除2个元素
    console.log(array); // [0, 3, 4, 5]

11.01 例子2：

	let array = [0,1,2,3,4,5];
    array.splice(3); // 删除下标3往后的所有元素
    console.log(array); // [0, 1, 2]

11.02 替换

    let array = [0,1,2,3,4,5];
    // 替换下标2以后的两个元素 (即 3，4替换成 10， 20)。
    array.splice(2, 2, 10, 20); 
    console.log(array); // [0, 1, 10, 20, 4, 5]

11.03 插入

    let array = [0,1,2,3,4,5];
    // 从下标2开始，插入 n 个元素（注意：第三个元素开始都是插入的元素）。
    array.splice(2, 0, 10, 20); 
    console.log(array); // [0, 1, 10, 20, 2, 3, 4, 5]

文章参考来源：
https://developer.mozilla.org/