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
推荐链接
- 《ECMAScript 6 入门》- 阮一峰
- 《ES6入门》- 汇智网-在线课堂
- jsbin - 在线调试系列
End
ES6 - 变量与参数
By 胡尊杰
ES6 - 变量与参数
ES6之变量参数基础知识
- 1,229