前端开发学习之【ES新特性】

1.概述

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

特性：

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

2.语法

1.let关键字

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

特性：

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

2. 声明常量

const s=1;
注意：

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

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绑定到某个对象，然后返回一个新函数。

this是静态的，始终指向函数声明时所在作用域下的this值；（不变，本身无this）,call也不变
不能作为构造函数实例化对象；
不能使用arguments对象；
简写：形参有且只有一个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数据类型

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

Symbol值唯一；
不能与其他数据进行运算；
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(){
    
    
}

内置值：

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

。。。

10.迭代器

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

工作原理：

创建一个指针对象，指向当前结构的起始位置；
第一次调用对象的next方法，指针自动指向数据结构的第一个成员；
重复调用next，指针后移，直至指向最后一个成员；
每调用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成功的值；失败抛出异常。