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

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]