zoukankan      html  css  js  c++  java
  • es6常用功能

    1、let/const

     let定义变量,可以被重新赋值。const定义常量,不能被重新赋值。

    2、解构赋值

       解构赋值就是:按照一定的模式从数组或对象中取值,对变量进行赋值的过程。

    注:
    1.使用解构赋值,将会使等效的代码变得更加简洁并且可读性更高;
    2.本质上,解构赋值属于一种“模式匹配”、“映射关系”;
    只要等号两边的模式相同,一一对应,左边的变量就会被赋予右边对应的值。
    3.对象,数组,块级作用域
    //JS:
    var obj = {a:100,b:200}
    var a = obj.a
    var b = obj.b
    
    var arr = ['xxx','yyy','zzz']
    var x = arr[0]
    
    //ES6解构赋值:
    const obj = {a:10,b:20,c:30}
    const {a,c} = obj
    console.log(a)
    console.log(c)
    
    const arr = ['xxx','yyy','zzz']
    const [x,y,z] = arr
    console.log(x)
    console.log(y)

    3、模板字符串

     使用 ` ` 模板字符串中嵌入变量,需要将变量名写在${}之中。比普通js拼接字符串方便很多

    var name = "Bob", time = "today";
    `Hello ${name}, how are you ${time}?`

    4、块级作用域

    var a=1;
    
    function f(){
        console.log(a);
        if(false){
            var a='字符串变量';
        }
    }
    f()   // undefined

    es5中,函数作用域覆盖全局作用域,得到变量提示。

    var a = 1  设置的是全局变量,但是fn()的时候打印出了undefined,这是因为if(){ } 这个函数方法,函数里面的a提到了最前面,初始化a,给了一个undefined。

    在es6中,用let命令新增了块级作用域,外层作用域无法获取到内层作用域,非常安全明了。

    即使外层和内层都使用相同变量名,也都互不干扰。

    {
      {
        let food = 'apple';
        console.log(food);   // apple
      }  
        let food = 'orange';
        console.log(food);   // orange     
    }

    5、箭头函数

    1. 箭头函数基本形式

    let func = (num) => num;
    let func = () => num;
    let sum = (num1,num2) => num1 + num2;
    [1,2,3].map(x => x * x);

    2. 箭头函数特点

    参考:https://www.cnblogs.com/mengff/p/9656486.html

    (1). 箭头函数this为父作用域的this,不是调用时的this

    箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply,bind。
    普通函数的this指向调用它的那个对象。

  • 相关阅读:
    软件的一般实现过程
    前端开发所需技能及理解
    前端开发所需技能
    JavaScriptlet和const的使用
    [NOI2013] 向量内积
    [省选联考 2021 A/B 卷] 滚榜
    [提高组集训2021] 模拟赛2
    [省选联考 2021 A 卷] 矩阵游戏
    [省选联考 2021 A/B 卷] 图函数
    [APIO2020] 交换城市
  • 原文地址:https://www.cnblogs.com/liumcb/p/13602358.html
Copyright © 2011-2022 走看看