es6基础看这一篇就够了，es6有哪些新特性，一起来看看

最新推荐文章于 2024-09-13 23:32:49 发布

随地大小学的码农

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量770

点赞数 28

文章标签： es6 前端 ecmascript

本文链接：https://blog.csdn.net/2301_78107029/article/details/138028378

版权

前言

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

const定义常量
解构赋值
箭头函数简写
filter过滤函数
参数默认值
- ES6允许给函数参数赋初始值
rest参数
spread扩展运算符
扩展运算符应用
迭代器
生成器函数
生成器函数实例
Set集合
Set集合实践
Map
class类
- class的 get 和 set
数值扩展
对象方法扩展
模块化
- 导入方式
- 使用es6的规范和npm包的使用
ES7新特性
ES8新特性
- async和await
  - async 函数
  - await
发送ajax请求
对象方法扩展
- 获取对象所有的键
- 获取对象所有的值
- entries
正则扩展-命名捕获分组

const定义常量

const S=100

一定要赋初值
一般常量使用大写（潜规则）
常量的值不能修改
块级作用域
对于数组和对象的元素修改，不算做对常量的修改，不会报错

const TEAM=['a','c','d']
TEAM.push('b')

解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这就是解构赋值

数组的解构

const F4=['我','你','他','它们']
let [wo,ni,ta,tamen]=F4
console.log(wo);
console.log(ta);
    // 我 
    // 他

对象的解构

const li={
    name:'李华'
    age:'18'
}
let {name,age}=li
console.log(name)
// 李华

箭头函数简写

当形参有且只有一个时，可省略小括号
当代码体只有一条语句时，可省略花括号,而且语句的执行结果就是函数的返回值

let pow=n=>n*n
console.log(pow(8))
// 64

箭头函数适合与this无关的回调、计时器，数组的方法回调
不适合与this有关的回调、事件回调，对象的方法
箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。

filter过滤函数

过滤出数组A中，符合条件的对象（条件：type等于3的对象）

let arrayA = [
    {value:'小明',type:'3'},
    {value:'小红',type:'2'},
    {value:'小刚',type:'3'},
    {value:'小二',type:'1'}
]
arrayA = arrayA.filter((a)=>{
    return a.type === "3"
})
console.log(arrayA)

// 0:{value:"小明",type:"3"} 
// 1:{value:"小刚",type:"3"}
// length:2

参数默认值

ES6允许给函数参数赋初始值

形参初始值具有默认值的参数，一般位置要靠后

function add(a,b,c=10){
 return a+b+c
}
let d=add(1,2)
console.log(d);
// 13

与解构赋值联合

function fn({name,age}){
    console.log(name)
    console.log(age)
}
fn({
    name:'lihua'
    age:'18'
})
// 输出：
/* lihua
   18
*/

rest参数

rest参数必须要放到参数最后

function fn(a,b,...args){
    console.log(a)
    console.log(b)
    console.log(args)
}
fn(1,2,3,4,5,6)
/*
1 
2 
[3,4,5,6] 
*/

spread扩展运算符

const tfboys=['易烊千玺','王俊凯','王源']
function fn(){
    console.log(arguments)
}
fn(...tfboys)
//Arguments(3)['易烊千玺','王俊凯','王源']

扩展运算符应用

数组的合并

const a=['一'，'二']
const b=['三','四']
//const c=a.concat(b)
const c=[...a,...b]
console.log(c)
//  ['一'，'二','三','四']

数组的克隆

const a=['一'，'二']
const b=[...a]
console.log(b)
//  ['一'，'二']

将伪数组转为真正的数组

const divs=document.querySelectorAll('div')
const divArr=[...divs]
console.log(divArr) //[div,div,div]

迭代器

for…of遍历数组

const a=['张三'，'李四','王五']
for(let i of a){
    console.log(i)
}
/*
张三
李四
王五
*/
for(let j in a){
    console.log(j) //0 1 2
}

生成器函数

生成器其实就是一个特殊的函数
异步编程纯回调函数 node fs ajax mongodb

  function *gen(){
    console.log("hello world")
  }
  let iterator=gen()
  iterator.next()
// hello world

yield 函数代码的分隔符

  function *gen(){
    console.log("111")
    yield '1结束'
    console.log("222")
    yield '2结束'
    console.log("333")
    yield '3结束'
  }
  let iterator=gen()
  iterator.next()
  iterator.next()
  iterator.next()
