关于ES6

Posted su20110702048

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于ES6相关的知识,希望对你有一定的参考价值。

一.变量声明const和let

  1. 变量提升:在ES6之前,我们都是用var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:
    function aa() {
        if(flag) {
            var test = ‘hello man‘
        } else {
            console.log(test)
        }
      }
    //等价于
    function aa() {
        var test // 变量提升,函数最顶部
        if(flag) {
            test = ‘hello man‘
        } else {
            //此处访问 test 值为 undefined
            console.log(test)
        }
        //此处访问 test 值为 undefined
      }
    //所以不用关心flag是否为 true or false。实际上,无论如何 test 都会被创建声明。

     

  2. 通常用 let 和 const 来声明,let 表示变量、const 表示常量。let 和 const 都是块级作用域。即:在一个函数内部或者在一个代码块内部。说白了只要在{}花括号内的代码块即可以认为 let 和 const 的作用域。

     function aa() {
        if(flag) {
           let test = ‘hello man‘
        } else {
            //test 在此处访问不到
            console.log(test)
        }
      //let 的作用域是在它所在当前代码块,但不会被提升到当前函数的最顶部。

    const 声明的变量必须提供一个值,而且会被认为是常量,意思就是它的值被设置完成后就不能再修改了。

    const name = ‘aa‘;
    name = ‘bb‘
    //再次赋值会报错
    //如果const的是一个对象,对象不可变,但是对象所包含的值是可以被修改的
    //就是对象所指的地址不能改变,变量成员可以修改
    const student = { name: ‘cc‘ }
    // 没毛病
    student.name = ‘yy‘
    //会报错
    student  = { name: ‘yy‘ }

     

  3. TDZ暂时性死区,JS引擎扫描代码时,如果发现变量声明,用 var 声明变量时会将声明提升到函数或全局作用域的顶部。但是 let 或者 const,会将声明关进一个小黑屋也是TDZ(暂时性死区),只有执行到变量声明这句语句时,变量才会从小黑屋被放出来,才能安全使用这个变量。

    {
            console.log(value) // 报错
            let value = ‘lala‘
        }

     

  4. 应用

    var funcs = []
        for (var i = 0; i < 10; i++) {
            funcs.push(function() { console.log(i) })
        }
        funcs.forEach(function(func) {
            func()
        })
    
    //会输出十次10
    // ES5知识,我们可以利用“立即调用函数”解决这个问题
        var funcs = []
        for (var i = 0; i < 10; i++) {
            funcs.push(
              (function(value) {
                return function() {
                    console.log(value)
                }
            })(i)
          )
        }
        funcs.forEach(function(func) {
            func()
        })
    // 再来看看es6怎么处理的
        const funcs = []
        for (let i = 0; i < 10; i++) {
            funcs.push(function() {
                console.log(i)
            })
        }
        funcs.forEach(func => func())
    

      

二.字符串

  1. 模板字符串:第一个用途,基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
       //ES5 
        var name = ‘lux‘
        console.log(‘hello‘ + name)
        //es6
        const name = ‘lux‘
        console.log(`hello ${name}`) //hello lux

    第二个用途,在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

        // ES5
        var msg = "Hi     man!
        "
        // ES6
        const template = `<div>
            <span>hello world</span>
        </div>`

     

  2. 新增方法:
    // 1.includes:判断是否包含然后直接返回布尔值
        const str = ‘hahay‘
        console.log(str.includes(‘y‘)) // true
    
     // 2.repeat: 获取字符串重复n次
        const str = ‘he‘
        console.log(str.repeat(3)) // ‘hehehe‘
        //如果你带入小数, Math.floor(num) 来处理
        // s.repeat(3.1) 或者 s.repeat(3.9) 都当做成 s.repeat(3) 来处理
    
    // 3. startsWith 和 endsWith 判断是否以 给定文本 开始或者结束
        const str =  ‘hello world!‘
        console.log(str.startsWith(‘hello‘)) // true
        console.log(str.endsWith(‘!‘)) // true
    
    // 4. padStart 和 padEnd 填充字符串,应用场景:时分秒
        setInterval(() => {
            const now = new Date()
            const hours = now.getHours().toString()
            const minutes = now.getMinutes().toString()
            const seconds = now.getSeconds().toString()
            console.log(`${hours.padStart(2, 0)}:${minutes.padStart(2, 0)}:${seconds.padStart(2, 0)}`)
        }, 1000)

     

三.函数

  1. 函数默认参数设置:
    //es5时
     function action(num) {
            num = num || 200
            //当传入num时,num为传入的值
            //当没传入参数时,num即有了默认值200
            return num
        }
    //但是,num传入为0的时候就是false,但是我们实际的需求就是要拿到num = 0,此时num = 200 明显与我们的实际想要的效果明显不一样
    
    //ES6为参数提供了默认值。在定义函数时便初始化了这个参数,以便在参数没有被传递进去时使用。
    function action(num = 200) {
            console.log(num)
        }
        action(0) // 0
        action() //200
        action(300) //300

     

  2. 箭头函数:不需要function关键字创建函数,省略return关键字,继承上下文的this关键字
    //例如:
        [1,2,3].map(x => x + 1)
        
    //等同于:
        [1,2,3].map((function(x){
            return x + 1
        }).bind(this))

    当你的函数有且仅有一个参数的时候,是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return;

    var people = name => ‘hello‘ + name
    //参数name就没有括号
    
    //相对的
     var people = (name, age) => {
            const fullName = ‘hello‘ + name
            return fullName
        } 
      //如果缺少()或者{}就会报错

     

四.拓展的对象功能

  1. 对象初始化简写:ES5我们对于对象都是以键值对的形式书写,有可能出现键值对重名时
    function people(name, age) {
            return {
                name: name,
                age: age
            };
        }
    //键值对重名,es6简写如下
    function people(name, age) {
            return {
                name,
                age
            };
        }

    ES6 同样改进了为对象字面量方法赋值的语法。

    //ES5为对象添加方法:
    const people = {
            name: ‘lux‘,
            getName: function() {
                console.log(this.name)
            }
        }
    //ES6通过省略冒号与 function 关键字,将这个语法变得更简洁:
    const people = {
            name: ‘lux‘,
            getName () {
                console.log(this.name)
            }
        }

     

  2. 浅复制:ES6 对象提供了 Object.assign()这个方法来实现浅复制。Object.assign() 可以把任意多个源对象自身可枚举的属性拷贝给目标对象,然后返回目标对象。第一参数即为目标对象。在实际项目中,我们为了不改变源对象。一般会把目标对象传为{}
    const objA = { name: ‘cc‘, age: 18 }
        const objB = { address: ‘beijing‘ }
        const objC = {} // 这个为目标对象
        const obj = Object.assign(objC, objA, objB)
    
        // 我们将 objA objB objC obj 分别输出看看
        console.log(objA)   // { name: ‘cc‘, age: 18 }
        console.log(objB) // { address: ‘beijing‘ }
        console.log(objC) // { name: ‘cc‘, age: 18, address: ‘beijing‘ }
        console.log(obj) // { name: ‘cc‘, age: 18, address: ‘beijing‘ }
    
        // 是的,目标对象ObjC的值被改变了。
        // so,如果objC也是你的一个源对象的话。请在objC前面填在一个目标对象{}
        Object.assign({}, objC, objA, objB)

     

五.数据访问解构

 数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息,ES6新增了解构,这是将一个数据结构分解为更小的部分的过程 

  1. 对象与数组:
    //ES5我们提取对象中的信息形式如下:
    const people = {
            name: ‘lux‘,
            age: 20
        }
        const name = people.name
        const age = people.age
        console.log(name + ‘ --- ‘ + age)
    //在ES6之前我们就是这样获取对象信息的,一个一个获取。现在,解构能让我们从对象或者数组里取出数据存为变量
    
    //对象
        const people = {
            name: ‘lux‘,
            age: 20
        }
     const { name, age } = people
    //与对象中的属性名对应
     console.log(`${name} --- ${age}`)
    //数组
    const color = [‘red‘, ‘blue‘]
    const [first, second] = color
    console.log(first) //‘red‘
    console.log(second) //‘blue‘

     

  2. 应用:

     var body = request.body
        var username = body.username
        var password = body.password
    //重新解构
     const { body, body: { username, password } } = request

     

      

六.Spread Operator 展开运算符

  1. 组装对象或者数组:不限制位置
    //数组
        const color = [‘red‘, ‘yellow‘]
        const colorful = [...color, ‘green‘, ‘pink‘]
        console.log(colorful) //[red, yellow, green, pink]
        
        //对象
        const alp = { fist: ‘a‘, second: ‘b‘}
        const alphabets = { ...alp, third: ‘c‘ }
        console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"}

     

  2. 获取数组或者对象除了前几项或者除了某几项的其他项(反写+rest)
        //数组--rest必须放在最后
        const number = [1,2,3,4,5]
        const [first, ...rest] = number
        console.log(rest) //2,3,4,5
        //对象
        const user = {
            username: ‘lux‘,
            gender: ‘female‘,
            age: 19,
            address: ‘peking‘
        }
        const { username, ...rest } = user
        console.log(rest) //{"address": "peking", "age": 19, "gender": "female"}

     

  3. 对于 Object 而言,还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名,右边覆盖左边
    const first = {
            a: 1,
            b: 2,
            c: 6,
        }
        const second = {
            c: 3,
            d: 4
        }
        const total = { ...first, ...second }
        console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

     

 

七.import和export

import导入模块、export导出模块

//全部导入
import people from ‘./example‘

//有一种特殊情况,即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

//导入部分
import {name, age} from ‘./example‘

// 导出默认, 有且只有一个默认
export default App

// 部分导出
export class App extend Component {};

注意点:导入的时候有没有大括号的区别是什么

1.当用export default people导出时,就用 import people 导入(不带大括号)

2.一个文件里,有且只能有一个export default。但可以有多个export。

3.当用export name 时,就用import { name }导入(记得带上大括号)

4.当一个文件里,既有一个export default people, 又有多个export name 或者 export age时,导入就用 import people, { name, age } 

5.当一个文件里出现n多个 export 导出很多模块,导入时除了一个一个导入,也可以用import * as example

 

八.Promise

在promise之前代码过多的回调或者嵌套,可读性差、耦合度高、扩展性低。通过Promise机制,扁平化的代码机构,大大提高了代码可读性;用同步编程的方式来编写异步代码,保存线性的代码逻辑,极大的降低了代码耦合性而提高了程序的可扩展性。-------用同步的方式去写异步代码

 

以上是关于关于ES6的主要内容,如果未能解决你的问题,请参考以下文章

关于代码片段的时间复杂度

关于阮一峰老师es6(第三版)中管道机制代码的理解浅析

关于ES6的数组字符串方法

关于片段生命周期

关于代码分割

关于js----------------分享前端开发常用代码片段