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 的特点

  1. let的作用域在最近的 {} 之间
  2. let不能重复声明【。。就算用var也不会有人重复声明把^_^】
  3. 使用let声明的变量在块级作用域内能强制执行更新变量【看mdn最后一个for循环例子
  4. 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部分

<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
<li>导航6</li>
</ul>

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了:)

ES6指北【1】——let、const的更多相关文章

  1. 可能比文档还详细--VueRouter完全指北

    可能比文档还详细--VueRouter完全指北 前言 关于标题,应该算不上是标题党,因为内容真的很多很长很全面.主要是在官网的基础上又详细总结,举例了很多东西.确保所有新人都能理解!所以实际上很多东西 ...

  2. ES6 入门系列 - let 和 const 命令

    let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = ; ; } a // ReferenceEr ...

  3. 常用STL使用指北

    常用STL使用指北 set和multiset set和multiset都是基于红黑树(显然是一个二叉搜索树)的STL. 定义 我们可以使用(multi)set<元素类型>名称来定义一个(m ...

  4. Angular 从入坑到挖坑 - Router 路由使用入门指北

    一.Overview Angular 入坑记录的笔记第五篇,因为一直在加班的缘故拖了有一个多月,主要是介绍在 Angular 中如何配置路由,完成重定向以及参数传递.至于路由守卫.路由懒加载等&quo ...

  5. es6学习笔记--let和const

    今天学习了es6中的let和const命令,借此整理一下笔记. let : let 和 var 的声明方式一样,但有 var 比不上的优点.下面用 var 和 let 的例子来加深对 let 的理解. ...

  6. git宝典—应付日常工作使用足够的指北手册

    最近公司gitlab又迁移,一堆git的命令骚操作,然鹅git命令,感觉还是得复习下——其实,git现在界面操作工具蛮多,比如intellij 自带的git操作插件就不错,gitlab github ...

  7. Python 简单入门指北(二)

    Python 简单入门指北(二) 2 函数 2.1 函数是一等公民 一等公民指的是 Python 的函数能够动态创建,能赋值给别的变量,能作为参传给函数,也能作为函数的返回值.总而言之,函数和普通变量 ...

  8. Python 简单入门指北(一)

    Python 简单入门指北(一) Python 是一门非常容易上手的语言,通过查阅资料和教程,也许一晚上就能写出一个简单的爬虫.但 Python 也是一门很难精通的语言,因为简洁的语法背后隐藏了许多黑 ...

  9. 关于supervisor的入门指北

    关于supervisor的入门指北 在目前这个时间点(2017/07/25),supervisor还是仅支持python2,所以我们要用版本管理pyenv来隔离环境. pyenv 根据官方文档的讲解, ...

随机推荐

  1. Windows Runtime (RT)

    学了sl for wp 开发了1年都没入门,只能说自己的学习欲望太低了. 今天偶然才发现wrt 跟 .net 是2个东西... orz. 得抛弃 sl ,wrt才是未来的主流吧... 这篇文章不错 h ...

  2. 调用webService学习小结

    这段时间项目进行到了最后时刻,但是还有很多需求没有搞清楚,眼看deadline越来越近,压力也越来越大.现在我的主要工作是将别人开发好的一个系统给加载到我们系统中,使用的方法是通过webService ...

  3. sql server select和set赋值的区别

    --SQL Server中对已经定义的变量赋值的方式用两种,分别是 SET 和 SELECT --当表达式返回一个值并对一个变量进行赋值时,推荐使用 SET 方法 (1)SELECT可以在一条语句里对 ...

  4. Git复习(四)之解决冲突

    解决冲突 合并分支往往也不是一帆风顺的 假设:我们从master创建了一个新的分支feature1更改了最后一行提交,我们切换到master分支也更改了最后一行提交,现在,master分支和featu ...

  5. slf4j日志的使用-学习笔记

    maven项目: 一.首先在pom.xml文件中添加maven依赖 这是其中一种: <dependency>     <groupId>org.slf4j</groupI ...

  6. Linux内核管理子系统和进程管理子系统

    内核管理子系统职能:1.管理虚拟地址与物理地址的映射 2.物理内存的分配 程序:存放在磁盘上的一系列代码和数据的可执行映像,是一个静止的实体. 进程:是一个执行中的程序,它是动态的实体 进程四要素: ...

  7. 基于mini2440嵌入式Linux根文件系统制作(Initramfs和nfs两种跟文件系统)

    嵌入式系统由三部分构成: 1.bootoader---bootparameters---2.kernel 3.Root-filesysytem 一个内核可以挂载多个文件系统,但是有一个根文件系统所以叫 ...

  8. Python名称空间与作用域

    什么是名称空间? 比如下图的长方形代表内存,在这个内存里我要设置一个变量100,那么这个变量得有个门牌号,就叫他a吧,但其实变量不是这么存储的,他其实的存储方式是这样的,他会有一个名称空间,这个名称空 ...

  9. 测试人员必备:linux文件清理不得不知道的技巧

    测试人员最常见和繁琐的任务之一就是清理系统,比如防止磁盘空间出现不足.下面是我收集的一些常用的 Linux 文件系统相关命令. 一 检查可用空间 要查找服务器上所有文件系统上的可用空间,请执行以下命令 ...

  10. 第二章 Vue快速入门-- 19 v-if和v-show的使用和特点

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...