es6数组和对象常用方法

似水流年QC
54 阅读2分钟
随着es6的发布，新版标准提供了很多新的api，给了开发人员提供了很大的帮助，操作简便，提升效率，现在主要讲下es6提供新的操作数组和对象的一些常用方法。

一、数组的操作

Object.entries() 

 作用：将一个对象中可枚举属性的键名和键值按照二维数组的方式返回。若对象是数组，则会将数组的下标作为键值返回。

  1. Object.entries({ one:1,two: 2}) // [['one', 1], ['two', 2]]
  2.  
  3. Object.entries([1, 2]) // [['0', 1],['1', 2]]
  4.  
  5. Object.keys() 和 Object.values()
  6.  
  7. 作用：只返回自己的键值对中属性的值。它返回的数组顺序，也跟Object.entries()保持一致
  8.  
  9. var obj = { foo:'bar',baz: 42};
  10.  
  11. console.log(Object.keys(obj)) // ["foo", "baz"] 返回key
  12.  
  13. console.log(Object.values(obj)) // ["bar", 42] 返回value
  14.  
  15. console.log(Object.entries(obj)) // [["foo","bar"],["baz",42]]

Array.prototype.includes() 

作用：includes()是查找一个值在不在数组里,若是存在则返回true,不存在返回false 

  1. ['a','b','c'].includes('a') // true
  2.  
  3. ['a','b','c'].includes('A') //false
  4.  
  5. ['a','b','c'].includes('d') //false
要搜索的值和搜索的开始索引(接收2个参数) 
  1. ['a','b','c','d'].includes('b') // true 
  2.  
  3. ['a','b','c','d'].includes('b', 1) // true 
  4.  
  5. ['a','b','c','d'].includes('b', 2) // false
includes与ES6中的indexOf() 比较 
  1. ['a','b','c'].indexOf('a') // 0
  2.  
  3. ['a','b','c'].indexOf('b') //1
  4.  
  5. ['a','b','c'].indexOf('c') // 2 
  6.  
  7. ['a','b','c'].indexOf('d') //-1
includes() 返回是布尔值,能直接判断数组中存不存在这个值，而indexOf()返回的是索引，这点前者更加方便。 ES6为Array增加了find()，findIndex() 函数。

findIndex((value,index,arr) 三个参数：
value：每一次迭代查找的数组元素。
index：每一次迭代查找的数组元素索引。
arr：被查找的数组。

find()   函数用来查找目标元素，找到就返回该元素，找不到返回undefined。 
findIndex()  函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。 

Array.prototype.flat()  
作用：将嵌套数组转换为一维数组 数组的成员有时还是数组
作用：用于将嵌套的数组“拉平”， 变成一维的数组。该方法返回一个新数组（默认拉平一层）  
  1. [1,2,3,4,5,[6,7],[8,9]].flat(1) // [1,2,3,4,5,6,7,8,9] 
  2.  
  3. [1,2,3,4,[5,6,[7,8]]].flat(1) // [1, 2, 3, 4, 5, 6, Array(2)] 
  4.  
  5. [1, 2,[3,4,[5,6,[7,8]]]].flat(3) // [1,2,3,4,5,6,7,8]  将多维数组拉平成一维数组

二、对象的操作

es6 对对象的操作 
  1. Object.is() // 对象比较 
  2.  
  3. Object.assign() // 合并对象
  4.  
  5. var obj1 = {name:"wang"};
  6.  
  7. var obj2 = {name:"wang"};
  8.  
  9. // es5
  10. obj1.name === obj2.name  // true
  11.  
  12. // es6
  13. Object.is(obj1.name,obj2.name) // true
  14.  
  15.  
  16. var a ={a:'left'}
  17.  
  18. var b ={b:'right'}
  19.  
  20. // es5
  21. a.concat(b)  // {a:"left", b: "right"}
  22.  
  23. // es6
  24. Object.assign(a,b)   // {a:"left", b: "right"}
Object.fromEntries()  方法是Object.entries()的逆操作，用于将一个键值对数组转为对象。 

Object.fromEntries([['foo', 'bar'],['baz', 42]]) // { foo:"bar",baz: 42 }

es6 对象遍历   Object.keys()，Object.values() 
  1. var obj = { foo:'bar',baz: 42}
  2.  
  3. console.log(Object.keys(obj))  // ["foo", "baz"] 返回key
  4.  
  5. console.log(Object.values(obj)) // ["bar",42] 返回 value

avatar
文章
阅读
粉丝