0


js数组方法讲解大全,不够用你找我

文章目录


前言

  1. 此文基于项目经验和各方文档汇总而成,如果各位有其他关于数组的高级用法欢迎评论交流。
  2. 篇幅过长不建议通篇阅读,可根据自己需要直接在目录查找对应方法即可。
  3. 如果有用请三连~

分类说明

  • 新增:在原数组中新增了元素,改变了原数组
  • 删除:在原数组中移除了元素,改变了原数组
  • 更新:在原数组中修改了元素,改变了原数组
  • 组合:基于原数组生成了新的数组,新数组包含全部或部分原数组元素,不改变原数组
  • 查询:根据条件在原数组中查找值或者索引,返回索引、值或者迭代器,不改变原数组
  • 判定:判定原数组是否符合某条件,返回布尔值,不改变原数组
  • 特殊:对原数组进行遍历或其他操作,返回一个新的数组或其他类型数据,不改变原数组

注:

splice()

功能太强大,增删改都可以就放到了更新了。


新增

push(element1,…elementN)

  • 将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
let myArray =['a','b','c','d'];
myArray.push('e','f');
console.log(myArray);//['a','b','c','d','e','f']
  • push()高级
let myArray =['a','b','c','d'];let charArr =['e','f'];//等同于myArray.push('e','f');
myArray.push(...charArr);//等同于myArray.push('e','f');Array.prototype.push.apply(myArray, charArr);

console.log(myArray);

unshift(element1,…elementN)

  • 将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。
let myArray =['a','b','c','d'];
myArray.unshift('e','f');
console.log(myArray);//['e','f','a', 'b', 'c', 'd']
  • unshift()高级
let myArray =['a','b','c','d'];let charArr =['e','f'];//等同于myArray.unshift('e','f');
myArray.unshift(...charArr);//等同于myArray.unshift('e','f');Array.prototype.unshift.apply(myArray, charArr);
    
console.log(myArray);//['e','f','a', 'b', 'c', 'd']

删除

pop()

  • 从数组中删除最后一个元素,并返回该元素的值。 如果数组为空则返回undefined。 此方法会更改数组的长度。
let myArray =['a','b','c','d'];let popCity = myArray.pop();
console.log(popCity);//'d
console.log(myArray);//['a', 'b', 'c']

shift()

  • 从数组中删除第一个元素,并返回该元素的值。 如果数组为空则返回undefined 。 此方法更改数组的长度。
let myArray =['a','b','c','d'];let shiftCity = myArray.shift();
console.log(shiftCity);//'a'
console.log(myArray);//['b', 'c', 'd']

更新

[]

let myArray =['a','b','c','d'];
myArray[0]='e';
console.log(myArray);// ['e','b', 'c', 'd']

copyWithin(target, start, end])

  • 浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。
let myArray =['a','b','c','d','e']// 将从角标3开始到角标为4截止(不包含4)所有元素复制到角标为0开始的地方
myArray.copyWithin(0,3,4)
console.log(myArray)//["d", "b", "c", "d", "e"]// 将从角标3开始的所有元素复制到角标为1开始的地方
myArray.copyWithin(1,3)
console.log(myArray)//["d", "d", "e", "d", "e"]let array2 =[['a'],'b','c','d']// 将从角标0开始到角标为2截止(不包含2)所有元素复制到角标为2开始的地方
array2.copyWithin(2,0,2)
console.log(array2)//[['a'], 'b', ['a'], 'd']
array2[0].push('e')
console.log(array2)//[['a'.'e'], 'b', ['a'.'e'], 'd']

fill(value,start,end)

  • 用一个固定值替换一个数组中从起始索引(默认为0)到终止索引(默认为array.length)内的全部元素。不包括终止索引。其实索引与终止索引均支持负数,若为负数则自动计算为length+startlength+end
let myArray =['a','b','c','d']
myArray.fill('f',0,2)
console.log(myArray)//['f', 'f', 'c', 'd']let newArray = myArray.fill(['f','g'],2,4)
console.log(newArray)//['f', 'f', ['f', 'g'], ['f', 'g']]
console.log(myArray)//['f', 'f', ['f', 'g'], ['f', 'g']] //原数组被改变

