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
欢迎大家参阅,一起分享。