javascript的数组方法

118 阅读4分钟

1 forEach

遍历数组,原地算法,无返回值不能使用value直接修改数组的元素,可以使用arr[index]来修改

 arr.forEach(function(value, index, array) {
       //参数一是:数组元素
       //参数二是:数组元素的索引
       //参数三是:当前的数组
   arr[index] = arr[index] + 1
 })
  //相当于数组遍历的 for循环 没有返回值

2 map

创建一个新数组,其结果是该数组中的每个元素都调用一次提供的函数后的返回值。可以直接使用ele修改数组里面的值。

var arr = ["关长","张飞","赵子龙"];
var arr2 = arr.map(function (ele,index,array) {
    return ele+"你好";
})
console.log(arr2); // ["关长你好", "张飞你好", "赵子龙你好"]

3 map() 与forEach的区别

  • map可以使用遍历元素直接修改数组的值,但不是改源数组,而是返回新数组;\
  • forEach没有返回值,但是能直接改数组的值

4 filter过滤数组

  var arr = [12, 66, 4, 88, 3, 7];
  var newArr = arr.filter(function(value, index,array) {
       //参数一是:数组元素
     //参数二是:数组元素的索引
     //参数三是:当前的数组
     return value >= 20;
  });
  console.log(newArr);//[66,88] //返回值是一个新数组

5 some

查找数组中是否有满足条件的元素,传入函数参数

 var arr = [10, 30, 4];
 var flag = arr.some(function(value,index,array) {
     // 参数一是:数组元素
     // 参数二是:数组元素的索引
     // 参数三是:当前的数组
     return value < 3;
  });
console.log(flag);//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环

6 some和forEach区别

  • 如果查询数组中唯一的元素, 用some方法更合适,在some 里面 遇到 return true 就是终止遍历,迭代效率更高
  • 在forEach 里面 return 不会终止迭代

7 every

测试一个数组内的所有元素是否都能通过某个指定函数的测试。返回值是一个 boolean 类型值。

var arr = ["青花瓷", "一路向北", "轨迹"];
var flag = arr.every(function (ele, index) { // 只要有一个没满足条件,就返回false
    return ele.length > 2;
}); 
console.log(flag); // false

8 fill

arr.fill(value[, start[, end]])

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

var arr = new Array(5)
arr.fill(0, 2, 4)

1652110071(1).png

9 join

arr.join([separator]) 将一个数组的所有元素连接成一个字符串并返回这个字符串,不改变原数组

var arr = [1,2,3,4,5]
let r = arr.join('+') // 1+2+3+4+5
let r2 = arr.join('') // 12345  

常用于数组转字符串

10 push

arr.push(args)将一个或多个元素添加到数组的末尾,并返回该数组的新长度改变原数组

var arr = [1,2,3,4,5]
var len = arr.push(4,5)  // 7
arr.push(...[1,2,3])
console.log(arr);  // [1,2,3,4,5,4,5,1,2,3]

11 pop

arr.pop():从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度

var arr = [1,2,3,4,5]
var del = arr.pop()  // 5
console.log(arr)  // [1,2,3,4]

12 shift

arr.shift() 从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

var arr = [1,2,3,4,5]
var del = arr.shift()  // 1
console.log(arr)  // [2,3,4,5]

13 unshift

arr.unshift():将一个或多个元素添加到数组的开头,并返回该数组的新长度。

var arr = [1,2,3,4,5]
var len = arr.unshift(...[1,2])  // 7
console.log(arr);  // [1, 2, 1, 2, 3, 4, 5]

14 reduce, reduceRight

reduce, reduceRight:对数组中的每个元素(从左到右,从右到左)应用一个函数,将其简化为单个值。

var arr = [1,2,3,4,5]
var sum = arr.reduce((previousVal, currentVal) => {
return previousVal + currentVal
})  // 15
var sub = arr.reduceRight((previousVal, currentVal) => {
return previousVal - currentVal
})  // -5

15 reverse

arr.reverse() 反转数组会改变原数组

var arr = [1,2,3,4,5]
arr.reverse()  // [5,4,3,2,1]

16 sort

arr.sort([compareFunction])默认按元素转成字符串的UTF-16顺序排序,返回排序后的数组,原地算法,会改变数组

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function (a, b) {
return a - b;
});  // [1,2,3,4,5]

17 splice

array.splice(startIndex [, deleteCount[, additem1[, additem2[, ...]]]]) 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。 从索引startIndex开始删除deleteCount个元素并将additem添加进数组

var numbers = [1,2,3,4,5];
var r1 = numbers.splice(2, 0, 'a','b') // 仅添加
console.log(numbers);  // [1, 2, 'a', 'b', 3, 4, 5]
console.log(r1);    // []
var r2 = numbers.splice(1,1)  // 仅删除
console.log(numbers)  // [1, 'a', 'b', 3, 4, 5]
console.log(r2);  // [2]
var r3 = numbers.splice(3, 1, 'c')  // 既添加又删除
console.log(numbers);  // [1, 'a', 'b', 'c', 4, 5]
console.log(r3);  // [3]

18 toString

arr.toString()将数组转换成字符串。可以用于展平数组

[1,2,[3,[4,[5]]]].toString() // "1,2,3,4,5"

19 并不完全待完善....