关于ES6新特性的总结

英俊先生 2023-04-24 原文

1.let & const

1) let，作用与var类似，用于声明变量
特性：

let 不能重复声明变量，var 可以重复声明变量；
块级作用域，es5中存在全局作用域、函数作用域、eval作用域；es6中引入了块级作用域，let声明的变量在块级作用域{}内有效
let声明的变量不存在var的变量提升问题

举个例子：



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <h2 class="page-header">点击切换颜色</h2>
        <div class="item">1</div>
        <hr>
        <div class="item">2</div>
        <hr>
        <div class="item">3</div>
    </div>

    <script>
        // 获取div对象
        let items = document.getElementsByClassName('item')

        // 遍历并绑定事件 遍历时let i
        for(let i = 0; i < items.length; i++){
            items[i].onclick = function(){
                items[i].style.background = 'pink'
            }
        }
        /*
        相当于在3个块级作用域内分别声明了i
        {
            let i = 0
            items[i].onclick = function(){
                items[i].style.background = 'pink'
            }
        }
        {
            let i = 1
            items[i].onclick = function(){
                items[i].style.background = 'pink'
            }
        }
        {
            let i = 2
            items[i].onclick = function(){
                items[i].style.background = 'pink'
            }
        }
        */

        /*
        // 遍历并绑定事件 遍历时var i
        for(var i = 0; i < items.length; i++){
            items[i].onclick = function(){
                // 修改当前元素的背景颜色
                this.style.background = 'pink' // 此处this指向’被绑定的元素对象‘，即调用该函数的对象
                // 此处不能和上文一样使用 items[i].style.background = 'pink'，
                // 因为var的i不考虑块级作用域， 则相当于在全局声明了一个变量，循环结束后i=3，
                // 函数执行时向上层寻找最终得到全局变量i=3，而items[3]为undefined
            }
        }
        相当于
        {
            var i = 0
            // ...

        }
        {
            var i = 1
            // ...
        }
        {
            var i = 2
            // ...
        }
        {
            var i = 3
        }

        */
    </script>
</body>

<style>
    .item{
        width: 200px;
        height: 50px;
        border-radius: 2%;
        background-color: brown;
    }
</style>

</html>

2) const 用于声明常量
注意事项：

一定要赋初始值
一般常量使用大写(属于编程规范)
常量值不能修改
存在块级作用域
对于数组和对象的元素修改，不算做对常量的修改，不会报错(因为引用数据类型保存的是内存地址，所以声明数组和对象时可以使用const声明，以此保证其保存的内存地址不变)

2.解构赋值

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

1) 数组的解构

const Web = ['html', 'css', 'javascript']
let [tool1, tool2, tool3] = Web

console.log('tool1-----', tool1) // html
console.log('tool2-----', tool2) // css
console.log('tool3-----', tool3) // javascript

2) 对象的解构

const liMing = {
    name: 'liMing',
    age: '22',
    tell: function(){
        console.log(`I am liMing`)
    }
}

let {name, age, tell} = liMing

console.log(name) // 'liMing'
console.log(age) // '22'
console.log(tell) // f(){...}
tell() // I am liMing

3.模板字符串

特性：

(反引号)内容中可以直接出现换行符，’ '和" "中则不可以，出现会报错
可以直接进行变量拼接

4.简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法（在属性名和变量名相同的情况下），这样的书写更加简洁

let name = 'LiMing'
let tell = function(){
    console.log('I am LiMing')
}

const liMing = {
    name,
    tell,
    sayHi(){
        console.log('hello')
    }
}

// 等效于
// const liMing = {
//     name: name,
//     tell: tell,
//     sayHi: function(){
//         console.log('hello')
//     }
// }

console.log(liMing)
liMing.tell()
liMing.sayHi()

5.箭头函数

与function声明的区别：

1.箭头函数this是静态的。

箭头函数内的this指向上层对象；始终指向函数声明时所在作用域下的this的值，无法被call改变
普通函数内的this指向调用其函数的对象

function getName(){
    console.log(this.name)
}

let getName2 = ()=>{
    console.log(this.name)
}

