ES6新特性

前言

事实上,ES6并不是什么新技术,记得没错的话2015年就出来,现在应该都到ES2017了,但是总的来说ES6是最具革命意义的,它新增的一些语法解决了很多很复杂的问题,这里我们简单归纳一下ES6到底有什么新特性。

1.let,const

ES6里面增加了变量定义let 和 常量定义const,可能有的童鞋会问,ES5里面不是已经有var来定义变量了么,新增一个let做什么呢?下面我们简单说一下var和let的差异。

1.1 var可能污染全局作用域,而let(const)不会声明在全局作用域上

//var
var a = 5;
console.log(window.a); //5

//let、const
let a = 5;
console.log(window.a); //undefined
//有一个问题,let定义的a声明到哪里了呢?欢迎解释(:

1.2 var 变量可重复声明,let(const) 变量(常量)不能重复声明

//var 
var a = 5;
var a = 6;   //  6

//let、const
let a = 5;
let a = 6; //Identifier 'a' has already been declared 不能重复声明

1.3 var 可以变量提升,let(const)不能变量提升

//var
console.log(a); //undefined  相当于 var a;
var a = 5;

//let const
console.log(a)//Uncaught ReferenceError: a is not defined 语法错误,没有预解释
let a = 5;

ES6还增加了常量声明const,const声明的常量是不可以被改变的。

//const
const a = 5;
a = 6;//Uncaught TypeError: Assignment to constant variable. 语法错误

2.解构

解构是es6新特性,可以对数组对象内容直接解析。

//1.数组解构
let [a1,a2,a3] = [1,2,3]; //a1 = 1; a2 = 2; a3 = 3;

//2.对象解构
let {name,age} = {name:'meteor',age:8}; //name = 'meteor',age = 8;
//let {name:n} = {name:'meteor',age:8};//n = 'meteor' 可以用“:”的形式修改变量名

//3.复杂解构
let [{age}] = [{age:8,name:'xx'},'深圳',[1,2,3]]; //age = 8   注意对象解构

//4.默认赋值
let {age=5} = {age:8,name:'xx'}; //age=8 如果没有age字段 age=5
//常用函数参数给默认值
//以前
function(){var a = a || 5}
//现在
function(a=5){}

3.字符串处理

es6中加入了“`”反引号,反引号中${}处理模板字符串。

3.1 反引号

3.1.1 更人性的字符串拼接

let name = 'xx';
let age = 9;
let str = `${name}${age}岁了`;
console.log(str); //xx今年岁了

3.1.2 使用正则+eval的简单模拟

let name = 'xx';
let age = 9;
let str = `${name}${age}岁了`;
str = str.replace(/\$\{([^}]+)\}/g, function ($1) {
    return eval(arguments[1]);
})
console.log(str); //xx今年岁了

3.1.3 带标签的模版字符

//反引号前使用方法,方法按模版变量把字符串分成两个数组
//第一个为固定值组成的数组 
//第二个值为替换变量组成的数组
let name = 'xx';
let age = 9;
function tag(strArr, ...args) {
    var str = '';
    for (let i = 0; i < args.length; i++) {
        str += strArr[i] + args[i]
    }
    console.log(strArr,args);
    //[ '', '今年', '岁了' ]   [ 'xx', 9 ]
    //
    str += strArr[strArr.length - 1];
    return str;
}
let str = tag`${name}今年${age}岁了`;
console.log(str);

3.1.4 字符串直接换行

let content = `我是一个兵,
来自老百姓
,打到了日本鬼子。`;

3.2 includes 方法

//判断字符串中是否包含某个字符串
let str = 'woaini';
str.includes('ai'); //true

endsWith(以xx开头)、startsWith(以xx结尾) 方法

//判断字符串是否以某一个字符串开始或结束
var a = '1AB2345CD';
console.log(a.startsWith('1A')); //true
a.endsWith('cD') //false

4. 函数

4.1 函数参数可赋值,可解构

function({a=5}){}

4.2 箭头函数

// 1.如果参数只有一个,可以省略小括号
// 2.如果不写return,可以不写大括号
// 3.没有arguments变量
// 4.不改变this指向

//求和
let sum = (a,b)=>return a+b;

5.数组

增加了很多处理数组实用的方法

1.Array.from(); //将类数组转化成数组
2.Array.of(); //创建数组
3.Array.fill();//填充数组
4.Array.reduce();//传入回调适合处理 临近数组元素
5.Array.filter();//数组过滤
6.Array.find();//查找返回值
7.Array.includes();//判断数组是否有某值

具体用法可以参照我的另外一篇文章:JS数组操作汇总

6. 对象

6.1 如果key和value相等则可以简写

let name = 'xx';
let obj = {name};

6.2 解构

这个我们上面提到过

let {name,age} = {name:'meteor',age:8}; //name = 'meteor',age = 8;
//let {name:n} = {name:'meteor',age:8};//n = 'meteor' 可以用“:”的形式修改变量名

7. 类

// 1.Class 定义类
// 2.extends 实现继承
// 3.支持静态方法
// 4.constructor构造方法

class Parent{
    constructor(name){
        this.name = name;
    }
    getName(){
        return this.name;
    }
    static fn(){
        return 9;
    }
}
class Child extends Parent{
    constructor(name,age){
        super(name);//子类有构造函数必须有super
        this.age = age;
    }
}
let child = new Child('xingxing',9);
console.log(child.getName());//xingxing
console.log(child.name);//xingxing
console.log( Child.fn() );//9

8. Generator 迭代器

迭代器函数名前用“*”

function *gen(){}

迭代器遇到yield暂时中止执行,调用迭代器next方法继续执行

function *gen(){
    let a = yield 'xx';
    console.log(a);//a
    let b = yield 9;
    console.log(b);
    return b;
}
let it = gen();
console.log(it.next('a'));// value: 'xx', done: false }
console.log(it.next('b'));//{ value: 9, done: false }

generator还可以与promise co结合使用,实现异步处理

let bluebird = require('bluebirld');
let co = require('co');
let fs = require('fs');
let read = bluebird.promisify(fs.readFile);
function *r(){
    let content1 = yield read('./1.txt','utf8'); //内容 ./2.txt
    let content2 = yield read(content1,'utf8');
    return content2;
}
let it = r();
//可以自动迭代generator
co(it).then(function(data){
    console.log(data);
});
//实现异步代码同步化

9. async await

// 1.async用来修饰函数,需要配合await
// 2.await后只能跟promise

let bluebird = require('bluebird');
let fs = require('fs');
let read = bluebird.promisify(fs.readFile);
//await 后只能跟promise
async function r(){
    let content1 = await read('./1.txt','utf8');
    let content2 = await read(content1,'utf8');
    return content2;
}
//async返回promise
r().then(function(data){
    console.log(data); 
})

评论已关闭