首页 > 代码库 > ES6学习笔记(一)

ES6学习笔记(一)

2024-10-10 20:21:02   229人阅读

1.ES6学习之let、const

(1).var、let、const 变（常）量声明

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

在ES6中let就诞生了，实际上它为javascript新增了块级作用域。

let只在变量声明时 ，所在的代码块中有效。

由于这一特性，let很适合在for循环中使用。

如下图是一个demo：

技术分享

let声明变量的特点：

a：不存在变量提升；
console.log(m);//Uncaught ReferenceError: m is not definedlet m = ‘es6‘;console.log(n);var n = ‘es5‘;
b：不允许重复声明；
let m = ‘es6‘;let m = ‘new-es6‘;console.log(m);//Uncaught SyntaxError: Identifier ‘m‘ has already been declared    var n = ‘es5‘;var n = ‘new-es5‘;console.log(n);

 

c：暂时性死区；

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

var a = 666;if(true){    a = ‘abc‘;//Uncaught ReferenceError: a is not defined    let a;}

 （2）小栗子：

正确：

    var a = 666;    {        let a = 456;    }    alert(a);//666    let b = 777;    {        b = 567;    }    alert(b);//567

报错：

    let c = 888;    {         var c = 678;//Uncaught SyntaxError: Identifier ‘c‘ has already been declared    }    alert(c);

 

2.变量的解构赋值

解构适用于：数组、对象、字符串、数值、布尔值和函数的参数等。

（1）完全解构

即：等号左边的模式，完全匹配等号右边的内容。

 ：) 解构成功：

a.数组解构：

  let [m, [[n], k]] = [1, [[3], 6]];  console.log(m); // 1  console.log(n); // 3  console.log(k); // 6  let [ , , c] = ["aaa", "bbb", "ccc"];  console.log(c); // "ccc"  let [x, , y] = [1, 2, 3];  console.log(x); // 1  console.log(y); // 3  let [f, ...s] = [1, 2, 3, 4];  console.log(f); // 1  console.log(s); // [2, 3, 4]

b.对象解构：

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

对象可以嵌套解构：

下面代码中，只有line是变量，loc和start都是模式，不会被赋值。

var node = {  loc: {    start: {      line: 1,      column: 5    }  }};var { loc: { start: { line }} } = node;line // 1loc  // error: loc is undefinedstart // error: start is undefined

对象的解构也可以指定默认值。代码如下：

var {x = 3} = {};x // 3var {x, y = 5} = {x: 1};x // 1y // 5var {x:y = 3} = {};y // 3var {x:y = 3} = {x: 5};y // 5var { message: msg = ‘Something went wrong‘ } = {};msg // "Something went wrong"

 

：( 解构失败：会输出undefined

 let [a, b, ...e] = [‘hello‘];  console.log(a); // "hello"  console.log(b); // undefined  console.log(e); // []

 

（2）不完全解构

即：等号左边的模式，只匹配一部分的等号右边的内容。

：) 解构成功：

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

：( 解构失败：

严格地说，如果等号的右边不是数组，或者说不是可遍历的结构，将会报错。

// 报错let [foo] = 1;let [foo] = false;let [foo] = NaN;let [foo] = undefined;let [foo] = null;let [foo] = {};

 友情链接：http://es6.ruanyifeng.com/#docs/destructuring

ES6学习笔记(一)


联系
我们