reverse()

  • 将数组中元素的位置颠倒,并返回该数组的引用。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组
let myArray =['a','b','c','d','e']let newArray = myArray.reverse()

console.log(newArray)//['e', 'd', 'c', 'b', 'a']
console.log(myArray)//['e', 'd', 'c', 'b', 'a']

sort(compareFunction)

  • 用原地算法对数组的元素进行排序,并返回数组引用。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的。改变原数组
  • compareFunction 可选用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。
let months =['March','Jan','Feb','Dec']let newMonths = months.sort()
console.log(newMonths)//['Dec', 'Feb', 'Jan', 'March']
console.log(months)//['Dec', 'Feb', 'Jan', 'March']let myArray =[1,30,4,21,100000]let newArray = myArray.sort()//比较的数字会先被转换为字符串,所以在Unicode顺序上 "100000" 要比 "21" 要靠前。
console.log(newArray)//[1, 100000, 21, 30, 4]
console.log(myArray)//[1, 100000, 21, 30, 4]let numbers =[1,30,4,21,100000]
numbers.sort(function(a, b){return a - b
})//加入比较函数来保证number类元素的正常排序
console.log(numbers)//[1, 4, 21, 30, 100000]
  • 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之
  • 如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变。备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本);
  • 如果 compareFunction(a, b) 大于 0b 会被排列到 a 之
  • compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。

splice(start,deleteCount,item1, item2, …)

  • 通过删除替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。返回一个由删除元素组成的数组,无删除元素则返回空数组
  • start指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从-1计数,这意味着-n是倒数第n个元素并且等价于array.length-n);如果负数的绝对值大于数组的长度,则表示开始位置为第0位
  • deleteCount 可选。表示要移除的数组元素的个数。如果 deleteCount 被省略了,或者它的值大于等于array.length - start(也就是说,如果它大于或者等于start之后的所有元素的数量),那么start之后数组的所有元素都会被删除第 start 位)。如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。
  • item1, item2, ... 可选。要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。
let myArray =['a','b','c','d']//从索引2开始删除一个元素,并在该位置插入元素'g'、'h'let removedArray = myArray.splice(2,1,'g','h')
console.log(removedArray)//['c']
console.log(myArray)//['a', 'b', 'g', 'h', 'd']//从索引-3的位置开始删除一个元素let myArray2 =['a','b','c','d']let removedArray2 = myArray2.splice(-3,1)
console.log(removedArray2)//['b']
console.log(myArray2)//['a', 'c', 'd']

组合

concat(value1,…,valueN)

  • 用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。原数组不改变
let myArray =['a','b','c','d'];let charArr =['e','f'];let newArr = myArray.concat(charArr);

console.log(newArr);//['a','b', 'c', 'd','e','f']
console.log(myArray);//['a', 'b', 'c', 'd']
  • 提示:concat()执行的是浅拷贝, 也就是说,如果引用的对象被修改,则更改对于新数组和原始数组都是可见的。
let myArray =[['a'],'b','c','d'];let charArr =['e','f'];let newArr = myArray.concat(charArr);
myArray[0].push('g');
console.log(newArr);//[['a','g'], 'b', 'c', 'd','e','f'];
console.log(myArray);//[['a','g'], 'b', 'c', 'd'];

slice(begin,end)

  • 返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变
let myArray =['a','b','c','d'];let newArr = myArray.slice(1,3);

console.log(newArr);//['b', 'c']
console.log(myArray);//['a', 'b', 'c', 'd']
  • 提示:slice()执行的是浅拷贝, 也就是说,如果引用的对象被修改,则更改对于新数组和原始数组都是可见的。
let myArray =[['a'],'b','c','d'];let newArr = myArray.slice(0,2);
myArray[0].push('g');
console.log(newArr);//[['a','g'], 'b'];
console.log(myArray);//[['a','g'], 'b', 'c', 'd'];

查询

[]

