小结ES6基本知识点(一)
原创
小结ES6基本知识点(一)
原创
0,本文适合人群和主要内容
ES6初学者，通过阅读本文可对ES6知识点有个大体的概念，强烈建议阅读阮一峰大大的ES6入门。
老司机可以直接绕路。
主要内容
- let、const命令
- 解构赋值
- 箭头函数
- 字符串的一些扩展
- 数组方法：map、filter、reduce
- Module
- Class
- Set和Map
- Promise
- async和await
1.let、const
(1)let所声明的变量，只在使用let所在的代码块内有效，在代码块外调用let声明的变量则会报错
验证:
{
var a = { name: "peter" }
let b = { name: "lily" }
console.log('inner a', a)//{name:"peter"}
console.log('inner b', b)//{name:"lily"}
}
console.log('a', a)//a{name:"peter"}
console.log('b', b)//Uncaught ReferenceError: b is not defined(2)不存在变量提升，使用let命令声明的变量，只能在声明后使用，语法上称为“暂时性死区”
(3)var、let、const
定义变量 | 是否可以重复定义变量 | 是否可以修改变量 |
|---|---|---|
var | 是 | 是 |
let | 否 | 是 |
const | 否 | 否 |
验证:
重复定义：
var a = 1;
var a = 2;
console.log('a',a)//a,2
let b = 1;
let b = 2;
console.log('b',b)//Uncaught SyntaxError: Identifier 'b' has already been declared
const c = 1;
const c= 2;
console.log('c',c)//Uncaught SyntaxError: Identifier 'c' has already been declared修改变量：
var a = 1;
a = 2;
console.log('a',a)//a,2
let b = 1;
b = 2;
console.log('b',b)//b,2
const c = 1;
c= 2;
console.log('c',c)//Uncaught TypeError: Assignment to constant variable.(4)ES65声明变量有两种方法：
var 命令和function命令
ES6声明变量有六种方法：
var命令、function命令、let命令、const命令、import命令和class命令
2.解构赋值
在ES6入门中分别介绍了：数组、对象、字符串、数值和布尔值、函数的参数的解构赋值。
先看个数组和对象的解构赋值：
数组：
let [a,b,c] = [1,2,3]
console.log(a,b,c)// [1,2,3]对象：
let {a,b,c} = {a:1,b:2,c:3}
console.log(a,b,c) // 1,2,3要点：
- 等号两边结构一致
- 定义和赋值同时完成
若等号两边结构不一致，则会报错，例如：
let [{a,b,c},d] = {a:1,b:2,c:3,d:4}
console.log(a,b,c,d) // Uncaught TypeError: {(intermediate value)(intermediate value)(intermediate value)(intermediate value)} is not iterable若不是定义和解构同时完成，则会报错在解构声明中缺少初始化：
let [a,b,c]
[a,b,c] = [1,2,3]
console.log(a,b,c)// Uncaught SyntaxError: Missing initializer in destructuring declaration3.箭头函数
3.1 写法
箭头函数是ES6中定义函数的新形式，以前是这样的：
function name(arg1, arg2) {
...
}ES6的形式：
(arg1,arg2)=>{
...
}而且还有一些简化的写法：
(1)如果只有一个参数，则()可省略：
arg1 => {
...
}(2)如果函数体只有一句，则{}可省略：
(arg1, arg2) => 表达式例如：
let add_salary = (salary) => { return salary + 2000};
console.log(add_salary(1000)) // 3000上述即是只有一个参数，所以可以省略()。另外函数体也只有一句表达式，{}和return都可以省略，简化写法：
let add_salary = salary => salary + 2000;
console.log(add_salary(1000)) // 30003.2箭头函数的优点
(1)写起来更简洁
(2)会改变this
普通函数中[1]：
(1)谁调用this就指向谁
(2)在默认情况(非严格模式下，未使用 'use strict')，没找到直接调用者，则this指向 window
(3)在严格模式下，没有直接调用者的函数中的this是 undefined
(4)使用call,apply,bind绑定的，this指向绑定的对象
验证(1)：
谁调用this就指向谁
var obj = {
say: function () {
console.log('this in js', this) // obj
}
}
obj.say();验证(2)：
在默认情况（非严格模式下），没找到直接调用者，则this指向 window
var obj = {
say: function () {
setTimeout(function () {
console.log('this in js', this) // window
})
}
}
obj.say();验证(3):
在严格模式下，没有直接调用者的函数中的this是 undefined
function test() {
'use strict';
console.log(this); //非严格模式下是window，严格模式下是undefined
}
test();验证(4):
使用call绑定的，this指向绑定的对象
function test() {
console.log('this', this)
var arr = [1, 2, 3]
arr.map(function (item) {
console.log('this in js', this)
})
}
test.call({ a: 4 })结果：
箭头函数中：
this所在函数定义在哪个对象下，this就指向谁。注意this就指向定义时所作的对象，而不是使用时所在对象。
function test() {
console.log('this', this)
var arr = [1, 2, 3]
arr.map(item => console.log('this in es6', this))
}
test.call({ a: 4 })结果：
这块具体内容建议看下ES6入门，写得很清楚。
4.字符串的一些扩展
4.1 获取开头结尾包含的方法
let s = 'Hello world!';
if(s.startsWith('Hello')){
console.log("s.startsWith('Hello')")
}
if(s.endsWith('d!')){
console.log("s.endsWith('!')")
}
if(s.includes('o')){
console.log("s.includes('o')")
}4.2 模板字符串(常用)
用``，可以当普通字符串使用，也可以在字符串中嵌入变量
let [name,age] = ["Peter",10];
console.log(`my name is ${name},I'm ${age} old.`) //my name is Peter,I'm 10 old.5.数组方法
5.1扩展运算符（...）
扩展运算符三个点（...）是将一个数组转为用逗号分隔的参数序列。
(1)可以用来复制数组
// ES5
let arr1 = [1,2,3];
let arr2 = arr1.concat();
arr2[0] = 4;
console.log('arr1',arr1) // arr1 [1,2,3]
console.log('arr2',arr2) // arr2 [4,2,3] ES6可以直接arr2 = [...arr1];来复制数组
// ES6
let arr1 = [1,2,3];
let arr2 = [...arr1];
arr2[0] = 4;
console.log('arr1',arr1) // arr1 [1,2,3]
console.log('arr2',arr2) // arr2 [4,2,3] (2)可以用来合并数组
ES5的写法：
arr1.concat(arr2);ES6的写法：
let arr3 = [...arr1,...arr2];//ES5
let arr1 = [1,2,3];
let arr2 = [4,5];
arr1.concat(arr2); // [1,2,3,4,5]//ES6
let arr3 = [...arr1,...arr2]; //[1,2,3,4,5](3)与解构赋值结合来生成数组
这里扩展运算符必须放在参数的最后一位，否则会报错：
验证：
let [a,...args] = [1,2,3,4];
console.log('a',a) // a,1
console.log('args',args) // args,[2,3,4]不放最后一位则会报错：
let [a,...args,b] = [1,2,3,4];
//报错：Uncaught SyntaxError: Rest element must be last element
console.log('a',a)
console.log('args',args) 5.2 forEach、map、filter、reduce
首先说明，forEach、map、filter、reduce都不会改变原数组
(1)forEach的作用：
单纯做遍历，没有返回值。支持三个参数：第一个是遍历的数组元素，第二个是索引，第三个是遍历的当前数组：
验证：
let arr1 = [1, 2, 3, 4];
let sum1 = 0;
let sum2 = arr1.forEach((value,index,array)=>{
console.log('value',value)
console.log('index',index)
console.log('array',array)
sum1 += value;
})
console.log('arr1',arr1) // arr1 [1, 2, 3, 4]
console.log('sum1',sum1) // sum1,10
console.log('sum2',sum2) // sum2,undefined可以看出sum2为undefined，说明forEach就是纯粹做遍历的，没有返回值。
(2)map的作用：
遍历原数组，对每个元素处理完再放入新数组
[1,2,3].map(item => item +1); // [2,3,4]
[20,30,40,60].map(item => item > 50)// [false, false, false, true](3)filter的作用：
过滤，遍历原数组，将满足条件的元素放入新数组
let arr1 = [1,2,3,4];
let arr2 = arr1.filter(item => item%2 == 0);
console.log('arr1',arr1) // [1,2,3,4]
console.log('arr2',arr2) // [2,4](4)reduce的作用：
遍历数组元素，通过回调函数最终输出一个值
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let sum = arr1.reduce((acc, item) => acc + item)
console.log('sum',sum) // sum,556.小结
本文主要是列举了ES6的一些基本知识点，并对应附带了一些验证的demo，下一篇将继续介绍后面的知识点。如有问题，欢迎指正。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
![【Fiber】: [转]React 为什么使用链表遍历 Fiber 树](https://ask.qcloudimg.com/http-save/yehe-5774797/42n1x8bu7q.png)
![【Fiber】：[译]深入解析React的新协调算法](https://ask.qcloudimg.com/http-save/yehe-5774797/77lgwnmzmf.png)
腾讯云开发者
