您的位置：首页 > 其它

ES6------第三天（const命令、变量解构）

2017-12-01 00:00 537 查看
摘要: 慢不要紧，

重要的是学会。

路漫漫其修远兮，

加油。

http://es6.ruanyifeng.com/#docs/destructuring

const命令

1.基本用法

声明只读变量

一旦声明，常量值不能改变

一旦声明变量，就必须初始化，不能留到以后赋值

只在声明所在的块级作用域内有效

不提升

存在暂时性死区

只能在声明的位置后面使用

不能重复声明

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>

<!--加载Traceur的库文件-->
<script type="text/javascript" src="../js/traceur.js"></script>
<!--将库文件用于浏览器-->
<script type="text/javascript" src="../js/browerSystem.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>

<!--type="module":Traceur 编译器识别 ES6 代码的标志，
编译器会自动将所有type=module的代码编译为 ES5，然后再交给浏览器执行-->
<script type="module">
// 一旦声明，常量值不能改变
/*const PI = 3.14;
console.log(PI)
PI = 3      // 写完就报错*/

// 只在声明所在的块级作用域内有效
/* if(true){
const YJ = 1
}
alert(YJ)   // YJ is not defined*/

// 只能在声明的位置后面使用
/* if(true){
console.log(YJ)     // YJ is not defined
const YJ = 3
}*/

// 不能重复声明
const yj = 1
const yj = 'hello'      // Identifier 'yj' has already been declared

</script>

</head>
<body>

</body>
</html>

2.本质

const保证的是变量指向的那个内存地址不得改动

对于简单类型的数据(数值、字符串、布尔值)，值就保存在变量指向的那个内存地址，因此等同于常量

对于复合类型的数据(对象、数组)，变量指向的内存地址，保存的只是一个指针，const只能保证指针是固定的

3.ES6声明变量的六种方法

ES5中的 var

ES5中的 function

let

const

import

class

顶层对象的属性

ES5中 var和function声明的变量是顶层对象的属性

let/const/class声明的变量，不属于顶层对象的属性

global对象

作为顶层对象

变量的解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值

1.数组的解构赋值

PS: 只要某种结构具有Iterator接口，都可以采用数组形式的解构赋值

(1)基本用法

1)完全解构

PS: 解构不成功，变量的值等于undefined

ES6中

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

2)不完全解构

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

3)Set结构

let [x, y, z] = new Set(['a', 'b', 'c']);
console.log(x);     // a
console.log(y);     // b
console.log(z);     // c

(2)默认值

1)解构赋值允许指定默认值

let [foo = true] = [false];
console.log(foo);   // false

2)如果一个数组成员不严格等于undefined,默认值是不会生效的

let [x = 1] = [undefined];
console.log(x);     // 1

3)如果一个数组成员是null,默认值就不会生效

let [x = 1] = [null]
console.log(x)      // null

4)如果默认值是一个表达式，那么这个表达式就是惰性的，只有在用到的时候，才会去求值

function f(){
return 'hello'
}
let [x = f()] = [1];
console.log(x)      // 1

2.对象的解构赋值

(1)变量必须与属性同名，才能取到正确的值

let {foo, bar} = {foo: 'hello', bar: 'world'};
console.log(foo);   // hello
console.log(bar);   // world

(2)等号左边的变量的次序与等号右边的同名属性的次序不一致，不影响取值

let {bar, foo} = {foo: 'hello', bar: 'world'};
console.log(foo);   // hello
console.log(bar);   // world

(3)变量没有对应的同名属性，则导致获取不到值

let {baz} = {foo: 'hello', bar: 'world'};
console.log(baz);   // undefined

(4)对象解构的内部机制：先找到同名属性，然后再赋值给对应的变量

let {foo: foo, bar: bar} = {foo: 'hello', bar: 'world'};
console.log(foo);   // hello
console.log(bar);   // world

(5)真正被赋值的是后者

let {foo: baz} = {foo: 'hello', baz: 'world'};
console.log(baz);   // hello

PS: foo是匹配的模式，baz才是变量，真正被赋值的是变量baz,而不是模式foo

(6)用于嵌套解构的对象

let obj = {
p: ['hello', {y: 'world'}]
};
let {p: [x, {y}]} = obj;
console.log(x);     // hello
console.log(y);     // world

(7)指定默认值

var {x = 3} = {};
console.log(x)  // 3

3.字符串的解构赋值

(1)字符串被转换成了一个类似数组的对象

const [a, b, c, d, e] = 'hello';
console.log(a);     // h
console.log(b);     // e
console.log(c);     // l
console.log(d);     // l
console.log(e);     // o

(2)对length属性解构赋值

let {length: len} = 'hello';
console.log(len);       // 5

4.数值和布尔值的解构赋值

(1)等号右边是数值和布尔值，先转为对象

let {toString: s} = 123;
console.log(s === Number.prototype.toString);        // true

(2)undefined和null无法转为对象，解构赋值时报错

let {prop: x} = undefined;      // 报错

5.函数参数的解构赋值

(1)函数传参以后，数组参数就被解构成变量

function add([x, y]){
console.log(x + y)  // 3
}
add([1, 2])

(2)使用默认值

function move({x = 0, y = 0}){
console.log(x + y)
}
move({x: 3, y: 4}); // 7
move({});   // 0
move()      // 报错

6.圆括号问题

ES6的规则：只要有可能导致解构的歧义，就不得使用圆括号

建议：只要有可能，就不要再模式中放置圆括号

(1)不能使用圆括号的情况

1)变量声明语句

let [(a)] = [1];    // 报错

2)函数参数

function fun([(x)]){
console.log(x)  // 报错
}

3)赋值语句的模式

({p: a}) = {p: 42}  // 报错

(2)可以使用圆括号的情况

赋值语句的非模式部分

let b;
[(b)] = [3];
console.log(b)  // 3

7.用途

(1)交换变量的值

let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x, y);  // 2, 1

(2)从函数返回多个值

1)返回一个数组

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

2)返回一个对象

function example(){
return {foo: 'hello', bar: 'world'}
}
let {foo, bar} = example();
console.log(foo);   // hello
console.log(bar);   // world

(3)函数参数的定义

将参数和变量名对应起来

1)参数是一组有序值

function fun([x, y, z]){
console.log(x, y, z)    // 1, 2, 3
}
fun([1, 2, 3])

2)参数是一组无序值

function fun({x, y, z}){
console.log(x, y, z)  // 1, 2, 3
}
fun({z: 3, y: 2, x: 1})

(4)提取JSON数据

let jsonData = {
id: 42,
status: 'ok',
data: [123,234]
};
let {id, status, data: number} = jsonData;
console.log(id, status, number)     // 42 "ok"  [123, 234]

(5)函数参数的默认值

(6)遍历Map解构

1)获取键值

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for(let [key, value] of map){
console.log(key + ' is ' + value);  // first is hello
// second is world
}

2)只获取键

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for(let [key] of map){
console.log(key);   // first
// second
}

3)只获取值

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for(let [, value] of map){
console.log(value);     // hello
// world
}

(7)输入模块的指定方法
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航