前文叙述:
记录 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/