ES6指北【1】——let、const

张春雷发布于2019-08-26 11:45 / 1693人阅读

摘要：如何学习的学习顺序以此类推没学好就别想学好边学边用学了就要用变量声明的方式上面两个是的语法，下面两个是的语法块级作用域看会声明一个全局变量吗显然当声明了全局变量后，是无法再声明全局变量的，只能对其赋值结论含义不明的问题下面的代码不会执

1.如何学习ES6 1.1 js的学习顺序

ES5 -> ES6 -> ES7 -> ES8 以此类推

ES5没学好就别想学好ES6

1.2 边学边用

学了就要用

2.变量声明的方式

    a = 1
    var a = 1
    // 上面两个是ES3的语法，下面两个是ES6的语法
    let a = 1
    const a = 1

2.0 块级作用域 {}

看mdn

2.1 a = 1 会声明一个全局变量吗？

    var a

    function fn1() {
        var a
        fn2

        function fn2() {
            a = 1
            console.log(window.a) // undefined
        }
    }

    fn1()

显然当var声明了全局变量后，a = 1 是无法再声明全局变量的，只能对其赋值
结论：a = 1 含义不明

2.2 var 的问题

    function fn() {
        if (true) {
            console.log(a) // undefined
        } else {
            // 下面的代码不会执行
            var a
            console.log(a)
        }
    }

    fn()

哪怕var没有被执行，变量也会被提升
也就是说 var声明的变量没有块级作用域 , 而js程序员为了让var有块级作用域，通常使用的方式是立即执行函数

所有的var建议写在第一行 —— 《js语法精髓》

2.3 let 2.3.1 let的由来

下面我我们来写段代码
目的是只暴露一个全局变量 blues
用var来写
1.需要一个立即执行函数 2.需要一个函数把a包起来

    (
        function () {
            var a = 1

            window.blues = function () {
                console.log(a) // 1
            }
        }
    )()

用let来写

    {
        let a = 1
        window.blues = function () {
            console.log(a) // 1
        }
    }
    blues()
    console.log(a) // a is not defined

let 的特点

let的作用域在最近的 {} 之间

let不能重复声明【。。就算用var也不会有人重复声明把^_^】

使用let声明的变量在块级作用域内能强制执行更新变量【看mdn最后一个for循环例子】

let的临时死区【temp dead zone】—— 如果你在 let a 之前使用a，报错

    {
        let a = 1
        {
            console.log(a) // a is not defined
            let a = 2
        }
    }
    // 这培养了我们一个好习惯 —— 所有的变量声明都要写在前面

test

if (true) {
    let a = 1
} else {
    let a = 2
}
console.log(a) // ???

// answer:a is not defined

简单理解let —— let就看它在哪个花括号里

2.4 const

const和let一样，只有一个区别 —— 只有一次赋值机会，且必须在声明的时候就赋值
const:英文意思常量 —— 固定一个值

    {
        const a = 1
        console.log(a) // 1
        a = 2
        console.log(a) // 报错 —— Assignment to constant variable.[给常量赋值（是错的）]
    }

用const的情况

    {
        const PI = 3.1415926
    }

3.let的扩展

用let解决for循环中onclick问题

HTML部分


    导航1
    导航2
    导航3
    导航4
    导航5
    导航6

JS部分

先看用var来写

    var liTags = document.querySelectorAll("li")

    for (var i = 0; i < liTags.length; i++) {
        // 使用立即执行函数，var j 就不会跑到外面去(不会被提升)
        (function () {
            var j = arguments[0]
            liTags[j].onclick = function () {
                console.log(j)
            }
        })(i)
    }

mdn的写法

    for (let i = 0; i < liTags.length; i++) {
        // 注意i的作用域就在上面的 () 里
        // 不过for循环在使用let的时候自动做了一个魔法
        // let j = i // js自动加的

        // 过程是这样的
        // 下面这3行代码执行之前 —— 块里面的i = ()里面的i
        liTags[i].onclick = function () {
            console.log(i)
        }
        // 上面3行代码执行后 —— ()里面的i = 块里面的i
    }

如果我的解释你看不懂的话，希望你能看懂下面的代码

    for (var _i = 0; _i < liTags.length; _i++) {
        let j = _i
        liTags[j].onclick = function () {
            console.log(j)
        }
    }

4.永远别再用var了:)

云服务器 GPU云服务器指北入坑指北 Lets Let

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107509.html

ES6指北【1】——let、const

摘要：如何学习的学习顺序以此类推没学好就别想学好边学边用学了就要用变量声明的方式上面两个是的语法，下面两个是的语法块级作用域看会声明一个全局变量吗显然当声明了全局变量后，是无法再声明全局变量的，只能对其赋值结论含义不明的问题下面的代码不会执 1.如何学习ES6 1.1 js的学习顺序 ES5 -> ES6 -> ES7 -> ES8 以此类推 ES5没学好就别想学好ES6 1.2 边学边用 ...

tain335 2019-08-01 18:35 评论0 收藏0
ES6指北【3】——5000字长文带你彻底搞懂ES6模块

摘要：模块什么是模块什么是模块化玩过游戏的朋友应该知道，一把装配完整的步枪，一般是枪身消音器倍镜握把枪托。更重要的是，其它大部分语言都支持模块化。这一点与规范完全不同。模块输出的是值的缓存，不存在动态更新。 1.模块 1.1 什么是模块？什么是模块化？玩过FPS游戏的朋友应该知道，一把装配完整的M4步枪，一般是枪身+消音器+倍镜+握把+枪托。如果把M4步枪看成是一个页面的话，那么我们可以...

ygyooo 2019-08-23 10:52 评论0 收藏0
ES6指北【6】——详谈解构赋值【附赠练习题】

摘要：指北详谈解构赋值附赠练习题一何谓解构赋值基本概念首先我们看一下给的定义解构赋值语法是一个表达式，这使得可以将值从数组或属性从对象提取到不同的变量中从定义中，我们可以发现解构赋值的作用是对变量进行赋值主要通过两个方面实现这个作用数组将数组中的 ES6指北【6】——详谈解构赋值【附赠练习题】一、何谓解构赋值？ 1. 基本概念首先我们看一下MDN给的定义解构赋值语法是一个 Javasc...

sorra 2019-08-23 11:33 评论0 收藏0
ES6指北【4】——ES6的函数参数处理，超乎你想象

摘要：参数搭配的变量是一个数组，该变量将多余的参数放入数组中。从上面的概念中，我们至少可以知道如下三个信息语法变量。一、函数的默认参数值 1. ES6之前，我们如何实现函数默认参数 1.1 方式一：使用逻辑运算符【||】 function test(x) { x = x || 默认值 // 使用||设置默认值 console.log(x) } test() // 默认值但这样...

Pandaaa 2019-08-23 11:01 评论0 收藏0
ES6指北【2】—— 箭头函数

摘要：箭头函数基本语法函数语法具名函数匿名函数三句话第一句话声明第二句话声明匿名函数第三句话把匿名函数赋值给箭头函数语法特点只能做赋值，不能做声明第一种写法完全写法不省略参数个数，不省略函数体花括号参数个数函数体内语句个数第二种写法省略参数括号参 1.箭头函数基本语法 1.1 ES3 函数语法 // 具名函数 function xxx(arg1, arg2) { console.lo...

DobbyKim 2019-08-22 14:57 评论0 收藏0