ECMAScript 6

严格模式

• 如果开启了严格模式，变量不能直接使用，必须先申明，申明变量时一定要用var / let

• 更多介绍：http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html

• use strict

// 变量：
//  1）声明
//  2）赋值
// a = "123";
// console.log(a);

// 进入严格模式的标识
'use strict';
var a = '123';
console.log(a);

声明一个变量(let)

• let 申明的变量不存在变量提升
• let 申明的变量不允许重复声明
• let 申明的变量存在块级作用域
  • 可以用来解决闭包问题

var a = "123";
console.log(a); // 123

let b = "abc";
console.log(b); // abc

//let不存在变量提升：
// console.log(a); // undefined
// var a = 123;
// console.log(a); // 123
// 等同于
var a;
console.log(a);
a = 123;
console.log(a);
console.log(a);
let a = 123;
console.log(a);

// let 不允许重复声明
var a = 123;
var a = 456;
console.log(a);
let a = 123;
let a = 456;
console.log(a);

//let 存在块级作用域
//块级作用域：来自于后台
 //特点：凡是大括号包裹的部分都是一个单独的作用域，我们把这个作用域叫做块级作用域， 块级作用域之间不会相互影响

申明一个常量 (const)

• contst申明的常量：一旦设置无法修改
  • 可以改变对象中的属性
• contst申明的常量：一旦设置不可重复声明

// const a = 123;
// a = 456;
// console.log(a);
// 值类型（简单类型）
//  简单类型的常量一旦设置无法修改
// 引用类型（复杂类型）
//  一旦赋值只要不是改变引用还是可以修改的
const obj = {
    name: "张三"   
}
// 修改引用类型的引用地址
// obj = {};// 如果修改引用地址会报错
obj.name = "李四";// 修改的是地址中对应对象的属性：

console.log(obj);

字符串的一些扩展方法的使用

• includes() ：返回布尔值，表示是否找到了参数字符串
• startsWith() ：返回布尔值，表示是否找到了参数字符串
• endsWith() ：返回布尔值，表示参数字符串是否在源字符串的尾部
• repeat()：返回一个新字符串，表示将原字符串重复n次

var s = “hello world”;
s.startsWith(‘hello’) //true
s.startsWith(‘world’,6) //true   ，表示从第6个开始后面的字符是 world
s.endWith(‘hello’,5) //true ，表示前5个字符是hello
‘x’.repeat(2)  // “xx”
‘hello’.repeat(2)  // “hellohello”
‘ivan’.repeat(0)  // “”

模板字符串

• 使用“`”来定义模板字符串
• 在模板字符串中可以保持变量的结构
• 在模板字符串中可以直接使用js代码格式：${ code }

// 模板字符串：
//  1.0 拼接字符：输出变量
// var a = `<ul><li> ${obj.name} </li><li> ${obj.age} </li></ul>`;
// console.log(a);
//  2.0 识别换行
var a = `<ul>
    <li>${obj.name}</li> 
    <li>${obj.age}</li>
