数组API集合

已注销
663 阅读3分钟

js中数组的api整理,首先列出所有的方法：

es5:
join(), sort(), slice(), splice(), concat(), reverse(),
push(), pop(), shift(), unshift(), 
forEach(), map(), some(), every(), filter(), reduce(),
indexOf(), lastIndexOf(),
es6:
Array.form(), Array.of(), copyWithin(), find()+findIndex(), fill(), entries()+keys()+values(), 
includes()

1.for of直接遍历数组， for in （遍历数组的下标，遍历对象更简洁）

for(i in arr){
  console.log(arr[i])  //1,2,3,4,5
}

for(i of arr){
  console.log(i)  //1,2,3,4,5
}

2. forEach()循环

  • 没有返回值，对原数组没有影响（不支持return输出，return用于跳出当前循环）
arr.forEach((val,index,arr)=>{
  console.log('val:',val, 'index:',index ,'arr:',arr)
  // val: 1 index: 0 arr:[1, 2, 3, 4, 5]
  // val: 2 index: 1 arr:[1, 2, 3, 4, 5]
  // val: 3 index: 2 arr:[1, 2, 3, 4, 5]
  // val: 4 index: 3 arr:[1, 2, 3, 4, 5]
  // val: 5 index: 4 arr:[1, 2, 3, 4, 5]
})

3. map循环

  • 有返回值，return什么就输出什么新数组，不改变原数组。
let mapArr = arr.map((item)=>{
  return item*2
})
console.log(mapArr)  //[2,4,6,8,10]
console.log(arr)  //[1,2,3,4,5]

4. filter()

  • 有返回值，return出 判断为true的元素组成的数组，若条件不满足返回空数组。不改变原数组
 let filterArr = arr.filter(item=>{
  return item>3
})
console.log(filterArr)  //[4,5]
console.log(arr)  //[1,2,3,4,5]

5. find()

  • 有返回值，return出第一个判断为true的元素，则跳出循环，输出符合条件的元素。若条件不符合，输出undefined.不改变原数组。
let findArr = arr.find(item=>{
  return item>3
})
console.log(findArr)  //4

6. every()

  • 数组中每一项符合条件返回true,否则返回false
let everyArr = arr.every(item=>{
return item>3
})
console.log(everyArr)  //false

7. some()

  • 数组中的任一项符合条件符合，则返回true,则返回false。
let someArr = arr.some(item=>{
return item >3
})
console.log(someArr)  //true

8. reduce()

  • 应用场景1： 求和
let reduceArr = arr.reduce((sum,next,index)=>{
return sum += next
})
console.log(reduceArr)  //15
  • 应用场景2：扁平化数组
var arr1 = [[1,2,3],[8,9,9],[4,5,6]]

let arr2 = arr1.reduce((sum,next,index)=>{
    return sum.concat(next)
})
console.log(arr2) //[1,2,3,8,9,9,4,5,6]

9. includes()

  • 不用return，没有回调，输出true/false
console.log(arr.includes(3))  //true

10. keys() / values() / entries()

  • keys()是对键名的遍历
  • values()是对键值的遍历
  • entries()是对键值对的遍历

11. 解构赋值 （浅拷贝，因为它不能对多维数组或对象达到深拷贝的作用）

数组的解构赋值
let a = [0,1,2,3]
let b = [...a]
b.push(4)
console.log(a) // [0,1,2,3]
console.log(b) // [0,1,2,3,4]
对象的解构赋值
用法：
let {name="swr",age} = {age:28}
console.log(name) // 'swr'
console.log(age) // 28

应用：
function ajax({method,url,type='params'}){
    console.log(method) // 'get'
    console.log(url) // '/'
    console.log(type) // 'params'
}

ajax({method:"get",url:"/"})

12.扩展运算符

- 数组使用扩展运算符示例
- 对象也可以使用扩展运算符

扩展运算符用三个点号表示，把数组或类数组对象展开成一系列用逗号隔开的值
剩余运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组

let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [...arr1,...arr2]
console.log(arr3) // [ 1, 2, 3, 4, 5, 6 ]

// 但是扩展运算符不能把伪数组转为数组（除了有迭代器iterator的伪数组，如arguments）
let likeArr = { "0":1,"1":2,"length":2 }
let arr = [...likeArr] // 报错 TypeError: likeArr is not iterable

// 但是可以用Array.from把伪数组转为数组
let likeArr = { "0":1,"1":2,"length":2 }
let arr = Array.from(likeArr)
console.log(arr) // [1,2]

通过扩展运算符和Object.assign对对象进行合并的行为，是属于浅拷贝

// 以往我们这样合并对象
let name = { name:"zf" }
let age = { age:18 }
let person = {}
Object.assign(person,name,age)
console.log(person) // { name: 'zf', age: 18 }

// 使用扩展运算符
let name = { name:"zf" }
let age = { age:18 }
let person = {...name,...age}
console.log(person) // { name: 'zf', age: 18 }

14. 数组去重

1.）双层for循环
  • 兼容性好
  var arr = [1,2,3,1,2,3,5,6,7];
  
  function unique(arr){
    if(!Array.isArray(arr)){
      console.log('type error')
      return
    }
    let res = [arr[0]];
    for(let i = 0;i<arr.length;i++){
      let flag = true;
      for(let j = 0;j<res.length;j++){
        if(arr[i] === arr[j]){
          flag = false;
          break;
        }
      }
      if(flag){
        res.push(arr[i])
      }
    }
    return res
  }

  console.log(unique(arr)) // [1, 2, 3, 5, 6, 7]
2.）indexOf()简化内层循环
  • NAN不能去重，因为indexOf()底层是‘===’，而NAN===NAN是不相等的
var arr = [1,2,3,1,2,3,5,6,7];
  
  function unique(arr){
    if(!Array.isArray(arr)){
      console.log('type error');
      return;
    }
    let res = [arr[0]];
    for(let i = 0;i<arr.length;i++){
      var current = arr[i];
      if(res.indexOf(current) === -1){
         # res中不存在则push
        res.push(current)
      }
    }
    return res;
  }

  console.log(unique(arr)) // [1, 2, 3, 5, 6, 7]
3.）排序后去重
  • sort方法排序后，相同的元素就排在一起，只需比较当前元素和上一个元素是否相等。
var arr = [1,2,3,1,2,3,5,6,7];
  function unique(arr){
    if(!Array.isArray(arr)){
      console.log('type error')
      return
    }

    let res = []
    let sortArr = arr.sort()
    for(let i = 0;i<sortArr.length;i++){
      if(sortArr[i] !== sortArr[i+1] ){
        res.push(sortArr[i])
      }
    }
    return res
  }

  console.log(unique(arr)) // [1, 2, 3, 5, 6, 7]
4.） ES6新增filter()方法
  • 可以简化外层循环
var arr = [1,2,3,1,2,3,5,'1',6,7];
  function unique(arr){
    if(!Array.isArray(arr)){
      console.log('type error')
      return
    }

    let res = arr.filter((item,index,arr)=>{
      return arr.indexOf(item) === index
    })
    return res
  }

  console.log(unique(arr)) // [1, 2, 3, 5, 6, 7]
5.）ES6中的set()+扩展运算符/Array.from()
var arr = [1,2,3,1,2,3,5,6,7];
  function unique(arr){
    if(!Array.isArray(arr)){
      console.log('type error');
      return
    }
    return Array.from(new Set(arr))
    // 或者
    return [...new Set(arr)]
  }
  console.log(unique(arr))
avatar
文章
阅读
粉丝