• ES6学习笔记一


    ES6环境搭建

    步骤1:安装git

    步骤2:打开git bash

    步骤3:在这个git bash里面一步步输入如下命令

     安装babel-polyfill解决对新属性兼容性问题

    然后在index.js里面引入!!

    需要在这个目录下面进行git bash打开输入命令,不然会报错!!!!

    步骤4:输入http://localhost:9000/  打开

    1、let 和 const 命令

    知识点1:在es5中变量只有全局变量跟函数变量没有块级变量,在里面for、while里面声明的变量是全局变量,而es6中使用let来定义变量是块级变量{}!

    例子

    var跟let

    使用var定义

    var a = [];
    for (var i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[6](); // 10

    这边a[i]这个数组都是指向同一个函数,而这个函数输出的i是同一个i,所以输出的是10

    使用let定义

    var a = [];
    for (let i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[6](); // 6

    上面代码中,变量ilet声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6

    知识点2:暂时性死区

    只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响!总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的,会报ReferenceError错误。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

    知识点3:不允许重复声明

    let不允许在相同作用域内,重复声明同一个变量。因此,不能在函数内部重新声明参数。用块{}作用域包起来!

    function func(arg) {
      let arg; // 报错
    }
    
    function func(arg) {
      {
        let arg; // 不报错
      }
    }

     知识点4:块级作用域与函数声明

     知识点5:const 命令

     const声明一个只读的常量。一旦声明,常量的值就不能改变。

    const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。,对于const来说,只声明不赋值,就会报错。

     const的作用域与let命令相同:只在声明所在的块级作用域内有效。

    const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。其次const声明的常量,也与let一样不可重复声明。

    2、变量的解构赋值

    知识点1:数组的解构赋值

    ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。以前,为变量赋值,只能直接指定值。

    let a = 1;
    let b = 2;
    let c = 3;

    ES6 允许写成下面这样。

    let [a, b, c] = [1, 2, 3];

    知识点2:对象的解构赋值

    let { foo, bar } = { foo: "aaa", bar: "bbb" };
    foo // "aaa"
    bar // "bbb"

    对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

    let { bar, foo } = { foo: "aaa", bar: "bbb" };
    foo // "aaa"
    bar // "bbb"
    
    let { baz } = { foo: "aaa", bar: "bbb" };
    baz // undefined

    上面代码的第一个例子,等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于undefined

    如果变量名与属性名不一致,必须写成下面这样。

    let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
    baz // "aaa"
    
    let obj = { first: 'hello', last: 'world' };
    let { first: f, last: l } = obj;
    f // 'hello'
    l // 'world'

    也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

    上面代码中,foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo

     应用场景

    场景1、进行变量值交换

    {
        let a=1;
        let b=2;
        [a,b]=[b,a];
        console.log(a,b); //2,1
    }
    {
        function f(){
            return [1,2]
        }
        let a,b;
        [a,b]=f();
        console.log(a,b); //1,2
    }

    场景2、选择性接收变量

    {
        function f(){
            return [1,2,3,4,5]
        }
        let a,b,c;
        [a,,,b]=f();
        console.log(a,b); //1,2
    }

    场景3、不知道函数返回多少数值,只需获取第一个元素,其它元素自己遍历

    //函数变量个数不确定时
    {
        function f(){
            return [1,2,3,4,5]
        }
        let a,b,c;
        [a,...b]=f();
        console.log(a,b); //1,[2,3,4,5]
    }

    //获取第一个,中间不要,其它遍历

    {
       function f(){
          return [1,2,3,4,5]
       }
       let a,b,c;
       [a,,...b]=f();
       console.log(a,b); //1,[2,3,4,5]
    }

    场景4、对象嵌套数值的解构赋值

    {
         let metaData={
             title:'abc',
             test:[{
                 title:'test',
                 desc:'description'
             }]
         }
         let {title:esTitle,test:[{title:cnTitle}]}=metaData;
         console.log(esTitle,cnTitle);  //abc test
     }

    场景5、函数参数的定义

    一般我们在定义函数的时候,如果函数有多个参数时,在es5语法中函数调用时参数必须一一对应,否则就会出现赋值错误的情况,来看一个例子:

    function personInfo(name, age, address, gender) {
      console.log(name, age, address, gender)
    }
    personInfo('william', 18, 'changsha', 'man')

    上面这个例子在对用户信息的时候需要传递四个参数,且需要一一对应,这样就会极易出现参数顺序传错的情况,从而导致bug,接下来来看es6解构赋值是怎么解决这个问题的:

    function personInfo({name, age, address, gender}) {
      console.log(name, age, address, gender)
    }
    personInfo({gender: 'man', address: 'changsha', name: 'william', age: 18})

    这么写我们只需要知道要传什么参数就行来,不需要知道参数的顺序也没问题

  • 相关阅读:
    使用Fiddler和雷电模拟器抓取安卓https请求
    Robot Framework -- 安装接口测试库
    Robot Framework --为了进行Web测试,安装SeleniumLibrary外部库
    robotframework+python3+eclipse+RED自动化测试框架初学笔记
    LeetCode Weekly Contest 27
    LeetCode Weekly Contest 26
    京东4.7实习笔试题
    牛客网模拟笔试 2
    4.1几道最近的题目
    网易3.25实习笔试
  • 原文地址:https://www.cnblogs.com/qdlhj/p/9360905.html
Copyright © 2020-2023  润新知