ES6

变量定义

let

不存在变量提升（需要在使用 let 定义变量之后使用，不然会报错）
块级作用域中声明的变量不会受外部代码的影响。
不允许重复声明

变量提升

var 变量可以在声明之前使用，值为 undefined。

const

只读

声明时一定要赋初始值
一般大写
常量值不能修改
作用域与 let 相同（块级作用域）

字符串模板

let a = `字符串`;

let a = `字符

串`;

let name = 'wangzhy';
let detail = `my name is ${name}`;

解构赋值 `{}`

const F4 = ['aa','bbb','cccc','dddd'];
const [a,b,c,d] = F4;
console.log(a,b,c,d);  // aa bbb cccc dddd

const zhao = {
    name: '赵本山',
    age : 18,
    xiaopin:function(){
        console.log('小品');
    }
};

let {name,age,xiaopin} = zhao;
console.log(name,age,xiaopin); 

对象简化

let name = 'wangzhy';
let age = 18;
let obj = {
    name,
    age,
    study(){
        console.log('study');
    }
};

function

箭头函数

this 始终指向函数生命时所在作用域下的 this 的值
不能作为构造函数
不能使用 arguments 对象
简写
- 如果只有一个参数，可以省略括号
- 如果只有一个表达式，可以省略大括号和 return

适合与 this 无关的回调，定时器，数组方法的回调
不适合与 this 有关的回调，事件绑定，对象方法

let fn = function(){};

let fn = () => {};
lef fn = a => {return a;};
let fn = (a,b) => {return a+b;};
let fn = (a,b) => a+b;

this 问题: this 始终指向函数生命时所在作用域下的 this 的值

window.name = `wangzhy`;
function getName1(){
    console.log(this.name);
}

let getName2 = () => {
    console.log(this.name);
}

getName1(); // wangzhy
getName2(); // wangzhy

let obj = {
    name: 'zhangsan'
};

// call 改变 this 的指向
getName1.call(obj); // zhangsan
getName2.call(obj); // wangzhy  // 箭头函数的 this 始终指向函数生命时所在作用域下的 this 的值

函数参数默认值

function add(a, b, c) {
  return a + b + c;
}

console.log(add(1, 2, 3));
console.log(add(1, 2)); // NaN

function add1(a, b, c = 0) {
  return a + b + c;
}

console.log(add1(1, 2, 3)); // 6
console.log(add1(1, 2)); // 3

function conn({hot='127.0.0.1', username, password, prot}) {
  console.log(hot, username, password, prot);
}

conn({
  // hot: 'localhost',
  username: 'username',
  password: 'password',
  prot: 8080
});

rest 参数

获取函数的实参，用于代替 arguments 参数。

扩展运算符(展开语法与剩余参数) `...`

... 将数组转为参数序列
数组合并
数组克隆
将伪数组转为真正的数组

展开语法

将可迭代的对象展开为独立的元素

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merge = [...arr1, ...arr2]; // [1,2,3,4,5,6]  

函数传参

const numbers = [1, 2, 3];
sum(...numbers); //  等价于 sum(1,2,3);

浅拷贝数组或对象

const arr = [1, 2, 3];
const copy = [...arr]; // [1,2,3]
const obj = {a: 1, b: 2};
const copyObj = {...obj};

字符串转字符数组

const str = 'hello';
const chars = [...str]; // ['h','e','l','l','o']

剩余参数

将多个独立参数收集为一个数组

function sum(...args) {
    return args.reduce((a, b) => a + b, 0);
}

sum(1, 2, 3); // 6 ， args = [1,2,3]

用于解构赋值

const [first, ...rest] = [1, 2, 3];  // first = 1 , rest = [2,3]

const aa = ['a','b','c'];
const bb = ['aa','bb','cc'];
// 数组合并
const cc = [...aa, ...bb];
console.log(cc);

// 数组克隆
const dd = [...cc];
console.log(dd);

// 将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divs); // NodeList []
console.log(divArr); // []

Symbol 数据类型

原始数据类型：Symbol

值是唯一的
不能与其他数据进行运算
对象属性不能通过 for 遍历

JS 的数据类型

USONB

undefined
string
object
null
number
boolean
symbol

迭代器

for ... of

可迭代对象

Array, Map, Set, String, TypedArray, arguments, NodeList 等。

语法

for (variable of iterable)
  statement

生成器函数

异步编程、纯回调函数.

function * gen(){
    console.log('start');
    yield 'a';
    console.log('end');
}

Promise

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。

构建 Promise

Promise 构造函数接受一个函数(起始函数)作为参数，该函数是同步的，会立即被执行。起始函数包含两个参数 resolve , reject 表示 Promise 成功和失败的状态。这两个参数也是函数，在 Promise 执行成功和失败时分别执行。

new Promise(function(resolve, reject){
	// 要做的事情...
});

Promise 的方法

then：用于处理 Promise 成功状态的回调函数
catch：用于处理 Promise 失败状态的回调函数
finally：无论 Promise 成功失败，都会执行的回调函数