// 设置window对象的name属性
window.student = 'LiMing'
const student = {
    name: 'HanMei'
}

// 直接调用
getName() // LiMing
getName2() // LiMing

// call方法调用
getName.call(student) // HanMei
getName2.call(student) // LiMing

2.箭头函数不能作为构造函数实例化对象

let Person = (name, age)=>{
    this.name = name
    this.age = age
}
let me = new Person('LiMing', 20) // 报错：Uncaught TypeError: Person is not a constructor

3.箭头函数不能使用arguments变量，但是可以使用....rest

let fn = ()=>{
    console.log(arguments)
}

fn(1, 2, 3) // 报错：Uncaught ReferenceError: arguments is not defined


let fn2 = (...rest)=>{
    console.log(...rest)
}

fn2('a','b','c') // a b c

4.箭头函数的简写
① 当形参有且只有一个的时候，可以省略()
② 当代码体只有一条语句的时候，可以省略{}，此时return必须省略，而且语句的执行结果就是函数的返回值

// 当形参有且只有一个的时候，可以省略`()`
let add = n => {
    return n + n
}

console.log(add(9))

// 当代码体只有一条语句的时候，可以省略`{}`，此时`return`必须省略，而且语句的执行结果就是函数的返回值
let pow = n => n*n

console.log(pow(9))

