目录
# 求和reduce()(从左到右)和reduceRight()(从右到左)
JS将某个数组分割为N个对象一组(如,两两一组,三三一组等)
# array.groupBy: 对数组进行分类
/* 原数组 */
const people = [
{ name: 'Alice', age: 21 },
{ name: 'Max', age: 20 },
{ name: 'Jane', age: 20 }
];
/* 想要的结果 */
const groupedPeople = {
20: [
{ name: 'Max', age: 20 },
{ name: 'Jane', age: 20 }
],
21: [
{ name: 'Alice', age: 21 }
]
}
/* 运用array.groupBy的到上面的结果 */
const groupedPeople = people.groupBy(({ age }) => age)
# array.at(i): 获取下标值
at() 方法接收一个整数值并返回该索引的项目,允许正数和负数。负整数从数组中的最后一个项目开始倒数。
const arr = ['first', 'second', 'last'];
/* 获取数组最后一个元素 'last' */
/* 旧 */
console.log(arr[arr.length - 1])
/* 新 at(i) */
console.log(arr.at(-1))
console.log(arr.at(0)) // logs 'first'
console.log(arr.at(-2)) // logs 'second'
# array.fill() : 用初始值填充数组
const length = 3;
//数组
const filledArray = Array(length).fill(0);
//对象数组(错)
const filledObjArray = Array(length).fill({ value: 0 });
//ps:对象数组,需要和map()一起,不然修改一个,其他也会被修改
filledObjArray[1].value = 3
filledObjArray //logs [{value: 3},{value: 3},{value: 3}]
//对象数组(正确) fill() + map()
const filledObjArray = Array(length).fill(null).map(() => { return { value: 0 } });
//ps: array.map()跳过 empty 元素,所以将empty数组fill null
filledObjArray[1].value = 3
filledObjArray //logs [{value: 0},{value: 3},{value: 0}]
//对象数组(正确)-Array.from
const filledObjArray = Array.from( Array(length), () => { return { value: 0 } });
filledObjArray[1].value = 3
filledObjArray //logs [{value: 0},{value: 3},{value: 0}]
# concat() : 数组合并
array1.concat(array2,array3,...,arrayX)
# copyWithin()
注意: copyWithin() 会改变原始数组。
array.copyWithin(target, start, end)
参数 | 描述 |
target | 必需。复制到指定目标索引位置。 |
start | 可选。元素复制的起始位置。没写,默认从0开始 |
end | 可选。选取该位置之前的,停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。 |
var fruits = ["1", "2", "3", "4", "5", "6",'7'];
fruits.copyWithin(2,0,2);
fruits //logs ==》 ["1", "2", "1", "2", "5", "6", "7"]
# 遍历器对象entries()
entries() 方法返回一个数组的迭代对象,该对象包含数组的键值对 (key/value)。
迭代对象中数组的索引值作为 key, 数组元素作为 value。
语法
array.entries()
let fruits = ['a', 'b']
let x = fruits.entries()
for (let [index, elem] of x) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
//情况1
[...x ]
// (2) [Array(2), Array(2)] 展开是下面
//0: (2) [0, 'a']
//1: (2) [1, 'b']
//length: 2
//[[Prototype]]: Array(0)
//情况2
let entries = fruits.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
# 遍历器对象keys()和values()
相当于拆了array.entries()
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
# 判断every()
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
- 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
- 如果所有元素都满足条件,则返回 true。
注意: every() 不会对空数组进行检测。
注意: every() 不会改变原始数组。
语法
array.every(function(currentValue, index, arr), thisValue)
参数说明
参数 | 描述 | ||||||||
function(currentValue, index, arr) | 必须。函数,数组中的每个元素都会执行这个函数
| ||||||||
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。 |
技术细节
返回值: | 布尔值。如果所有元素都通过检测返回 true,否则返回 false。 |
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
var flag = ages.every(checkAdult);// false
# filter() 过滤数组
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。
语法
array.filter(function(currentValue,index,arr), thisValue)
currentValue 必须。当前元素的值,其余的都是可选
返回值:数组 | 返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。 |
# 筛选some()
some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:
- 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素,则返回false。
注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。
语法
array.some( function(currentValue,index,arr), thisValue)
currentValue 必须。当前元素的值,其余的都是可选
返回值:布尔值 | 如果数组中有元素满足条件返回 true,否则返回 false。 |
# find()和findIndex()
find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。
findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
注意: find ()和findIndex() 不会对空数组进行执行。
语法
array. find(function(currentValue,index,arr), thisValue)
currentValue 必须。当前元素的值,其余的都是可选
返回值:元素值 | 返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回 undefined。 |
array. findIndex(function(currentValue,index,arr), thisValue)
currentValue 必须。当前元素的值,其余的都是可选
findIndex()其余和fin()是相同的。
返回值:元素索引 | 返回符合测试条件的第一个数组元素索引,如果没有符合条件的则返回 -1。 |
var arr=[12, 16, 18, 20]
let index = arr.findindex((item)=>{
item >= 18
})
// 打印index为2
# includes()
includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
语法
arr.includes(searchElement)
searchElement | 必须。需要查找的元素值。 |
fromIndex | 可选。从该索引处开始查找 searchElement。如果为负值, 则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。 如果计算出的索引小于 0,则整个数组都会被搜索。 |
# indexOf() 和 lastIndexOf()
indexOf():开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。返回 item 的第一次出现的位置。开始位置的索引为 0。
如果在数组中没找到指定元素则返回 -1。
提示如果你想查找字符串最后出现的位置,请使用 lastIndexOf() 方法
语法
stringObject.indexOf(searchvalue, start)
Array.lastIndexOf(searchvalue, start)
searchvalue必须。查找的元素。start可选, 它的合法取值是 0 到 stringObject.length - 1
返回值: Number |
# 转字符串join()
array.join(separator)
# 转字符串toString()
toString() 方法可把数组转换为字符串,并返回结果。
注意: 数组中的元素之间用逗号分隔。
语法
array.toString()
# forEach()
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
语法
array. forEach(function(currentValue,index,arr), thisValue)
currentValue 必须。当前元素的值,其余的都是可选
返回值: | 返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。 |
# map()
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
语法
array.map(function(currentValue,index,arr),thisValue)
参数 | 描述 | ||||||||
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数
| ||||||||
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。 | ||||||||
返回值: string | 返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。 |
# 删后 pop()
pop() 方法用于删除数组的最后一个元素并返回删除的元素。
元素是通过指定的分隔符进行分隔的。
注意:此方法改变数组的长度!
提示: 移除数组第一个元素,请使用 shift() 方法。
语法
array.pop()
# 删前shift()
shift() 方法用于把数组的第一个元素从其中删除,并返回删除的元素
语法
array.shift()
# 前添unshift()
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
注意: 该方法将改变数组的数目。
提示: 将新项添加到数组末尾,请使用 push() 方法。
语法
array.unshift (item1, item2, … , itemX)
返回值: Number | 数组新长度 |
# 后添 push()
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
array.push(item1, item2, ..., itemX)
# 添/删splice()
splice() 方法用于添加或删除数组中的元素。
注意:这种方法会改变原始数组。
语法
array.splice(index,howmany,item1,.....,itemX)
index | 必需。规定从何处添加/删除元素。 |
howmany | 必需。规定应该删除多少元素。必须是数字,但可以是 "0"。 |
item1, ..., itemX | 可选。要添加到数组的新元素 |
返回值: Array | 可选。要添加到数组的新元素 |
# 切割slice()
slice() 方法可从已有的数组中返回选定的元素。
slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
注意: slice() 方法不会改变原始数组。
语法
array.slice (start, end)
参数 | 描述 |
start | 可选。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置 。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 |
end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。 如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。 如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。 |
返回值: Array | 返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。 |
# 求和reduce()(从左到右)和reduceRight()(从右到左)
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce() 可以作为一个高阶函数,用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
reduceRight()和reduce()功能一样只不过方向相反
语法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数 | 描述 | ||||||||||
function(total,currentValue, index,arr) | 必需。用于执行每个数组元素的函数。
| ||||||||||
initialValue | 可选。传递给函数的初始值 | ||||||||||
返回值: | 返回计算结果 |
返回计算结果
[15.5, 2.3, 1.1, 4.7].reduce(function(total, num) {
return total + Math.round(num);
},0);// 24
# 颠倒reverse()
array.reverse()
# 排序sort()
sort() 方法用于对数组的元素进行排序。
排序顺序可以是字母或数字,并按升序或降序。
默认排序顺序为按字母升序。
注意:当数字是按字母顺序排列时"40"将排在"5"前面。
使用数字排序,你必须通过一个函数作为参数来调用。
函数指定数字是按照升序还是降序排列。
这些说起来可能很难理解,你可以通过本页底部实例进一步了解它。
注意: 这种方法会改变原始数组!。
语法
array.sort(sortfunction)
sortfunction | 可选。规定排序顺序。必须是函数。 |
返回值: Array | 对数组的引用。请注意,数组在原数组上进行排序,不生成副本。 |
//数字排序(数字和升序):
[40,100,1,5,25,10].sort(function(a,b){return a-b});
//[1, 5, 10, 25, 40, 100]
//数字排序 (字母和降序):
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
# isArray()
Array.isArray(obj)
# valueOf()
array.valueOf()
返回数组
# 转换为数组Array.of()
Array.of方法用于将一组值,转换为数组。
Array.of(3, 11, 8) // [3,11,8]
Array.of(3, 11, 8) // [3,11,8]
Array.of(‘3’) // [‘3’]
Array.of(3).length // 1
//Array.of()用来弥补Array()必须有两位时返回数组
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
# 转为数组from()
Array.from(object, mapFunction, thisValue)
var arr = Array.from([1, 2, 3], x => x * 10);
arr // [10,20,30]
# flat()和flatMap() 将嵌套的数组“拉平”
Array.prototype.flat()用于,变成一维的数组。该方法返回一个新数组,对原数据没有影响。
flat(n)默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat(n)方法的参数写成一个整数,表示想要拉平的层数,默认为n=1。
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]
# 更灵活的 Map :array.flatMap()
flatMap()方法对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。
flatMap()只能展开一层数组。
flatMap()方法的参数是一个遍历函数,该函数可以接受三个参数,分别是当前数组成员、当前数组成员的位置(从零开始)、原数组。
flatMap()方法还可以有第二个参数,用来绑定遍历函数里面的this。
arr.flatMap(function callback(currentValue[, index[, array]]) {
// ...
}[, thisArg])
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
const array1 = [1, 4, 9, 16];
想要的效果:const map1 = array1.filter(x => x !== 1).map(x => x * 2);
// expected output: Array [8, 18, 32]
实现效果:const map1 = array1.flatMap(x => x === 1? [] :[ x*2 ])
案例:
JS将某个数组分割为N个对象一组(如,两两一组,三三一组等)
//方法一
/**
* N: 子数组的len
* Q: 数组
*/
var spArray = function(N,Q){
var R = [];
for (let i = 0; i < Q.length; i += N) {
R.push(Q.slice(i, i + N))
}
return R
}
//方法二
/**
* N: 子数组的len
* Q: 数组
*/
var spArray = function(N,Q){
var R = [];
for (let i = 0; i < Q.length; ) {
R.push(Q.slice(i, i += N))
}
return R
}
var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14];
console.log(spArray(5,arr))//[[1,2,3,4,5],[6,7,8,9,10],[11,12,13,14]]
数组去重
//方法1 利用Set对象和数组的Array.from方法
unique(arr){
const newArr = Array.from(new Set(arr));
return newArr
}
//方法2 利用Set+扩展运算符
const newArr = [...new Set(arr)];
//方法3 利用Map对象和数组的filter方法
function unique(arr) {
const res = new Map();
return arr.filter((a) => !res.has(a) && res.set(a, 1))
}
var arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index)
数组去空
var newArr = arr.filter(item => item)