js数组中容易误用的一些方法

Posted 强大大

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js数组中容易误用的一些方法相关的知识,希望对你有一定的参考价值。

1.every和some

两个方法的参数都是一个函数,函数的有3个参数,依次是当前值value,索引index,数组array

every判断数据中的每一项是否满足某个条件,如果满足就返回true,有一项不符合就返回false

var arr = [1,2,3]
var b = arr.every(function(value,index,arr){
	if(value>2){
		return true
	}
})
console.log(b) // false

some判断数组中的某一项是否满足某个条件,如果满足就返回true,都不满足就返回false

var arr = [1,2,3]
var b = arr.some(function(value,index,arr){
    if(value>2){
    	return true
    }
})
console.log(b) // true

every和some返回的结果都是boolean值,而不是数组。

2. reduce

调用方式array.reduce(callback[, initialValue]); 对数组中的每一个元素(从左到右)执行callback函数累加,callback的参数有4个prev(数组第一个值或者出入的初始值initialValue) value(当前值),index(当前值索引),arr(数组)

如果有初始值,reduce会从数组第一元素开始执行,callback会执行array.length次。如果没有初始值,reduce会从数组第二个元素开始执行,callback会执行array.length-1次。

有初始值

var arr = [1,2,3]
var sum = arr.reduce(function(prev,cur,index,arr){
    console.log(‘index:‘,index,prev,cur)
    return prev+cur
},0)
// 打印结果
// index: 0 0 1
// index: 1 1 2
// index: 2 3 3

无初始值

var arr = [1,2,3]
var sum = arr.reduce(function(prev,cur,index,arr){
	console.log(‘index:‘,index,prev,cur)
	return prev+cur
})
// 打印结果
// index: 1 1 2
// index: 2 3 3

3.indexOf 和 includes的区别

  • 返回值不同:indexOf返回的是数值类型,而includes返回的是boolean值

  • 对NaN的处理方式不同,

  • 对稀疏数组的处理结果不同。

var a = [NaN]
console.log(a.indexOf(NaN))  // -1
console.log(a.includes(NaN)) // true

var b = [1,,3]
console.log(b.indexOf(undefined)) // -1
console.log(b.includes(undefined)) // true

4.find

调用方式 arr.find(callback[, thisArg])。find 方法对数组中的每一项元素执行一次 callback 函数,直至有一个 callback 返回 true。当找到了这样一个元素后,该方法会立即返回这个元素的值 。callback 函数带有3个参数:当前元素的值、当前元素的索引,以及数组本身

var a = [1,2,3]
var b = a.find(function(value,index,arr){
	return value > 1
})
console.log(b) // 2

  

find返回的是元素的值,而不是元素在数组中的索引,要返回数组的索引,使用findIndex

5.copyWithIn

调用方式arr.copyWithin(target[, start[, end]])

  • target,复制的序列要插入到数组中的位置

  • start,开始复制元素的起始位置

  • end,开始复制元素的结束位置,如果被忽略,默认copyWithin将会复制到arr.ength

var arr = [1,2,3,4,5]
arr.copyWithin(0,3)
console.log(arr) // [4, 5, 3, 4, 5]

这个方法会修改原来的数组

 

 

以上是关于js数组中容易误用的一些方法的主要内容,如果未能解决你的问题,请参考以下文章

几个关于js数组方法reduce的经典片段

10个JavaScript代码片段,使你更加容易前端开发。

10个JavaScript代码片段,使你更加容易前端开发。

js数组高阶方法reduce经典用法代码分享

js数组高阶方法reduce经典用法代码分享

为什么我不能在此片段中生成唯一对象数组?