关于javascript:JavaScript常用数组操作方法

1.pop()删除并返回数组的最初一个元素
pop() 办法返回“被弹出”的值：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              
// 从 fruits 删除最初一个元素（"Mango"）// 返回的值是 "Mango"

2.push() 办法（在数组结尾处）向数组增加一个新的元素：
push() 办法返回新数组的长度：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       
//  向 fruits 增加一个新元素
// 返回的值是 5

3.shift() 办法会删除首个数组元素，并把所有其余元素“位移”到更低的索引。
shift() 办法返回被“位移出”的字符串：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            
// 从 fruits 删除第一个元素 "Banana"
// 返回 "Banana"

4.unshift() 办法（在结尾）向数组增加新元素，并“反向位移”旧元素：
unshift() 办法返回新数组的长度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    
// 向 fruits 增加新元素 "Lemon"
// 返回 5

5.delete(), 会在数组留下未定义的空洞。请应用 pop() 或 shift() 取而代之。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined

6.splice() 办法可用于向数组增加新项：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

应用 splice() 来删除元素
第一个参数（2）定义了应增加新元素的地位（拼接）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要增加的新元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

7. 裁剪数组 slice()
slice() 办法创立新数组。它不会从源数组中删除任何元素。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);

slice() 可承受两个参数，比方 (1, 3)。
该办法会从开始参数选取元素，直到完结参数（不包含）为止。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

8.concat() 办法不会更改现有数组。它总是返回一个新数组。
concat() 办法能够应用任意数量的数组参数：

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将 arr1、arr2 与 arr3 连贯在一起

9.reverse() 办法用于颠倒数组中元素的程序。
正文：该办法会扭转原来的数组，而不会创立新的数组。

10. 数组排序 sort()
sort()能够针对数组的元素进行排序，外头蕴含了一个排序用的判断函数，函数内必须蕴含两个参数，这两个参数别离代表数组里的第 n 个和第 n +1 个元素，通过比拟第 n 和第 n + 1 个元素的大小来进行排序。

let a = [1,3,8,4,5,7,6,2];
a.sort((x,y) => y - x);
console.log(a);
// [8, 7, 6, 5, 4, 3, 2, 1]
a.sort((x,y) => x - y);
console.log(a);
// [1, 2, 3, 4, 5, 6, 7, 8]

如果不应用判断函数，默认会将元素转换成字串，并采纳 unicode 来判断，这也会造成某些数字的排序谬误，如下段示例：

let a = [1,3,8,4,5,7,6,2,9,10,11];
a.sort();
console.log(a); // [1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9]

11. 求和

    [1,2,3,1,3].reduce((prev,cur)=>{return prev+cur;},0)

12.indexOf()、lastIndexOf()

indexOf()会判断数组中是否蕴含某个值，判断的形式为「由左而右」，如果有蕴含就返回这个值在数组中的索引值，如果没有就返回 -1，有两个参数，第一个参数示意要判断的值(必填)，第二个参数示意从数组的哪个地位开始判断(选填，预设为 0)。

let a = [1,2,3,4,5,6,7,8];
console.log(a.indexOf(4)); // 3
console.log(a.indexOf(4,5));
// -1 (在 6,7,8 中搜寻有沒有 4)

lastIndexOf()会判断数组中是否蕴含某个值，判断的形式为「由右而左」，如果有蕴含就返回这个值在数组中的索引值，如果没有就返回 -1，这个办法有两个参数，第一个参数示意要判断的值(必填)，第二个参数示意判断从数组的哪个地位开始从右往左查找(选填，默认为整个数组长度 -1)。

let a = [1,2,3,4,5,6,7,8];
console.log(a.lastIndexOf(3)); // 2
console.log(a.lastIndexOf(3,1));
// -1 (只在 1,2 中判断，所以沒有 3)

13.find()
find()会将数组中的「每一个」元素带入指定的函数内做判断，并会返回第一个合乎判断条件的元素，如果没有元素合乎则会返回 undefined。

let a = [1,2,3,4,5,6,7,8];
console.log(a.find(e => e > 3)); // 4
console.log(a.find(e => e < 0)); // undefined

14.findIndex()
findIndex()会将数组中的「每一个」元素带入指定的函数内做判断，并会返回第一个合乎判断条件元素的地位索引，如果没有元素合乎则会返回 -1。

let a = [1,2,3,4,5,6,7,8];
console.log(a.findIndex(e => e > 3)); // 3
console.log(a.findIndex(e => e < 0)); // -1

15.filter()
filter()会将数组中的「每一个」元素带入指定的函数内做判断，如果元素合乎判断条件则会返回，组成一个新的数组。

let a = [1,2,3,4,5,6,7,8];
console.log(a.filter(e => e > 3));
// [4, 5, 6, 7, 8]
console.log(a.filter(e => e%2 == 0));
// [2, 4, 6, 8]

16.forEach()

