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]

ESM 模块化

历史上，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 去解析对应的文件，因为有些文件浏览器是不意识的。这些常识前面都会讲到。

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