let
1、使用let声明变量，只能在代码块内有效
{
let a = 1；
consolse.log(a)//1
}
2、使用let声明的变量，在预解析的时候不会被提升
{
console.log(a);//undefined
var a = 1;
}
{
console.log(a);//报错
let a = 1;
}
3、let不允许在同一个作用域下声明已经存在的变量
{
<!--报错-->
var a = 1;
let a = 2;
}
const
1、const声明常量，常量值不能改变，声明的时候必须赋值
{
const a = 1；
conlose.log(a);//12
}
2、基本数据类型
{
var a = 1;
var b = a;
b = 2;
console.log(a);//1
}
3、引用数据类型
{
var a = {attr:1};
var b = a;
b.attr = 2;
console.log(a.attr);//2
}
{
const a = {b:1};
a.b = 2;
console.log(a);//{b:2}
}
set
1、ES6提供的一个新的数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值。
set本身是一个构造函数，用来生成set数据结构
{
let s = new Set([1,2,3);
console.log(s);//输出set()数组
console.log(s.size)//输出set数组的长度
}
2、添加
{
let s = new Set([1,2,3);
s.add('a').add('b').add('c');
console.log(s);//添加a,b,c
}
3、删除
{
let s = new Set([1,2,3);
console.log(s.delete('a'));//删除a
console.log(s)
}
4、has()包含，判断该值是否为set的成员，返回的是一个boolean
{
let s = new Set([1,2,3]);
console.log(s.has('a')//false
}
5、clear()清除所以数据，没有返回值
{
let s = new Set([1,2,3]);
s.clear();
console.log(s);//set(0)
}
6、key和values
{
let s = new Set([1,2,3]);
console.log(s.key());
consloe.log(s.values());//返回整个数组的key和value值
}
7、entries将对象转为Map格式entries
{
let s = new Set([1,2,3]);
console.log(s.entries())
}
8、forEach
{
let s = new Set([1,2,3]);
s.forEach(function(value,key,set){
console.log(set)
}
}
解构赋值
1、解构赋值
let [a,b,c] = [1,2,3];
console.log(a,b,c)//1 2 3
}
2、空数组解构不成功
{
let [a] = [];
console.log(a);//undefined
console.log(typoef null)//object
}
3、字符串会被解析成类数据
{
let [a,b,c,d]= '1234';
let {length:len} = '123456'
console.log(len);//6
}
4、null和undefined不能被解构赋值
let [a] = undefind;
console.log(a)//报错
}
掌握es6的应用
(一).ES6中的模块
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系
一个文件就是一个模块，想让外部能使用这个变量就必须export变量
1).模块的导出和模块的导入
模块导入会导致变量提升,并且import语句只能用在最顶层作用域上。
export let a = 1; // export导出的是接口不是具体的值 import * as obj from './a.js'; import {a} from './a.js';
2).模块的动态绑定
let obj = 1; setInterval(()=>{obj++;},1000) // 外部使用这个变量也会发生变化 export { obj };
3).模块导出的命名问题
export { a as default, b, } import _,* as obj from './a.js'; console.log(_,obj); _ = '不能修改变量'
4).模块的默认导出
export default a // 只是导出的时候给a重命名为default而已，default后面导出的都是具体的值 export { b, }
5).导入模块并导出
export let a = 1; export {obj} from './b.js'; // 当前模块下并不能使用obj这个值
6).import 动态导入语法
import('./a.js').then(data=>{ console.log(data.default); });
(二).ES6中的类
在es6之前生成实例对象是通过构造函数的方式，在es6中提供了类
构造函数类的继承方式
Animal.call(this) Tiger.prototype.__proto__ = Animal.prototype; Object.setPrototypeOf(Tiger.prototype,Animal.prototype) Tiger.prototype = Object.create(Animal.prototype,{constructor:{value:Tiger}}); Tiger.prototype = new Animal();
1).new.target用法
class Animal { constructor(){ if(new.target === Animal){ throw new Error('不能实例化动物类'); } } eat(){ console.log('吃饭') } } class Tiger extends Animal{} let animal = new Animal(); animal.eat();
2).类的访问器用法
class Tiger extends Animal{ constructor(){ super(); this._age = 10; } get age(){ return this._age; } set age(val){ this._age = val; } } let tiger = new Tiger();
3).静态方法和静态属性
class Animal { eat(){ console.log('吃饭') } static type(){ return '哺乳类' } static get MyKind(){ return '老虎' } } class Tiger extends Animal{ } console.log(Tiger.MyKind);
4).super的应用
class Animal { eat(){ console.log('吃饭') } static type(){ return '哺乳类' } } class Tiger extends Animal{ constructor(){ super();// 指代的是父类 } static getType(){ return super.type(); // 指代的是父类 } eat(){ super.eat(); // 指代的是父类原型对象 } } let tiger = new Tiger(); console.log(Tiger.getType()); console.log(tiger.eat());
5).装饰器的应用
装饰器最终需要返还一个函数
@log1() @log2() class MyClass{} function log1(){ console.log('outer1') return function(target){ // 装饰类指代的是当前类本身 console.log('inner1'); } } function log2(){ console.log('outer2') return function(){ console.log('inner2'); } }
6)修饰类中原型上的方法
class MyClass{ @enumerable(false) // 是否可枚举 getName(){ return 'hello'; } } function enumerable(boolean){ return function(target,key,descriptor){ //value.enumerable = true; return { ...descriptor, enumerable:boolean, } } }
7.)修饰类中实例的属性
class MyClass{
@readonly PI = 3.14
}
function readonly(target,key,value){
value.writable = false;
}
let my = new MyClass();
my.PI = 3.15;
console.log(my.PI)
