其他分享
首页 > 其他分享> > 【前端基础】Es6新特性(一)

【前端基础】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方法
        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)]
    <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是将其他对象的属性加到第一个参数的对象,这个是合成一个新的对象

⑩ 数组优化
    <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的时候需要使用{}进行导入

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

标签:Es6,arr,console,log,前端,特性,let,age,name
来源: https://www.cnblogs.com/tod4/p/16597277.html