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部分
<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)
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。