目录
ES介绍
? ? ? ? ?ES全称ECMAScript，是脚本语言的规范，而平时经常编写的JavaScript是ECMAScript的一种实现，所以ES新特性指的就是JavaScript的新特性
为什么要学习新特性？
- 语法简洁，功能丰富
- 框架开发应用?
什么是ECMA？?
????????ECMA（
European Computer Manufacturers Association
）中文名称为欧洲计算机制造商会，这个组织的目标是评估、开发和认可电信和计算机标准。1994
年后该组织改名为 Ecma
国际。
什么是 ECMAScript？
ECMAScript
是由
Ecma
国际通过
ECMA-262
标准化的脚本程序设计语言。
什么是 ECMA-262？
Ecma
国际制定了许多标准，而
ECMA-262
只是其中的一个，所有标准列表查看
http://www.ecma-international.org/publications/standards/Standard.htm
谁在维护 ECMA-262？
????????TC39（
Technical Committee 39
）是推进
ECMAScript
发展的委员会。其会员都是公司（其中主要是浏览器厂商，有苹果、谷歌、微软、因特尔等）。TC39
定期召开会议，会议由会员公司的代表与特邀专家出席
为什么要学习 ES6？
- ES6 的版本变动内容最多，具有里程碑意义
- ES6 加入许多新的语法特性，编程实现更简单、高效
- ES6 是前端发展趋势，就业必备技能
ECMAScript 6 新特性?
一、let 关键字
let
关键字用来声明变量，使用
let
声明的变量有几个特点：
- 不允许重复声明
- 块级作用域（全局、函数、eval、if else while for 等循环判断），在块级作用域中使用let声明的变量只在块级作用域中有效
- 不存在变量提升
- 不影响作用域链
应用场景：以后声明变量使用let?
let a;
let b,c,d;
let e = 100;
let f = 123, g = "12", h = []在for循环表达式中使用var声明表达式变量
????????在for循环中使用var，因为var是全局变量，所以循环结束后值会被覆盖掉，比如初始值i=0;i<3那么最后循环结束后i的值就会也只能是3。
for(var i = 0; i<5;i++){
setTimeout(()=>console.log(i),0) // 5 5 5 5 5
}????????上面的代码因为setTimeout是一个异步，所以它拿到的是循环结束后的i的值，因为上面我们说的var是全局变量会被覆盖掉所以最后的i值是5，而且一共循环了5次（0-4），所以会打印出五个5。
在for循环表达式中使用let声明表达式变量
????????因为let有自己的作用域块，所以在for循环表达式中使用let其实就等价于在代码块中使用let，也就是说
- for( let i = 0; i< 5; i++) 这句话的圆括号之间，有一个隐藏的作用域
- for( let i = 0; i< 5; i++) { 循环体 } 在每次执行循环体之前，JS 引擎会把 i 在循环体的上下文中重新声明及初始化一次。
var liList = document.querySelectorAll('li') // 共5个li
for(let i = 0;i<liList.length;i++){
liList[i].onclick = function(){
//这里的i是循环结束的i，因为监听事件是异步
console.log(i)//0 1 2 3 4
}
}
//上面代码其实就等价于
for (let i = 0;i<liList.length;i++){
let i = 隐藏作用域中的i（表达式中的i）
liList[i].onclick = function(){
console.log(i)
}
}二、const 关键字
const
关键字用来声明常量，
const
声明有以下特点
- 声明必须赋初始值
- 标识符一般为大写
- 不允许重复声明
- 值不允许修改
- 块级作用域
- 对于数组和对象的元素修改，不算作对常量的修改，不会报错
注意：对象属性修改和数组元素变化不会触发const错误
应用场景：声明对象类型使用const，非对象类型声明选择let?
const NAME = "Tom";
const NAMES = ["Jack","Bob"];
NAMES.push("LiMing")三、变量的解构赋值
????????ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。
(1).数组的解构
const NAMES = ["Tom","Jack","Bob"]
let [first,second,third] = NAMES
console.log(first); //Tom
console.log(second); //Jack
console.log(third); //Bob(2).?对象的解构
const TOM = {
name:"Tom",
age:12,
hobby:function(){
console.log("play basketball");
}
}
let {name,age,hobby} = TOM
console.log(name); //Tom
console.log(age); //12
hobby() //play basketball寻找同名的属性赋值
注意：频繁使用对象方法、数组元素，就可以使用解构赋值形式
四、模板字符串
模板字符串（
template string
）是增强版的字符串，用反引号（`）标识，特点：
- 字符串中可以出现换行符
- 可以使用 ${xxx} 形式输出变量
let str = `模板
字符串`
console.log(str,typeof str);
/*
模板
字符串 string
*/
let food = "蛋糕"
let lovest = `吃${food}`
console.log(lovest); //吃蛋糕注意：当遇到字符串与变量拼接的情况使用模板字符串
五、简化对象写法
????????ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。
let name = "Tom";
let hobby = function(){
console.log("我喜欢打篮球");
}
const person = {
name,
hobby,
eat(){
console.log("爱吃蛋糕");
}
}注意：对象简写形式简化了代码，所以以后用简写就对了
六、箭头函数
????????ES6 允许使用「箭头」（
=>
）定义函数。
//声明函数
let fn = (a,b)=>{
return a+b
}
//调用函数
let result = fn(1,2)
console.log(result); //3
箭头函数的注意点:
- 如果形参只有一个，则小括号可以省略
- 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
- 箭头函数的?this 始终指向函数声明时所在作用域下的?this 的值
- 箭头函数不能作为构造函数实例化
- 不能使用 arguments
//this的静态指向
function getName(){
console.log(this.name);
}
let getName2 = ()=>{
console.log(this.name);
}
//设置window对象的name属性
window.name = "Window";
const person = {
name:"Bob"
}
//直接调用
getName() //window
getName2() //window
//使用call方法调用
getName.call(person) //Bob
getName2.call(person) //window //箭头函数的省略
//1.省略小括号，当形参有且只有一个的时候
let add = n =>{
return n+n
}
console.log(add(9)); //18
//2.省略花括号，当代码体只有一条语句的时候
let pow = n => n*n
console.log(pow(4)); //16注意：箭头函数不会改变this的指向
? ? ? ? ? ?箭头函数适合与this无关的回调，定时器、数组的方法回调
? ? ? ? ? ?箭头函数不适合与this有关的回调，事件回调，对象的方法
?ES6允许给函数参数赋值初始值
1.形参初始值 具有默认值的参数，一般位置要靠后（潜规则）
function add(a,b,c=10){
return a+b+c
}
let result = add(12,3)
console.log(result); //252.与解构赋值结合
function connect({host="120.0.0.1",username,password,port}){
console.log(host);
console.log(username);
console.log(password);
console.log(port);
}
connect({
username:"root",
password:"root",
port:3306
})?
七、rest 参数
????????ES6 引入
rest
参数，用于获取函数的实参，用来代替
arguments
ES5获取实参的方式：
function date(){
console.log(arguments);
}
date("Tom","Jery")rest 参数：
function date(...args){
console.log(args);//结果是数组，那么就可对结果使用数组的方法
}
date("Tom","Bob")rest参数必须要放到参数的最后：
function fn(a,b,...args){
console.log(a);
console.log(b);
console.log(args);
}
fn(1,2,3,4,5,6)注意： rest 参数非常适合不定个数参数函数的场景??
八、spread 扩展运算符
????????扩展运算符（spread
）也是三个点（
...
）。它好比
rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。
const NAMES = ["Tom","Jerry","Bob"]
//声明一个函数
function people(){
console.log(arguments);
}
people(...NAMES)//Arguments(3)?["Tom", "Jerry", "Bob", callee: ?, Symbol(Symbol.iterator): ?]spread的应用
- 数组的合并
- 数组的克隆
- 将伪数组转换为真正的数组
//1.数组的合并
const a = [1,2]
const b = [3,4]
const d = [...a,...b]
//2.数组的克隆
const str = ["A","b","X"]
const copystr = [...str]
//3.将伪数组转换为真正的数组
const divs = document.querySelectorAll("div")
const divArr = [...divs]?
九、Symbol
1.Symbol 基本使用
????????ES6 引入了一种新的原始数据类型
Symbol
，表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。
Symbol 特点
- Symbol 的值是唯一的，用来解决命名冲突的问题
- Symbol 值不能与其他数据进行运算
- Symbol 定义的对象属性不能使用 for…in 循环遍历 ，但是可以使用?Reflect.ownKeys 来获取对象的所有键名
//创建symbol
let s = Symbol();
console.log(s,typeof s);
let s2 = Symbol("Tom")
let s3 = Symbol("Tom")
console.log(s2 === s3); //false
????????Symbol.for创建。Symbol.for访问的是一个全局的Symbol表，如果有了就访问对应对象，如果没有就创建
let s4 = Symbol.for("Tom")
let s5 = Symbol.for("Tom")
console.log(s4 === s5); //true
//不能与其他数据进行运算Symbol创建对象属性 ：
例一：
let game = {
up:function(){
console.log("向上");
},
down:function(){
console.log("向下");
}
}
//声明一个对象
let methods = {
up:Symbol(),
down:Symbol()
}
game[methods.up] = function(){
console.log("向上一步");
}
game[methods.down] = function(){
console.log("向下一步");
}例二：
let youxi = {
name:"狼人杀",
[Symbol('say')]:function(){
console.log("我可以发言");
},
[Symbol('zibao')]:function(){
console.log("我可以自爆");
}
}2.Symbol 内置值
????????除了定义自己使用的 Symbol
值以外，
ES6
还提供了
11
个内置的
Symbol 值，指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行。
|
Symbol.hasInstance
|
当其他对象使用
instanceof
运算符，判断是否为该对象的实例时，会调用这个方法
|
|
Symbol.isConcatSpreadable
|
对象的
Symbol.isConcatSpreadable
属性等于的是一个布尔值，表示该对象用于 Array.prototype.concat()
时，是否可以展开。
|
|
Symbol.species
|
创建衍生对象时，会使用该属性
|
|
Symbol.match
|
当执行
str.match(myObject)
时，如果该属性存在，会调用它，返回该方法的返回值。
|
|
Symbol.replace
|
当该对象被
str.replace(myObject)
方法调用时，会返回该方法的返回值。
|
|
Symbol.search
|
当该对象被
str.search (myObject)
方法调用时，会返回该方法的返回值。
|
|
Symbol.split
|
当该对象被
str.split(myObject)
方法调用时，会返回该方法的返回值。
|
|
Symbol.iterator
|
对象进行
for...of
循环时，会调
Symbol.iterator
方法，返回该对象的默认遍历器
|
|
Symbol.toPrimitive
|
该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。
|
|
Symbol. toStringTag
|
在该对象上面调用
toString
方法时，返回该方法的返回值
|
|
Symbol. unscopables
|
该对象指定了使用
with
关键字时，哪些属性会被
with 环境排除。
|