JS中数组常用的方法（详解）

忘是亡心i 2023-07-15 13:18 28阅读 0赞

### 1.map ###

let arrNew = arr.map(x => x*2)
    console.log(arr);  // [1, 2, 3, 4]
    console.log(arrNew);  // [2, 4, 6, 8]

*  map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
 *  map() 方法按照原始数组元素顺序依次处理元素。
 *  注意： map() 不会对空数组进行检测。
 *  原数组保持不变，返回新数组

### 2.forEach ###

arr.forEach( item => item*2 )  // return undefined
    console.log(arr);  // [1, 2, 3, 4]

*  原数组改变，没有返回值

### 3.filter 过滤元素 ###

let arr = [1, 2, 3, 4, 5]
    const isBigEnough = value => value >= 3
    let newArr = arr.filter(isBigEnough )
    console.log(newArr);  // [3, 4, 5]

*  原数组不改变，将满足条件的元素作为一个新数组返回

### 4.find 返回通过测试的数组的第一个元素的值 ###

在第一次调用 callback 函数时会确定元素的索引范围，因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。被删除的元素仍旧会被访问到。

var arr = [1,2,3,4,5,6,7];
    var ar = arr.find(function(elem){
        return elem>5;
    });
    console.log(ar);//6
    console.log(arr);//[1,2,3,4,5,6,7]

find()方法为数组中的每个元素都调用一次函数执行，当数组中的元素在测试条件时返回true，find()返回符合条件的元素，之后的值不会再执行函数。如果没有符合条件的元素则返回undefined。

### 5.every 是否所有元素都符合条件 ###

var ages = [32, 33, 16, 40];
    function checkAdult(age) {
        return age >= 18;
    }
    console.log(ages.every(checkAdult))  // false

*  不改变原数组。如果有一个元素不满足，返回false；全部满足才返回true

### 6.some 是否存在元素符合条件 ###

var ages = [3, 10, 18, 20];
    function checkAdult(age) {
        return age >= 18;
    }
    console.log(ages.some(checkAdult))  // true

*  不改变原数组。如果有一个元素满足，返回true；全部不满足则返回false

### 7.reduce 所有元素返回调用函数，返回值为最后结果 ###

let arr = [1,2,3,4];
    const add1 = (a,b) => a+b;
    let arrNew = arr.reduce(add1);
    console.log(arrNew);  // 10

*  不改变原数组，只是返回最后的调用结果。
 *  返回单个值

### 8.push 在数组最后添加新元素 ###

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

*  改变数组长度。返回数组的长度

### 9.pop 在数组最后删除一个元素 ###

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

*  改变数组长度。返回被删除的元素

### 10.shift 在数组前删除第一个元素 ###

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

*  改变数组长度。返回被删除元素

### 11.unshift 将一个/多个元素添加到数组开头 ###

let arr = [1,2,3,4,5];
    console.log(arr.unshift(6,7));  // 7  返回加进去的第一个数
    console.log(arr);  // [6, 7, 1, 2, 3, 4, 5]  先把7加进去，再加7
    console.log(arr.length);  // 7

*  改变数组长度。返回加进数组的第一个数

### 12.isArray() ###

判断一个对象是不是数组，返回的是布尔值

### 13.concat 拼接数组 ###

let arr1 = [1, 2, 3]
    let arr2 = [4, 5]
    let arr = arr1.concat(arr2)
    console.log(arr)  //[1, 2, 3, 4, 5]

### 14.将数组转化成字符串 ###

1.  Array.toString()

let arr = [1, 2, 3, 4, 5];
    let str = arr.toString()
    console.log(str) // 1,2,3,4,5

2.Array.join() ：可以设置元素间的间隔

let arr = [1, 2, 3, 4, 5];
    let str1 = arr.join("");  // 12345
    let str2 = arr.join('--');  // 1--2--3--4--5
    let str3 = arr.join('##');  // 1##2##3##4##5

补充：字符串分割成字符串数组 split

stringObject.split(separator,howmany)
    //  separator：分隔符，字符串或正则表达式； howmany 返回的数组的最大长度

"2:3:4:5".split(":")	//将返回["2", "3", "4", "5"]
    "|a|b|c".split("|")	//将返回["", "a", "b", "c"]

// 把句子分割成单词：
    var words = sentence.split(' ')
    // 或者使用正则表达式作为 separator：
    var words = sentence.split(/\s+/)  // \s是不可见字符，空格、换行符、制表符等。

### 15.splice 万能，实现增删改 ###

// 删除  splice(1,3)  参数：删除位置；删除个数
    let arr = [1, 2, 3, 4, 5];
    let arr1 = arr.splice(1,3)
    console.log(arr);  // [1, 5]
    console.log(arr1);  // [2, 3, 4]  改变原数组，返回被删除的元素

// 插入  splice(2,0,"hhh")  参数：插入位置；0：不删除；插入内容
    let arr = [1, 2, 3, 4, 5];
    var arr1 = arr.splice(2,0,"hhh")
    console.log(arr);  // [1, 2, "hhh", 3, 4, 5]
    console.log(arr1);  // []  没有返回值，因为没有删除元素

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

### 16.slice 从数组指定位置输出新数组 ###

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

*  不改变数组，返回新数组
 *  slice(1)：从位置1开始
 *  slice(1,4)：从位置1开始，到位置4-1。 区别于splice

### 17.sort 排序 ###

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.sort(); 
    // Apple,Banana,Mango,Orange  默认升序

let arr = [1, 2, 3, 4, 5];
    arr.sort(function (a,b) {
        return b-a;  // b-a：降序；a-b：升序。
    })
    console.log(arr);  // [5, 4, 3, 2, 1]