es6-基础知识汇总

​​​​​​​​​​​​​​

目录

一、简介

二、配置babel环境

三、变量声明关键字let、const

var的缺点

 let&const

四、Symbol数据类型  

symbol()、symbol.for

五、解构赋值

什么是解构赋值？

使用解构赋值的前提

使用

六、字符串的扩展方法及模板字符串

七、ES6和ES7之数组的扩展方法及扩展运算符的使用

 八、map & reduce

九、对象中扩展运算符的使用

安装es8 插件

使用

十、Map与WeakMap结构的特点

map 数据类型

WeakMap

遍历方法 for each

十一、Set与WeakSet结构的特点

Set

最大的使用场景：数组去重

 WeakSet  

十二、数组、对象、map、set 增删改查

十三、类型转换

十四、ES6中的代理Proxy和反射Reflect

Proxy

Reflect

一个小案例

十五、rest

十六、箭头函数

js中什么时候使用箭头函数？

十七、类的概念&类的封装及继承

十八、静态方法

十九、import和export

二十、什么是异步编程及js的异步实现

二十一、 Promise

回调地狱

Promise改造回调函数

使用catch方法捕获错误

Promise.all 方法

二十二、interator 方法

二十三、Generator

应用场景

二十四、async（必须搭配await用）

---

一、简介

ECMAScript（简称ES6），是JavaScrit语言的下一代标准，它的目标是使JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

二、配置babel环境

因为浏览器不识别ES6，所以要转换为ES5。

①安装node 下载并安装node.js（npm淘宝镜像、nodemon）

②在vscode中选择文件夹，打开终端输入

npm init -y

③ 输入

npm install --save-dev babel-cli babel-preset-es2015

④ 创建文件    .babelrc  （注意一定要有点！）并输入

