js数组方法

flyingEagle
191 阅读10分钟

forEach

功能

循环遍历数组中的每一项,只能遍历数组

返回值:undefined,总是返回undefined值,不可链式调用

写法

数组对象.forEach(function(参数1,参数2，参数3)){
    // 做一些操作,forEach是没有返回值,返回值为undefined
})
//使用场景
newArr.forEach(function(item) {
    sum += item
})

//以下是为了演示在什么情况下可以改变

let arr1 = [1,2,3,4]
let arr2 = arr1.forEach((item,i) => {
  item = item * 2;
})
console.log(arr1,arr2)//[1,2,3,4],undefined

let arr1 = [{a:1}]
let arr2 = arr1.forEach((item,i) => {
  item.a = item.a * 2;
})
console.log(arr1,arr2)//[{a:2}],undefined

三个参数

  • 参数1：数组当前项的值
  • 参数2：数组当前项的索引
  • 参数3：数组对象本身

用for实现forEach功能


  Array.prototype.forEach = Array.prototype.forEach || function (fn, context) {
    context = context || this;

    var i = 0,
        len = this.length;
    for (; i < len; i++) {
      fn.call(context, this[i], i, this);
    }
  }

forEach 如果遍历数组的每一页不是对象，则不会修改原数组，如果是对象则会修改原数组 forEach 只能遍历数组，不能用break和continue，它的return相当于continue。而for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。

map

功能

循环遍历数组中的每一项,只能遍历数组

必须要有返回值,如果不给return,它会返回一个undefined，且是一组undefined

return 返回的值是什么，就会把返回的值增加到新的数组中，但它不会影响原数组,只是将原来的数组拷贝了一份,把拷贝的数组项进行更改

经过map后最终得到的是一个新的数组,支持链式调用

写法

数组对象.map(function(参数1,参数2，参数3)){
    // 对原数组做一些操作
})
let arr1 = [1,2,3,4]
let arr2 = arr1.map((item,i) => {
  return item * 2;
})
console.log(arr1,arr2)// [1, 2, 3, 4] , [2, 4, 6, 8]

let arr1 = [{a:1},{a:2}]
let arr2 = arr1.map((item,i) => {
  return item.a * 2;
})
console.log(arr1,arr2)//[{a:1},{a:2}]，[2,4]

三个参数

  • 参数1：数组当前项的值
  • 参数2：数组当前项的索引
  • 参数3：数组对象本身

使用场景

let arr = [1,2,3,4],sum = 0
let newArr = arr.map(function(item){
    return item*2//必须有返回值
})
//map支持链式
newArr.forEach(function(item) {
    sum += item
})
console.log(arr)//[1,2,3,4]
console.log(newArr)//[2,4,6,8]
console.log(sum)//20
console.log(arr==newArr)//false

filter

功能

经过filter函数后会创建一个新的数组, 回调函数返回的结果一个boolean值,若结果为真,则返回匹配的项,若为假,则返回一个空数组，它不会改变原有数组,返回的是过滤后的新数组

经过filter后最终得到的是一个新的数组,支持链式调用

写法

数组对象.filter(function(参数1,参数2，参数3)){
    // 对原数组做一些操作
})

三个参数

  • 参数1：数组当前项的值
  • 参数2：数组当前项的索引
  • 参数3：数组对象本身

使用场景

let arr = [1,2,3,4]
let newArr = arr.filter(function(item){
    return item>2//必须有返回值
})
console.log(arr)//[1,2,3,4]
console.log(newArr)//[2,4]
console.log(arr==newArr)//false

find

功能

用来查找目标元素,若找到就返回该元素，若找不到就返回undefined，同样不会改变原有数组

找到第一个符合条件之后,就不会往后找了,这与filter过滤是不一样的，find方法比较快速便捷返回值:若匿名回调函数结果为真,则返回所匹配的选项对象,若为假,则返回undefine

写法

数组对象.find(function(参数1,参数2，参数3)，用于指定回调函数的this){
    // 对原数组做一些操作
})

三个参数

  • 参数1：数组当前项的值
  • 参数2：数组当前项的索引
  • 参数3：数组对象本身

使用场景

let arr = [1,2,3,4]
let value = arr.find(function(item){
    return item>2//必须有返回值
})
console.log(arr)//[1,2,3,4]
console.log(value)//3 找到满足的第一个就返回

findIndex

功能

用来查找目标元素,若找到就返回对应位置的索引值，若找不到就返回-1

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数， 如果没有符合条件的元素返回 -1，

findIndex() 对于空数组，函数是不会执行的

写法

数组对象.findIndex(function(参数1,参数2，参数3)，用于指定回调函数的this){
    // 对原数组做一些操作
})

三个参数

  • 参数1：数组当前项的值
  • 参数2：数组当前项的索引
  • 参数3：数组对象本身

findIndex与indexOf区别，findIndex接收的参数是函数，而indexOf接收的是起始位置

fill

功能

使用自己想要的参数替换原数组内容，但是会改变原来的数组

写法

arr.fill(value, start, end)

value：想要替换的内容

start：开始位置（数组的下标），可以省略

end：替换结束位置（数组的下标），如果省略不写就默认为数组结束

如果不给start和end则所有的值都会被替换成value。如果开始索引或结束索引为负数，那么这些值会与数组的length属性相加来作为最终位置，如果为-1则会变成arr.length -1

该方法会改变原始数组。

使用场景

let arr = [1,2,3,4]
let newArr = arr.fill(0,1,2)
console.log(arr)//[1,0,3,4]
console.log(newArr)//[1,0,3,4]
console.log(arr==newArr)//true

every

功能