/*
  111
  222
  333
*/

以上代码也可直接遍历

function *gen(){
    console.log("111")
    yield '1结束'
    console.log("222")
    yield '2结束'
    console.log("333")
    yield '3结束'
  }
for(let i of gen()){
    console.log(i) 
}
/* 
111
1结束
222
2结束
333
3结束
*/

生成器函数实例

回调地狱问题
先来看一下原来的代码

setTimeout(()=>{
    console.log("111")
    setTimeout(()=>{
        console.log("222");
        setTimeout(()=>{
            console.log("333")
        },3000)
    },2000)
},1000)

其中回调函数嵌套了回调函数，这就是典型的回调地狱问题

用生成器函数解决代码如下：

function one(){
    setTimeout(()=>{
        console.log("111")
        iterator.next()
    },1000)
}
function two(){
    setTimeout(()=>{
        console.log("222")
        iterator.next()
    },2000)
}
function three(){
    setTimeout(()=>{
        console.log("333")
        iterator.next()
    },3000)
}
function * gen(){
    yield one()
    yield two()
    yield three()
}
let iterator=gen()
iterator.next()
/*  111
    222
    333
*/

Set集合

声明一个set

let s=new Set()
let s2=new Set(['我','你','他','他'])

元素个数(自动去重)

console.log(s2.size) //3

添加新元素

s2.add('它')
console.log(s2) //{'我','你','他','他','它'}

删除元素

s2.delete('我')

检测

s2.has()

清空

s2.clear()

Set集合实践

数组去重

let a=[1,2,3,4,5,4,3,2,1]
let b=[...new Set(a)]
console.log(b)
//[1,2,3,4,5]

交集

let a1=[1,2,3,4,5,4,3,2]
let a2=[3,4,5,5,6]
let b=[...new Set(a1)].filter(item=>{
    let s2=new Set(a2)
    if(s2.has(item)){
        return true
    }else return false
})
console.log(b) //[3,4,5]

简便化：

let b=[...new Set(a1)].filter(item=> new Set(a2).has(item))

并集

let arr=[...new Set([...arr,...arr2])]

差集

let b=[...new Set(a1)].filter(item=> !(new Set(a2).has(item)))
console.log(b) //[1,2]

Map

声明

let m=new Map()

添加元素

m.set('name','尚硅谷')
console.log(m)

大小：m.size
删除元素
m.delete(‘name’)
获取

console.log(m.get(key)) //['北京'，'上海']

清空
m.clear()
遍历

for(let v of m){
    console.log(m)
}

class类

function Phone(brand,price){
    this.brand=brand
    this.price=price
}
// 添加方法
Phone.prototype.call=function(){
    console.log("打电话");
}
// 实例化对象
let Huawei=new Phone('华为',5999)

class的 get 和 set

class Phone{
    get price(){
        console.log("price属性被读取了");
        return 'ready'
    }
}
// 实例化对象
let s=new Phone()
console.log(s.price);
/* 
price属性被读取了
ready
*/

class Phone{
    set price(newVal){
        console.log('price属性被修改了');
    }
}
// 实例化对象
let s=new Phone()
s.price='free'
// price属性被修改了

数值扩展

Number.EPSILON是Javascript表示的最小精度,
EPSILON属性的值接近于2.220446049250313080472633361816E-16

function equal(a,b){
    if(Math.abs(a-b)<Number.EPSILON){
        return true
    }else{
        return false
    }
}
console.log(0.1+0.2===0.3);
console.log(equal(0.1+0.2,0.3));
// 输出： false  true

Number.isFinite检测一个数值是否为有限数
Number.isNaN 检测一个数值是否为NaN
Number.parseInt Number.parseFloat字符串转整数
Number.isInteger 判断一个数是否为整数
Math.trunc 将数字的小数部分抹掉
Math.sign 判断一个数到底是正数（返回1）、负数（返回-1）还是零（返回0）

对象方法扩展

Object.is(a,b) 判断两个值是否完全相等
Object.assign(a,b) 对象的合并
Object.setPrototypeOf设置原型对象
Object.getPrototypeOf 静态方法返回指定对象的原型（即内部 [[Prototype]] 属性的值）