5.箭头函数的例子
箭头函数适合与this无关的回调，比如定时器setTimeout(()=>{...}, 2000)、数组的方法回调arr.filter((item)=>{...})；
不适合与this有关的回调，比如dom元素的事件回调ad.addEventListener('click', function(){...}、对象内的方法定义{name: 'LiMing', getName: function(){this.name}}
例1：

// 需求-1 点击div 2s后颜色变红

// 获取元素
let ad = document.getElementById('ad')
// 绑定事件
ad.addEventListener('click', function(){
    setTimeout(function(){
        console.log(this) // 定时器里的this指向window
        this.style.background = 'brown' // 报错
    }, 2000)
})

//解决方案1
// ad.addEventListener('click', function(){
//     // 保存this的值
//     let _this = this // _this指向ad
//     setTimeout(function(){
//         console.log(_this) 
//         _this.style.background = 'brown'
//     }, 2000)
// })

// 解决方案2
// ad.addEventListener('click', function(){
//     setTimeout(()=>{
//         console.log(this) 
//         this.style.background = 'brown' // this指向函数声明时所在作用域下this的值 即ad
//     }, 2000)
// })

例2：

// 需求-2 从数组中返回偶数的元素
const arr = [1, 6, 9, 10, 100, 25]
const result = arr.filter(function(item){
    if(item %2 === 0){
        return true
    }else{
        return false
    }
})

// 可以用箭头函数
// const result = arr.filter(item => {
//     if(item % 2 === 0){
//         return true
//     }else{
//         return false
//     }
// })
// 还可以简写为
// const result = arr.filter(item => item % 2 === 0)

console.log(result)

6.函数参数的默认值设置

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

function add(a, b, c=10){ // 具有默认值的参数，一般位置要靠后
    return a + b + c
}
console.log(add(1,2,))

可以与解构赋值一起使用

function connect({host='127.0.0.1', port, username, password}){
    console.log(host, port)
    console.log(username, password)
}

connect({
    port: 3306,
    username: 'root',
    password: 'root',
})

7.rest参数

ES6引入rest参数，用于获取函数的实参，用来代替arguments

// ES5获取实参的方式
function printStudent(){
    console.log(arguments) // arguments为一个对象
}
printStudent('LiMing','HanMeimei')

// ES6获取实参的方式
function printFriend(friend1, friend2, ...rest){ // rest参数必须放在形参列表最后，否则会报错
    console.log(friend1) 
    console.log(friend2) 
    console.log(rest) // 得到一个数组，可以使用数组api
}
printFriend('小猫','小狗','兔子','鸭子')
// 小猫
// 小狗
// ['兔子','鸭子']

8.扩展运算符

...能将「数组」转为逗号分隔的「参数序列」
注：虽然形式与rest参数类似，但是rest参数是用在函数定义时的形参位置，扩展运算符是用在函数实际调用时的实参位置

const STUDENTS = ['小明','小芳','小红']
function printStudent(){
    console.log(arguments)
}

printStudent(STUDENTS) // 参数为一个数组，数组内包含3个元素
printStudent(...STUDENTS) // 参数为3个元素

应用场景：

数组的合并

const STUDENTS1 = ['小明','小芳','小红']
const STUDENTS2 = ['小吴', '小王']

// es5写法
const STUDENTS_ES5 = STUDENTS1.concat(STUDENTS2)
// es6写法
const STUDENTS_ES6 = [...STUDENTS1, ...STUDENTS2]

console.log('es5------',STUDENTS_ES5)
console.log('es6------',STUDENTS_ES6)

数组的克隆

const STUDENTS1 = ['小明','小芳','小红']

const PUPIL = [...STUDENTS1] // 注意：如果数组内元素是引用类型，拷贝的是内存地址，为浅拷贝
console.log('PUPIL----',PUPIL)

将伪数组转为真正的数组

const divs = document.querySelectorAll('div')
console.log(divs) // 此处得到的divs实际是一个对象

const divsArr = [...divs] // 将其转为真正的数组，从而可以使用数组的api譬如filter、map
console.log(divsArr)

9.Symbol

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第7种数据类型，是一个类似字符串的数据类型

Symbol特点

Symbol的值是唯一的，用来解决命名冲突的问题
Symbol值不能与其他数据进行运算，也不能与自己进行运算，譬如+、-、*、/、比较运算
Symbol定义的对象属性不能使用for…in遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名

创建Symbol

通过let s2 = Symbol('张三') 的方式创建Symbol，'张三’作为Symbol描述，作用相当于注释，这种方式创建的Symbol，即使传入的描述一致，但实际返回的值是不同的

// 创建Symbol
let s = Symbol()
console.log(s,typeof s) // Symbol() "symbol"

let s2 = Symbol('张三') // '张三'作为Symbol描述，作用相当于注释
let s3 = Symbol('张三') // 即使传入的描述一致，但实际返回的值是不同的
console.log(s2 === s3) // false

通过Symbol.for()创建Symbol，这种方式创建Symbol，传入的描述一致，实际返回的值也一致，可以得到唯一的Symbol值

// Symbol.for创建Symbol
let s4 = Symbol.for('张三')
let s5 = Symbol.for('张三')
console.log(s4 === s5) // true

Symbol使用场景

给对象添加属性和方法。由于Symbol值具有唯一性，所以可以很安全地把属性和方法加入对象中，如下所示

let game = {
    up: 'upp',
    down: 'doown'
}

let methods = {
    up: Symbol(),
    down: Symbol(),
}

// 添加方法
game[methods.up] = function(){
    console.log('up up up')
}
game[methods.down] = function(){
    console.log('down down down')
}

console.log('game----', game)
// 调用
game[methods.up]()

let youxi = {
    name: '狼人杀',
    [Symbol('say')]: function(){ // 此处不能直接写 Symbol('say'): function(){...},因为Symbol('say')是动态的，和上面固定的'name'不一样
        console.log('发言')
    }
}

Symbol内置值

ES6除了定义自己使用的Symbol值以外，还提供了11个内置的Symbol值，指向语言内部使用的方法,比如

Symbol.hasInstance
当其他对象使用instanceof运算符，判断是否为该对象的实例时，会调用这个方法

 class Person{
        static [Symbol.hasInstance](param){
            console.log('param----', param)
            console.log('检测类型')
        }
    }

    let o = {}

    console.log(o instanceof Person)
    // param---- {}
    // 检测类型
    // false

Symbol.isConcatSpreadable
对象的Symbol.isConcatSpreadable属性等于一个bool值，表示该对象用于Array.prototype()时，是否可以展开

const arr1 = [1,2,3]
const arr2 = [4,5,6]
arr2[Symbol.isConcatSpreadable] = false // arr2不可展开
const arr = arr1.concat(arr2)
console.log(arr) // [1,2,3,[4,5,6]]

Symbol.unscopables
该对象指定了使用with关键字时，哪些属性会被with环境排除
Symbol.match
当执行str.match(myObject)时，如果该属性存在，会调用它，返回该方法的返回值
Symbol.replace
当该对象被str.replace(myObject)方法调用时，会返回该方法的返回值
Symbol.search
当该对象被str.search(myObject)方法调用时，会返回该方法的返回值
Symbol.split
当该对象被str.split(myObject)方法调用时，会返回该方法的返回值
Symbol.iterator
对象进行for ... of循环时，会调用Symbol.iterator方法，返回该对象的默认遍历器
Symbol.toPrimitive
该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值
Symbol.toStringTag
在该对象上调用toString方法时，返回该方法的返回值
Symbol.species
创建衍生对象时，会使用该属性

10.迭代器

迭代器（iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署iterator接口，就可以完成遍历操作

ES6创造了一种新的遍历命令for...of循环，iterator接口主要供for...of消费
注：for...of遍历的是键值，for...in遍历的是键名
for...of不能对属性值进行修改，forEach()可以

原生具备iterator接口的数据（可用for...of遍历）

Array
Arguments
Set
Map
String
TypedArray
NodeList

工作原理：

创建一个指针对象，指向当前数据结构的起始位置
第一次调用对象的next方法，指针自动指向数据结构的第一个成员
接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
每调用next方法返回一个包含value和done属性的对象，done属性表示遍历是否结束

const food = ['鱼香肉丝','糖醋里脊','酸菜鱼']
for(let item of food){
    console.log(item)
}

let iterator = food[Symbol.iterator]()

console.log(iterator.next()) // {value: "鱼香肉丝", done: false}
console.log(iterator.next()) // {value: "糖醋里脊", done: false}
console.log(iterator.next()) // {value: "酸菜鱼", done: false}
console.log(iterator.next()) // {value: undefined, done: true} true 表示遍历已经结束

注：需要自定义遍历数据的时候，要想到迭代器

迭代器应用-自定义遍历数据(即自己手动实现一个迭代器)

// 声明一个对象
const school = {
    name: '三中',
    students: [
        'LiMing',
        'HanMeimei',
        'WangFang',
    ],
    [Symbol.iterator](){
        // 声明一个索引变量
        let index = 0
        return {
            next: ()=>{
                if(index < this.students.length){
                // if(index < 3){
                    const result = {value: this.students[index], done: false}
                    // 下标自增
                    index++
                    // 返回结果
                    return result
                }else{
                    return {value: undefined, done: true}
                }
            }
        }
    }
}

// 遍历这个对象
for(let item of school){
    console.log(item)
}

11.生成器

生成器本身是一个特殊的函数，生成器函数是ES6提供的一种异步编程解决方案，语法行为与传统函数不同

执行生成器函数，返回的是一个迭代器对象，通过iterator.next()调用执行函数内语句

function * gen(){
    console.log('hello generator')
}
let iterator = gen() // 返回的是一个迭代器对象
// console.log(iterator)
// 通过.next()调用执行函数内语句
iterator.next() // hello generator

yield是函数代码的分隔符，结合调用iterator.next()方法，实现函数gen1的语句的分段执行

function * gen1(){
    console.log('--- 1 ---')
    yield '耳朵' // 函数代码的分隔符
    console.log('--- 2 ---')
    yield '尾巴'
    console.log('--- 3 ---')
}

let iterator1 = gen1()
iterator1.next() // --- 1 ---
iterator1.next() // --- 2 ---
iterator1.next() // --- 3 ---
// 通过调用.next()方法，实现函数gen1的语句的分段执行

使用for...of遍历函数执行后返回的迭代器对象，每一次遍历的item为yield后的表达式或者自变量的值

function * gen1(){
    yield '耳朵' // 函数代码的分隔符
    yield '尾巴'
}

// 遍历，每一次遍历的item为yield后的表达式或者自变量的值
for(let item of gen1()){
    console.log(item)
}
// 执行结果：
// 耳朵
// 尾巴

// 注：next调用和for...of调用同时存在，只会支持最先的一个

生成器函数的参数传递

function * gen(args){
    console.log(args) // 'aaa'
    let one = yield 111
    console.log(one) // 'bbb'

    let two = yield 222
    console.log(two) // 'ccc'
    
    let three = yield 333
    console.log(three)
}

// 执行生成器函数获取迭代器对象
let iterator = gen('aaa')

console.log(iterator.next()) // {value: 111, done: false}
// next方法可以传入实参，传入的实参会作为上一个yield后返回的结果
console.log(iterator.next('bbb')) // {value: 222, done: false}
console.log(iterator.next('ccc')) // {value: 333, done: false}
console.log(iterator.next('ddd')) // {value: undefined, done: true}

生成器函数实例1:
1s后控制台输出111 --> 2s后控制台输出222 --> 3s后控制台输出333 ==> 总计耗时6s

   // 异步编程，如文件操作、网络请求、数据库操作
    // 1s后控制台输出111 --> 2s后控制台输出222 --> 3s后控制台输出333  ==> 总计耗时6s

    // 用生成器函数实现
    function one (){
        setTimeout(()=>{
            console.log(111)
            iterator.next()
        }, 1000)
    }

    function two (){
        setTimeout(()=>{
            console.log(222)
            iterator.next()
        }, 2000)
    }

    function three (){
        setTimeout(()=>{
            console.log(333)
        }, 3000)
    }

    function * gen(){
        yield one()
        yield two()
        yield three()
    }

    let iterator = gen()
    iterator.next()
    

    // 以下为回调地域做法
    // setTimeout(()=>{
    //     console.log(111)
    //     setTimeout(()=>{
    //         console.log(222)
    //         setTimeout(()=>{
    //             console.log(333)
    //         }, 3000)
    //     }, 2000)
    // }, 1000)

生成器函数实例2:
模拟获取用户数据 --> 订单数据 --> 商品数据

// 模拟获取 用户数据 --> 订单数据 --> 商品数据
function getUsers(){
    setTimeout(()=>{
        let data = '用户数据'
        iterator.next(data) // 相当于把得到的数据，传回users
    }, 1000)
}

function getOrders(){
    setTimeout(()=>{
        let data = '订单数据'
        iterator.next(data)
    }, 2000)
}

function getGoods(){
    setTimeout(()=>{
        let data = '商品数据'
        iterator.next(data)
    },3000)
}

// 定义生成器函数
function * gen (){
    let users = yield getUsers()
    console.log(users) // 用户数据

    let orders = yield getOrders()
    console.log(orders) // 订单数据

    let goods = yield getGoods()
    console.log(goods) // 商品数据
}

// 调用生成器函数，获取迭代器对象
let iterator = gen()
iterator.next()

12.Promise

Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果

Promise构造函数：Promise(excutor){}
Promise.prototype.then方法
Promise.prototype.catch方法

基本使用

// 实例化Promise对象
const p = new Promise(function(resolve, reject){
    setTimeout(()=>{
        let data = '数据库中的用户数据'
        // resolve(data)
        let err = '数据读取失败'
        reject(err)
    },1000)
})

p.then((value)=>{
    console.log('enter success')
    console.log(value)
},err=>{
    console.log('enter failed')
    console.log(err)
})

Promise封装读取文件

// 1.引入fs模块 fileSystem 文件系统
const fs = require('fs')

// 2.调用方法读取文件
// fs.readFile('./resource/file.md', (err, data)=>{ // data是一个buffer,用来存储2进制文件，用法跟数组类似
//     // 如果失败，抛出错误
//     if(err) throw err
//     // 如果成功，读取文件
//     console.log(data.toString())
// })

// 3.使用promise封装
const p = new Promise(function(resolve, reject){
    fs.readFile('./resource/file.md', (err,data)=>{
        if(err){
            reject(err)
        }else{
            resolve(data.toString())
        }
    })
})
p.then((value)=>{
    console.log(value)
},(reason)=>{
    console.error(reason)
})

Promise封装ajax

// 接口地址：https://api.apiopen.top/getJoke
// 原生ajax发送请求
// // 1.创建对象
// const xhr = new XMLHttpRequest()

// // 2.初始化
// xhr.open('GET', 'https://api.apiopen.top/getJoke')

// // 3.发送
// xhr.send()

// // 4.绑定事件
// xhr.onreadystatechange = function(){
//     // 判断阶段
//     if(xhr.readyState === 4 ){
//         // 判断响应状态码
//         if(xhr.status >= 200 && xhr.status < 300){
//             // 如果状态码为成功，打印返回结果
//             console.log(xhr.response)
//         }else{
//             // 如果失败
//             console.error(xhr.status)
//         }
//     }
// }


// promise封装发送ajax请求
const p = new Promise((resolve, reject)=>{
    const xhr = new XMLHttpRequest()
    xhr.open('GET', 'https://api.apiopen.top/getJoke')
    xhr.send()
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status >=200 && xhr.status < 300){
                resolve(xhr.response)
            }else{
                reject(xhr.status)
            }
        }
    }
})
p.then((value)=>{
    console.log(value)
},(reason)=>{
    console.log(reason)
})

