美文网首页
es6读书笔记

es6读书笔记

作者: 广州芦苇科技web前端 | 来源:发表于2018-12-14 23:36 被阅读0次

标签: es6入门读书笔记


let命令

let与var的区别

  • let所声明的变量只在let命令所在的代码块内有效(for循环的计数器适合使用let声明)
  • 使用let所声明的变量不存在变量提升,在声明之前使用变量会报错
  • let不能重复声明同一个变量,也不能在函数内部重新声明变量,这样会报错。

暂时性死区

  • 在块级作用域中使用let声明一个变量,那么在执行代码时这个变量就被绑定到了这个块级作用域而不会受外部作用域的影响。
var tmp = 12
if (true) {
    console.log(tmp)//ReferenceError: tmp is not defined
    let tmp
}

上面的代码在块级作用域中使用let声明了tmp那么在操作tmp时就不会去块级作用域外部寻找了,而变量声明又在使用之后那么就会报错。

  • 如果变量使用let声明那么typeof就不再安全,因为如果在变量声明之前使用typeof 变量那么也会产生语法错误,而没有声明的变量反而不会报错,会返回undefined

块级作用域

ES6新增的块级作用域的特点是:外层作用域无法读取内层作用域的变量。内层作用域可以定义外层作用域的同名变量而不会覆盖外层作用域的变量。

ES5规定,函数只能在顶层作用域中声明,不能够在块级作用域中声明,但是在浏览器中这么写不会报错,但是由于函数的声明提示,在块级作用域中声明的函数与在全局作用域中声明的函数没有区别,但是根据ES5的规定,这么做是非法的。

但是在ES6中引入块级作用域之后,允许在块级作用域中声明函数,块级作用域中的函数声明的行为类似于let,在块级作用域之外无法引用。

但是注意,为了减轻因为新的处理规则而带来的不兼容的问题,浏览器的实现会有所不同,在ES6浏览器中,处理规则如下:

  • 允许在块级作用域中声明函数。
  • 函数声明类似于var,会将声明提升到全局作用域或函数作用域的头部。
  • 同时,函数声明还会提升到所在的块级作用域的头部。

在浏览器的ES6环境中下面的代码会报错:

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

const命令

const声明一个只读的常量,声明之后常量的值就不可以改变,另外cosnt命令也具备let命令所有特性:

  • 不能重复声明
  • 只在声明所在的块级作用域中有效
  • 存在暂时性死区

const声明值不可变得本质:

  • 变量指向的内存地址所保存的数据是不可变的
  • 对于简单数据类型来说,变量指向的内存地址所保存的数据就是数据本身。
  • 对于复杂数据类型来说,变量指向的内存地址所保存的是在堆里面的一个引用,只是一个指向实际数据的指针。只要保持这个指针不变即可,对象内部属性是可以变化的。

如果想将一个对象冻结,使其属性无法改变,可以使用object.freeze()方法。一旦对对象使用了这个方法,那么如果试图修改对象的属性时,在常规模式下就不起作用,而在严格模式下对报错。

顶层对象属性

在ES5中在全局作用与声明的所用变量都作为顶层对象的属性,在浏览器中顶层对象是window,在Node中顶层对象是global,但是ES6中为了改变这一点,并且保持兼容性,var命令和function命令声明的全局变量依然是顶层对象的属性,但是let命令和const命令、class命令声明的全局变量不属于顶层对象的属性。

数组的解构赋值

基本用法

  1. 数组的结构赋值属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
  2. 如果解构不成功,值就是undefined。
  3. 还有一种情况是不完全解构,左边的模式只匹配一部分右边,这种情况下依然可以解构成功。
  4. 如果等号右边不是数组(或者严格来说不是可遍历的结构)就会报错。
  5. 只要某种数据结构具有Iterator接口,就可以采用数组的形式结构赋值。

默认值

在解构赋值时可以指定默认值,只有当数组成员严格等于===undefined时默认值才会生效,如果一个数组成员是null,默认值不会生效。

如果默认值是一个表达式,那么这个表达式是惰性求值,只有在用到的时候才会求值。如果没有用到表达式不会执行。

默认值可以引用结构赋值的其他变量,但是这个变量必须是已经声明,如果没有声明会报错。

对象的解构赋值

由于数组元素是有顺序的,所以变量取值由它的位置所决定,但是对象的属性是没有次序的,变量必须与属性同名,才可以取到对应的值。

如果解构失败,变量的值等于undefined。

如果解构模式是嵌套对象,而子对象所在的父属性不存在,那么会报错。

字符串的解构赋值

字符串也可以解构赋值,因为此时字符串被转换成立一个类似数组的对象,同时这个对象有一个length属性,也可以解构出来。

数值和布尔值的解构赋值

解构赋值时,如果等号右边是数值和布尔值,会先转为对象。

解构赋值的规则是:只要等号右边的值不是对象或数组,就先将其转换为对象,由于undefined和null无法转换为对象,所以对他们解构赋值时会报错。

往期精彩回顾


李成文 广州芦苇科技web前端工程师

相关文章

  • es6读书笔记

    标签: es6入门读书笔记 let命令 let与var的区别 let所声明的变量只在let命令所在的代码块内有效(...

  • ES6语法

    Tags: ES6 [TOC] ES6 常量 //ES6 const PI=3.1415926;//const声明...

  • ES6读书笔记

    es6又引入了一种新的数据类型 Symbol es6前有6钟数据类型 :undefined number str...

  • 细说JS数组

    此乃犀牛书(第七章 数组)读书笔记,又结合了ES6中数组的扩展部分做的知识梳理。精华部分就是手工绘制的两张数组总结...

  • es6新特性

    es6新特性 1.函数参数添加默认值 es6之前 es6之后: 2.字符串拼接 es6之前: es6之后: 3.解...

  • 函数默认参数

    非ES6写法 ES6写法

  • ES6基础

    ES6特性 ES6更具备强大的生产力 ES6对象拷贝

  • ES6箭头函数简介

    @(JS技巧)[ES6|箭头函数] ES6箭头函数(Arrow Functions) ES6可以使用“箭头”(=>...

  • React与ES6(一)开篇介绍

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的prope...

  • React与ES6(三)ES6类和方法绑定

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的prope...

网友评论

      本文标题:es6读书笔记

      本文链接:https://www.haomeiwen.com/subject/pjtohqtx.html