ES6 - 变量与参数

胡尊杰@奇舞团-摩天营

2015-11

内容梗概

块作用域
变量声明
let的不同
解构赋值
function
const
import
class

声明变量的6个途径

var
let
const
function
class
import

var

都很熟了，没什么好说的...
后面参考了解let

let 与 var 的不同

```
块作用域
```
声明提前
变量死区
重复声明
全局作用域 let x!=window.x

块作用域

(function() {
    'use strict';

    var a = [];
    // var i 改为 let i试试
    for (var i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[0]();
    a[5]();
    a[9]();

})()

(function() {
    'use strict';
    
    var a = 1, b = 1;
    { //块作用域可以无限嵌套
       var a = 0;
       let b = 0;
    }
    console.log(a,b);

})()

变量死区

// 某一作用域内在一个变量声明的前面，赋值或读取都将导致异常

if (true) {
  //var tmp; //如果是var会被提前声明到作用域前端

  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError
  typeof(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

重复声明

(function() {
    'use strict';
    {
       var a=3;
       let a=3; //Uncaught SyntaxError: Identifier 'a' has already been declared
       console.log(a);
    }

})()

隐式重复声明

(function() {
    'use strict';

    function f(a, b) { 
       let a=3; // Uncaught SyntaxError: Identifier 'a' has already been declared
       console.log(a,b);
    }
    f(1,2);

})()

(function() {
    'use strict';
    //正常
    function f(a, b) { 
        {
           let a=3;
           console.log(a,b);
        }
    }
    f(1,2);

})()

变量的解构赋值

/* 解构数组 */
var [a, b, c] = [1, 2, 3]; 
console.log(a, b, c);  // 1 2 3 

let [ , , c] = [1, 2, 3];
console.log(c); // 3

let [a, ...c] = [1, 2, 3];  
console.log(a, c);  // 1 [2, 3] 

let [a, [[b], c]] = [1, [[2], 3]];  
console.log(a, b, c); //1 2 3  

let [x = 0, y = 0] = [1, 2]; // x=1; y=2

/* 解构对象 */
var { t1, t2} = { t1: "111", t2: "222" };  
console.log(t1, t2); // 111 222

/* 变量名与对象属性名不一致 */
let { first: f, last: l } = { first: 'hello', last: 'world' };
console.log(f, l); // 'hello' 'world'

/* 字符串‘类数组’形式对象解构赋值 */
const [a, b, c, d, e] = 'hello';
console.log(a, b, c, d, e); // "h" "e" "l" "l" "o"

const 常量

块级作用域
不提前定义
不可重复
只读

基本类型常量

(function() {
    'use strict';

    console.log(PI); // Uncaught ReferenceError: PI is not defined

    const PI = 3.1415;

    console.log(PI); //3.1415

    PI = 3.14;  // Uncaught TypeError: Assignment to constant variable.

})()

引用类型常量

(function() {
    'use strict';

    const OBJ = { a:1 };
    console.log(OBJ);
    
    // 属性复制，绕过只读限制
    OBJ.a = 2;
    console.log(OBJ);
})()

(function() {
    'use strict';
    
    // 冻结作为常量的对象为只读
    const OBJ = Object.freeze({ a:1 });
    console.log(OBJ);
    
    // 修改属性将导致报错
    OBJ.a = 2; // Uncaught TypeError: Cannot assign to read only property 'a' of #<Object>

    console.log(OBJ);

})()

function

函数提升
作用域限制
不定参数

(function() {
    //'use strict';

    function f() { console.log('I am outside!'); }
    if(false) {
        // 重复声明一次函数f
        function f() { console.log('I am inside!'); }
    }

    f();

})()

if (true) {
    function foo() {
        console.log( "1" );
    }
} else {
    function foo() {
        console.log( "2" );
    }
}
foo();      // ?

不定参数

function add(...values) {
   let sum = 0;
   console.log(values);
   for (var val of values) {
      sum += val;
   }
 
   return sum;
}
 
console.log(add(1,2,3,4]);

console.log(add(...[1,2,3,4]));

class

//定义类
class Point {

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  sum(){
    return this.x+this.y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }

}

//实例化
let point = new Point(2,3);

//使用
console.log(point, point.sum(), point+'');

import 导入变量



    // constants.js 模块
    export const A = 1;
    export const B = 3;
    export const C = 4;
    
    // test1.js 模块
    import * as constants from './constants';
    console.log(constants.A); // 1
    console.log(constants.B); // 3
    
    // test2.js 模块
    import {A, B} from './constants';
    console.log(A); // 1
    console.log(B); // 3


// 声明Cls模块
module Cls {   
  // 暴露到外部的变量和函数
  export function funName(speed, direction) {  
    console.log('details:', speed, direction);  
  }  
  export var val = 123;    
};  


// 使用Cls模块
import funName from Cls;  
import {funName, val} from Cls;

内容回顾

块作用域
变量声明
let的不同
函数提升
const
import
class

End

ES6 - 变量与参数

By 胡尊杰

ES6 - 变量与参数

ES6之变量参数基础知识

1,229

胡尊杰

pyzy.net

ES6 - 变量与参数

内容梗概

声明变量的6个途径

var

let 与 var 的不同

块作用域

变量死区

重复声明

隐式重复声明

变量的解构赋值

const 常量

基本类型常量

引用类型常量

function

不定参数

class

import 导入变量

内容回顾

推荐链接

End

ES6 - 变量与参数

More from 胡尊杰