【前端基础】（一）Es6新特性

1 Es6

全称为ECMAScript是浏览器脚本语言的规范，而各种我们熟知的js语言则是规范的具体体现。

1.1 Es6新特性

① let与var

• 作用域

    <script>
        {
            var a = 1;
            let b = 2;
        }
        console.log(a)
        console.log(b) // b is not defined
    </script>

var声明的变量往往可以跨域，let则有严格的作用域

• 声明次数

    <script>
        var m = 1
        var m = 2
        let n = 1
        let n = 2
        console.log(m)
        console.log(n) // Identifier 'n' has already been declared
    </script>

let只能声明一次而var可以声明多次

• 变量提升

    <script>
        console.log(x) // undefined
        var x = 1
        console.log(y) // Cannot access 'y' before initialization
        let y = 2
    </script>

未经声明的变量使用，var声明的变量会输出为undefined

let则会报错

② const声明常量（只读变量）

    <script>
        const a = 1
        console.log(a)
        a = 2 // Assignment to constant variable.
    </script>

③ 解构表达式

数组解构

    <script>
        const arr = [1, 2, 3]
        const [a, b, c] = arr
        console.log(a, b, c)
    </script>

对象解构

    <script>
        const person = {
            name: "jack",
            age: 18,
            language: ["java", "python", "c"]
        }
        const {name:mingzi, age, language} = person
        console.log(mingzi, age, language) // jack 18 (3) ['java', 'python', 'c']
    </script>

④ 字符串扩展

startsWith()

endWith()

includes()

⑤ 字符串模板

使用反引号 `` 可以声明多行字符串

⑥ 字符串插入变量和表达式

在字符串中使用${}可以使用变量和表达式

⑦ 默认参数

在函数参数上赋值，则为空的时候启用该默认值

⑧ 不定参数

function fun(...value) value表示多个参数的数组形参

⑦ 箭头函数

箭头前面的表示参数，后面表示函数体

    <script>
        let print = (msg) => {console.log(msg)}

        print(123)
    </script>

函数参数只有一个值可以省略括号，只有一个返回值则可以省略大括号。

    <script>
        let add = a => ++a
        console.log(add(1)) // 2
    </script>

箭头函数加对象解构

    <script>
        const person = {
            name: "jack",
            age: 18,
            language: ["java", "python", "c"]
        }

        var hello = ({name:mingzi}) => console.log("hello", mingzi)
        hello(person) // hello jack
    </script>

⑨对象优化

Api方法

• Object.keys() 获取对象键

• Object.values() 获取对象值

• Object.entries() 获取对象键值对

        const person = {
            name: "jack",
            age: 18,
            language: ["java", "python", "c"]
        }

        console.log(Object.keys(person)) // ['name', 'age', 'language']
        console.log(Object.values(person)) // ['jack', 18, Array(3)]
        console.log(Object.entries(person)) // 0: (2) ['name', 'jack']
                                            // 1: (2) ['age', 18]
                                            // 2: (2) ['language', Array(3)]

• Object.assign()合并对象

    <script>
        target = {a:1}
        source1 = {b:2}
        source2 = {c:3}

        target = Object.assign(target, source1, source2)
        console.log(target) // {a: 1, b: 2, c: 3}
    </script>

• 声明对象名的简写

当属性名与变量名一致时，只需要写一个即可

• 对象的函数属性简写

箭头函数尽量不要使用this指针

• 对象的扩展运算符 ...：表示深度拷贝对象，即拷贝对象的全部属性

    <script>
        let person = {
            name: 'jack',
            age: 18,
            language: ['java', 'python', 'c']
        }
        let person1 = {...person}
        console.log(person1) // {name: 'jack', age: 18, language: Array(3)}
    </script>

• 合并对象

        let name = {name: 'jack'}
        let age = {age: 18}

        let person = {...name, ...age}
        console.log(person) // {name: 'jack', age: 18}

区别于Object.assign是将其他对象的属性加到第一个参数的对象，这个是合成一个新的对象

⑩ 数组优化

• map：可以传入一个函数，以每一个数组元素作为参数返回其处理之后的值

• reduce：传入一个函数和一个值作为初始元素值，然后函数的参数分别为上一个元素和当前处理元素

• ☆filter

    <script>
        let arr = ['1', '20', '-5', '3']
        // arr = arr.map(item => {
        //     return item * 2
        // })
        arr = arr.map(item => item * 2)
        console.log(arr) //  [2, 40, -10, 6]
    </script>

        let arr = ['1', '20', '-5', '3']
        arr = arr.reduce((a, b) => {
            return a * 1 + b * 1
        }, 100)
        console.log(arr) // 119

表示不断将上个元素加到当前元素，最开始元素值为100，故结果为119

    <script>
        let arr = ['1', '20', '-5', '3']
        arr = arr.filter(item => {
            if (item == '1')
                return false;
            return true;
        })
        console.log(arr)
    </script>

表示删除1

1.2 ☆promise异步编排

promise可以封装异步操作，特别重要单独放到下面讲了。

1.3 Es6模块化

模块化：模块化就是把代码进行拆分，方便反复利用。类似于java中的导包，要使用一个包必须要导包。而JS中没有包的概念，取而代之的是模块。

模块的主要操作包括：

export：暴露，不仅可以暴露对象，一切js变量都可以导出，比如基本类型变量、函数、数组、对象。

js、css、图像等等静态资源可以直接使用不需要暴露

import：导入

1.3.1 三种暴露方法

三种暴露方法的结果都是暴露js文件中的对象给其他地方使用。

默认暴露：直接将一个对象暴露

export default {
     ...
}

一个js文件中只能有一个export default

暴露出一个对象,直接就可以拿来使用，且在import的时候任意命名

分别暴露：将多个对象放在一起进行暴露，在import的时候需要使用{}进行导入

整体暴露：整体(统一)暴露是一个对象这个对象是我们自己需要写的，把所有的需要暴露的变量写到我们的对象当中