JS基础知识总结（九）：ES6基本知识点（1）

“ 关注 前端开发社区 ，回复"1"便可加入 前端技术交流群，回复 "2"便可免费领取 500G前端干货！

本文适合人群和主要内容

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 declaration

3.箭头函数

• 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)) // 3000

• 3.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 })

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zWXuQmu3-1593227873000)(https://static01.imgkr.com/temp/3db9e625a5ca4fc3947ab005835fe9a0.png)]

箭头函数中：

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,55

6.小结

本文主要是列举了ES6的一些基本知识点，并对应附带了一些验证的demo，下一篇将继续介绍后面的知识点。若有问题，欢迎指正。

最近几天会陆续更新的~~，以为总结的能够的话，麻烦给小编点一个 在看, 谢谢！

往期：

JS基础知识总结（八）：此次聊聊Promise对象

JS基础知识总结（七）：聊聊ajax的建立过程

JS基础知识总结（六）：只知道ajax？你已经out了

JS基础知识总结（五）：防抖和节流

JS基础知识总结（四）：做用域与闭包

请各位帅哥美女多多支持帅编，回复“1”便可加入前端技术交流群，回复"2"便可领取 500G 前端干货