首页 > 代码库 > 常用es6特性
常用es6特性
随着react和vue的普及，很多互联网公司都开始用上这两个框架了，es6的写法也越来越普遍，简洁，我利用利用平时业余时间也写了些es6的小项目练练手，下面总结下一般es6常用的新特性：
1，申明变量let和const：
js由于没有块级作用域，变量在申明他们的函数体内以及这个函数体内嵌套的任何函数体内都是有定义的（申明提前），例如：
function test(){
console.log(i); //undefined
for(var i=0;i<10;i++){}
console.log(i); //10
}
es6通常用let和const申明变量，const是申明常亮（申明后值不可修改，修改会报错），let是变量，都是块级作用域，在{}内有效：
function test(){
console.log(i); //报错
for(let i=0;i<10;i++){}
console.log(i);
}
这样代码更加严谨，不用担心内部变量被外面修改用了，更加安全。
2，函数
函数参数默认值：
es5给函数参数指定默认值的时候如下：
//es5
function aa(num){
num=num||100;
return num;
}
console.log(aa(0)); //如果没有传入参数或者传入0的话，结果就变成了100，不是我们指定的值
这样就会带来以上问题，结果跟我们设定的不一样，es6新特性解决了这个问题
//es6
function aa1(num=100){
return num;
}
console.log(aa1()); //没传入参数100
console.log(aa1(0)); //0
console.log(aa1(200)); //200
箭头函数：
箭头函数写法更加简洁，省略了function关键字申明，省略return，例如
[1,2,3].map( x => x + 1 )
//相当于：
[1,2,3].map(function(x){
return x + 1
})
注意，箭头函数的this是定义时的this，不是运行时的，比如在vue中method找this.data的时候找不到，原因是this指向的不是运行时vue的实例，而是定义时的windos，例如
$.each([‘a‘,‘b‘,‘c‘],function(i,n){
console.log(this); //n
});
$.each([‘a‘,‘b‘,‘c‘],(i,n)=>{
console.log(this); //window
});
3，模板字符串：
第一：es5在字符串拼接的时候，常常会用+号把值和字符拼接起来，如果要拼接dom元素的话，会很麻烦，es6很好的解决了这个问题
//es5
const name=‘han meimei‘;
console.log(‘hellow ‘+name);
//es6
const name1=‘han meimei‘;
console.log(`hellow ${name1}`); //注意，是键盘1左边那个字符符号，不是普通的单引号哦！
第二：es5常用反斜杠（\）来做多行字符串的拼接，es6只需要用（`）就可以了，这样以后拼接dom串的时候就方便多啦！
//es5
var wrap="<div> <span>AAA</span> </div> ";
console.log(wrap);
//es6
var wrap1=`
<div>
<span>AAA</span>
</div>
`;
console.log(wrap1);
4，Promise
Promise的出现是为了防止异步调用出现很多层回调函数，显得代码臃肿，可以通过链式调用的方式书写异步代码，保证了代码的线性逻辑，跟Jquery的Deferred用法类似，es7还推出了更加简洁的写法Async/await，关于es6 Promise用法，我之前一篇文章写过了，可以查阅
ES6 Promise
5，Class 类
es6新增加了class关键字来定义声明一个类，还多了extends继承关键字，使得类的声明的继承更加方便，像极了java语言，在es5中我们一般这样写:
//es5
function Person(name){
this.name=name;
}
Person.prototype.sayName=function(){
console.log(‘name: ‘+this.name);
}
function Student(name,age){
Person.call(this,name); //调用父类构造函数
this.age=age;
}
Student.prototype.sayAge=function(){
console.log(‘age: ‘+this.age);
}
Student.prototype=new Person(); //Student.prototype.constructor就是构造对象Person
Student.prototype.constructor=Student; //之前的构造器指向了Person,现在要重新指回来
//从而Student.prototype===stu.constructor.prototype，很多人忽略了这点
Student.prototype.sayAll=function(){
console.log(‘name: ‘+this.name);
console.log(‘age: ‘+this.age);
}
var stu=new Student(‘tom‘,19);
console.log(Student.prototype===stu.constructor.prototype); //true
stu.sayName();
stu.sayAll();
//stu.sayAge(); //报错，因为Student.prototype=new Person();对原型重新赋了值
es6更加简洁:
//定义类
class Person{
constructor(name){ //构造函数
this.name=name;
}
sayName(){
console.log(‘name: ‘+this.name);
}
}
//继承
class Student extends Person{ //这点和java语言很像，都是通过关键字extends
constructor(name,age){
super(name); //调用父类构造函数,这点跟java又一样
this.age=age;
}
sayAge() {
console.log(‘age: ‘+this.age);
}
sayAll() {
console.log(‘sayAll:‘);
console.log(‘name: ‘+this.name);
console.log(‘age: ‘+this.age);
}
}
var stu=new Student(‘jack‘,20);
console.log(Student.prototype===stu.constructor.prototype); //true
stu.sayName();
stu.sayAge();
stu.sayAll();
es6用更加简洁的方式完美的实现了类的继承，特别好用!!!
6，export和import
es6之前，都是用requireJS进行模块化开发，es6export导出模块、import导入模块，可以直接支持module了，现在的vue和react，都是用es6开发了，对于组件的引入就用到这个知识点了
//全部导入
import people from ‘./person‘
//整个模块导入并且使用as关键字重命名
//该模块的所有导出都会作为对象的属性存在
import * as person "./person.js"
console.log(person.sex)
console.log(person.num)
console.log(person.getNum())
//导入部分
import {name, age} from ‘./person‘
// 导出默认, 有且只有一个默认
export default App
//1.当用export default people导出时，就用 import people 导入（不带大括号）
//2.一个文件里，有且只能有一个export default。但可以有多个export。
//3.当用export name 时，就用import { name }导入（记得带上大括号）
//4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age }
//5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example
7，Spread operator 展开运算符
Spread operator也是es6一个新特性，写法是...，也就是三个点
用来组装数组
//数组组装
const arr1=[1,2,3];
const arr2=[...arr1,4,5,6];
console.log(arr2); //[1, 2, 3, 4, 5, 6]
//函数调用
function print(a,b,c){
console.log(a,b,c);
}
var arr=[1,2,3];
//es5
print.apply(null,arr);
//es6
print(...arr); //1 2 3
//替换push方法
//es5
var a1=[1,2,3];
var a2=[4,5,6];
Array.prototype.push.apply(a1,a2); //[1, 2, 3, 4, 5, 6]
//es6
a1.push(...a2); //[1, 2, 3, 4, 5, 6]
8，对象的扩展：
初始化简写，键值对重名的情况：
//es5
var a=1,b=2;
var obj={
a:a,
b:b
}
console.log(obj); //{a: 1, b: 2}
//es6
let a=1,b=2;
let obj={
a,
b
}
console.log(obj); //{a: 1, b: 2}
对象方法简写：
//es5
var person={
run:function(){
console.log(‘run‘);
}
}
person.run();
//es6
let person={
run(){
console.log(‘run‘);
}
}
person.run();
es6的Object.assign()这个方法来实现浅复制，类似于Jquery的$.extend，第一个参数是目标对象，后面的是被合并的源对象，然后返回目标对象，注意如果出现同名属性，会被最后一个值覆盖
let obj = {
name1: ‘foo‘
};
let obj1 = {
name2: ‘bar‘
};
let obj2 = {
name3: ‘baz‘
};
Object.assign(obj,obj1,obj2);
console.log(obj);
//为了不改变源对象本身，通常会把目标对象传为{}，返回值作为新目标对象
var obj1={
name1: ‘foo‘
};
var obj2={
name2: ‘bar‘
};
var obj3={
name3: ‘baz‘
}
var obj=Object.assign({},obj1,obj2,obj3);
console.log(obj); //{name1: "foo", name2: "bar", name3: "baz"}
9，解构赋值
为了简化提取数组或对象中的值，es6新加了解构的特性
es5中提取对象信息方法常用如下：
var people={
name:‘Li Lei‘,
age:19
}
var name=people.name;
var age=people.age;
console.log(‘name:‘+name);
console.log(‘age:‘+age);
es6简化的这个步骤，如下：
//对象
const people={
name:‘luo‘,
age:19
}
const {name,age}=people;
console.log(`${name}------${age}`);
//数组
const color=[‘red‘,‘blue‘];
const [first,second]=color;
console.log(first);
console.log(second);
总体来说，es6新特性还有很多，但是日常开发中用到这些主要的已经够用了，我在之前的react和vue中就主要用到这几大模块，已经足够啦，还有很多有意思的细微的方法比如操作字符串，数组去重的等，都挺有意思的，回头等我慢慢挖掘！
常用es6特性