es6新增详解

矫情吗；* 2022-12-20 03:28 234阅读 0赞

### 文章目录 ###

*  一、es6是什么
 *   *   *  1. 官方回答
         *  2. 本人理解
 *  二、版本新增
 *   *   *  1. let 和 const 和 var 的区别
         *  2.解构赋值
         *  3.模板字符串
         *  4.字符串新增
         *  5.函数的新增
         *  6.箭头函数
         *  7.数组新增
         *  8.对象新增
         *   *  1.对象的简洁：
             *  2.方法的简洁：
             *  3.新增对象方法：
         *  9.扩展运算符
         *  10.promise
         *  11.async await
         *  12.class类构造器
         *  13.class静态属性和静态方法
         *  14.set和map数据结构
         *   *  set数据结构
             *  map数据结构
         *  15.模块化

--------------------

# 一、es6是什么 #

### 1. 官方回答 ###

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。

### 2. 本人理解 ###

es6.0版本  
js版本，2015年六月推出的版本  
ECMAScript组织 javascript 1.0 2.0 3.0 4.0 5.0  
es6比es5,有更强的语法。以及增强和新增，它泛指js的下一个版本  
每年六月会发布一次新版本

# 二、版本新增 #

### 1. let 和 const 和 var 的区别 ###

var： 弱类型语言
    1. 重复声明使用，第二次声明会覆盖之前的
    2. 存在变量提升
    let:
    1. 不允许重复声明使用，否则报错
    2. 不存在变量提升
    const:(常量)
    1.声明时必须要有初始值 不允许重复声明使用，否则报错
    2. 不存在变量提升
    3. 不可改变，改变报错

使用场景：

const num = 3
    const arr = [];
    const obj = { }

作用域：全局作用域
            var 
            局部作用域
            function
            块级作用域
            {}

### 2.解构赋值 ###

//数组解构赋值：
        let [a,b,c] = [1,2,3]
        //作用：快速声明变量，数组对数组，值对值
        //扩展运算符：
        ...
        let [a = 1,b,...c] = [,2,3,4,5,6]
            console.log(a,b,c)
    
        //对象解构赋值：
        //作用：快速获取数据
        //方式一：
        let obj = { 
                name:'张飞',
                age:18,
                sex:'男'
            }
            console.log(obj.name) //张飞
            let{ name,age,sex} = obj
            console.log(name) //张飞
            console.log(age)  //18
            console.log(sex)  //男
        //方式二：
        function add({  name, age }) { 
                console.log(name, age) //111,222
            }
           
            add({  name: 111, age: 222 })
    
             //如果遇到敏感关键字或浏览器封装好的关键字
            let { delete:del = '默认'} = { delete:'删除'}
            console.log(del)  //删除

### 3.模板字符串 ###

语法：

`hello ${ 变量}`

### 4.字符串新增 ###

'hello'.includes('l') //判断字符串是否包含特定字符 如果包含返回true,否则返回false
            indexOf()     //查找字符串在字符串中的位置，如果找到了返回索引，否则返回-1
            startWith()   //判断字符串中是否以特定字符开头，如果是，返回true，否则false
            endsWith()    //判断字符串中是否以特定字符结尾，如果是，返回true，否则false
            padStart()    //在字符串开始位置填充
            padEnd()      //在字符串结尾位置填充
            repeat()      //重复字符串 方法不可以传负数，整数向下取整

### 5.函数的新增 ###

函数默认值：

let f = function(a=100){ 
        console.log(a) //100
    }
    f()

函数参数rest用法：

let f = function (...arr) { 
               // console.log(arguments)
               // let arr = [];
               // for(let i = 0;i<arguments.length;i++){ 
               // arr.push(arguments[i])
               // }
               console.log(arr)
    
           }
           f(1,2,3,4)
           //通过...arr在函数传参中，就可以在函数内部拿到一个数组，数组中就是参数的集合

### 6.箭头函数 ###

//箭头函数：
                语法：() =>{ 
                //代码块
                }
                 //普通函数
            let fn = function({ str}) { 
                console.log(str)
            }
            //this指向 ：传统的函数内部this指向谁调用方法，this指向谁
            //箭头函数
            let fn2 = ({ str}) =>{ 
                console.log(`箭头函数${ str}`)
            }
            fn({ str:'函数'})
            fn2({ str:'厉害'})

作用：解决this指向问题，this定义时(上下文中的this),this的指向
        特点：1.this指向的是定义时(上下文中的this)
            2. 箭头函数中不能使用arguments
            3. 箭头函数不可用构造器(工厂函数)
    
            箭头函数简写：
            箭头函数参数，只有一个可以把()省略，函数体只有一行代码，可以省略{}

### 7.数组新增 ###

es5 
        for(){}         可以循环数组，可以循环伪数组
        forEach()       可以循环数组，不可以循环伪数组
        map()(映射)      可以循环数组,批量处理数据，循环具备return,返回新数组
        filter()        过滤循环 return 就是过滤条件，循环会把每一项符合条件的数据，返回一个新数组中    
        some()          循环每一条数据，循环条件如果有一个符合，返回true，否则返回false
        every()         循环每一条数据，循环条件都符合，返回true，否则返回false
    
        es6新增
        fill() 数组填充  方法第一个参数为填充的内容，第二个参数填充起始位置，第三个参数结束位置
        includes() 数组数据是否包含，判断数组中是否包含某个特定字符，对比的是每一项，如果有返回true，否则返回false
        indexOf() 数组中查找，如果有返回索引，如果没有返回-1
    
        find()  数组中查找符合条件的数据，如果符合条件退出循环，将符合条件的数据返回成新的值，找不到返回undefined
        findIndex() 数组中查找符合条件的数据，如果符合条件退出循环,返回下标索引，找不到返回-1