Promise.prototype.then方法

then方法的返回结果，依然是一个promise对象，其状态的成功或失败，由then里的回调函数的执行结果决定

如果回调函数中返回的结果是非promise类型的属性，状态为成功，且return的结果就是该promise成功后resolve的值
注: 如果没有return，则默认返回undefined，所以状态依然为成功
如果返回的结果是promise对象，则该promise对象的状态就是then返回的promise对象的状态
如果是抛出一个值（如一个错误），则状态为失败

const p = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve('用户数据')
        // reject('出错啦')
    }, 1000)
})

const result = p.then((value)=>{ // p执行resolve后，状态为成功，执行第一个函数
    console.log(value )
    // 1.返回非promise对象的情况
    // return 233 // 233
    // 2.返回promise对象
    return new Promise((resolve, reject)=>{
        resolve('ok') // 状态为成功，值=ok
        // reject('error!!') // 状态为失败

    })
    // 3.抛出错误
    // throw new Error('error!!!')
},(reason)=>{ // p执行reject后，状态为失败，执行第二个函数
    console.warn(reason)
})

// then方法的返回结果，依然是一个promise对象，其状态的成功或失败，由then里的回调函数的执行结果决定
console.log(result)

then方法的这个特性，决定了then方法可以进行链式调用

const p = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve('用户数据')
        // reject('出错啦')
    }, 1000)
})