判断数组中每一项是否都满足条件，只有所有项都满足条件，才会返回true, 当回调函数的返回值为true时，类似于forEach的功能，遍历所有；如果为false，那么停止执行，后面的数据不再遍历，停在第一个返回false的位置。

写法

数组对象.every(function(参数1,参数2，参数3)，用于指定回调函数的this){
    // 对原数组做一些操作
})

三个参数

  • 参数1：数组当前项的值
  • 参数2：数组当前项的索引
  • 参数3：数组对象本身

使用场景

var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.every(function(value,index,self){
    return value.length > 3;
})
console.log(a); //false

some

功能

判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true,

当回调函数的返回值为false时，类似于forEach的功能，遍历所有；如果为true，那么停止执行，后面的数据不再遍历，停在第一个返回true的位置。

写法

数组对象.some(function(参数1,参数2，参数3)，用于指定回调函数的this){
    // 对原数组做一些操作
})

三个参数

  • 参数1：数组当前项的值
  • 参数2：数组当前项的索引
  • 参数3：数组对象本身

使用场景

var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
var a = arr.some(function(value,index,self){
    return value.length > 4;
})
console.log(a); //true

splice

功能

方法向/从数组中添加/删除项目，然后返回被删除的项目

该方法会改变原始数组。切返回的是被删除项的新数组

写法

arr.splice(index,howmany,item1,.....,itemX)

| 项目 | 价格 | 数量 |

| iPhone | 6000 元 | 5 | | iPad | 3800 元 | 12 | | iMac | 10000 元 | 234 |

参数描述
index必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置
howmany必需。要删除的项目数量。如果设置为 0，则不会删除项目
item1, ..., itemX可选。向数组添加的新项目。

使用场景

let arr = [1,2,3,4]
let newArr = arr.splice(0,1,0,0)

console.log(arr)//[0,0,2,3,4]
console.log(newArr)//[1]
console.log(arr==newArr)//false

reduce

功能

从数组的第一项开始，逐个遍历到最后，迭代数组的所有项，然后构建一个最终返回的值。

参数：reduce()接收一个或两个参数：第一个是回调函数，表示在数组的每一项上调用的函数；第二个参数（可选的）作为归并的初始值，被回调函数第一次执行时的第一个参数接收。 reduce(callback,initial);callback默认有四个参数，分别为prev，now，index，self。 callback返回的任何值都会作为下一次执行的第一个参数。 如果initial参数被省略，那么第一次迭代发生在数组的第二项上，因此callback的第一个参数是数组的第一项，第二个参数就是数组的第二项。

使用场景

//不省略initial参数，回调函数没有返回值
var arr = [1,2,3,4,5];
arr.reduce(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index )
}, 10)
// 打印结果为：
// 10--1--0
// undefined--2--1
// undefined--3--2
// undefined--4--3
// undefined--5--4
// 此时回调函数没有return，所以从第二次开始，prev拿到的是undefined

//demo2:省略initial参数，回调函数没有返回值
var arr = [1,2,3,4,5];
arr.reduce(function(prev,now,index,self){
    console.log(prev + "--" + now + "--" + index)
})
// 打印结果为：第一次，回调函数的第一个参数是数组的第一项。第二个参数就是数组的第二项
// 1--2--1--true
// undefined--3--2
// undefined--4--3
// undefined--5--4
// 此时回调函数没有return，所以从第二次开始，prev拿到的是undefined

//demo3：使用reduce计算数组中所有数据的和
var arr = [1,2,3,4,5];
var sum = arr.reduce(function(prev,now,index,self){
    return prev + now;
})
console.log(sum);      //15
// 回调函数的最后一次return的结果被返回到reduce方法的身上

//demo6：使用reduce计算数组中所有数据的和
var arr = [1,2,3,4,5];
var sum = arr.reduce(function(prev,now,index,self){
    return prev + now;
}, 8)
console.log(sum);      //23
// 回调函数的最后一次return的结果被返回到reduce方法的身上
// 因为reduce有第二个参数initial，在第一次执行时被计算，所以最终结果被加上8

reduceRight

功能

（与reduce类似）从数组的最后一项开始，向前逐个遍历到第一位，迭代数组的所有项，然后构建一个最终返回的值。

copyWithin

功能 从数组中复制元素的值

该方法会改变原始数组

写法

arr.copyWithin(target, start = 0, end = this.length)
参数描述
target必需。整数，从该位置开始替换数据
start可选。从该位置开始读取数据，默认为 0 。如果为负值，表示倒数
end可选。到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数

使用场景

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

includes

功能 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false

写法

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));//true

flat

功能 flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

写法

const arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

const newArr1 = arr.flat()
const newArr2 = arr.flat(Infinity)//或者用arr.flat(4)

console.log(newArr1);//[1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9,  [11, 12, [12, 13, [14] ] ], 10]
console.log(newArr2);//[1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]

创建数组的方法

  1. 直接实例化后，再增加值
let arr = new Array(3)
arr[0] = 1
arr[1] = 2
arr[2] = 3
  1. 直接实例化
let arr = new Array(1,2,3)
  1. 字面-隐式创建
let arr = [1,2,3]
  1. es6新增
let arr = Array.of(1,2,3)

new Array的参数如果只给一个参数且是数值类型则为创建数组的长度，其他情况则为数值的值

let arr = new Array(3)//长度是3，arr[0]为undefined
let arr1 = new Array('3')//长度是1，arr1[0]为'3'

而let arr = Array.of(3)，arr[0]为3，长度是1，不管你给是什么都会是数值的值,

非数组对象转换为真正的数组

如arguments，dom元素集合

  1. 粗暴的用for循环，把元素一个个push到新的数组
  2. [].prototype.slice.call(arguments), Array.prototype.slice.call(arguments)
  3. es6新方法 Array.from(arguments)
avatar
文章
阅读
粉丝