JS数组常用的方法

二丿
277 阅读8分钟

1. join()：数组转字符串

// join('参数')：把数组的元素，以传入的参数进行分割，转换成字符串
let arr = ['虚空镜', '恒宇炉', '西皇塔'];
let str = arr.join(',');
console.log(str); // 虚空镜,恒宇炉,西皇塔

2. push() 和 pop()：数组尾部添加/移除一项

// push()：可以接收任意数量的参数，把它们添加到数组末尾，并返回修改后数组的长度。
// pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项
let arr = ['虚空镜', '恒宇炉', '西皇塔'];
let count = arr.push('道衍神衣', '太皇剑')
console.log(count) // 5
console.log(arr); // ["虚空镜", "恒宇炉", "西皇塔", "道衍神衣", "太皇剑"]

let item = arr.pop();
console.log(item); // 太皇剑
console.log(arr); //  ["虚空镜", "恒宇炉", "西皇塔", "道衍神衣"]

3. shift() 和 unshift()：数组头部移除/添加一项

// shift()：数组头部移除第一项，减少数组的 length 值，然后返回移除的项
// unshift()：可以接收任意数量的参数，把它们添加到数组头部，并返回修改后数组的长度。
let arr = ['虚空镜', '恒宇炉', '西皇塔'];

let item = arr.shift();
console.log(item); // 虚空镜
console.log(arr); //   ["恒宇炉", "西皇塔"]

let count = arr.unshift('道衍神衣', '太皇剑')
console.log(count) // 4
console.log(arr); // ["道衍神衣", "太皇剑", "恒宇炉", "西皇塔"]

4. reverse() 数组数据反转

// reverse()：将数组的数据进行反转，返回反转的数组，并且会改变原数组
let arr = [1,2,3,4,5];
let arr1 = arr.reverse();
console.log(arr1); // [5, 4, 3, 2, 1]
console.log(arr); // [5, 4, 3, 2, 1]

5. sort() 对数组内的数据进行排序(默认为升序)，并且返回排过序的新数组，会改变原来的数组

let arr = [12,2,43,5,2,5]; 
let newArr = arr.sort()
console.log(newArr) // -> [12, 2, 2, 43, 5, 5] 
console.log(arr) // -> [12, 2, 2, 43, 5, 5] 
// 注意：通过上面的案例，你会发现 打印的数组和原数组比较还是有变化的
// [12,2,43,5,2,5] -> [12, 2, 2, 43, 5, 5];
// 但是有没有达到我们想要的结果，这是为什么呢？ 
// 因为排序是针对字符的排序，先使用数组的toString()方法转为字符串
// 再逐位比较，3是大于12的，因为首位3>1，不要与Number型的数据排序混淆。 
 
// 那如果需要数值排序怎么办呢？ 
// 如果需要数值排序，sort(callback) 需要传入一个回调涵数，
// 该函数应该具有两个参数，比较这两个参数，
// 然后返回一个用于说明这两个值的相对顺序的数字（a-b）
// 例如： 
 
let arr1 = [12,2,43,5,2,5]; 
console.log(arr1.sort((a,b)=>a-b)) // -> [2, 2, 5, 5, 12, 43]

6. slice() 截取指定位置的数组，返回截取的数组，不会改变原数组

// slice(startIndex, endIndex) 可以有两个参数
// startIndex：为必选，表示从第几位开始
// endIndex：为可选，表示到第几位结束（不包含endIndex位），省略表示到最后一位
// startIndex和endIndex都可以为负数，负数时表示从最后一位开始算起，如-1表示最后一位。
let arr = ['仙逆', '遮天', '长生界', '紫府仙缘'];

let arr1 = arr.slice(1, 3);

console.log(arr1); // ["遮天", "长生界"]
console.log(arr); // ["仙逆", "遮天", "长生界", "紫府仙缘"]

7. splice() : 向数组中添加，或从数组删除，或替换数组中的元素，然后返回被删除/替换的元素。

// 注意：splice(start, num, val1, val2,...);  
// 所有参数全部可选。和 slice 相比 splice 是会改变原数组的。 
// start 是开始位置,可以为负数，-1就代表从最后一位开始
// num代表要删除或者替换的长度，不能为负数

let arr = ['仙逆', '遮天', '长生界', '紫府仙缘'];

let arr1 = arr.splice(3, 1, '凡人修仙传');

console.log(arr1); // ["紫府仙缘"]
console.log(arr); // ["仙逆", "遮天", "长生界", "凡人修仙传"]

8. toString(): 将数组转换成字符串，类似于没有参数的join()。该方法会在数据发生隐式类型转换时被自动调用，如果手动调用，就是直接转为字符串。不会改变原数组

let arr = ['青铜戒指','青铜仙殿','吞天魔罐'];

console.log(arr.toString()); // 青铜戒指,青铜仙殿,吞天魔罐
console.log(arr); // ["青铜戒指", "青铜仙殿", "吞天魔罐"]

