let关键字（和var关键字的区别）
- 变量不能重复声明
- 拥有块级作用域
- 不存在变量提升
- 不影响作用域链的效果
举个例子
现在的需求是，页面上有三个方块儿，点击方块使其变色
-
用
var关键字声明变量//此处忽略样式 <div class='item'></div> <div class='item'></div> <div class='item'></div> <script> let items = document.getElementByClassName('item') for(var i = 0; i < items.length; i++){ items[i].onclick = function(){ this.style.background = 'red' } } </script>- 这段代码的第10行，不能换成
items[i].style.background = 'red'，因为此处的i为全局变量，但是这个点击事件绑定的是一个回调函数，在代码内的循环完成时，i的值已经变成了3，而且是全局存在的，所以通过items[i]去调用对应的元素发生的就是是数组越界
- 这段代码的第10行，不能换成
-
改用
let关键字let items = document.getElementByClassName('item') for(var i = 0; i < items.length; i++){ items[i].onclick = function(){ items[i].style.background = 'red' } }- 此时，代码的第5行就可以改成这种写法，因为
let关键字声明的变量拥有块级作用域。在点击每个div时，每个i都是新的，可以在点击页面元素时生成一个新的i，再通过索引去改变对应的元素的style属性
- 此时，代码的第5行就可以改成这种写法，因为
const关键字
- 用于声明常量
- 声明时一定要初始化
- 一般使用大写的常量名
- 初始化完成后的常量值不可修改
- 拥有块级作用域
- 修改对于用
const声明的数组和对象的元素时，不视作修改常量，不会报错，因为const声明的数组或对象的地址值没有发生改变，即使引用的数组和对象的本地已经发生了改变
析构赋值
其实一种语法糖，方便用户按照一定的模式，从数组或对象中提取值，并对变量进行赋值
-
数组的析构
const F4 = ['师傅', '大师兄', '二师兄', '三师弟'] let [a, b, c, d] = F4此时的
a, b, c, d就分别为师傅，大师兄，二师兄和三师弟了 -
对象的析构
const person = { name: 'tom', age: 18, eat: function(){ console.log('吃东西') } } let {name, age, eat} = person console.log(name) //打出tom console.log(age) //打出18 eat() //打出'吃东西'对对象进行析构赋值，可以方便对对象内部的方法进行调用
模板字符串
用反引号声明字符串
-
模板字符串的内容中可以直接出现换行符
let str = ` <ul> <li>张三</li> <li>罗翔</li> </ul> ` -
可以直接进行变量的拼接
let name = '原神' let output = `原来你也玩${name}` //不需要用字符串的加法进行拼接${xxx}是固定格式
简化对象的写法
ES6允许在花括号内部直接写入变量和函数，作为对象的属性和方法
-
ES5:
let name = '五指山' let price = 200 var place = { name: name, price: price } -
在ES6中可以进行简化的写法，同名的属性可以省略写，还可以直接省略的添加新的对象方法
let name = '五指山' let price = 200 const place = { name, price, visit(){ console.log('参观') } }
箭头函数
一种新的声明函数的方式
-
本来的函数声明方式
let fn = function(形参列表){ .... } -
箭头函数声明方式
let fn = (形参列表) => { ... } -
箭头函数的特性
-
this是静态的，始终指向函数声明时所在的作用域下的this的值，不能用call, apply去改变<div id='a'></div> <script> let ad = document.getElementById('a') a.addEventListener("click", function{ setTimeout(function(){ //这样子会报错，因为这里的this是window this.style.background = 'red' }, 1000) setTimeout(()=>{//由于箭头函数的this是静态的，指向了此匿名函数在声明时的作用域，即为a this.style.background = 'red' }, 1000) }) </script> 箭头函数不能作为构造函数去实例化对象
箭头函数不能使用
arguments变量
-
-
箭头函数的简写
-
当形参有且只有一个时，可以省略形参列表的小括号
let add = n =>{ return n+1 } -
当代码体只有一条语句时，可以省略花括号。如果省略花括号，就要省略
return语句let plus = n => n*n
-
-
箭头函数的适用范围
- 适用于
this无关的回调函数，例如定时器，数组的方法回调 - 不适用于与
this有关的回调，例如事件回调，对象的方法
- 适用于
设置函数参数默认初始值
ES6允许给函数参数设置初始值
-
ES5及以前
function add(a, b, c){ return a+b+c } console.log(add(1,2))//此时会打印出NaN -
ES6，给
c赋了一个默认值。一般有默认值的形参放在后面function add(a, b, c=10){ return a+b+c } console.log(add(1,2))//此时会打印出13 -
结合析构赋值使用
function connect({host='127.0.0.1', username='root', password='root', port='2000'}){ console.log(host) ... console.log(port) } connect({ host:'localhost', username:'admin', password:'admin', port:2000 })
rest参数
ES6中新引入的参数，用于获取函数的实参，替代arguments
function date(...args){
console.log(args)
}
date('tom', 'jerry', 'bob') //打印出一个真正的数组，而不是arguments参数返回的伪数组
-
rest参数必须放在参数列表的最后面
扩展运算符...
可以将数组转化为用逗号分隔的参数序列
const boys ['tom', 'jerry', 'bob']
function login(){
console.log(arguments)
}
login(...boys) //使用...将一个arguments拆成了3个元素的数组
-
用于合并数组
const east = ['骑士', '猛龙'] const west = ['湖人', '勇士'] const allStar = [...east, ...west] console.log(allStar) -
用于拷贝数组（只能扩展和深拷贝第一层的值）
const east = ['骑士', '猛龙'] const chosen = [...east] console.log(east) -
将伪数组转化为真正的数组
const divs = document.querySelectorAll('div') const divArray = [...divs] console.log(divArray)
新的数据类型：Symbol
- Symbol的值是唯一的
- Symbol的值不能与其他数据进行运算
- Symbol定义的对象，其属性不能使用
for..in进行循环遍历，可以用Reflect.ownKeys来获取所有的键名
let s = Symbol('this is symbol')
-
向对象内部添加方法，不需要管本身对象有没有同名的方法
let game = {.......} //内部很复杂 let methods = { up: Symbol(), down: Symbol() } game[methods.up] = () =>{ console.log("go up") } game[methods.down] = () =>{ console.log("go down") }