let myArray =['a','b','c','d'];let city0 = myArray[0];//获取第一个值let city1 = myArray[myArray.length -1];//获取最后一个值let city2 = myArray[-1];//参数不能为负或者超限,比如此时myArray[myArray.length]都会返回undefinedlet i =0;let city3 = myArray[i];//支持变量
console.log(city0, city1, city2, city3);//'a' 'd' undefined 'a'
console.log(myArray);//['a','b', 'c', 'd']

at()

  • 接收一个整数值并返回该索引的项目,允许正数和负数。负整数从数组中的最后一个项目开始倒数
  • A polyfill of Array.prototype.at is available in core-js,现在需要自己安装,已发行的JavaScript版本还没有实装
let myArray =['a','b','c','d'];let city0 = myArray.at(0);//获取第一个值let city1 = myArray.at(-1);//获取最后一个值let city2 = myArray.at(myArray.length);//参数不能超限,会返回undefinedlet i =0;let city3 = myArray.at(i);//支持变量
console.log(city0, city1, city2, city3);//'a' 'd' undefined 'a'
console.log(myArray);//['a','b', 'c', 'd']

filter(callback)

  • 创建一个新数组, 其包含满足条件的所有元素。原数组不变。没有满足条件的元素时,返回空数组’[ ]
let myArray =[1,2,3,4,5]let newArray = myArray.filter(value=>{return value >3})
console.log(newArray)//[4, 5]
console.log(myArray)//[1, 2, 3, 4, 5]
  • filter() 高级
  1. filter 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 filter 之后添加到数组中的元素不会被 callback 访问到。
let myArray =[1,2,3,4,5]let newArray = myArray.filter((value,index)=>{
    console.log(value)//1 2 3 4 5
    myArray.push(index +6)return value >3})