/ 配置用于转化当前代码的规则集
{
    "presets": [
        "es2015"
    ]

⑤ 创建项目录，src用于存放编写的es6代码，dist目录用于存放由es6转化后的代码

⑥ 将es6 代码转化为es5

                 ⇨单独转一个文件   node_modules/.bin/babel src/test.js --out-file dist/test.js

                 ⇨转整个文件夹     node_modules/.bin/babel src  --out-dir dist

借助 node_modules/.bin/babel 将src下的src/test.js 转换到dist/test.js（dist下的js不是自己创建  的，是转化过来的）

⑦配置package.json文件 （为了自动转换）操作如下方截图

 //配置监听脚本 一旦src下的js发生变化 自动转化到dist中
"dev":"babel src -w -d dist"

⑧ 用法 在终端输入      注意：dev是一个名字，根据脚本写的

npm run dev

⑨创建index.html文件，输入 

<script src="./dist/test.js"></script>

三、变量声明关键字let、const

var的缺点

存在变量提升;同一作用域下可以重复声明;不存在块级作用域,只存在全局作用域和局部函数作用域；不可以限制修改,只能声明变量不能声明固定值的常量

(1)存在变量提升

console.log(a); //输出undefined
var a = 1
 
// 实际上 变量提升
var a;
console.log(a);
a=1;

(2)同一作用域下可以重复声明

var a = 1;
 
var a = 2;
 
console.log(a) //输出2,可以重复声明，但是在java中会报错

(3)不存在块级作用域,只存在全局作用域和局部函数作用域

(4)不可以限制修改,只能声明变量不能声明固定值的常量

 let&const

• let

       特点: (1)只在声明的代码块内有效（块级作用域）

                (2)在同一作用域内不允许重复声明

                (3)没有变量提升

                (4)暂时性死区(必须先声明在使用，在变量声明之前，无法读取或者操作这个)

•  const

       const 用于声明常量 ，只是保证里面的内存地址不变(简单数据类型 如字符串，数字，布尔类型的值，值就保存在变量指向的内容地址,而复杂数据类型 的数据 如对象，数组和函数的时候，变量指向的内存地址，实际上是保存了指向实际数据的指针，所以const只能保证指针是固定的，至于指针指向的数据结构变不变就无法控制了） 

      特点：跟 let 一样

四、Symbol数据类型  

symbol是一种基本数据类型(primitivedatatype)。Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象;它的静态方法会暴露全局的symbol注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法:"newSymbol(()"

symbol()、symbol.for

每个从symbol()返回的symbol值都是唯一的，即使名字相同

1.Symbol是新增的一种数据类型,表示一种独一无二的(任意两个Symbol类型都是不相等的)

 Symbol相等与否与Symbol()内描述信息没有关系!!!

参数a1相当于对当前Symbol进行备注，用来描述当前这个Symbol
let a1=Symbol("a1");
let a2=Symbol("a1");
console.log(a1);
console.log(typeof a1);
console.log(a1 === a2);

 2.Symbol函数可以接受一个字符串作为参数,表示对该Symbol实例的描述,比较容易区分

const sym1 = Symbol("name")
const sym2 = Symbol("address")
console.log(sym1)
console.log(sym2)
console.log(sym1 === sym1)

const sym1 = Symbol("name")
const sym2 = Symbol("name")
console.log(sym1)
console.log(sym2)
console.log(sym1 === sym2)

 3.应用场景: Symbol作为对象的key

let obj={
    [a1]:123,
    aa:123,
    a1:457
}
console.log(obj);
 
let obj2={}
    obj2[a1]=3;

 4.如果描述信息一样,想得到两个一样的Symbol()值,可以使用Symbol.for()

Symbol.for 这个API代表会在全局寻找叫做aa的这个变量，如果有就会把当前这个symbol赋值到a1变量中，如果没有就会创建symbol再赋值

let a1=Symbol.for("aa");
let a2=Symbol.for("aa");
console.log(a1===a2);

6.为对象赋值的另一种方式：参数1是对象的名称 参数2是key的名称  参数3是当前这个key的值

结合上方代码看
Object.defineProperty(obj,a1,{value:890})

 

7. Symbol的另外一个作用：声明字符串常量,下面代码中的hahaha这个字符串就为常量 

const user=Symbol("hahaha");
console.log(user);

 

8.Object.getOwnPropertySymbol()是用来专门获取指定对象的所有Symbol属性名的

  变量作为对象的属性的时候,通过方括号将变量转换为属性

const key1 = Symbol("hi")
 
const key2 = Symbol("flag")
 
const o = {
 
a:1,   b:2,
 
[key1]: 2022, [key2]:"暴富"  }
 
console.log(o[key1],o[key2])

五、解构赋值

什么是解构赋值？

• 解构赋值可以理解为赋值操作的语法糖，它是针对数组或者对象进行模式匹配，然后对其中的变量进行赋值，代码书写上言简意赅，语义明确，也方便了对象数据的读取操作 

使用解构赋值的前提

• ES6中在某种数据上只要有一个遍历接口（数组、字符串、对象），也就说这个数据能够循环遍历的话，就可以进行解构赋值
• 解构赋值必须：赋值符号左右两边的结构必须一致(要么都是数组，要么都是对象)；变量的声明和赋值必须在一句话内完成

使用

① 如果赋值时变量的个数和值的数对应不上，多出来的变量中的值就是undefined

{
    // 如果赋值时变量的个数和值的个数对应不上，多出来的变量中的值就是undefined
    let a, b, c
    [a, b, c, d] = [1, 2, 3];
    console.log(a, b, c, d);
}

②  指定默认值

{
    // 指定默认值
    let a, b, c
    [a, b, c = 9] = [1, 2]
    console.log(a, b, c);
}

③ ...为ES6中的扩展运算符，这样会将a赋值给1，而other会作为一个数据将剩余的值作为整个数组中的元素进行存储

{
    // ...为ES6中的扩展运算符 这样会将a赋值为1,而other会作为一个数组将剩余的值作为整个数组中的元素进行存储
    let a ,other
    [a,...other]=[1,2,3]
    console.log(a,other);
}

 ④  只读取第一个和第三个值，逗号只作为占位符

{
    // 只取第一个和第三个值,逗号只作为占位符
    let a,b 
    [a,,b]=[1,2,3];
    console.log(a,b);
}

⑤   对象解构赋值，如果当前行中的第一个字符为大括号的会报错，所以需要加上小括号

{
    // 对象解构赋值  如果当前行的中的第一个字符为大括号的话会报错,所以需要加上小括号
    let a,  b; 
    ({a,b}={a:2,b:3})
    console.log(a,b);
}

⑥ 只使用属性值不使用属性名，相当于给原有对象中的属性名重新命名

{
    // 只使用属性值不使用属性名,相当于给原有对象中的属性名重新命名
    let num,total;
    ({a:num,b:total}={a:2,b:3})
    console.log(num,total);
}

六、字符串的扩展方法及模板字符串

① 在 es5 中显示乱码  es6 中显示汉字            ⇨ \uxxxx  限制范围：\u0000-\uFFFF

    es6的方案：将超过两个字节的组成字符的码点放在一对大括号里，就可以正确的识别了

{
    // es5                     \uxxxx  限制范围：\u0000-\uFFFF
    const str="\u20bb7";
    console.log(str);
}

{
    // es6的方案：将超过两个字节的组成字符的码点放在一对大括号里，就可以正确的识别了
    const str="\u{20bb7}"
    console.log("es6",str); 

}

② for of:传统for循环无法处理超出范围的字符的，而for of能够正确的处理，处理字符串循环时推荐使用for of进行处理

{
    // for...of: 传统for循环无法处理超出范围的字符的，而 for..of 能够正确的处理，处理字符串循环时推荐使用for of进行处理
    const str="\u{20bb7}"
    for( let i=0;i<str.length;i++){
        console.log(str[i]);
    }
    for(let word of str){
        console.log("for-of",word);
    }
}

③ str.includes() 判断字符串中是否包含指定字符串，返回值是布尔值

{
    // str.includes()   判断字符串中是否包含指定字符串，返回值是布尔值
    let str="123abc321";
    console.log("includes",str.includes("abc"))；
}

 ④ str.startsWith() 判断以什么开头的，参数2是从指定的位置数起

{
    // str.startsWith() 判断以什么开头的，参数2是从指定的位置数起
    let str="123abc321";
    console.log("startsWith",str.startsWith("abc",3));
    console.log("endsWith",str.endsWith("abc",6));
}

⑤repeat() 方法  返回一个新字符串，表示将原字符串重复n次

{
    // repeat() 方法返回一个新字符串，表示将原字符串重复n次
    let str="1abc23";
    let str2=str.repeat(3);
    console.log(str);
    console.log(str2);
}

 ⑥ 头部补全  参数1：补全之后的字符串长度 。参数2： 作为补位的字符串，如果超出补全长度自动截取

{
    // 头部补全 参数1：补全之后的字符串长度 。参数2： 作为补位的字符串&#x