// 链式调用
p.then((value)={
    // ...
}).then((value)=>{
    // ...
})

通过链式调用实现按顺序读取文件

// 1.引入fs模块 fileSystem 文件系统
const fs = require('fs')

// 使用传统方式实现 读取文件1 => 读取文件2 => 读取文件3
// fs.readFile('./resource/file1.md', (err, data)=>{
//     let data1 = data.toString()
//     fs.readFile('./resource/file2.md', (err,data)=>{
//         let data2 = data.toString()
//         fs.readFile('./resource/file3.md', (err,data)=>{
//             let data3 = data.toString()
//             let data_all = {data1,data2,data3}
//             console.log(data_all)
//         })
//     })
// })

// 使用promise方式实现 读取文件1 => 读取文件2 => 读取文件3
const p = new Promise((resolve, reject)=>{
    fs.readFile('./resource/file1.md', (err,data)=>{
        resolve(data)
    })
})

p.then((value) => {
    return new Promise((resolve, reject)=>{
        fs.readFile('./resource/file2.md',(err,data)=>{
            let data_all =  {
                data1: value.toString(),
                data2: data.toString()
            }
            resolve(data_all)
        })
    })
}).then((value)=>{
    return new Promise((resolve,reject)=>{
        fs.readFile('./resource/file3.md', (err,data)=>{
            value.data3 = data.toString()
            resolve(value)
        })
    })
}).then(value=>{
    console.log(value)
    //  { data1: '# 这是文件1', data2: '# 这是文件2', data3: '# 这是文件3' }
})

