ES6的特性比较多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才将其标准化。两个发布版本之间时间跨度很大, 在这里列举几个常用的:
1.类(class)
作用是方便写面向对象的代码
语法 只包含属性和方法:class类名{属性1,属性2,方法}
里面写 constructor( ){ } 这是构造方法,当class被new实例化对象时,会自动调用
extends()子类继承父类
class Animal {
constructor(name, color) {
this.name = name;
this.color = color;
}
toString() {
console.log('name:'+ this.name + ',color:' + this.color);
}
}
var animal = new Animal('dog', 'white');
animal.toString();
console.log(animal.hasOwnProperty('name'));
console.log(animal.hasOwnProperty('toString'));
console.log(animal.__proto__.hasOwnProperty('toString'));
class Cat extends Animal {
constructor(action) {
// 如果没有置顶consructor,默认带super函数的constructor将会被添加、
super('cat', 'white');
this.action = action;
}
toString() {
console.log(super.toString());
}
}
var cat = new Cat('catch');
cat.toString();
console.log(cat instanceof Cat);
console.log(cat instanceof Animal);
2.模块化(Module) 导入(import) 导出(export)
ES6将一个文件视为一个模块,上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。
导入
import myModule from 'myModule';
import { name ,age } from 'test';
导出
var name = '小甜甜';
var age = '18';
export {
name,
age
};
导出函数:
export function myModule (someArg) {
return someArg;
}
3.模板字符串
ES6支持 模板字符串,使得字符串的拼接更加的简洁、直观。
ES5:
var str = 'hello, ' + name + ', my name is ' + myName;
ES6:
let str = `hello, ${name}, my name is ${myName}`;
4支持let与const
Let声明变量:1.不能重复声明;2.存在暂时性死区,不能提前访问;3.存在块级作用域{ }
const声明常量:声明之后不能被修改
ES5使用var
{
var a = 10
}
console.log(a); //10
ES6使用let 存在块级作用域
{
let a = 10
}
console.log(a); // 报错
5.箭头(Arrow)函数
不论是箭头函数还是bind,每次被执行都返回的是一个新的函数引用
写法:
1.(参数1,参数2,…)=>{表达式};
2. 参数1=>{表达式};
3.( )=>表达式;
3. 参数1=>表达式;
4.参数1=>表达式
6.ES6支持在定义函数的时候为其设置默认值:
7.解构赋值
一次性获取对象或数组中所有的元素
1.在数组中变量和参数 随便取名
var[num1,num2]=[1,2,3]
2.对象中, 变量名必须和对象中的属性名保持一致
var{name,age}={name:'zs',age:18}
8.延展操作符(Spread operator) 就是三个点 …
1.在函数调用时使用延展操作符;
2.构造数组没有展开语法的时候,只能组合使用 push,splice,concat 等方法,来将已有数组元素变成新数组的一部分。有了展开语法, 构造新数组会变得更简单、更优雅;
3.数组拷贝;
9.Promise 是异步编程的一种解决方案,比传统的解决方案callback更加的优雅。它最早由社区提出和实现的,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象
ES5中大量嵌套,太多则会造成回调地狱:
setTimeout(function() {
console.log('Hello');
setTimeout(function() {
console.log('Hi')
},
1000)
},
1000);
ES6中使用promise
var waitSecond = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
});
waitSecond.then(function() {
console.log("Hello");
return waitSecond
}).then(function() {
console.log("Hi")
});
this的指向
函数中指向window
方法中指向当阿前对象
事件回调函数中指向当前节点对象
箭头函数中没有固定指向 一般指向宿主对象
整理不易,Like if it’s useful ^ _^~