const school={
    name:'xx中学'
}
const cities={
    xiaoqu:['北京','上海','深圳']
}
Object.setPrototypeOf(school,cities)
console.log(Object.getPrototypeOf(school)) // {xiaoqu:['北京','上海','深圳']}
console.log(school); //{name:'xx中学'}

模块化

模块功能主要由两个命令构成：export和import

export 命令用于规定模块的对外接口
import 命令用于输入其他模块提供的功能

分别暴露：

export let school = 'xx中学'
export function teach(){
    console.log('传道授业');
}

统一暴露：

let school = 'xx中学'
function teach(){
    console.log('传道授业');
}
export {school, teach}

导入方式

通用的导入方式

import * as m1 from "./js/m1.js"

解构赋值形式

import {school,teach} from "./js/m1.js"

简便形式针对默认暴露

import m3 from "./js/m1.js"

ES7新特性

判断有无某元素

const a=['我','你','他']
console.log(a.includes('我')) //true

乘方：

console.log(2**10)
console.log(Math.pow(2,10)) //1024s

ES8新特性

async和await

async 函数

只要返回的结果不是一个Promise类型的对象，返回的都是成功的Promise对象

async function fn(){
    //1. return '字符串';
    //2. 抛出错误，返回的是一个失败的Promise
    //throw new Error('出错了！')
    //3. 返回的是一个Promise对象
    return new Promise((resolve,reject)=>{
        resolve('成功！')
    })
}
const result=fn()
result.then(value=>{
    console.log(value)
},reason=>{
    console.warn(reason)
}) //成功了

await

await必须写在async函数中
await右侧的表达式一般是promise对象
await返回的是promise成功的值
await的promise失败了，就会抛出异常，需要通过try…catch捕获处理

成功如下：

const p=new Promise((resolve,reject)=>{
    resolve('成功！')
})
async function main(){
    let result =await p
    console.log(result) //成功！
}

失败如下：

const p=new Promise((resolve,reject)=>{
    reject('失败！')
})
async function main(){
    try{
        let result =await p
    console.log(result)
    }catch (e){
        console.log(e) //失败！    
    }
}

发送ajax请求

function s(url){
    return new Promise((resolve,reject)=>{
        //1.创建对象
        const x=new XMLHttpRequest()
        //2.初始化
        x.open('GET',url)
        //3.发送
        x.send()
        //4.事件绑定
        x.onreadystatechange=function(){
            if(x.readyState===4){
                if(x.status>=200&&x.status<300){
                    //成功
                    resolve(x.response)
                }else{
                    //失败
                    reject(x.status)
                }
            }
        }

    })
}
//测试
s("https://....").then(value=>{
    console.log(value)
}reason=>{})

对象方法扩展

获取对象所有的键

console.log(Object.keys(obj));

获取对象所有的值

console.log(Object.values(obj));

entries

会把对象变成数组，键值是元素，元素里面的值又是另一个数组

console.log(Object.entries(obj));
/* [Array(2),Array(2),Array(2)]
   0:["name","尚硅谷"]
   1:["cities",Array(3)]
   2:["xueke",Array(4)]
*/

可以利用entries创建Map

const m=new Map(Object.entries(school));
console.log(m.get('name')); //尚硅谷

对象属性的描述对象

console.log(Object.getOwnPropertyDescriptors(school))

返回的对象是：(name后面大括号中的对象)

const obj=Object.create(null,{
    name:{
        //设置值
        value:'尚硅谷'，
        //属性特性
        writable：true,
        configurable:true,
        enumerable:true
    }
})

正则扩展-命名捕获分组

//声明一个字符串
let str='[<a href="http://www.atguigu.com">尚硅谷</a>]';
//提取url与标签文本
const reg=/<a href="(.*)">(.*)<\/a>/
//执行
const result=reg.exec(str);
console.log(result); 
/*
0:"<a href="http://www.atguigu.com">尚硅谷</a>"
1:"http://www.atguigu.com"
2:"尚硅谷"
*/

更好捕获：

let str='[<a href="http://www.atguigu.com">尚硅谷</a>]';
const reg=/<a href="(?<url>.*)">(?<text>.*)<\/a>/
const result=reg.exec(str);
console.log(result.groups.url); //http://www.atguigu.com
console.log(result.groups.text); //尚硅谷