Promise对象catch方法

用于指定promise对象失败的回调

const p = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        // 设置p对象的状态为失败
        reject('opps error')
    },1000)
})

// p.then((value)=>{}, (reason)=>{
//     console.error(reason)
// })

// 相当于then里面的第二个回调函数
p.catch((reason)=>{
    console.warn(reason)
})

13.set（集合）

ES6提供了新的数据结构set(集合)，本质上是一个对象。它类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用「扩展运算符」和for...of进行遍历

集合的属性和方法

size，返回集合的元素个数
add，增加一个新元素，返回当前集合
delete，删除元素，返回Boolean值
has，检测集合中是否包含某个元素，返回Boolean值

let s = new Set(['风声','雨声','读书声','风声']) // 可以接受可迭代数据，一般传入数组
// '风声','雨声','读书声'

let size = s.size // 查看元素个数
let has = s.has('读书声') // 检测是否含该元素 true
s.add('水声') // 添加元素
s.delete('读书声') // 删除元素
let has2 = s.has('读书声') // 检测是否含该元素 false

// 遍历集合
for(let item of s){
    console.log(item)
}
s.clear() // 清空集合

console.log(s, has,has2, typeof s)

set的应用

数组去重

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
// 数组去重
let result = [...new Set(arr)]
console.log(result) // [1, 2, 3, 4, 5]

