新接触的项目中有es6的数组方法,开始不是太理解,但是确实让开发变得更加便捷,遂整理如下:
改变数组的方法--->
1.arr.push() 从数组后边添加元素,返回值为添加完成后数组的长度
let arrPush = [1, 2, 3, 4, 5]
console.log(arrPush.push(6)) //6返回值是数组的长度
consolelog(arrPush) //[1,2,3,4,5,6]
2.arr.pop()从数组后边删除元素,返回值是删除的元素
let arrPop = [1, 2, 3, 4, 5]
console.log(arrPop.pop()) //5
console.log(arrPop) //[1,2,3,4]
3.arr.shift()从数组前边删除元素,返回值是删除的元素
let arrShift = [1, 2, 3, 4, 5];
console.log(arrShift.shift()) //1
console.log(arrShift) //[2,3,4,5]
4.arr.unshift()从数组前边添加元素,返回值是添加完之后数组的长度
let arrUnshift = [1, 2, 3, 4, 5];
console.log(arrUnshift.unshift(0)); //6
console.log(arrUnshift) //[0,1,2,3,4,5]
5.arr.splice(i,n)从索引为i的位置开始删除,n是删除的个数,即从索引i开始删除n个项,返回值是删除的元素
let arrSplice = [1, 2, 3, 4, 5];
console.log(arrSplice.splice(1, 2)) //2,3
console.log(arrSplice) //1,4,5
6.arr.reverse()数组反转,返回值是翻转后的数组
let arrReverse = [1, 2, 3, 4, 5];
conole.log(arrReverse.reverse()) //[5,4,3,2,1]
conole.log(arrReverse) //[5,4,3,2,1]
7.arr.copyWithin()方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。
//语法:arr.copyWithin(target[, start[, end]])
// target
// 0 为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算。
// 如果 target 大于等于 arr.length，将会不发生拷贝。如果 target 在 start 之后，复制的序列将被修改以符合 arr.length。
// start
/ 0 为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算。
// 如果 start 被忽略，copyWithin 将会从0开始复制。
// end
// 0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数， end 将从末尾开始计算。
// 如果 end 被忽略，copyWithin 方法将会一直复制至数组结尾（默认为 arr.length）。
let array1 = ['a', 'b', 'c', 'd', 'e'];
// copy to index 0 the element at index 3
console.log(array1.copyWithin(0, 3, 4)); // ["d", "b", "c", "d", "e"]
// copy to index 1 all elements from index 3 to the end
console.log(array1.copyWithin(1, 3)); //["d", "d", "e", "d", "e"]
console.log(array1) // ["d", "d", "e", "d", "e"]
let numbers = [1,2,3,4,5];
numbers.copyWithin(-2); // [1, 2, 3, 1, 2]
numbers.copyWithin(0, 3); // [4, 5, 3, 4, 5]
numbers.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]
numbers.copyWithin(-2, -3, -1); // [1, 2, 3, 3, 4]
不改变数组的方法--->
8.arr.concat() 连接两个数组 返回值为连接后的新数组
let arrConcat = [1, 2, 3, 4, 5];
console.log(arrConcat.concat([6, 7])) //[1,2,3,4,5,6,7]
console.log(arrConcat) //[1,2,3,4,5]
9.arr.split()将字符串转化为数组,返回值就是转化后的数组
let str = "12345";
console.log(str.split("")); //[1,2,3,4,5]
10.arr.sort()将数组按照字符编码的顺序进行排序 返回值是排好的数组,默认是按照最左边的数字进行排序,不是按照数字大小排序
let arrSort = [1, 3, 2, 14, 5];
console.log(arrSort.sort()) //[1, 14, 2, 3, 5]
console.log(arrSort.sort((m, n) => m - n)) //[1,2,3,5,14]
console.log(arrSort.sort((m, n) => n - m)) //[14,5,3,2,1]
11.arr.slice(start,end)从start开始截止到end,不包含end,返回的是截取出来的数组
var arrSlice = [1, 2, 3, 4, 5];
console.log(arrSlice.slice(1, 3)) //2,3
console.log(arrSlice) //[1,2,3,4,5]
12.arr.forEach(value,index,array)遍历数组,相当与for循环,无返回值
let arr = [1, 2, 3, 4, 5]
arr.forEach((value, index, array) => {
console.log(`value:${value} index:${index} array:${array}`)
})
// value:1 index:0 array:1,2,3,4,5
// value:2 index:1 array:1,2,3,4,5
// value:3 index:2 array:1,2,3,4,5
// value:4 index:3 array:1,2,3,4,5
// value:5 index:4 array:1,2,3,4,5
13.arr.map(value,index,array)遍历数组,返回一个新的数组
let arr = [1, 2, 3, 4, 5]
arr.map((value, index, array) => {
console.log(`value:${value} index:${index} array:${array}`)
})
// value:1 index:0 array:1,2,3,4,5
// value:2 index:1 array:1,2,3,4,5
// value:3 index:2 array:1,2,3,4,5
// value:4 index:3 array:1,2,3,4,5
// value:5 index:4 array:1,2,3,4,5
14.arr.filter(value,index,array)过滤数组,返回一个满足要求的数组,不改变原始数组
var arrFilter = [1, 2, 3, 4, 5];
console.log(arrFilter.filter((item) => item <= 3)); //[1,2,3]
console.log(arrFilter) //[1,2,3,4,5]
//数组方法中的map和filter的区别:一般如果我们要操作数组的话,就实用Map.而一般仅仅是过滤数组中满足条件的项的话,我们就使用filter
15.arr.every()根据条件判断,如果所有项都满足这个条件,则返回true,如果有一项不满足,则返回false,返回值是布尔值
let arrEvery = [1, 2, 3, 4, 5]
console.log(arrEvery.every(item => item > 3)) //false
16.arr.some()遍历数组,根据条件判断,如果有一项满足则返回true,如果都不满足则返回false
let arrSome = [1, 2, 3, 4, 5];
console.log(arrSome.some(item => item >= 3)) //true
console.log(arrSome.some(item => item >= 6)) //false
17.arr.reduce(callback,initialValue)迭代数组的所有项,累加器,数组中的每个值(从左到右)合并,最终计算为一个值
//参数 callback:previousValue:必选--上一次调用回调返回的值,或者是提供的初始值(initivalValue)
// currentValue:必选--数组中当前被处理的数组项
// index可选--当前数组项在数组中的索引值
// array可选--初始值
//应用场景1:数组中所有值的和
let arrReduce = [1, 2, 3, 4, 5];
let sum = arrReduce.reduce((preVal, curVal) => preVal + curVal);
console.log(sum) //15
//应用场景2:累加对象数组里面的值
let initivalValue = 0
let arrObj = [{
x: 1
}, {
x: 2
}, {
x: 3
}]
let objSum = arrObj.reduce((preVal, curVal) => preVal + curVal, initivalValue)
console.log(objSum) //6
//应用场景3:将二维数组转化为一维数组
let flattened = [
[0, 1],
[2, 3],
[4, 5]
].reduce((preVal, curVal) => preVal.concat(curVal))
console.log(flattened) //[0,1,2,3,4,5];
//应用场景4:计算数组中每个元素出现的次数
let names = ['Clice', 'BOb', 'Tiff', 'Bruce', 'Alice'];
let count = names.reduce((nameObj, name) => {
if (name in nameObj) {
nameObj[name]++
} else {
nameObj[name] = 1
}
return nameObj
})
console.log(count) //{ 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
18.arr.reduceRight(callback,initivalValue)与arr.redduce()的功能一样,不同的是,reduceRight是从数组的末尾向前将数组中的每一项进行累加(参考上例理解即可)
19.arr.indexOf()查看某个元素的索引值,若有重复的,则返回第一个查到的索引值,若不存在,则返回-1
let arrIndexOf = [1, 2, 3, 4, 5];
console.log(arrIndexOf.indexOf(2)) // 1 存在
console.log(arrIndexOf.indexOf(9)) // -1 不存在
20.arr.lastIndexOf()和arr.indexOf()的功能一样，不同的是从后往前查找(参考上例理解即可)
21.arr.from()将伪数组变成数组,只要有length就可以转成数组 --es6
//注意转化对象的时候,只有当其中有length这个属性才能转化,而且对象中的key值只有从索引为0开始才能生效
let str = '张三';
Array.from(str) //['张','三']
let fromObj = {
0: "张三",
1: 18,
2: "man",
length: 3
}
Array.from(fromObj) // ["张三", 18, "man"]
let fromObj1 = {
name: "张三",
age: 18,
sex: "man",
length: 3
}
Array.from(fromObj1) //[undefined,undefined,undefined]
22.arr.of()将一组值转换成数组，类似于声明数组
//Array.of()和Array构造函数之间的区别在于处理整数参数:Array.of(7)创建一个具有单个元素7的数组.
//Array(7)创建一个长度为7的空数组(注意:这是指一个有7个空位(empty)的数组,而不是由7个undefined组成的数组)
console.log(Array.of(7)) // [7]
console.log(Array.of(1,2,3)) // [1,2,3]
console.log(Array(7)) // [empty*7] [ , , , , , , ]
console.log(Array(1,2,3)) // [1,2,3]
23.arr.find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
let arrFind = [5, 12, 8, 130, 44];
var found = arrFind.find(function(element) {
return element > 10;
});
console.log(found); //12
24.arr.findIndex()返回数组中满足提供的测试函数的第一个元素的索引,否则，返回-1
var arrFindIndex = [5, 12, 8, 130, 44];
console.log(arrFindIndex.findIndex(element => element >13)); // 3 即130
25.arr.includes()方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。
// 注意：对象数组不能使用includes方法来检测。
let arrIncludes = [1, 2, 3];
console.log(arrIncludes.includes(2)); // true
let pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat')); // true
console.log(pets.includes('at')); // false
26.arr.keys()方法返回一个包含数组中每个索引键的Array Iterator对象
var arrKeys = ['a', 'b', 'c'];
var iterator = arrKeys.keys();
for (let key of iterator) {
console.log(key); // 0 1 2
}
27.arr.values()方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值
let arrValues = ['a', 'b', 'c'];
let iterator = arrValues.values();
for (const value of iterator) {
console.log(value); // "a" "b" "c"
}
28.arr.entries()方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
var arrEntries = ["a", "b", "c"];
var iterator = arrEntries.entries();
// undefined
for (let e of iterator) {
console.log(e);
}
// [0, "a"]
// [1, "b"]
// [2, "c"]
29.arr.flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
//语法 : var newArray = arr.flat([depth])
//参数 : depth 可选 指定要提取嵌套数组的结构深度，默认值为 1。
//实际用途1: 嵌套数组扁平化
var arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]
//使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6]
//实际用途2: flat() 方法会移除数组中的空项:
var arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]
30.arr.flatMap()方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。
//语法 : var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
// 返回新数组的元素
// }[, thisArg])
var arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]); // [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]); // [2, 4, 6, 8]
// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [
[x * 2] // [[2], [4], [6], [8]]
]);
//下边示例更好的说明了flatMap的用法特性
let arr = ["今天天气不错", "", "早上好"]
arr.map(s => s.split("")) // [["今", "天", "天", "气", "不", "错"],[],["早", "上", "好"]]
arr.flatMap(s => s.split('')); // ["今", "天", "天", "气", "不", "错", "早", "上", "好"]
31.arr.slice()方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
let citrus = fruits.slice(1, 3);
console.log(citrus) // ['Orange','Lemon']
console.log(fruits) // ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
32.arr.join()方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。
let a = ['Wind', 'Rain', 'Fire'];
let myVar1 = a.join(); // myVar1的值变为"Wind,Rain,Fire"
let myVar2 = a.join(', '); // myVar2的值变为"Wind, Rain, Fire"
let myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
let myVar4 = a.join(''); // myVar4的值变为"WindRainFire"
console.log(1) // ['Wind', 'Rain', 'Fire']
上述示例只是大概对相关方法进行了一些简单的展示,具体还需要在具体的项目中进行更深的研究,有问题的地方希望大家指正,共同学习,共同进步.
网友评论