console.log(newArray)//[4, 5]
console.log(myArray)//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  1. 如果数组中存在的元素被更改,则他们传入 callback 的值是 filter 访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。
let myArray =[1,2,3,4,5]let newArray = myArray.filter((value, index)=>{
    console.log(value)//1 2 3//更改数组部分元素if(value >2) myArray.splice(index)return value <5})
console.log(newArray)//[1, 2, 3]
console.log(myArray)//[1, 2]let myArray =[1,2,3,4,5]let newArray = myArray.filter((value, index)=>{
    console.log(value)//1 2 3//删除数组部分元素if(value >2) myArray.splice(index)return value <5})
console.log(newArray)//[1, 2, 3]
console.log(myArray)//[1, 2]

find(callback)

  • 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
let myArray =[1,2,3,4]let foundBody = myArray.find(value=>{return value >2})let foundBody2 = myArray.find(value=>{return value >20})
console.log(foundBody)//3
console.log(foundBody2)//undefined
  • findIndex(callback) 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1
let myArray =[1,2,3,4]let foundBodyIndex = myArray.findIndex(value=>{return value >2})let foundBodyIndex2 = myArray.findIndex(value=>{return value >20})
console.log(foundBodyIndex)//3
console.log(foundBodyIndex2)//undefined

indexOf(value,fromIndex)

  • 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1
let myArray =[1,2,3,4,3]let index = myArray.indexOf(3)let index2 = myArray.indexOf(2,2)
console.log(index)//2
console.log(index2)//-1
  • 注:如果 fromIndex 大于等于数组的长度,则将直接返回 -1,且不搜索该数组。
  • fromIndex 索引处开始查找 value。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜 (即从末尾开始往前跳 fromIndex 的绝对值个索引,然后往后搜寻)。fromIndex默认为 0。如果计算出的索引小于 0,则整个数组都会被搜索,即相当于0。
let myArray =['a','b','c']

console.log(myArray.indexOf('a',-100))// 0 -100+3=-97<0
console.log(myArray.indexOf('a',-2))// -1  -2+3=1,索引1及以后的元素没有'a'

lastIndexOf(value,fromIndex)

  • 返回在数组中可以找到一个给定元素的最后一个索引,如果不存在,则返回-1
let myArray =[1,2,3,4,3]let lastIndex = myArray.lastIndexOf(3)let lastIndex2 = myArray.lastIndexOf(4,2)
console.log(lastIndex)//4
console.log(lastIndex2)//-1
  • 注:如果 fromIndex 为负数且计算后依然小于0,则将直接返回 -1,且不搜索该数组。
  • fromIndex 索引处开始逆向查找 value。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜 (即从末尾开始往前跳 fromIndex 的绝对值个索引,然后从后向前搜寻)。fromIndex默认为 arr.length - 1。如果计算出的索引大于或等于数组长度,则整个数组都会被搜索,即相当于arr.length - 1
let myArray =['a','b','c']

console.log(myArray.lastIndexOf('a',-100))// -1 -100+3=-97<0
console.log(myArray.lastIndexOf('a',-2))// 0  -2+3=1,搜索索引1向前的元素

keys()

  • 返回一个包含数组中每个索引键Array Iterator对象。
let myArray =[1,2,3,,5]let iterator = myArray.keys();for(const key of iterator){
    console.log(key);//0 1 2 3 4}
console.log(myArray)//[1, 2, 3, , 5]

values()

  • 返回一个包含数组中每个索引的值Array Iterator对象。
let myArray =[1,2,3,,5]let iterator = myArray.keys();for(const key of iterator){
    console.log(key);//0 1 2 3 4}
console.log(myArray)//[1, 2, 3, , 5]
  • : 数组迭代器中存储的是原数组的地址,而不是数组元素值
let myArray =[1,2,3,,5]let iterator = myArray.values()
console.log(myArray)//[1, 2, 3, , 5]
console.log(iterator.next().value)//1
myArray[1]=10
console.log(myArray)//[1, 10, 3, , 5]
console.log(iterator.next().value)//10

判定

Array.isArray(obj)

  • 用于确定传递的值是否是一个 Array。
console.log(Array.isArray([1,2,3]));// true
console.log(Array.isArray({foo:123}));// false
console.log(Array.isArray('foobar'));// false
console.log(Array.isArray(undefined));// false

every(callback)

  • 测试一个数组内的所有元素是否能通过某个指定函数的测试。它返回一个布尔值。不会改变原数组。
  • 注:若收到一个空数组,此方法在一切情况下都会返回 true
let flag
let myArray =[1,2,3,4,5]
flag = myArray.every(value=>{return value >3})
console.log(flag)//falselet array2 =[]let flag2 = array2.every(value=>{return value >3})//没有不满足条件的就是都满足条件
console.log(flag2)//true
  • every() 高级
  1. every 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 every 之后添加到数组中的元素不会被 callback 访问到。
let flag
let myArray =[1,2,3,4,5]
flag = myArray.every((value, index)=>{
    console.log(value)//1 2 3 4 5
    myArray.push(index +6)return value <6})
console.log(myArray)//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(flag)//true
  1. 如果数组中存在的元素被更改,则他们传入 callback 的值是 every 访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。
let flag
let myArray =[1,2,3,4,5]
flag = myArray.every((value, index)=>{
    console.log(value)//1 2if(value >1) myArray.splice(index)return value <3})
console.log(myArray)//[1]
console.log(flag)//true

includes(value,fromIndex)

  • 用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false
let myArray =[1,2,3,4,5]let flag = myArray.includes(3)let flag2 = myArray.includes(30)

console.log(flag)//true
console.log(flag2)//false
console.log(myArray)//[1, 2, 3, 4, 5]
  • 注:如果 fromIndex 大于等于数组的长度,则将直接返回 false,且不搜索该数组。
  • fromIndex 索引处开始查找 value。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜 (即从末尾开始往前跳 fromIndex 的绝对值个索引,然后往后搜寻)。fromIndex默认为 0。如果计算出的索引小于 0,则整个数组都会被搜索,即相当于0。
let myArray =['a','b','c']

console.log(myArray.includes('a',-100))// true -100+3=-97<0
console.log(myArray.includes('a',-2))// false  -2+3=1,索引1及以后的元素没有'a'

some(callback)

  • 测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。
  • 注:若收到一个空数组,此方法在一切情况下都会返回 false
let flag
let myArray =[1,2,3,4,5]
flag = myArray.some(value=>{return value >3})
console.log(flag)//truelet array2 =[]let flag2 = array2.some(value=>{return value >3})
console.log(flag2)//false
  • some() 高级
  1. some 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 some 之后添加到数组中的元素不会被 callback 访问到。
let flag
let myArray =[1,2,3,4,5]
flag = myArray.some((value, index)=>{
    console.log(value)//1 2 3 4 5
    myArray.push(index +6)return value >6})
console.log(myArray)//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(flag)//false
  1. 如果数组中存在的元素被更改,则他们传入 callback 的值是 some 访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。
let flag
let myArray =[1,2,3,4,5]
flag = myArray.some((value, index)=>{
    console.log(value)//1 2if(value >1) myArray.splice(index)return value >3})
console.log(myArray)//[1]
console.log(flag)//false

特殊

Array.from(arrayLike,mapFn)

  • 对一个类似数组或可迭代对象创建一个新的浅拷贝的数组实例。
  • 可选参数 mapFn,让你可以在最后生成的数组上再执行一次 map 方法后再返回。
let myArray =[1,2,3,4,5]let newArray = Array.from(myArray,value=> value *2)let newArray2 = myArray.map(value=> value *2)let newArray3 = Array.from('abcde')

console.log(newArray)//[2, 4, 6, 8, 10]
console.log(newArray2)//[2, 4, 6, 8, 10]
console.log(newArray3)//['a', 'b', 'c', 'd', 'e']
console.log(myArray)//[1, 2, 3, 4, 5]

Array.of()

  • 创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。
  • Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个长度为7的空数组(注意:这是指一个有7个空位(empty)的数组,而不是由7个undefined组成的数组)。
Array.of(7);// [7]
Array.of(1,2,3);// [1, 2, 3]Array(7);// [ , , , , , , ]Array(1,2,3);// [1, 2, 3]

flat(depth)

  • 会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。原数组不改变。
let myArray =[1,2,3,[4,5]]let newArray = myArray.flat()//扁平深度默认为1
console.log(newArray)//[1, 2, 3, 4, 5]
console.log(myArray)//[1, 2, 3, [4, 5]]let myArray2 =[1,2,3,[[4,5]]]let newArray2 = myArray2.flat()let newArray3 = myArray2.flat(2)
console.log(newArray2)//[1, 2, 3, [4, 5]]
console.log(newArray3)//[1, 2, 3, 4, 5]
console.log(myArray2)//[1, 2, 3, [[4,5]]]
  • flat() 高级
  1. flat() 方法会移除数组中的空项:
let myArray =[1,2,,[4,5]]let newArray = myArray.flat()
console.log(newArray)//[1, 2, 4, 5]
console.log(myArray)//[1, 2, , [4, 5]]
  1. 使用 Infinity,可展开任意深度的嵌套数组
let myArray =[1,2,[3,4,[5,6,[7,8,[9,10]]]]]let newArray = myArray.flat(Infinity)
console.log(newArray)//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(myArray)//[1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]

flatMap(callback)

  • 首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为1flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。
let myArray =[1,2,3,4]let newArrayMap = myArray.map(value=>[value *2])let newArrayFlatMap = myArray.flatMap(value=>[value *2])
console.log(newArrayMap)//[[2], [4], [6], [8]]
console.log(newArrayFlatMap)//[2, 4, 6, 8]
console.log(myArray)//[1, 2, 3, 4]//只能flat一层let arrFlatMap2 = myArray.flatMap(value=>[[value *2]])
console.log(arrFlatMap2)//[[2], [4], [6], [8]]
  • flatMap() 高级:在一个 map() 期间增加或去除一些项。只需返回一个单元素数组以保留该项,返回一个多元素数组以添加项,或返回一个0项元素数组以删除该项。
//移除所有的负数,保留所有的偶数,将奇数拆分为偶数和1let myArray =[5,4,-3,20,17,-33,-4,18]let newArrayFlatMap = myArray.flatMap((n)=>(n <0)?[]://移除负数(n %2==0)?[n]://保留偶数[n -1,1])//拆分奇数
console.log(newArrayFlatMap)//[4, 1, 4, 20, 16, 1, 18]
console.log(myArray)//[5, 4, -3, 20, 17, -33, -4, 18]

forEach(callback)

  • 对数组的每个元素执行一次给定的函数。原数组不改变。返回值为undefined
let myArray =[1,2,3,4]
myArray.every(value=> value *2)
console.log(myArray)//[1, 2, 3, 4
  • forEach() 高级
  1. forEach 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 forEach 之后添加到数组中的元素不会被 callback 访问到。
let myArray =[1,2,3,4,5]
myArray.forEach((value, index)=>{
    console.log(value)//1 2 3 4 5
    myArray.push(index +6)})
console.log(myArray)//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  1. 如果数组中存在的元素被更改,则他们传入 callback 的值是 forEach 访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。如果已访问的元素在迭代时被删除了(例如使用 shift()),则下一个元素将被跳过。
let myArray =[1,2,3,4,5]
myArray.forEach((value)=>{
    console.log(value)//1 2 3 5if(value ===3) myArray.shift()})
console.log(myArray)//[2, 3, 4, 5]
  • :除了抛出异常以外,没有办法中止或跳出 forEach() 循环。如果需要中止或跳出循环,则不应该使用forEach() 方法。可以用for..of/for..in等。

join(separator)

  • 将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符
  • 分隔符默认为逗号‘,’
  • 注:如果一个元素为 undefinednull,它会被转换为空字符串
let myArray =[1,2,3,4,5,undefined,null,6]let newArray = myArray.join()let newArray2 = myArray.join('')let newArray3 = myArray.join('-')

console.log(newArray)//1,2,3,4,5,,,6
console.log(newArray2)//123456
console.log(newArray3)//1-2-3-4-5---6
console.log(myArray)//[1, 2, 3, 4, 5, undefined, null, 6]

map(callback)

  • 创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
let myArray =[1,2,3,4]
myArray.every(value=> value *2)
console.log(myArray)//[1, 2, 3, 4
  • map() 高级
  1. map 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 map 之后添加到数组中的元素不会被 callback 访问到。
let myArray =[1,2,3,4,5]let newArray = myArray.map((value, index)=>{
    console.log(value)//1 2 3 4 5
    myArray.push(index +6)return value*2})
console.log(newArray)//[2, 4, 6, 8, 10]
console.log(myArray)//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  1. 如果数组中存在的元素被更改,则他们传入 callback 的值是 map访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。如果已访问的元素在迭代时被删除了(例如使用 shift()),则下一个元素将被跳过。
let myArray =[1,2,3,4,5]let newArray = myArray.map((value, index)=>{
    console.log(value)//1 2 3 5if(value ===3) myArray.shift()return value*2})
console.log(newArray)//[2, 4, 6, 10, 空]
console.log(myArray)//[2, 3, 4, 5]

reduce(callback,initialValue)

  • 对数组中的每个元素按序执行一个设定的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值
  • previousValue上一次调用 callbackFn 时的返回值。在第一次调用时,若指定了初始值 initialValue,其值则为 initialValue,否则为数组索引为 0 的元素 array[0]
  • currentValue:数组中正在处理的元素。在第一次调用时,若指定了初始值 initialValue,其值则为数组索引为 0 的元素 array[0]否则array[1]
  • 当数组为空且初始值 initialValue 未提供时,会报错TypeError。
//语法reduce((previousValue, currentValue)=>{/* ... */})reduce((previousValue, currentValue, currentIndex)=>{/* ... */})reduce((previousValue, currentValue, currentIndex, array)=>{/* ... */})reduce((previousValue, currentValue, currentIndex, array)=>{/* ... */}, initialValue)let myArray =[1,2,3,4]let initialValue =0let sumWithInitial = myArray.reduce((previousValue, currentValue)=> previousValue + currentValue,
        initialValue
)

console.log(sumWithInitial)//10
  • reduce() 高级
  1. reduce 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 reduce 之后添加到数组中的元素不会被 callback 访问到。
let myArray =[1,2,3,4,5]let sum = myArray.reduce((preValue, currentValue)=>{
    console.log(currentValue)//1 2 3 4 5
    myArray.push(currentValue +5)return preValue + currentValue
},0)
console.log(sum)//15
console.log(myArray)//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  1. 如果数组中存在的元素被更改,则他们传入 callback 的值是 reduce访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。如果已访问的元素在迭代时被删除了(例如使用 shift()),则下一个元素将被跳过。
let myArray =[1,2,3,4,5]let sum = myArray.reduce((preValue, currentValue)=>{
    console.log(currentValue)//1 2 3 5if(currentValue ===3) myArray.shift()return preValue + currentValue
},0)
console.log(sum)//11
console.log(myArray)//[2, 3, 4, 5]

reduceRight(callback,initialValue)

  • 对数组中的每个元素按序执行一个设定的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。
  • previousValue上一次调用 callbackFn 时的返回值。在第一次调用时,若指定了初始值 initialValue,其值则为 initialValue否则为数组索引为 array.length-1 的元素 array[array.length-1]
  • currentValue:数组中正在处理的元素。在第一次调用时,若指定了初始值 initialValue,其值则为数组索引为 array.length-1 的元素 array[array.length-1]否则array[array.length-2]
  • 当数组为空且初始值 initialValue 未提供时,会报错TypeError。
//语法reduceRight((previousValue, currentValue)=>{/* ... */})reduceRight((previousValue, currentValue, currentIndex)=>{/* ... */})reduceRight((previousValue, currentValue, currentIndex, array)=>{/* ... */})reduceRight((previousValue, currentValue, currentIndex, array)=>{/* ... */}, initialValue)let myArray =[1,2,3,4]let initialValue =0let sumWithInitial = myArray.reduceRight((previousValue, currentValue)=> previousValue + currentValue,
        initialValue
)

console.log(sumWithInitial)//10
  • reduce()与reduceRight()的区别:前者从左向右,后者从右向左
let myArray =['1','2','3','4','5']let left = myArray.reduce(function(prev, cur){return prev + cur })let right = myArray.reduceRight(function(prev, cur){return prev + cur })

console.log(left)// "12345"
console.log(right)// "54321"

toString()

  • 返回一个字符串,表示指定的数组及其元素。
  • Array对象覆盖了Object的 toString 方法。对于数组对象,toString 方法连接数组并返回一个字符串,其中包含用逗号分隔的每个数组元素。等同于不写分隔符的join()join(',')
  • 当一个数组被作为文本值或者进行字符串连接操作时,将会自动调用其 toString 方法。
let myArray =[1,2,3,4,5,undefined,null,6]let newArray = myArray.toString()

console.log(newArray)//1,2,3,4,5,,,6
console.log(myArray)//[1, 2, 3, 4, 5, undefined, null, 6]

toLocaleString(locales,options )

  • 返回一个字符串表示数组中的元素。数组中的元素将使用各自toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 “,”)隔开。
  • locales 可选。带有BCP 47语言标记的字符串或字符串数组,关于locales参数的形式与解释,请看Intl页面。
  • options 可选。一个可配置属性的对象,对于数字 Number.prototype.toLocaleString(),对于日期Date.prototype.toLocaleString()。
  • 注:如果一个元素为 undefinednull,它会被转换为空字符串
let myArray =[1,'a',newDate('21 Dec 1997 14:12:00 UTC')]let localeString = myArray.toLocaleString('en',{timeZone:'UTC'})

console.log(localeString)//1,a,12/21/1997, 2:12:00 PM

总结

两万字码的长文总算完结了,如果有帮助来个三连呀~

标签: javascript 前端

本文转载自: https://blog.csdn.net/zhaoguang2018/article/details/124671665
版权归原作者 sKK07 所有, 如有侵权,请联系我们删除。

“js数组方法讲解大全,不够用你找我”的评论:

还没有评论