求交集

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
let arr2 = [4, 5, 6, 5, 6]

// 求交集
let result = [...new Set(arr)].filter(item => { // 对arr去重并进行遍历
    let s2 = new Set(arr2) // 将arr2变为元素不重复的集合
    if(s2.has(item)){ // 如果元素存在s2中
        return true
    }else{
        return false
    }

})
console.log(result) // [4, 5]

// 简化写法
let result2 = [...new Set(arr)].filter(item => new Set(arr2).has(item))
console.log(result2)

求并集

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
let arr2 = [4, 5, 6, 5, 6]

// 求并集：连接两个数组 => 转为元素不重复的集合 => 转为数组
let union = [...new Set([...arr, ...arr2])]
console.log(union)
// [1, 2, 3, 4, 5, 6]

求差集

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
let arr2 = [4, 5, 6, 5, 6]

// 求差集-arr对arr2求差集，即求arr里面有但是arr2里没有的元素，相当于求交集的逆运算
let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)))
console.log(diff) // [1, 2, 3]

14.Map

ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。Map也实现了iterator接口，所以可以使用「扩展运算符」和for...of进行遍历
Map的属性和方法：

size，返回Map的元素个数
set，增加一个新元素，返回当前Map
get，返回键名对象的键值
has，检测Map中是否包含某个元素，返回Boolean值
clear，清空集合，返回undefined

// 声明Map
let m = new Map()

// 添加元素
m.set('name','LiMing') // 键名，键值
m.set('tell',function(){
    console.log('I am LiMing ')
})
let friend = {
    school: '三中'
}
m.set(friend,['小吴','小王','小芳'])

// 删除元素
m.delete('tell')

// 获取元素
let friends = m.get(friend)
console.log(friends)

// 获取元素个数
let size = m.size
console.log(size)

// 遍历Map
for(let item of m){
    console.log('item---',item)
    // 每一个item都是一个数组，第一个元素为键，第二个元素为值
}

// 清空Map
m.clear()
console.log(m)
console.log(typeof m)

ES6 ES span class token javascript 前端

有关关于ES6新特性的总结的更多相关文章

