数组的方法

105 阅读3分钟
  1. push():向数组末尾添加一项或多项,返回更新后数组的长度
  2. pop():删除数组的最后一项,返回被删除的项
  3. unshift():向数组开头添加一项获多项,返回更新后数组的长度
  4. shift():删除数组的第一项,返回被删除的项
  5. splice():删除,插入,替换
    1. 参数1:索引值
    2. 参数2:删除的数量
    3. 参数3:替换的值
  6. reverse():翻转数组
  7. sort():数组排序
  8. concat():合并数组
  9. slice():复制创建新数组
    1. 参数1:开始的索引
    2. 参数2:结束的索引
  10. indexOf():查找元素在数组的索引值,找到返回索引值,否则返回-1

es6新增数组的方法

1. reduce()

  • 返回一个累计的值
  • 语法:arr.reduce(callback,[initialValue])
  • 回调函数接收四个参数
    1. previousValue:上一次调用回调返回的值,或者是初始值
    2. currentValue:数组中当前被处理的元素
    3. index:当前元素在数组中的索引
    4. array:调用reduce的数组
  • initialValue:作为第一次调用callback的第一个参数
  • 简单用法
var arr = [1,2,3,4];
var sum = arr.reduce((pre,cur)=>{
    return pre+cur //求和
},0)
var sum = arr.reduce((pre,cur)=>{
    return pre*cur //求乘积
},0)
  • 高级用法
//1.计算数组中每个元素出现的次数
let arr = ['a','a','b','a']
let arrNum = arr.reduce((pre,cur)={
    if(cur in pre){
        pre[cur]++
    }else{
        pre[cur] = 1
    }
    return pre //{a:3,b:1}
},{})
//2.数组去重
let arr = [1,1,4,5,1,1,5];
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
        return pre.concat(cur)
    }else{
        return pre
    }
},[])
//3.对象属性求和
var goods = [
    {
        name:"a",
        price:10
    },
    {
        name:"b",
        price:100
    }
];
var allPrice = goods.reduce((pre,cur)=>{
    return pre+cur.price
},0)

2. forEach()

  • 按顺序为数组中的每个元素调用一次函数
  • 语法:array.forEach(function(currentValue, index, arr), thisValue)
  • 回调函数接收3个参数
    1. currentValue:必选,当前元素
    2. index:可选,当前元素索引值
    3. arr:可选,当前元素所属数组
  • thisValue:可选。传递给函数的值一般用 "this" 值。如果这个参数为空, "undefined" 会传递给 "this" 值
  • 用法
         let arr = ['a','b','c']
         arr.forEach((cur,index,arr)=>{
                document.querySelector(".main").innerHTML += index+':'+cur+'</br>'
            })

3. map()

  • 返回一个处理过后的新数组
  • 语法:arr.map(function(currentValue,index,arr), thisValue)
  • 回调函数接收3个参数
    1. currentValue:必选,当前元素
    2. index:可选,当前元素索引值
    3. arr:可选,当前元素所属数组
  • thisValue:可选。传递给函数的值一般用 "this" 值。如果这个参数为空, "this"指向"window"
  • 用法:
    let arr1 = [1,2,3];
    const arr2 = arr1.map(item=>{
        return item*2
    })
    console.log(arr1,arr2)

4. filter()

  • 用于过滤数组
  • 语法:arr.filter(function(currentValue,index,arr), thisValue)
  • 回调函数接收3个参数
    1. currentValue:必选,当前元素
    2. index:可选,当前元素索引值
    3. arr:可选,当前元素所属数组
  • thisValue:可选。传递给函数的值一般用 "this" 值。如果这个参数为空, "undefined" 会传递给 "this" 值
  • 用法:
    //过滤大于2的值
    const arr = [1,2,3,4,5];
    const newArr = arr.filter(cur=>{
         return cur>2
    })

5. some()

  • 检测数组元素中是否有元素符合指定条件
  • 语法:array.every(function(currentValue,index,arr), thisValue)
  • 回调函数接收3个参数
    1. currentValue:必选,当前元素
    2. index:可选,当前元素索引值
    3. arr:可选,当前元素所属数组
  • thisValue:可选。传递给函数的值一般用 "this" 值。如果这个参数为空, "this"的值为"undefined"
  • 用法:
    //判断张三是否存在数组中
    const arr = ['张三','李四','隔壁老王'];
    arr.some(cur=>{
        return cur == '张三'
    })

6. every()

  • 检测数值元素的每个元素是否都符合条件
  • 语法:array.every(function(currentValue,index,arr), thisValue)
  • 回调函数接收3个参数
    1. currentValue:必选,当前元素
    2. index:可选,当前元素索引值
    3. arr:可选,当前元素所属数组
  • thisValue:可选。传递给函数的值一般用 "this" 值。如果这个参数为空, "this"的值为"undefined"
  • 用法:
    //判断数组内各个数字是否都大于10
    const arr = [12,13,23,51];
    arr.every((cur)=>{
        return cur>10
    })