forEach()会将数组中每个元素套用到指定的函数里进行运算，函数有三个参数，第一个参数示意每个元素的值( 必填)，第二个参数为该元素的索引值(选填)，第三个参数则示意本来的数组(选填)。

let a = [1,2,3,4,5];
let b = 0;
a.forEach(item => {b = b + item;});
console.log(b); // 15 (1+2+3+4+5)

如果联合第二和第三个参数进行搭配应用，就能做到扭转本来数组的成果。

let a = [1,2,3,4,5];
a.forEach((item, index, arr) => {arr[index] = item * 10;
});
console.log(a); // [10,20,30,40,50]

17.map()
map()会解决数组中每个元素，最初返回一个新的数组，外头有一个函数( 必填) 和一个返回函数里的 this 参数(选填)，函数内又蕴含三个参数，第一个是每个元素的值(必填)，第二个是以后元素的索引值(选填)，第三个是以后的数组(选填)。

let a = [1,2,3,4,5,6,7,8];
let b = a.map(e => {return e + 10;});
console.log(b); // [11, 12, 13, 14, 15, 16, 17, 18]

应用第二个和第三个参数的示例:

let a = [1,2,3,4,5,6,7,8];
let b = a.map((e,i,arr) => {return `${e}${i}${arr.find(e => e%5 == 1)}`;
// 组合成「元素 + 索引值 + 除以五余数为 1 的第一个元素」});
console.log(b);
// ['101', '211', '321', '431', '541', '651', '761', '871']

如果要应用回调函数里 this 的参数，则「不能应用」箭头函数，因为箭头函数的 this 指向和函数的 this 指向不同，所以要用个别的函数解决。

let a = [1,2,3,4,5,6,7,8];
let b = a.map(function(e){return e + this; // 此处的 this 为 10}, 10);
console.log(b); // [11, 12, 13, 14, 15, 16, 17, 18]

18.flat()
flat()能够将一个多维数组的深度转成一维(扁平化或称作降维)，它有一个选填的参数，代表要转换的深度数字，预设为 1（只开展一层放到一维数组里，如果是 2，只开展 2 层放到一维数组里），如果深度有很多层，可应用 Infinity 来全副开展成一维数组。

let a = [1,2,[3],[4,[5,[6]]]];
let b = a.flat();
let c = a.flat(2);
let d = a.flat(Infinity);
console.log(b); // [1, 2, 3, 4, [5, [6]]]
console.log(c); // [1, 2, 3, 4, 5, [6]]
console.log(d); // [1, 2, 3, 4, 5, 6]

19.Array.isArray()

Array.isArray()能判断一个元素是否为数组，如果是就返回 true，不然就返回 false。

let a = [1,2,3,4,5,6,7,8];
let b = 123;
let c = 'hello';
let d = {d1:1,d2:2};
console.log(Array.isArray(a)); // true
console.log(Array.isArray(b)); // false
console.log(Array.isArray(c)); // false
console.log(Array.isArray(d)); // false

20.Array.from()

Array.from()会将「类数组」或是「可迭代的对象」转换成数组，Array.from()有两个参数，第一个参数为「类数组对象」或「可迭代的对象」(必填)，第二个参数则是扭转转换成数组元素的函数(选填)。

类数组对象具备 length 属性以及索引化 index 的元素，可迭代对象示意具备能够利用迭代的形式获得它本人自身的元素，例如 Map 和 Set… 等。(参考 MDN 说法)

let a = 'abcde';
let b = Array.from(a);
console.log(b); // ['a','b','c','d','e']
let c = Array.from(a, e => e + e);
console.log(c); // ['aa','bb','cc','dd','ee']

类数组对象写法必须蕴含 length 属性，且对象的 key 须为 0 开始的数字，对应转换后的元素索引。

let a = {
    '0': 14,
    '2': 13,
    '1': 7,
    '3': 9,
    '4': 6,
    length: 5
};
let b = Array.from(a);
console.log(b); // [14,7,13,9,6]

21.Array.of()

Array.of()能够疾速将数字、字串等内容，转换成数组。

let a = Array.of(1,'a',2,'b',3);
console.log(a);
// [1, "a", 2, "b", 3]

22.toString()

toString()会把整个数组转换成字符串。

let a = [1,2,3,4,5,6,7,8];
let b = a.toString();
console.log(b);
// 1,2,3,4,5,6,7,8

23.every()

every()会将数组中的「每一个」元素带入指定的函数内做判断，只有有任何一个元素不合乎判断条件，会回返回 false，如果全副合乎，就会回传 true。

let a = [1,2,3,4,5,6];
console.log(a.every(e => e > 3));
// fasle (因为 1、2 小于 3，3 等于 3)
console.log(a.every(e => e > 0));
// true

本文局部参考自微信公众号 – 前端达人（frontend84），作者：前端达人
以下附上参考链接，如有侵权，请分割自己删除。
https://cloud.tencent.com/developer/article/1485922
欢送大家参阅，一起分享。