es6 学习笔记

李昌杰发布于2019-08-20 16:21 / 1736人阅读

摘要：块级作用域只有全局作用域和函数作用域，没有块级作用域，这带来了很多不合理的场景。如声明变量的方法只有两种声明变量的方法命令一共有六种命令变量的解构赋值允许按照一定的模式，从数组和对象中提取，按照位置的对应关系对变量赋值，这被称为解构。

块级作用域

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

第一种场景：内层变量可能会覆盖外层变量

var test = "outside";

function f () {
    console.log(test);
    if (false) {
        var test = "inside";
    }
}

f(); // undefined

出现这种结果的原因是变量提升，导致内层的test覆盖了外层的test

第二种场景：用来计数的循环变量泄露为全局变量

var str = "hello";

for(var i = 0; i < str.length; i++){
    console.log(s[i]);
}

console.log(i);  // 5

let命令

let声明的变量只在其代码块内有效，var没有块作用域

不存在变量提升

暂时性死区（TDZ）：es6明确规定，如果区域块中存在let和const命令，则这个区块对这些命令声明的变量从一开始就形成封闭性作用域。只要在声明之前调用这些变量就会报错。

{
    //TDZ开始
    test = "test";   //ReferenceError
    console.log(test);   //ReferenceError
    
    let test;    //TDZ结束
    console.log(test);   //undefined
    
    
    //比较隐蔽的TDZ
    function testFn (x=y, y=2) {
        return[x,y];
    }
    
    testFn();   //报错
}

不允许重复声明：不允许在同一个作用域内重复声明同一个变量

//报错
{
    let test = 1;
    var test = 2;
}

//报错
{
    let test = 1;
    let test = 2;
}

const

const用来声明常量

一旦声明，其值就不能改变

必须立即初始化，即立即赋值

不存在常量提升，同let一样存在暂时性死区

同let一样不可重复声明

作用域：只在当前代码块有效

const命令只能保证常量名指向数据的地址不变，但是不能保证该地址的数据不变，如

const obj = {};
obj.prop = "test";

console.log(obj.prop);   //"test"

obj = {};   //typeError: "obj" is read-only

跨模块常量

可使用export使常量跨模块

//constant.js
export const A = 1;
export const A = 2;
export const A = 3;

//test1模块
import * as constants from "./constans";
console.log(constants.A); // 1
console.log(constants.B); // 2

//test1模块
import {A, B} from "./constans";
console.log(constants.A); // 1
console.log(constants.B); // 2

全局对象的属性

在es5中，全局对象（window/global）的属性与全局变量是等价，在es6中规定，let、const、class命令生声明的全局变量不属于全局对象的属性。如

var a = 1;
b = 2;

console.log(window.a);  // 1
console.log(window.b);  // 2

let c = 3;
console.log(window.c); // undefined

es6声明变量的方法

es5只有两种声明变量的方法：var、function命令

es6一共有六种：var、function、let、const、import、class命令

变量的解构赋值

es6允许按照一定的模式，从数组和对象中提取，按照位置的对应关系对变量赋值，这被称为解构。本质上，这种写法属于模式匹配。

数组的解构赋值

 //- 解构成功：等号两边模式相同
var [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3

let [l, [[m], n]] = [1, [[2], 3]];
console.log(l, m, n); // 1 2 3

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

let [o, ...p] = [1, 2, 3, 4];
console.log(o); // 1 
console.log(p); // [2, 3, 4] 

//- 不完全解构： 等号左边的模式只匹配等号右边数组的一部分
let [x, y] = [1, 2, 3]; 
console.log(x); //1
console.log(y); //2

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

//-解构不成功。如果解构不成功，变量的值就等于undefined
let [a, b, c] = [1];
console.log(a); //1
console.log(y); //undefined
console.log(z); //undefined

注意，如果等号的右边不是数组，严格来说不是遍历结构，那么将会报错

//-报错
let [a] = 1;
let [b] = false;
let [c] = NaN;
let [d]  =undefined;
let [e] = null;
let [f] = {};

前5种转为对象后不具备iterator接口，最后一个本身就不具备iterator接口

事实上，只要某种数据接口具备iterator接口，都可以使用数组形式的解构赋值

默认值

明天再写

对象的解构赋值

字符串的解构赋值

数值和布尔值的解构赋值

函数参数的结构赋值

idc机房托管服务器托管学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82884.html

es6学习笔记-顶层对象_v1.0_byKL

摘要：学习笔记顶层对象虽然是笔记但是基本是抄了一次大师的文章了顶层对象顶层对象，在浏览器环境指的是对象，在指的是对象。之中，顶层对象的属性与全局变量是等价的。的写法模块的写法上面代码将顶层对象放入变量。参考引用顶层对象实战 es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象顶层对象，在浏览器环境指的是window对象，在Node指的是gl...

Meils 2019-08-21 11:31 评论0 收藏0
ES6学习笔记

摘要：本笔记为阅读阮老师的文章自己的总结，仅作自用，感谢阮老师的技术分享。字符串的遍历器接口新增判断字符串的包含情况返回值，表示是否找到了字符串。返回值表示参数字符串是否在原字符串的头部。本笔记为阅读http://es6.ruanyifeng.com/ 阮老师的文章自己的总结，仅作自用，感谢阮老师的技术分享。 1.超过uFFFF的字符ES5无法正确显示，会显示成前面的uFFFF的码点符号加...

zxhaaa 2019-08-26 11:58 评论0 收藏0
《深入理解ES6》笔记——导读

摘要：最近买了深入理解的书籍来看，为什么学习这么久还要买这本书呢主要是看到核心团队成员及的创造者为本书做了序，作为一个粉丝，还是挺看好这本书能给我带来一个新的升华，而且本书的作者也非常厉害。使用ES6开发已经有1年多了，以前看的是阮一峰老师的ES6教程，也看过MDN文档的ES6语法介绍。最近买了《深入理解ES6》的书籍来看，为什么学习ES6这么久还要买这本书呢？主要是看到Daniel A...

Godtoy 2019-08-20 18:01 评论0 收藏0
React学习笔记3：用es2015（ES6）重写CommentBox

摘要：新搭建的个人博客，本文地址学习笔记用重写在一开始的时候配置中我们就加入了的支持，就是下面的配置，但之前的学习笔记都使用的完成，所以专门作一篇笔记，记录使用完成创建相关文件修改，增加该入口文件修改，引入该文件做个简单的测试，看下浏览器全部用来新搭建的个人博客，本文地址：React学习笔记3：用es2015（ES6）重写CommentBox在一开始的时候webpack配置中我们就加入了e...

selfimpr 2019-08-19 17:30 评论0 收藏0
ES6零基础教学_解析彩票项目-学习笔记（一）

摘要：彩票项目实战学习记录一完整走了一遍课程，觉得还不错。支持正版人人有责零基础教学解析彩票项目下面是项目课程的目录路线一个项目分为三部分业务逻辑，自动构建系统，模拟数据和真实数据接口处理。彩票项目实战学习记录（一）完整走了一遍课程，觉得还不错。总结: es6的知识点说得还算清楚，主要是为了了解和使用，不是深究，所以浅尝即止即可，所以觉得还不错。完整还原了项目开发的代码设计和开发过...

blastz 2019-08-22 13:52 评论0 收藏0