new Promise(function (resolve, reject) {
    var a = 0;
    var b = 1;
    if (b == 0) reject("Divide zero");
    else resolve(a / b);
}).then(function (value) {
    console.log("a / b = " + value);
}).catch(function (err) {
    console.log(err);
}).finally(function () {
    console.log("End");
});

Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）
Promise构造函数接收一个函数作为参数，该函数的两个参数分别是 resolve 和 reject
一个promise对象只能改变一次状态，成功或者失败后都会返回结果数据。
then 方法可以接收两个回调函数作为参数，第一个回调函数是Promise对象的状态改变为 resolved 是调用，第二个回调函数是 Promise 对象的状态变为 rejected 时调用。其中第二个参数可以省略。
catch 方法，该方法相当于最近的 then 方法的第二个参数，指向 reject 的回调函数，另一个作用是，在执行 resolve 回调函数时，如果出错，抛出异常，不会停止运行，而是进入 catch 方法中。

注意：catch 只捕获最近的 then 的回调函数，前面的 then 的执行不成功的结果，有后面 then 的 reject 回调函数执行，如果没有后续 then 回调函数执行，则会被 catch 捕获执行；

var promise = new Promise(function (resolve, reject) {
    //To Do 要异步执行的事情，这个异步执行的事情有可能成功执行完毕，那么Promise将是fulfilled状态，如果执行失败则是rejected;
    //下面测试代码，人为设置为rejected状态;
    //当然此处也可以设置为fulfilled(已完成)状态
    reject("将当前构建的Promise对象的状态由pending（进行中）设置为rejected（已拒绝）");
})

promise.then(//调用第一个then()
    success => {
        console.log("异步执行成功，状态为：fulfilled，成功后返回的结果是：" + success);
        return (" 当前 success ");
    },
    error => {
        console.log("异步执行失败，状态为rejected，失败后返回的结果是：" + error);
        return (" 当前 error ");
    }
).then(
    //调用第二个then() 因为调用第一个then()方法返回的是一个新的promise对象，
    // 此对象的状态由上面的success或者error两个回调函数的执行情况决定的：
    //如果回调函数能正常执行完毕，则新的promise对象的状态为fulfilled，
    // 下面执行success2,如果回调函数无法正常执行，则promise状态为rejected;下面执行error2
    success2 => {
        console.log("第一个then的回调函数执行成功 成功返回结果：" + success2);
        throw (" 当前 success2 ");//自定义异常抛出
    },
    error2 => {
        console.log("第一个then的回调函数执行失败 失败返回结果：" + error2);
        return (" 当前 error2 ");
    }
).catch(err => {
    //当success2或者error2执行报错时，catch会捕获异常;
    console.log("捕获异常：" + err);
});

//上述代码,打印如下:
//异步执行失败，状态为rejected，失败后返回的结果是：
// 将当前构建的Promise对象的状态由pending（进行中）设置为rejected（已拒绝）
//第一个then的回调函数执行成功 成功返回结果： 当前 error
//捕获异常： 当前 success2

Array

slice 方法

slice 用于截取数组的一部分，返回新数组，不会修改元数组。

arr.slice(startIndex, endIndex); // 不包含 endIndex

截取子数组

const arr = [1, 2, 3, 4, 5];
const sub = arr.slice(1, 3); // [2,3]

浅拷贝数组

const arr = [1, 2, 3, 4, 5];
const copy = arr.slice(); // [1,2,3,4,5]

处理类数组对象

function example() {
    const argsArr = Array.prototype.slice.call(arguments);
}

map 方法

map 用于遍历数组，返回一个新数组，不修改原数组，按照索引遍历，跳过空位，但返回的新数组依然保留空位 ，新数组的元素是原数组元素经过回调函数处理后的结果。

基础语法

const newArray = array.map(callback(currentValue[, index[, array]])[, thisArg])

callback: 回调函数，处理每个元素的函数，会返回一个新的元素。
- currentValue: 当前元素的值
- index: 当前元素的索引
- array: 原数组
thisArg: 回调函数中的 this 指向

数据转换

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2,4,6]

提取对象属性

const users = [
    {name: 'John', age: 20},
    {name: 'Jane', age: 25}
];
const names = users.map(user => user.name); // ['John','Jane']

链式调用

const numbers = [1, 2, 3];
const eventSquares = numbers.map(n => n ** 2).filter(n => n % 2 === 0); // [4]

生成动态内容

const items = ['apple', 'banana', 'cherry'];
const list = items.map((item, idx) =>
    (<li key={idx}>{item}</li>)
);

结合索引处理

const arr = ["a", "b", "c"];
const indexed = arr.map((char, idx) => `${char}_${idx}`);// ["a_0", "b_1", "c_2"]

fill 方法

Array(9).fill(null); // [null,null,null,null,null,null,null,null,null]

`??` 与 `||` 的区别

|| 逻辑或，当左侧的值为假值(Falsy)时，返回右侧值。

?? 空值合并运算符，当左侧的值为 null 或 undefined 时，返回右侧值。

console.log(0 || 10);    // 10（0 是假值）
console.log(0 ?? 10);    // 0

console.log('' || '空'); // '空'（'' 是假值）
console.log('' ?? '空'); // ''

console.log(null || 42); // 42
console.log(null ?? 42); // 42

?? 的优先级低于 ||，混合使用时建议用括号明确逻辑

(a ?? b) || c; // 先处理 ??，再处理 ||

变量定义​

let​

const​

字符串模板​

解构赋值 {}​

对象简化​

function​

箭头函数​

函数参数默认值​

rest 参数​

扩展运算符(展开语法与剩余参数) ...​

展开语法​

剩余参数​

Symbol 数据类型​

迭代器​

可迭代对象​

语法​

生成器函数​

Promise​

构建 Promise​

Promise 的方法​

Array​

slice 方法​

map 方法​

fill 方法​

?? 与 || 的区别​