ES6新特性

1、let声明变量

// var声明的变量往往会越域
// let声明的变量有严格局部作用域

{
　　var a = 1;
　　let b = 2;
}
console.log(a);    // 1
console.log(b);    // ReferenceError: b is not defined

/ / var 可以声明多次
/ / let只能声明一次

var m = 1
var m = 2
let n = 3    
/ / let n = 4
console.log(m)    　　/ / 2
console.log(n)　　 / / Identifier 'n' has already been declared

/ / var 会变量提升（JS解析器会把var声明的变量提升到，当前作用域最前面(只提升声明，不提升赋值)）
/ / let不存在变量提升

console.log(x);    　　/ / undefinedvar 
x = 10;
console.log(y);    　　//ReferenceError: y is not definedlet 
y = 20;

2、const声明变量（只读变量）

声明之后不允许改变
一但声明必须初始化，否则会报错

const a = 1;
a = 3; 　　//Uncaught TypeError: Assignment to constant variable.

3、解构表达式

3.1 数组解构

let arr = [1,2,3];
//以前我们想获取其中的值，只能通过角标。ES6可以这样:
const [x,y,z] = arr; // x， y，z将与arr中的每个位置对应来取值
//然后打印
console.log(x,y,z);

3.2 对象解构

const person = {
　　name: "jack",age:21,
　　language: [ 'java', 'js ', 'css']
}
//解构表达式获取值，将person里面每一个属性和左边对应赋值
const { name，age，language } = person;
//等价于下面

// const name = person. name;
// const age = person. age;
// const language = person.language;
//可以分别打印

console.log(name);
console.log( age);
console.log(language);

//扩展:如果想要将name 的值赋值给其他变量，可以如下,nn是新的变量名

const { name: nn，age，language } = person;
console.log(nn);
console.log(age);
console.log(language);

4、字符串扩展

4.1 几个新的 API

ES6 为字符串扩展了几个新的 API：
- `includes()`：返回布尔值，表示是否找到了参数字符串。
- `startsWith()`：返回布尔值，表示参数字符串是否在原字符串的头部。
- `endsWith()`：返回布尔值，表示参数字符串是否在原字符串的尾部。

let str = "hello.vue";
console.log(str.startswith( "hello")); //true
console.log(str.endswith(".vue" )); //true
console.log(str.includes( "e")); //true
console.log(str.includes ( "hello"));//true

4.2 字符串模板

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行
字符串，还可以在字符串中加入变量和表达式。

//①、多行字符串
let ss = `
<div>
<span>hello world<span>
</div>
`
console.log(ss)

// ②、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放
入 JavaScript 表达式。

let name = "张三";
let age = 18;
let info = `我是${name}，今年${age}了`;
console.log(info)

// ③、字符串中调用函数
function fun() {
return "这是一个函数"
}
let sss = `O(∩_∩)O 哈哈~，${fun()}`;
console.log(sss); // O(∩_∩)O 哈哈~，这是一个函数

5、函数优化

①函数参数默认值

//在 ES6 以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
function add(a, b) {
// 判断 b 是否为空，为空就给默认值 1
b = b || 1;
return a + b;
}

// 传一个参数
console.log(add(10));
//现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
function add2(a , b = 1) {
return a + b;
}

// 传一个参数
console.log(add2(10));

②不定参数

不定参数用来表示不确定参数个数，形如，...变量名，由...加上一个具名参数标识符组成。
具名参数只能放在参数列表的最后，并且有且只有一个不定参数

function fun(...values) {
console.log(values.length)
}
fun(1, 2) //2
fun(1, 2, 3, 4) //4

③箭头函数

ES6 中定义函数的简写方式
 一个参数时：

//以前声明一个方法
// var print = function (obj) {
// console.log(obj);
// }
// 可以简写为：
var print = obj => console.log(obj);
// 测试调用
print(100);

 多个参数：
// 两个参数的情况：
var sum = function (a, b) {
return a + b;
}
// 简写为：
//当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var sum2 = (a, b) => a + b;
//测试调用
console.log(sum2(10, 10));//20

// 代码不止一行，可以用`{}`括起来
var sum3 = (a, b) => {
c = a + b;
return c;
};
//测试调用
console.log(sum3(10, 20));//30

④箭头函数结合解构表达式★

//需求，声明一个对象，hello 方法需要对象的个别属性
//以前的方式：
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
function hello(person) {
console.log("hello," + person.name)}
//现在的方式

var hello2 = ({ name }) => { console.log("hello," + name) };
//测试
hello2(person);

6、对象优化

6.1 新增的 API

ES6 给 Object 拓展了许多新的方法，如：
- keys(obj)：获取对象的所有 key 形成的数组
- values(obj)：获取对象的所有 value 形成的数组
- entries(obj)：获取对象的所有 key 和 value 形成的二维数组。格式：`[[k1,v1],[k2,v2],...]` - assign(dest, ...src) ：将多个 src 对象的值拷贝到 dest 中。（第一层为深拷贝，第二层为浅拷贝）

const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
console.log(Object.keys(person));//["name", "age", "language"]
console.log(Object.values(person));//["jack", 21, Array(3)]
console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]

6.2 对象拓展运算符

拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

// 1、拷贝对象（深拷贝）
let person1 = { name: "Amy", age: 15 }
let someone = { ...person1 }
console.log(someone) //{name: "Amy", age: 15}
// 2、合并对象
let age = { age: 15 }
let name = { name: "Amy" }
let person2 = { ...age, ...name } //如果两个对象的字段名重复，后面对象字段值会覆盖前面对象的字段值
console.log(person2) //{age: 15, name: "Amy"}

7、map 和 reduce（数组操作）

① map

map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

let arr = ['1', '20', '-5', '3'];
console.log(arr)
arr = arr.map(item => item*2);
console.log(arr)

②reduce

语法：
arr.reduce(callback,[initialValue])
reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元
素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调
用 reduce 的数组。

callback （执行数组中每个值的函数，包含四个参数）
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）
initialValue （作为第一次调用 callback 的第一个参数。）

示例：

const arr = [1,20,-5,3];
//没有初始值：
console.log(arr.reduce((a,b)=>a+b));//19
console.log(arr.reduce((a,b)=>a*b));//-300

//指定初始值：
console.log(arr.reduce((a,b)=>a+b,1));//20
console.log(arr.reduce((a,b)=>a*b,0));//-0

8、Promise

Promise 语法

处理异步结果

如果我们想要等待异步执行完成，做一些事情，我们可以通过 promise 的 then 方法来实现。
如果想要处理 promise 异步执行失败的事件，还可以跟上 catch：

promise.then(function (value) {
// 异步执行成功后的回调
}).catch(function (error) {
// 异步执行失败后的回调
})

优化处理案例

优化：通常在企业开发中，会把 promise 封装成通用方法，如下：封装了一个通用的 get 请
求方法；

let get = function (url, data) { // 实际开发中会单独放到 common.js 中
    return new Promise((resolve, reject) => {
    $.ajax({
    url: url,
    type: "GET",
    data: data,
    success(result) {
    resolve(result);
            },
    error(error) {
    reject(error);
            }
        });
    })
} // 使用封装的 get 方法，实现查询分数
    get("mock/user.json").then((result) => {
    console.log("查询用户：", result);
    return get(`mock/user_corse_${result.id
    }.json`);
}).then((result) => {
    console.log("查询到课程：", result);
    return get(`mock/corse_score_${result.id
    }.json`)
}).then((result) => {
    console.log("查询到分数：", result);
}).catch(() => {
    console.log("出现异常了：" + error);
});