使用canal同步MySQL数据到ES - 2
文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目，Java开发。基于数据库增量日志解析，提供增量数据订阅&消费。Git地址：https://github.co
SPI接收数据异常问题总结 - 2
SPI接收数据左移一位问题目录SPI接收数据左移一位问题一、问题描述二、问题分析三、探究原理四、经验总结最近在工作在学习调试SPI的过程中遇到一个问题——接收数据整体向左移了一位（1bit）。SPI数据收发是数据交换，因此接收数据时从第二个字节开始才是有效数据，也就是数据整体向右移一个字节（1byte）。请教前辈之后也没有得到解决，通过在网上查阅前人经验终于解决问题，所以写一个避坑经验总结。实际背景：MCU与一款芯片使用spi通信，MCU作为主机，芯片作为从机。这款芯片采用的是它规定的六线SPI，多了两根线：RDY和INT，这样从机就可以主动请求主机给主机发送数据了。一、问题描述根据从机芯片手
ES基础入门 - 2
ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear
ruby-on-rails - 关于 Ruby 的一般问题 - 2
我在我的rails应用程序中安装了来自github.com的acts_as_versioned插件，但有一段代码我不完全理解，我希望有人能帮我解决这个问题class_eval我知道block内的方法(或任何它是什么)被定义为类内的实例方法，但我在插件的任何地方都找不到定义为常量的CLASS_METHODS，而且我也不确定是什么here，并且有问题的代码从lib/acts_as_versioned.rb的第199行开始。如果有人愿意告诉我这里的内幕，我将不胜感激。谢谢-C 最佳答案这是一个异端。http://en.wikipedia
ruby - 我怎样才能更好地了解/了解更多关于 Ruby 的知识？ - 2
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我最近开始学习Ruby，这是我的第一门编程语言。我对语法感到满意，并且我已经完成了许多只教授相同基础知识的教程。我已经写了一些小程序(包括我自己的数组排序方法，在有人告诉我谷歌“冒泡排序”之前我认为它非常聪明)，但我觉得我需要尝试更大更难的东西来理解更多关于Ruby.关于如何执行此操作的任何想法？
ruby - 关于 Ruby 中 Dir[] 和 File.join() 的混淆 - 2
我在Ruby中遇到了一个关于Dir[]和File.join()的简单程序，blobs_dir='/path/to/dir'Dir[File.join(blobs_dir,"**","*")].eachdo|file|FileUtils.rm_rf(file)ifFile.symlink?(file)我有两个困惑:首先，File.join(@blobs_dir,"**","*")中的第二个和第三个参数是什么意思？其次，Dir[]在Ruby中有什么用？我只知道它等价于Dir.glob()，但是，我对Dir.glob()确实不是很清楚。最佳答案
elasticsearch源码关于TransportSearchAction【阶段三】 - 2
1.回顾.TransportServicepublicclassTransportServiceextendsAbstractLifecycleComponentTransportService：方法：1publicfinalTextendsTransportResponse>voidsendRequest(finalTransport.Connectionconnection,finalStringaction,finalTransportRequestrequest,finalTransportRequestOptionsoptions,TransportResponseHandlerT>
Simulink方法总结和避坑指南（一）——Simulink入门与基本调试方法 - 2
文章目录一、项目场景二、基本模块原理与调试方法分析——信源部分：三、信号处理部分和显示部分：四、基本的通信链路搭建：四、特殊模块：interpretedMATLABfunction：五、总结和坑点提醒一、项目场景最近一个任务是使用simulink搭建一个MIMO串扰消除的链路，并用实际收到的数据进行测试，在搭建的过程中也遇到了不少的问题（当然这比vivado里面的debug好不知道多少倍）。准备趁着这个机会，先以一个很基本的通信链路对simulink基础和相关的debug方法进行总结。在本篇中，主要记录simulink的基本原理和基本的SISO通信传输链路（QPSK方式），计划在下篇记
关于Qt程序打包后运行库依赖的常见问题分析及解决方法 - 2
目录一.大致如下常见问题：（1）找不到程序所依赖的Qt库version`Qt_5'notfound(requiredby（2）CouldnotLoadtheQtplatformplugin"xcb"in""eventhoughitwasfound（3）打包到在不同的linux系统下，或者打包到高版本的相同系统下，运行程序时，直接提示段错误即segmentationfault，或者Illegalinstruction(coredumped)非法指令（4）ldd应用程序或者库，查看运行所依赖的库时，直接报段错误二.问题逐个分析，得出解决方法：（1）找不到程序所依赖的Qt库version`Qt_5'
ruby - 关于 Ruby/ChefSpec 编码风格的反馈 - 2
我是Ruby的新手，但过去两周我一直在对Chef测试进行大量研究。该测试使用ChefSpec和Fauxhai，但它看起来不是很“像ruby”，我希望社区能给我一些编码风格的建议。有没有更好的方法来编写这样的嵌套循环？Recipe/foo/recipes/default.rbpackage"foo"doaction:installendRecipe/foo/spec/default_spec.rbrequire'chefspec'describe'foo::default'doplatforms={"debian"=>['6.0.5'],"ubuntu"=>['12.04','10.04