• 90% 前端都会的 ES6 简化代码技巧,你用过哪些?


    90% 前端都会的 ES6 简化代码技巧,你用过哪些?

    本文主要讲解一下内容:
    • 块级作用域
    • 解构
    • 箭头函数
    • 模板字符串
    • 剩余参数 / 展开语法
    • 对象字面量简写语法
    • 数组实例的 includes()
    • Async / await 异步语法

    块级作用域

    为什么需要块级作用域?

    ES5只有全局作用域和函数作用域,没有块级作用域,这导致很多场景不合理。

    • 第一种场景,内层变量可能会覆盖外层变量。

    以上代码的原意是,if代码块外部使用外层的 tmp 变量,内部使用内部的 tmp 变量。但是,函数 fn 执行后,输出的结果为 undefined,原因在于变量提升导致内层的 tmp 变量覆盖了外层的 tmp 变量。
    • 第二种场景,用来计数的循环变量泄露为全局变量。

    上面代码中,变量 i 只是用来控制循环,但是循环结束后,他并没有消失,而是泄露成了全局变量。

    let 实际上为 JavaScript 新增了块级作用域。

    上面的函数有两个代码块,都声明了变量 n ,运行后输出 5 。这表示外层代码块不受内层代码块的影响。如果使用 var 定义变量,最后输出的值就是 10。

    那么我们能利用 块级作用域 做什么呢?
    我们先来做到面试题
    看到这,相信聪明的你已经理解块级作用域的好处了 O(∩_∩)O
    那么 ES5 能不能实现 块级作用域的效果呢?可以的,我们可以利用闭包

    结构

    解构:是将一个数据结构分解为更小的部分的过程。ES6中,从数组和对象中提取值,对变量进行赋值。

    那么结构有什么用处呢?
    1.可以大大的简化变量的声明操作。
    // ES5
    var foo = 1
    var bar = 2
    var baz = 3
    // ES6
    let [foo,bar,baz] = [1,2,3]
    2.变量交换:看起来如同镜像。赋值语句的左侧的解构模式,右侧是临时创建的数组字面量。x 被赋值为数组中的 y,y 被赋值为数组中的x。
    let x = 1
    let y = 2
    [x,y] = [y,x]
    // x = 2, y = 1
    3.对象结构
    var obj = { x:1,y:2,c:1 }
    let { x,y } = obj
    // x = 1
    // y = 2
    4.字符串解构
    const [a,b,c,d,e] = hello
    // a => h
    // b => e
    // c => l
    // d => l
    // e => o
    5.函数参数解构
    const shaochang = {name:'少昌',age:18}
    function getAge({ name,age }){ return `${name}今年${age}岁` }
    getAge(shaochang) // 少昌今年18岁

    箭头函数

    ES6 允许使用箭头 => 定义的函数

    var f = v => v
    // 等同于ES5的
    var f = function(v){ return v }

    如果箭头函数不需要参数或需要多个参数,就使用圆括号代表参数部分。

    var f = () => 5
    // 等同于 ES5 的
    var f = function (){ return 5 }
    var sum = (num1,num2) => num1 + num2
    // 等同于 ES5 的
    var sum = function(num1, num2){ return num1 +num2 }

    箭头函数可以与解构结合使用。

    const full = ({ first, last }) => first + + last;
    // 等同于 ES5 的
    function full(person){ return person.first + + person.last; }

    箭头函数表达简洁。

    const isEven = n => n % 2 === 0
    const square = n => n * n
    var result = values.sort((a, b) => a - b)
    // 等同于 ES5 的
    var result = values.sort(function (a, b) { return a - b })

    以上代码只用了两行,就定义了两个简单的工具函数。如果不用箭头函数,可能就要占用多行,而且还不如现在这样写醒目。

    箭头函数使用注意点。
    1.函数体内的 this 对象,就是定义时所在的对象,而不是使用时所在的对象。
    2.不可以当做构造函数,也就是不可以使用 new 命令,否则会抛出一个错误。
    3.不可以使用 arguments 对象,该对象在函数体内不存在。如果要用,可以使用 rest 参数代替。
    4.不可以使用 yield 命令,因此箭头函数不能作 Generator 函数。

    上面四点中,第一点尤其值得注意。this 对象的指向是可变的,但是在箭头函数中,它是固定的。
    // ES6
    function foo() { setTimeout(() => { console.log(id:,this.id) },100) }
    // 转换成 ES5
    function foo(){ var _this = this; setTimeout(function () { console.log( id:,_this.id ) },100) }

    上面代码中,转换后的 ES5 版本清楚地说明了,箭头函数里面根本没有自己的 this,而是引用外层的 this。

    模板字符串

    模板字符串(template string)是增强版的字符串,用反引号(``)标识。它可以当作普通字符串,也可以用来定义多行字符串,或者在字符串中嵌入变量。
    const { log } = console
    const name = wenshaochang
    const age = 18
    // 普通字符串拼接
    const result = name + '今年' + age + '岁'
    // 使用模板字符串
    const result2 = `${name}今年${age}岁`
    log(result) // wenshaochang今年18岁
    log(result2) // wenshaochang今年18岁
    // ${} 大括号可以放入任意的 JavaScript 表达式,可以进行运算
    const result3 = `${name}今年${age * 2}岁`
    log(result3) // wenshaochang今年36岁

    剩余参数 / 展开语法

    ES6 引入了 rest参数(形式为 ...变量名),用于获取函数的多余参数,这样就不需要使用 arguments 对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入其中。
    function sortNumbers(){ return Array.prototype.slice.call(arguments).sort() }
    // 使用 rest
    const sortNumbers = (...numbers) => numbers.sort()
    比较以上两种写法可以发现,rest 参数的写法更自然也更简洁。
    扩展运算符(spread)是三个点(...)如同 rest 参数的逆运算 将一个数组转为用逗号分隔的参数序列
    console.log(...[1, 2, 3]) // 1 2 3
    console.log(1,...[2,3,4],5) // 1 2 3 4 5
    下面是扩展运算符取代 apply 方法的一个实际例子,应用 Math.max 方法简化求出数组中的最大元素。
    // ES5 的写法
    Math.max.apply(null,[14,2,77])
    // ES6 的写法
    Math.max(...[14,3,77])
    // 等同于
    Math.max(14,3,77)
    扩展运算符提供了数组合并的新写法。
    // ES5
    [1,2].concat(more)
    // ES6
    [1,2,...more]
    对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。
    let z = { a:3, b:bb }
    let n = { ...z }
    n // { a:3, b:bb }
    n === z // false
    特别注意:... 扩展对象,只能做到当对象属性是 基本数据才是深拷贝,如果是 引入数据类型,那就是浅拷贝。
    let z = { a: 3, b: bb , c: { name: ccc } }
    let n = { ...z }
    n // { a: 3, b: bb , c: { name: ccc } }
    n === z // false
    n.c === z.c // true
    // n.c 跟 z.c 是同一个引用地址

    对象字面量简写语法

    const name = wen
    // ES5 写法 const obj = { name:name, f:function(){ console.log(this.name) }, }
    // ES6 简写 const obj2 = { name, f(){ console.log(this.name) } }
    obj.f() // wen obj2.f() // wen

    数组实例的 includes()

    Array.prototype.includes 方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。ES2016引入了方法。
    [1,2,3].includes(2) // true
    [1,2,3].includes(4) // false
    [1,2,NaN].includes(NaN) // true
    没有该方法之前,我们通常使用数组的 indexOf 方法,检查是否包含某个值。
    // ES5 if (arr.indexOf(el) !== -1) { // ... }
    // ES6 if (arr.includes(el)) { // ... }
    // 那么 indexOf 能不能做到类似于 includes 的写法呢? 我们可以利用 ~ 位运算符 if (~arr.indexOf(el)) { // ... }
    indexOf 方法有两个缺点,一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观。二是,它内部使用严格相等运算符(===)进行判断,这会导致对 NaN 的误判。
    ;[NaN].indexOf(NaN) // -1
    includes 使用的是不一样的判断算法,就没有这个问题
    ;[NaN].includes(NaN) // true

    Async / await 异步语法

    ES2017 标准引入了 async 函数,使得异步操作变得更加方便。
    async 函数是什么?一句话,它就是 Generator 函数的语法糖。
    async function getTitle(url) { let response = await fetch(url) let html = await response.text() return html.match(/([sS]+)/i)[1] }
    getTitle( https://tc39.github.io/ecma262/ ).then((res) => console.log(res))
    上面代码中,函数 getTitle 内部有三个操作:抓取网页、取出文本、匹配页面标题。只有这三个操作全部完成,才会执行 then 方法里面的 console.log
  • 相关阅读:
    [Leetcode][Python]29: Divide Two Integers
    [Leetcode][Python]28: Implement strStr()
    [Leetcode][Python]27: Remove Element
    前端笔记(百度)
    关于html5新增的功能(百度)
    一些我容易混淆的知识(关于数组的操作、对字符串的操作)
    web前端~~浏览器兼容问题(百度)
    关于前端的性能优化问题
    封装ajax(二)闭包的形式
    封装ajax
  • 原文地址:https://www.cnblogs.com/wenshaochang123/p/14899913.html
Copyright © 2020-2023  润新知