</ul>`;
console.log(a);

解构赋值

• 字符串的解构赋值

• 字符的解构是按照顺序解构的

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

对象解构

• 对象的解构是按照属性名来解构的

var obj = {
  name: '张三',
  age: 18
}
var {name, age} = obj;
name // 张三
age  // 18

• 无顺序问题

数组的解构

• 有顺序问题
• 被赋值的变量和数组中的元素个数可以不相等

var arr = ['a','b','c']
var [x,y,z] = arr;
x // 'a'
y // 'b'
z // 'c'

解构赋值的其它特点

• 可以指定默认值
• 解构出来的元素不一定要与前面的对象一一对应
• 可以给解构出来的元素设置别名

箭头函数的推演

写法1: arr.sort(function(x,y){return x - y ;});
写法2：arr.sort((x,y) => {return x - y ;});
写法3：arr.sort((x,y) => x - y);

箭头函数的其它写法

如果参数只有一个，可以将()省略    // arr.map(c=>c+1);
如果没有参数，则一定能要写上()     // ()=> console.log(‘a’)
如果多于一个参数，每个参数之间用逗号分隔   (x, y) => { ... }
如果方法体只有一句代码，可以省略{} 和分号，如果有返回可以省略return
如果方法体多于一句代码，则不能省略{} ,每句代码使用 分号分隔

const fs = require('fs');
// 匿名函数 
// fs.readFile('./01严格模式.js', function(err, data){
//     console.log(data);
// });

// 箭头函数 
fs.readFile('./01严格模式.js', (err, data) => {
    console.log(data.toString());
});

箭头函数的一些特点

a.箭头函数没有自己的this，函数体内部写的this，指向的是外层代码块的this
b.箭头函数内部的this是定义时所在的对象，而不是使用时所在的对象并且不会改变
c.箭头箭头函数不能用作构造函数
d.箭头函数内部不存在arguments，箭头函数体中使用的arguments其实指向的是外层函数的arguments

// 箭头函数
var fn = function () {
    // 将所有的传入的实参打印出来
    console.log('-----fn-------');
    console.log(arguments);
    console.log('-----fn-------');
    return  () => {
        console.log('-----fn1-------');
        console.log(arguments);
        console.log('-----fn1-------');
    }
}
var fn1 = fn(1,2,3,4,5,6,7,8,9,0);
fn1(1,2,3,4,5);

对象中属性的简写

var name = '李冰冰';
var age = 20;
//ES6之前
var obj = {
    name: name,
    age: age
}
//ES6之后
var obj = {
    name,
    age
}
console.log(obj.name, obj.age);

es5中对象：{add:add,substrict:substrict}
es6中对象： {add,substrict} 注意这种写法的属性名称和值变量是同一个名称才可以简写，否则要想es5那样的写法,例如： {addFun:add}

对象中的方法的简写

// + 9.0 对象中方法的简写
// ES6之前
// var obj = {
//     name,
//     age,
//     sayHi: function(){
//         console.log(`大家好，我叫${this.name}, 今年${this.age}岁了`);
//     }
// }
// ES6之后
var obj = {
    name,
    age,
    sayHi(){
        console.log(`大家好，我叫${this.name}, 今年${this.age}岁了`);
    }
}
obj.sayHi();

es5中对象： {add:function(){},substrict:function(){}}
es6中对象： {add(){},substrict(){}}

promise

• 来由：ES6之前是没有promise的，这个玩意是由前端社区提出，在ES6中成为一个标准
• 作用：它是用来简化回调函数的多层嵌套
• 使用：

//下面这段代码被称为回调地狱
// 需求：依次将三个文件中的内容读取出来并且输出： 0 ~ 1 ~ 2
var fs = require('fs');
// 读取0文件
fs.readFile('./file/0.txt', function (err0, data0) {
    if (err0) {
        return console.log(err0.message);
    }
    console.log(data0.toString());
    // 读取1文件
    fs.readFile('./file/1.txt', function (err1, data1) {
        if (err1) {
            return console.log(err1.message);
        }
        console.log(data1.toString());
        // 读取2文件
        fs.readFile('./file/2.txt', function (err2, data2) {                                                              
            if (err2) {
                return console.log(err2.message);
            }
            console.log(data2.toString());
        });
    });
});
// 代码：回调地狱

使用promise解决回调地狱

// 需求：依次将三个文件中的内容读取出来并且输出： 0 ~ 1 ~ 2
// 可以使用promise来解决
var fs = require('fs');
// 读取0文件
var p0 = new Promise(function(resolve, reject){
    fs.readFile('./file/0.txt', function(err, data){
        if (err) {
            reject(err);
        } else {
            resolve(data.toString());
        }
    });
});
// 读取1文件
var p1 = new Promise(function(resolve, reject){
    fs.readFile('./file/1.txt', function(err, data){
        if (err) {
            reject(err);
        } else {
            resolve(data.toString());
        }
    });
});
// 读取2文件
var p2 = new Promise(function(resolve, reject){
    fs.readFile('./file/2.txt', function(err, data){
        if (err) {
            reject(err);
        } else {
            resolve(data.toString());
        }
    });
});
// 读完0以后再读取1，再读取2
p0
    .then(data0 => {
        console.log(data0);
        return p1;
    })
    .then(data1 => {
        console.log(data1);
        return p2;
    })
    .then(data2 => {
        console.log(data2);
    })

封装promise对象解决回调地狱

// 将创建promise的代码进行封装
var fs = require('fs');
function getPromise(path) {
    return new Promise((resolve,reject) => {
        fs.readFile(path, function(err, data){
            if(err) {
                reject(err);
            } else {
                resolve(data.toString());
            }
        });
    });
}
// 先读取0文件
getPromise('./file/0.txt')
    .then( data0 => {
        console.log(data0);
        // 再读取1文件
        return getPromise('./file/3.txt');
    })
    .then( data1 => {
        console.log(data1);
        // 再读取2
        return getPromise('./file/2.txt');
    })
    .then( data2 => {
        console.log(data2);
    })
    .catch( err => {
        console.log(err.message);
        console.log('err');
    })