关于前端:ES6-新特性都哪些

原文链接：https://note.noxussj.top/?source=sifo

let

块级作用域，也就是在同一个作用域内，不可能反复申明同一个变量。

    let name = 'xiaoming'

const

在 let 的根底上，申明的变量不可能被从新赋值。

    const name = 'xiaoming'

解构赋值

简化对象获取属性、简化数组获取元素的写法。

    const [a, b, c] = [1, 2, 3]

    const {name, age} = {name: 'xiaoming', age: 18}

扩大运算符

把对象的属性、数组的元素拆散成单个。

    const arr = [1, 2, 3]
    const arr2 = [...arr]

    const obj = {name: 'xiaoming', age: 18}
    const obj2 = {...obj}

模板字符串

简化字符串拼接 + 写法。

    const name = 'xiaoming'

    const res = `i am ${name}`

箭头函数

简化 function 写法，没有 this 指向。

    const fn = (name) => {return name}

    const fn = (name) => name

for…of

循环语句（只能遍历数组），与 for…in 相似，for…in 是返回 key，而 for…of 是返回 value。

    for (const value of arr) {console.log(value)
    }

Promise

异步函数，提早返回函数后果。

    const score = 80
    
    const p1 = new Promise((resolve, reject) => {if (score > 60) {resolve('考试通过了')
        } else {reject('考试不通过')
        }
    })
    
    // 胜利
    p1.then((res) => {console.log(res) // 考试通过了
    })
    
    // 失败
    p1.then((res) => {console.log(res) // 考试不通过
    })

Async、Await

异步函数，临时能够了解为是 Promise 的语法糖（但理论不是），语法糖就了解是简化代码的意思。次要是让异步的代码写起来更像同步代码。

    async function fn() {const res = await p1}

Class

简化应用 function 实现类（构造函数）的写法。

    class Person {constructor() {}
        myName() {}
    }

ESM 模块化（import、export）

导出（a.js）。

    const name = 'xiaoming'

    export {name}

导入（b.js）。

    import {name} from './a.js'

Map

数据结构字典，是一种无序且惟一的数据结构。

    const map = new Map()

    map.set('name', 'xiaoming')

Set

数据结构汇合，是一种无序且惟一的数据结构。

    const set = new Set()

    set.add(1)

includes()

检测数组中是否蕴含某个元素。

    const arr = ['xiaoming', 'libai', 'anqila']
    
    const res1 = arr.includes('xiaoming') // true
    
    const res2 = arr.includes('sunshangxiang') // false

find()

查找数组中满足条件的那一项。

    const arr = [
        {
            name: 'xiaoming',
            age: 16
        },
        {
            name: 'libai',
            age: 17
        },
        {
            name: 'anqila',
            age: 18
        }
    ]
    
    const res = arr.find((item) => item.name === 'xiaoming') // {name: 'xiaoming', age: 16}

findIndex()

查找数据中满足条件的那一项的索引。

    const arr = [
        {
            name: 'xiaoming',
            age: 16
        },
        {
            name: 'libai',
            age: 17
        },
        {
            name: 'anqila',
            age: 18
        }
    ]
    
    const res = arr.findIndex((item) => item.name === 'xiaoming') // 0

map()

遍历数组。

    const arr = ['xiaoming', 'libai', 'anqila']

    arr.map((item, index) => {console.log(item, index) // 别离打印 xiaoming 0、libai 1、anqila 2
    })

fill()

遍历数组。

    new Array(3).fill('xiaoming') // ['xiaoming', 'xiaoming', 'xiaoming']

sort()

数组排序。

    const arr = ['b', 'a', 'c']

    const arr2 = arr.sort((a, b) => (a > b ? 1 : -1)) // ['a', 'b', 'c']

filter()

数组过滤。

    const arr = ['b', 'a', 'c']

    const arr2 = arr.filter((x) => x !== 'a') // ['b', 'c']

some()

判断数组中任意一项满足条件

    const arr = ['b', 'a', 'c']

    const res = arr.some((x) => x === 'a') // true

every()

判断数组中所有项满足条件

    const arr = ['b', 'a', 'c']

    const res = arr.every((x) => x === 'a') // false

Object.assign()

对象浅拷贝。

    const obj = {
        name: 'xiaoming',
        age: 18
    }
    
    const obj2 = Object.assign({}, obj)
    
    obj2.name = 'libai'
    
    console.log(obj.name) // 'xiaoming'

Object.keys()

提取对象的所有键组成一个数组返回。

    const obj = {
        name: 'xiaoming',
        age: 18
    }

    const keys = Object.keys(obj) // ['name', 'age']

Object.values()

提取对象的所有值组成一个数组返回。

    const obj = {
        name: 'xiaoming',
        age: 18
    }

    const values = Object.values(obj) // ['xiaoming', 18]

历史上，JavaScript 始终没有模块（module）体系，无奈将一个大程序拆分成相互依赖的小文件，再用简略的办法拼装起来。其余语言都有这项性能。ES6 在语言规范的层面上，实现了模块性能，而且实现得相当简略。

默认导出

规范语法：export default $variable

解析：其中 $variable 指的是要导出的变量名称。

    // index.js
    
    const person = {
        name: 'xiaoming',
        age: 18
    }
    
    export default person

按需导出

规范语法：export {$variable1, $variable2}

解析：其中 $variable1 $variable2 指的是要导出的变量名称，导出多个的写法用逗号分隔。

    // index2.js
    
    const name = 'xiaoming'
    const age = 18
    
    export {name, age}

默认导入

规范语法：import $variable from $path

解析：其中 $variable 指的是要导入的变量名称，名称是能够自定义的，并非要求和导出的时候一样，$path 指的是导入的文件门路。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    
    <body>
        <script type="module">
            import person from 'index.js'
    
            console.log(person)
        </script>
    </body>
    
    </html>

按需导入

规范语法：import {$variable1, $variable2} from $path

解析：其中 $variable1 $variable2 指的是要导入的变量名称，名称必须和导出时统一，$path 指的是导入的文件门路。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
        </head>
        <body>
            <script type="module">
                import {name} from 'index2.js'
    
                console.log(name)
            </script>
        </body>
    </html>

总结

当然不止是能导入 .js 文件，还能导入 .scss .vue .png 等等资源文件，基本上都须要搭配 webpack 中的 loader 去解析对应的文件，因为有些文件浏览器是不意识的。这些常识前面都会讲到。