ES6学习之一

MartinDai 发布于2019-08-20 13:35 / 1995人阅读

摘要：现在帮我们解决这个问题了，使用和大括号定义局部变量，上段代码可以改写如下声明的局部变量带来的一个附加改变是无法进行变量提升。从局部作用域开始到局部变量声明之前这段被称为暂时性死区，是针对某特定局部变量而言的。

周末两天学习了ES6基础内容，包括作用域、变量赋值、字符串、数值、数组、函数、对象这几项的扩展。整体感觉，ES6就是对ES5进行bug修复和功能补充。

作用域

- 局部作用域与let

ES5不存在传统意义上的块级作用域，如果一定要说有，那就是利用函数来模拟块级作用域，如：

    // code 1
    (function(){
    //这里是块级作用域
    //作用：限制向全局作用域中添加过多的变量和函数，即避免内部临时变量影响全局空间
    })();

有些fresh meat ( like me, haha )可能会在使用for循环时忽略i是全局变量而导致循环无法终止,直至页面崩溃，如下场景

// code 2
var arr1 = [1, 2, 3, 4];
var arr2 = [1, 2];
for (var i = 0; i < arr1.length; i++){
   blablabla...
   for (var i = 0; i < arr2.length; i++){
      blablabla...
   }
}

上面这段代码中，someone可能认为循环最多执行4*2=8次，实际上这里会无限循环：每次内层循环执行完毕，i都等于2，从而导致外层循环的循环条件永远为true。究其原因，在于内外层是在同一个作用域，内外层的i是同一个变量，而不是内层自成作用域。
现在ES6帮我们解决这个问题了，使用let和大括号定义局部变量，上段代码可以改写如下：

// code 3
var arr1 = [1, 2, 3, 4];
var arr2 = [1, 2];
for (var i = 0; i < arr1.length; i++){
   blablabla...
   for (let i = 0; i < arr2.length; i++){
      blablabla...
   }
}

let声明的局部变量带来的一个附加改变是：无法进行变量提升。在局部作用域内，使用let声明变量之前，该变量都不可用。从局部作用域开始到局部变量声明之前这段被称为暂时性死区TDZ，TDZ是针对某特定局部变量而言的。

- const

js也有常量啦！这个不得不让人感叹js真的越来越像java了。const声明的常量只在当前作用域有效。另外，对于复合类型的变量，如对象，const变量存储的是地址，这时不可修改的是地址，但地址中存储的内容是可变的。

变量赋值

- 默认值
ES5中我们是不是经常有这种写法：

// code 4
var polySay = function(name, age) {
    name = sayWhat || "Poly";
    age = sayWhat || "forever 18";
    console.log("My nane is " + name + "and I"m " + age);
};

为了兼容不传参数的情形，我们可能写了N多类似以上的代码。现在ES6给我们提供了一项新功能：给变量设置默认值。在声明变量时可以设置一个默认值，以备使用时发现改变量没有赋值。
上面代码可以改写为：

// code 5
var polySay = function({name:"Poly", age: "forever 18"}) {
    console.log("My nane is " + name + "and I"m " + age);
};

- 解构赋值
前面函数参数设置默认值中，你可能注意到设置默认值的方式有点陌生，这涉及到ES6为我们提供的另一个新功能：解构赋值。解构赋值是指按照一定模式，从数组和对象中提取值为变量进行赋值。比如：

// code 6
let [a, [b], c] = [1, [2, 3]];
// a被赋值为1，b被赋值为2
// c没有解析到相应的解构，因此c被赋值为udefined

又比如：

// code 7
let {name: who, age} = {name: "Poly", age: "forever 18"};
// who被赋值为"Poly"

解构赋值主要针对数组和对象，顺带捎上字符串、数值和布尔值。因为字符串会被自动转换为字符数组，而后两者会被转换为对象。

// code 8
let [a, b, c] = "Hello";
// a被赋值为“H”，b 被赋值为“e”,c被赋值为“l”
// 因为等号右侧的"Hello"被自动转化为［"H", "e", "l", "l", "o" ］
let (toString:s) = 123;
// 数值123被转化为对象，而Number对象有toString属性
let (toString s) = true
// 布尔值true被转化为对象，而Boolean对象有toString属性

解构赋值的应用还包括：函数返回多个值、提取JSON数据。

// code 9
function polySay(){
   return [1, 2, 3];
}
// 再也不用拼数组拼对象（是拼凑，不是拼爹）
let [a, b, c] = polySay();
let json = {
   id: 111,
   name: "Poly",
};
let {id, name} = json;
//再也不用一个个取

很好用，有木有，有木有？

字符串

to do

数值

to do

数组

to do

函数

to do

对象

to do

时间所限，剩下几个部分没有写完，后续补上，顶锅遁走。

云服务器 GPU云服务器 webrtc学习之一开篇数据分析之一 ES6 es6-系列

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

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

【译】前端练级攻略

摘要：由于系统变得越来越复杂，人们提出了称为预处理器和后处理器的工具来管理复杂性。后处理器在由预处理器手写或编译后对应用更改。我之前建议的文章，，也涵盖了预处理器相关的知识。译者：前端小智原文：medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我记得我刚开始学习前端开发的时候。我看到了很多文章及...

wuyumin 2019-05-22 16:41 评论0 收藏0
【译】国外优秀JavaScript资源推荐

摘要：原文去年，我写了一篇关于优秀资源之获取优秀资源的博文。在谷歌浏览器的团队中，每天的工作是整天修补并了解哪些是可行的，哪些是没有用的。你需要真正利用在中的特性，不用想就知道你将得到很多来源于各种写作者，包括谷歌浏览器团队在内的资源。原文：http://code.tutsplus.com/articles/resources-for-staying-on-top-of-javascrip...

?xiaoxiao, 2019-08-21 10:25 评论0 收藏0
前端练级攻略(第二部分)

摘要：是文档的一种表示结构。这些任务大部分都是基于它。这个实践的重点是把你在前端练级攻略第部分中学到的一些东西和结合起来。一旦你进入框架部分，你将更好地理解并使用它们。到目前为止，你一直在使用进行操作。它是在前端系统像今天这样复杂之前编写的。本文是前端练级攻略第二部分，第一部分请看下面：前端练级攻略(第一部分) 在第二部分，我们将重点学习 JavaScript 作为一种独立的语言，如...

BWrong 2019-08-23 16:49 评论0 收藏0
ES6学习总结（一）

摘要：可以通过调用方法将创建一个新的类型的值，这个值独一无二，不与任何值相等。还可以使可扩展，在中，表达式被标准化为构造函数的一个方法，这意味着它是可扩展的。前端发展的太快了，快到ES6,ES7出来之后，今年已经是ES8了，但是纵然前端发展很快，我们除了马不停蹄的学习新的技术之外，也要沉下心来，好好的潜心磨砺自己，本文是整理了自己学习ES6之后相关的知识要点，寄希望于书之于笔，一来自己可以...

_ipo 2019-08-21 11:54 评论0 收藏0