es6之Array

说起数组，可以说是我们日常工作中最长打交道的了，处理后端给我们返回的数据等，今天写的内容主要关于：

    1、es6与es5数组遍历有哪些？优缺点是什么？哪种方式更优？
    2、什么是类数组？使用es6与es5分别怎么将它们转为真正的数组？
    3、es5和es6数组生成查找都有那些方式？es6的find() 和 ES5 的 filter() 有什么区别？

1、es6与es5数组遍历有哪些？优缺点是什么？哪种方式更优？

    以下是对各种遍历做了下汇总，哪种方式更优其实是要根据具体业务开发中的来选择使用。不过既然es6出了 for of，还是推荐大家区使用，因为他非常适合我们来处理复杂性嵌套数据。

 

• for循环，支持break、continue

for(let i=0;i<5;i++){
     console.log(i)
}

• forEach，写法更优雅，相对for循环可读性更高，不过不支持break、continue。

 [1,2,3,4,5].forEach(function(i){
       if(i===2){
        return;
      }else{
        console.log(i)
      }
 })

 

• map返回一个新数组。不会改变原数组的内容

    let arr=Array.of(1,2,4,5,6,7);
    let newArr=arr.map(key=>key*2)
    newArr // [2, 4, 8, 10, 12, 14]

 

• filter

 let arr=Array.of(1,2,4,5,6,7);
    let newArr=arr.filter(key=>key>4)
    newArr //[5, 6, 7]

• for of

    let  obj={name:'youzi',age:18}  
    for(let [k,v] of Object.entries(obj)){
        console.log(k,v)
    }

 

• 什么是类数组？使用es6与es5分别怎么将它们转为真正的数组？
  • 类数组是指拥有数组的length属性，却不能直接调用数组的方法。
  • 经常出现在函数中的 arguments、DOM中的 NodeList等.
    • 1. 按索引方式储存数据
    • 2. 具有length属 
      • 1、es5中用[].slice.call(arguments)将它转为真正的数组

        let arrLike = {
                0: 'a',
                1: 'b',
                2: 'c',
                length: 3
            }
            [].slice.call(arguments)
            [].slice.call(document.querySelectorAll('a'))

      • 2、es6中用Array，from（）将它转换为真正的数组，Array.from语法如下：

           let arr= Array.from(arrLike)
            arr // ["a", "b", "c"]

         

2、es5和es6数组生成查找都有那些方式？es6的find() 和 ES5 的 filter() 有什么区别？

    首先生成数组，我们在es5中直接使用let arr=[]这种方式。但是在es6中，Array.from（）、Array.of（），Array.fill（）其实都可以实现我们创建数组的需求；接下来我们就来试一下

 1、下面是我们使用es6生成数组；说下Array.fill（填充的数，开始索引，结束索引）

 let arr = Array.from({length:5},()=>1) //[1, 1, 1, 1, 1]
        arr = Array(5).fill(8); // [8, 8, 8, 8, 8] 
        arr = Array.of(1,3,5,7,8) // [1, 3, 5, 7, 8]

关于查找数组元素，es6的find() 和 ES5 的 filter()区别主要有2点：

方法	返回值
filter（）	把所有符合条件的元素的项组成的数组返回
find（）	返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined
findIndex（）	方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

 

2、下面是我们使用对比es6和es5中查找数组元素；

    let arr=Array.of(1,3,7,8,3,0,5)
    let newArr = arr.filter(key=>key===3); //[3, 3]
    let findArr = arr.find(key=>key===3); // 3
    let findArrIndex = arr.findIndex(key=>key===3); // 1