数组方法集合

目录

# array.groupBy: 对数组进行分类

#   array.at(i): 获取下标值

#   array.fill() : 用初始值填充数组

#   concat() : 数组合并

#   copyWithin()

#   遍历器对象entries()

#   遍历器对象keys()和values()

#   判断every()

#   filter() 过滤数组

#   筛选some()

#   find()和findIndex()

#   includes()

#   indexOf() 和  lastIndexOf()

#   转字符串join()

#   转字符串toString()

#   forEach()

#   map()

#   删后 pop()

#   删前shift()

#   前添unshift()

#   后添 push()

#   添/删splice()

#   切割slice()

#   求和reduce()(从左到右)和reduceRight()(从右到左)

#   颠倒reverse()

#   排序sort()

#   isArray()

#   valueOf()

#   转换为数组Array.of()

#   转为数组from()

#   flat()和flatMap() 将嵌套的数组“拉平”

#   更灵活的 Map :array.flatMap()

案例:

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)

必须。函数,数组中的每个元素都会执行这个函数
函数参数:

参数

描述

currentValue

必须。当前元素的值

index

可选。当前元素的索引值

arr

可选。当前元素属于的数组对象

thisValue

可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue ,"this" 的值为 "undefined"

技术细节

返回值:

布尔值。如果所有元素都通过检测返回 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.somefunction(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)

必须。函数,数组中的每个元素都会执行这个函数
函数参数:

参数

描述

currentValue

必须。当前元素的值

index

可选。当前元素的索引值

arr

可选。当前元素属于的数组对象

thisValue

可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 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"。
如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。

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)

必需。用于执行每个数组元素的函数。
函数参数:

参数

描述

total

必需。初始值, 或者计算结束后的返回值。

currentValue

必需。当前元素

currentIndex

可选。当前元素的索引

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)

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值