ES6学习之一

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES6学习之一脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

周末两天学习了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

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

脚本宝典总结

以上是脚本宝典为你收集整理的ES6学习之一全部内容,希望文章能够帮你解决ES6学习之一所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。