9. indexOf()：根据指定数据，从左到右查询数组中出现的位置，存在返回数据的索引，不存在返回-1

// array.indexOf(item,start)
// item：必须。查找的元素。
// start： 可选的整数参数。规定在数组中开始检索的位置，省略则从首位开始

let arr = ['青铜戒指', '青铜仙殿','吞天魔罐'];

console.log(arr.indexOf('青铜仙殿')); // 1

console.log(arr.indexOf('青铜仙殿', 2)); // -1

10. forEach()：遍历数组，没有返回值

// forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
// 注意: forEach() 对于空数组是不会执行回调函数的。
// 注意：forEach(callback);callback默认有三个参数，
// 分别为value(遍历到的数组的数据)，index(对应的索引)，self(数组自身)。

let arr = ['青铜戒指', '青铜仙殿','吞天魔罐'];

let a = arr.forEach((item, index) => {
	item = item + 'sss'
	console.log(item, index)
})
// 打印结果：
// 青铜戒指sss 0
// 青铜仙殿sss 1
// 吞天魔罐sss 2
console.log(a); // undefined
console.log(arr); // ["青铜戒指", "青铜仙殿", "吞天魔罐"]

11. map()：方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

// map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
// map() 方法按照原始数组元素顺序依次处理元素。
// map(callback);callback默认有三个参数，
// 分别为value(遍历到的数组的数据)，index(对应的索引)，self(数组自身)。
// 注意： map() 不会对空数组进行检测。
// 注意： map() 不会改变原始数组。

let arr = ['青铜戒指', '青铜仙殿','吞天魔罐'];

let newArr = arr.map((item, index) => {
	return item + 'sss'
})

console.log(newArr); // ["青铜戒指sss", "青铜仙殿sss", "吞天魔罐sss"]
console.log(arr); // ["青铜戒指", "青铜仙殿", "吞天魔罐"]

12. filter()：方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

// filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
// filter(callback);callback默认有三个参数，
// 分别为value(遍历到的数组的数据)，index(对应的索引)，self(数组自身)。
// 注意： filter() 不会对空数组进行检测。
// 注意： filter() 不会改变原始数组。

let arr = [1,2,3,4,5];
let newArr = arr.filter((item, index, arr) => {
	return item > 2
})

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

13. find()：循环数组，返回符合条件的第一个元素,并停止循环，没有则返回undefined

// find() 循环数组返回符合条件的第一个元素。
// find(callback);callback默认有三个参数，
// 分别为value(遍历到的数组的数据)，index(对应的索引)，self(数组自身)。
// 注意： find() 不会对空数组进行检测。
// 注意： find() 不会改变原始数组。

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

14. findIndex()：循环数组返回符合条件的第一个元素的索引，并终止循环，没有则返回-1。

// findIndex() 循环数组返回符合条件的第一个元素的索引，并终止循环，没有则返回-1。
// findIndex(callback);callback默认有三个参数，
// 分别为value(遍历到的数组的数据)，index(对应的索引)，self(数组自身)。
// 注意： findIndex() 不会对空数组进行检测。
// 注意： findIndex() 不会改变原始数组。

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

15. every()：方法用于检测数组所有元素是否都符合指定条件（通过函数提供），所有项都满足条件返回true,否则返回false。

// every(callback);callback默认有三个参数，
// 分别为value(遍历到的数组的数据)，index(对应的索引)，self(数组自身)。
// 注意： every() 不会对空数组进行检测。
// 注意： every() 不会改变原始数组。

let arr = [1,2,3,4,5];
let bool = arr.every((item, index, arr) => {
	return item > 0
})
let bool1 = arr.every((item, index, arr) => {
	return item > 7
})
console.log(bool); // true
console.log(bool1); // false

16. some(): 判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。否侧就会返回false。

// some(callback);callback默认有三个参数，
// 分别为value(遍历到的数组的数据)，index(对应的索引)，self(数组自身)。
// 注意： some() 不会对空数组进行检测。
// 注意： some() 不会改变原始数组。

let arr = [1,2,3,4,5];
let bool = arr.some((item, index, arr) => {
	return item > 3
})
let bool1 = arr.some((item, index, arr) => {
	return item > 7
})
console.log(bool); // true
console.log(bool1); // false

17. reduce()：接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

// array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
// total: 必需，初始值, 或者计算结束后的返回值。
// currentValue: 必需。当前元素
// currentIndex: 可选。当前元素的索引
// arr: 可选。当前元素所属的数组对象。
// initialValue: 可选。传递给函数的初始值
// 注意： reduce() 不会对空数组进行检测。
// 注意： reduce() 不会改变原始数组。

let arr = [1,2,3,4,5];
let sum = arr.reduce((sum, item) => {
	return sum + item;
})
console.log(sum); // 15

18. concat() : 用于连接两个或多个数组， 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

let arr = [1,2,3];
let arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy);   //[1, 2, 3, 9, 11, 13]
console.log(arr);   // ) [1, 2, 3](原数组未被修改)
avatar
文章
阅读
粉丝