es6 数组,对象, Map ,Set 常用操作总结

总结 js数组,对象, Map ,Set 常用操作
一: 数组常用操作

 遍历时,break 只能用在for ...of.. 中有效, 用在forEach, map,find等中无效
 break 也可用在swich中

1.循环遍历相关:
(1)使用for 遍历数组, 不能改变原数组 ,

let arr = [1,2,3,4]
  for(let item of arr){
    item = item *2
  }
  console.log("arr=", arr) // [1,2,3,4]

(2).forEach() 方法对数组的每个元素执行一次给定的函数。但不会改变原数组, 即使有return 也不影响原数组, 同样只是循环一遍

  let arr = [1,2,3,4]
  arr.forEach((item, index, srcArray)=>{
    item = item *2
  })
  console.log("arr=", JSON.stringify(arr)) // 还是[1,2,3,4]
//若要改变, 可以这么写:
let arr = [1,2,3,4]
  arr.forEach((item, index, srcArray)=>{
    arr[index] = item *2
  })
// arr = [2,4,6,8]

(3)map() 映射遍历, 有return, 返回一个新数组

let arr = [1,2,3,4]
  let newArr =  arr.map((item, index, srcArray)=>{
    return item*2
  })
  console.log("arrayMap arr=", JSON.stringify(newArr)) // [2,4,6,8]

(4)arr.keys() 遍历数组索引键

let arr = [1,2,3,4]
  for(let item of arr.keys()){
    console.log(" arrayKeys item=", item) 
  }
  // arrayKeys item= 0
  // arrayKeys item= 1
  // arrayKeys item= 2
  // arrayKeys item= 3

(5)arr.values() 遍历数组索引值

let arr = [1,2,3,4]
  for(let item of arr.values()){
    console.log(" arrayValues item=", item) 
  }
  // arrayValues item= 1
  // arrayValues item= 2
  // arrayValues item= 3
  // arrayValues item= 4

(6)arr.entries() 返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。

let arr = [1,2,3,4]
  for(let item of arr.entries()){
    console.log(" arrayEntries item=", item) 
  }
  // arrayEntries item= [ 0, 1 ]
  // arrayEntries item= [ 1, 2 ]
  // arrayEntries item= [ 2, 3 ]
  // arrayEntries item= [ 3, 4 ]

(7) 遍历对象数组, 可以直接操作,改变原数组

let arr = [{"id": 1, "name": "a"}, {"id": 2, "name": "b"}]
  for(let item of arr){
    item.id += 1
  }
  console.log(" arrayValueOfObject arr=", arr)
 //[ { id: 2, name: 'a' }, { id: 3, name: 'b' } ]

2.满足条件 相关
(1)arr.filter(callback): 过滤满足条件的元素,有return, 返回一个新数组

 let arr = [1,2,3,4]
  let newArr =  arr.filter((item, index, srcArray)=>{
    return item%2 === 0
  })
  console.log("arrayFilter arr=", JSON.stringify(newArr)) // [2,4]

(2)arr.every() 测试数组的所有项是否满足条件,满足则返回true , 否则false ,有return,

let arr = [1,2,3,4]
  let ret =  arr.every((item, index, srcArray)=>{
    return item>0
  })
  console.log("arrayEvery ret=", ret)  // true

(3)arr.some() 测试数组是否有一项满足条件, 有返回true , 否则false 有return

let arr = [1,2,3,4]
  let ret =  arr.some((item, index, srcArray)=>{
    return item===2
  })
  console.log("arraySome ret=", ret) // true

(4)arr.find() 找到数组中符合条件的第一个元素的值。否则返回 undefined。有return

let arr = [1,2,3,4]
  let retItem =  arr.find((item, index, srcArray)=>{
    return item===2
  })
  console.log("arrayFind retItem=", retItem) // 2

(5)arr.findIndex()找到数组中符合条件的第一个元素的值。否则返回-1, 有return

let arr = [1,2,3,4]
  let retItemIndex =  arr.findIndex((item, index, srcArray)=>{
    return item===2
  })
  console.log("arrayFindIndex retItem=", retItemIndex) // 1
  1. arr.reduce(callback, initialValue) 累加器
    把数组中的所有项累加起来 , 有return
let arr = [1,2,3,4]
  let initialValue = 10
  let result =  arr.reduce((previousValue, currentValue, index, srcArray)=>{
    return previousValue + currentValue
  }, initialValue)

  console.log("arrayReduce result=", result) // 20
参数: callback: previousValue 必选 --上一次调用回调返回的值,或者是提供的初始值(initialValue)
          currentValue 必选 --数组中当前被处理的数组项
          index 可选 --当前数组项在数组中的索引值
          array 可选 --原数组
     initialValue: 可选 --初始值
  实行方法:回调函数第一次执行时,preValue 和 curValue 可以是一个值,如果 initialValue 在调用 reduce() 时被提供,那么第一个 preValue 等于 initialValue ,并且curValue 等于数组中的第一个值;如果initialValue 未被提供,那么preValue 等于数组中的第一个值

还可以使用reduce 执行一些高级操作
1.计算数组中每个元素出现的次数
2.数组去重
3.将多维数组转化为一维
  1. arr.splice(i,n) 删除从i(索引值)开始之后n元素。返回值是删除的元素列表。此方法会改变原数组。
let arr = [1,2,3,4]
  let deletItems =  arr.splice(2, 1)
  console.log("arraySplice arr=", arr) //[1,2]
  console.log("arraySplice deletItems=", deletItems)// [3,4]
  1. arr.slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。
  2. Array.from() 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例
  3. arr.fill(target, start, end) 使用给定的值,填充一个数组,ps:填充完后会改变原数组
      参数: target -- 待填充的元素
          start -- 开始填充的位置-索引
         end -- 终止填充的位置-索引(不包括该位置)
    8.arr.includes(val) 数组是否包含某值
    arr.join()— —生成以括号内符号分隔开的字符串, 不改变原数组
    arr.push() 后追加
    arr.pop() 后删除
    arr.unshift() 前追究
    arr.shift() 前删除
    arr.concat() 连接
    arr.sort() 将数组进行排序,返回值是排好的数组,默认是按照最左边的数字进行排序,不是按照数字大小排序的
    arr.reverse() 反转
    .....

二:对象 object 即{}
1.对象遍历
(1) Object.entries(obj)返回一个给定对象自身可枚举属性的键值对数组

let obj = {"id": 1, "name": "a", "score": 99, "class": "1-1"}
  for(let [key, val] of Object.entries(obj)){
    console.log(" objFor key=", key) 
    console.log(" objFor val=", val) 
  }
 //objFor key= id
 //objFor val= 1
 //objFor key= name
 //objFor val= a
 //objFor key= score
 //objFor val= 99
 //objFor key= class
 //objFor val= 1-1

(2)Object.keys(obj) 返回一个对象键组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致
(3)4.Object.values() 返回一个给定对象自身可枚举属性的值数组

2.Object.is() 方法判断两个值是否为同一个值。
3.Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

你可能感兴趣的:(javascript)