1.概述

ES全称EcmaScript，Javascript是ES的一种。

特性：

  • 语法简洁，功能丰富；
  • 框架开发丰富。

2.语法

1.let关键字

声明变量：
let a;let a=100,b="hhh";

特性：

  1. 变量不能重复声明；（var可以）
  2. 块级作用域；（var全局作用域）
  3. 不存在变量提升：不允许声明前使用；
  4. 不影响作用域链（就是同级有块不影响）
2. 声明常量

const s=1; 注意：

  1. 一定要赋初始值；
  2. 一般常量使用大写；
  3. 常量值不能修改；
  4. 块级作用域；
  5. 对数组或对象的元素修改，不算对常量作修改；（可以改数组或对象）
3.变量解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为变量解构赋值；
为了解决方法频繁调用书写复杂问题。

const F4=['1','2','3','4'];
let ['h1','h2','h3','h4']=F4;
===
{h1:'1'}


const z={
name:'zhao',
age:'65',
xiao:function(){}
};

let {name,age,xiao}=zhao;
相当于声明三个变量并赋值
4.模板字符串

新的声明字符串方式：反引号 `

  • 内容中可以直接出现换行符；
  • 可以进行变量拼接：${} 
let s='s1';
let ss=`${s}hhhhh`;
ss===`s1hhhhh`;
5.对象简化写法

允许在大括号内直接写入变量和函数，作为对象的属性和方法。

6.箭头函数

声明箭头函数：

let fn=(形参)=>{
代码体
}

补充this指向：
JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。

  • call方法的参数，应该是一个对象。如果参数为空、null和undefined，则默认传入全局对象。func.call(thisValue, arg1, arg2, ...)
  • apply与call相同，但它的调用参数是数组：func.apply(thisValue, [arg1, arg2, ...])
  • bind()方法用于将函数体内的this绑定到某个对象，然后返回一个新函数。
  1. this是静态的，始终指向函数声明时所在作用域下的this值；（不变，本身无this）,call也不变
  2. 不能作为构造函数实例化对象；
  3. 不能使用arguments对象；
  4. 简写：形参有且只有一个let add= n=>{ }；代码体只有一个语句：let add=(n)=>n+n（省略花括号和return，执行结果就是返回值）。

箭头函数不适合：
适合与this无关的回调：定时器、数组；
不适合于this有关的回调：事件回调、对象。

7. 函数
  • ES6允许给函数参数赋初始值，一般要靠后；一般与解构赋值结合使用；
  • rest参数代替arguments用于获取实参：（rest参数必须放在最后）
以前
function fn(){
console.log(arguments)
}
date('a1','a2')//对象

ES6  rest参数
function fn(...args){
console.log(args);
}
date('a1','a2')//数组，可以使用filter、some、every等方法
8.扩展运算符

...扩展运算符能将数组转换成逗号分隔的参数序列。
等于把数组拆分：...arrayName

9.Symbol数据类型

第七种原始数据类型，类似于字符串，表示独一无二的值。
特点：

  1. Symbol值唯一；
  2. 不能与其他数据进行运算；
  3. Symbol定义的对象属性不能使用for in循环遍历，可以使用Reflect.ownKeys来获取对象的所有键名.

创建Symbol：

let s=Symbol();

let s1=Symbol('hh');
let s2=Symbol('hh');
s1===s2 =false;

let s3=Symbol.for('hh');
let s4=Symbol.for('hh');
s3===s4 =true

为对象添加属性和方法：

let yx={
name:'langrensha',
[Symbol('say')]:function(){
}

内置值：

  1. Symbol.hasInstance：其他对象使用该运算符，判断是否为该对象实例；
  2. isConcatSpreadable：

。。。

10.迭代器

迭代器Iterator是一种接口，为各种不同的数据结构提供统一的访问机制。Array、Arguments、Set、Map、String、TypedArray、NodeList可以使用for of遍历。
（ for of遍历键值，for in遍历键名。）

工作原理：

  1. 创建一个指针对象，指向当前结构的起始位置；
  2. 第一次调用对象的next方法，指针自动指向数据结构的第一个成员；
  3. 重复调用next，指针后移，直至指向最后一个成员；
  4. 每调用next方法返回一个包含value和done属性的对象。

自定义遍历数据时，使用迭代器。

11. 生成器

生成器其实就是一个特殊函数，为实现异步编程。

  • 生成器函数可以出现yield语句（yield分割符，把代码分块，分块执行）；
  • 每个yield可以传入实参，实参作为下一个yield语句的返回结果；
//创建
function * gen(){
	yield xxx;
}
//调用
let iterator =gen();
iterator.next();
12. Set

集合，新的数据结构，类似于数组，但成员值唯一（会自动去重），使用iterator接口，可以使用扩展运算符和for of遍历。

let s=new Set();

let s1=new Set(['d1','d2']);

//元素个数
s1.size;
//新增
s1.add('d3');
//删除
s1.delete('d1');
//判断是否存在
s1.has('d1')  ===false
//清空
s1.clear();
//遍历
for(let v of s1){

}
13.Map

Map类似于对象，键值对的集合，但键可以为非字符串，也实现了iterator接口，可以使用扩展运算符和for of遍历。

let m=new Map();
m.set('name','hhh');
m.size;
m.get('name');
m.delete('name');
m.has('name');
m.clear();
14.class类
//ES5构造函数
function Phone(brand,price){
	this.brand=brand;
	this.price=price;
}
Phone.prototype.call=function(){
	
}
let HuaWei=new Phone('huawei',4000);
HuaWei.call();

//ES6的class
class Phone{
	//构造方法，名字不可以修改
	constructor(brand,price){
		this.brand=brand;
		this.price=price;
	}
	//必须方法名+小括号+花括号
	call(){
		
	}
}

静态成员：

//ES5
Phone.prototype.名=值;

//ES6
class Phone{
	static name='shouji';
	static change(){
	
	}
}

继承：

//ES5
function Phone(brand,price){
	this.brand=brand;
	this.price=price;
}
Phone.prototype.call=function(){
	
}
function SmartPhone(brand,price,color,size){
	Phone.call(this,brand,price);
	this.color=color;
	this.size=size;
}
//设置子级构造函数的原型
SmartPhone.prototype=new Phone;
SmartPhone.prototype.constructor=SmartPhone;
//ES6
class Phone{
	//构造方法，名字不可以修改
	constructor(brand,price){
		this.brand=brand;
		this.price=price;
	}
	//必须方法名+小括号+花括号
	call(){
		
	}
}
class SmartPhone extends Phone{
	constructor(brand,price,color,size){
		super(brand,price);
		this.color=color;
		this.size=size;
	}
	photo(){
	
	}
	//重写
	call(){
	}
}
const xiaomi=new SmartPhone('xiaomi',799,'黑色','7inch');

子类不能调父类的同名方法。

get和set：

class phone{
	get price(){
		return xxx;
	}
	set price(newVal){
	
	}
}

let s=new phone;
s.price;//调用get
s.price= 200;//调用set
15. Number数值

Number.EPSILON：最小精度
Number.isFinite：是否为有限数
Number用法

16. 对象方法扩展
  • Object.is(xx,xx)：判断俩数值是否相等，不同与===的地方在于，Object.is(NaN,NaN)==true，而NaN===NaN ==false；
  • Obejct.assign(被覆盖,覆盖)：对象合并；
  • Object.setPrototypeOf()：设置原型对象，可以设置可以获取。
17.模块化

模块化优势：

  • 防止命名冲突；
  • 代码复用；
  • 高维护性。

功能实现：

  • export：用于规定模块的对外接口；在数据和函数前加 export；
    常规：
//m.js
export let s=12;
export function d(){}

统一暴露：

export{s,d};

默认暴露：
使用时要多加一层default：m.default.fn()

export default{
	s:'12',
	fn:function(){}
}
  • import：用于输入其他模块提供的功能。
    通用导入：
<script type="module">
	import * as m from "../m.js"
	m是个对象，包含那些
</script>

解构赋值：

import {s,fn} from "../m.js";

默认暴露：

import {default as m } from "./m.js";

引入入口文件：
在js中写代码，在html中写：

<script src="m.js" type="module"></script>

**幂运算

18.async 和await

为了实现异步编程。

  • async函数的返回值为promise对象（如果返回结果不是promise对象，则返回的结果就是成功的promise对象，如果返回结果是promise对象，则结果由async函数执行的返回值决定；
  • await必须写在async函数中；
  • await右侧的表达式一般为promise对象；
  • await返回promise成功的值；失败抛出异常。