zoukankan      html  css  js  c++  java
  • ES6中的几个常用代码

    1.属性的简写:

    有时候你可能会用到这么一个方法,听说这是ES5的写法,具体会在什么情况下使用,看个人项目中如何使用

    function test(a, b) {
      return {a: a,b: b}
    }

    但是在ES6当中是可以这么优化的。

    1 function test(a, b) {
    2   return {a,b}
    3 }

    2.操作符的使用:(根据数据量大小选择采用)

    有时候可能会遇到这样的代码,有这么两个数组

    let arr = ['a','b','c','d']
    let arr1 = ['e','f']

    需要把arr1数组添加到arr当中,方法有很多,其一:循环遍历(循环的方式有多种,就不一一列举了)

    arr1.forEach( n => {
       arr.push(n)
    })
    console.log(arr)
    
    结果:['a','b','c','d','e','f']

    其二:还有这种简单的操作,这种就是...操作符的使用了,把两个数组合并为一个新数组。

    arr = [...arr,...arr1]

    看过大佬的解释说这种数组合并是进行过底层的封装,其释义为babel转译的结果,仔细看过程并不难理解:

    function _toConsumableArray(arr) {
      if (Array.isArray(arr)) { 
        for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { 
          arr2[i] = arr[i];
        }
        return arr2;   } else {
        return Array.from(arr);
      } } arr
    = [].concat(_toConsumableArray(arr), arr1);

    其三:就是通过push使用...操作符

    arr.push(...arr1);

    这种写法就相当于

    arr.push.apply(arr, arr1);

    基本上操作符的使用方法就是这样子的,但是有一个缺点:

    当数据量比较大时,处理能力就较差耗时较长,过于庞大时会发生堆栈溢出,所以选择使用时要注意。

    有一个相对好的处理方法,就是使用数组合并concat()方法:

    arr = arr.concat(arr1)

    这种方法在数据量比较小的情况下,与...操作符差异不大,但是数据量比较大的时候就体现出来了它的性能比较好了。

    关于concat与...操作符性能比较

    3.数组中蛮有用的几个方法

    假如有这么一个数组:

    let arr = [{id:1,num:5},{id:2,num:6},{id:3,num:11},{id:4,num:15},{id:5,num:23}]

    3.1 find() -- 查找元素,找不到为undefined

    let res = arr.find(item => item.id === 3)
    console.log(res)
    结果:{id: 3, num: 11}

    let res = arr.find(item => item.id === 6)
    console.log(res)
    结果:undefined

    3.2 findIndex() -- 查找元素下标索引

    let res = arr.findIndex(item => item.id === 2) 
    console.log(res,'res')
    结果:1

    some() -- 查找其中一项是否为真

    let res = arr.some(item => item.num > 20) 
    console.log(res)
    结果:true

    every() -- 查找每一项是否为真

    let res = arr.every(item => item.num > 20) 
    console.log(res)
    结果:false

    let res = arr.every(item => item.num > 0) console.log(res) 结果:true

    includes() --查找是否包含某项

    let arr = [1,2,3,4,5]
    let res = arr.includes(3)
    console.log(res)
    结果:true
  • 相关阅读:
    async 和 await
    C#中lock死锁
    Attribute特性
    数据库优化
    EF(ORM)
    依赖注入
    面向接口编程
    EF乐观锁与悲观锁
    为什么要使用RESTFUL风格?
    cloudsim 3.0.3下载与安装教程
  • 原文地址:https://www.cnblogs.com/yoyo-ran/p/13801667.html
Copyright © 2011-2022 走看看