### 8.对象新增 ###

#### 1.对象的简洁： ####

let name = '张飞'
        let obj = { 
            name
        }
        console.log(obj)
    //总结：属性的总结，使用的变量和属性名相同时，那么可以省略成一个属性

#### 2.方法的简洁： ####

let name = '张飞'
        let obj = { 
            name,
            // say:function(){ 
            // alert('你好'+this.name)
            // }
            say(){ 
                alert('你好'+this.name)
            }
        }
        console.log(obj)
    obj.say()
    //总结：可以直接省略成say(){}

#### 3.新增对象方法： ####

Object.is()        //判断两个对象，是否一样
     Object.assign()    //对象合并方法
     Object.keys()      //拿到对象中属性集合
     Object.values()    //拿到对象中属性值集合
     Object.entries()   //拿到对象中键值对集合
    
    //浅拷贝实现方式：
     Object.assign() 
     //扩展运算符...
    
    //最简单深拷贝
    let a = [1,2,3,{ name:'张飞'}]
    let b = JSON.parse(JSON.stringify(a))
    a[3].name = 123
    console.log(a,b)

### 9.扩展运算符 ###

语法：...
    1. 可以展开字符串，字符串转换数组
    2. 可以浅拷贝，对象和数组都可以进行展开实现浅拷贝
    3. 伪数组可以转换成数组
    4. 可以用rest方式，在函数中可以快速拿到所有参数集合生产一个数组，在数组结构中，可以将剩余的值，当到变量

### 10.promise ###

Promise是异步编程的一种解决方案，比传统的回调函数更强大和高效，最早是由社区提出并实现 ECMA觉得不错，就把promise加到api,他其实就是一个对象，对象中装载着未来某个状态

异步表现形式：  
1. 定时器  
2. ajax请求  
3. 回调函数

回调地狱：函数嵌套  
promise可以解决回调地狱问题  
浏览器提供构造函数，在定义一个promise对象时，注意：参数是回调函数，回调函数第一个参数为成功resolve,失败回调为reject  
通过原型上的then方法，可以拿到resolve返回的参数  
通过原型上的catch方法，可以拿到reject返回的参数  
使用方式：

let p = new Promise((resolve,reject)=>{ 
            resolve('成功')
        })
        console.log(p)
        p.then((res)=>{ 
            console.log(res)
        })

特点：1. 一旦创建，立即执行
        2. 返回结果不受外界影响

### 11.async await ###

async 异步  
await 等待  
作用：async也是异步编程的一种方式，更好的解决异步编程  
特点：async返回的一直是promise对象,可以结合结构赋值进行预处理响应数据

let fun = async function () { 
        let {  data } = await request()
    }
    fun()

### 12.class类构造器 ###

ECMA推出的构造函数，语法糖(功能不变，用法有变化)  
java和.net后端语言都具备面向对象 class类的方式进行构造  
语法：

class Person {  //原型对象
         constructor(name) {  //构造方法
             this.name = name
         }
     }
    
     let p = new Person('张飞')
    
     //继承：
     class Child extends Person { 
         constructor(name,age) {  //构造方法
             super(name) //作用就是调用了Person中的constructor
             this.age = age
         }
     }
     let c = new Child('刘备',18)

### 13.class静态属性和静态方法 ###

在类构造函数中，static关键字定义属性和方法、
    然后使用 构造函数中直接调用属性或方法
    Person.user
    Person.fun()
    
    继承之后，子构造器，继承父构造器的静态属性和静态方法

### 14.set和map数据结构 ###

#### set数据结构 ####

语法：

let set = new Set()

特点：  
set数据结构中不允许重复值，去重

// set数据结构转换成数组
      Array.form(set)
      [...set]

方法或属性：  
size属性：返回的就是set数据结构中的数量  
has()：判断set数据结构中是否有特定的值  
add():向set数据结构中添加一个数据  
delete():删除指定数据  
clear():清空数据结构

//最简单数组去重：
        let arr = [1,2,6,1,7,4,2,7,7,5,4,5,8,55,5,2,2,3,1,1,1,2,3,1,8,9,9,8,4,4,5,1]
        let newArr = [...new Set(arr)]

#### map数据结构 ####

语法：

let map = new Map()

特点：可以以任意数据类型进行key value形式存储
    具备的方法：
    size属性:返回数据数量
    set(),向map数据结构中进行存储，第一个参数为key,第二个参数为valve
    delete():删除指定的数据
    get()在map数据结构中获取相应数据
    clear():全部清除
    has(),判断是否有这条数据

### 15.模块化 ###

在之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化。直至ES6带来了模块化，才让javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块。

我们先来创建一个test.js文件，来对这一个变量进行输出：

export let str ="hello es6";

然后可以创建一个index.js文件，以import的形式将这个变量进行引入:

import {  str } from "./test.js";
    console.log(str);//hello es6