ES6读后总结

时间:2019-02-19
本文章向大家介绍ES6读后总结,主要包括ES6读后总结使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

读阮一峰的ECMAScript 6 入门的读书笔记,原文链接为
http://es6.ruanyifeng.com/#README

ES6

let (块级作用域)

  • let只在命令所在的代码块内有效
  • for循环适合用let
  • let不会变量提升
  • let存在暂时性死区(TDZ),在声明变量之前,该变量都是无法使用的(如let x= x就会报错)
  • 因为let的存在,typeof不再是一个百分百不会报错的操作,在TDZ中也会报错。
  • let不允许重复声明
// 报错
function func() {
  let a = 10;
  var a = 1;}
// 报错
function func() {
  let a = 10;
  let a = 1;}

不使用块级作用域的问题


var tmp = new Date();

function f() {
 console.log(tmp);
 if (false) {
   var tmp = 'hello world';
 }}

f(); // undefined

var s = 'hello';

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

console.log(i); // 5

  • E55不允许在块级作用域(if,try)中函数声明(函数表达式声明倒是可以),而ES6允许。
  • ES6的函数声明类似于let不会提升

const

  • 声明常量,不可改变
  • 和let一样属于块级作用域
  • 也存在暂时性死区(TDZ),声明不可提升
  • const只保证变量指向的地址的值不变。因为变量直接指向简单类型的数据(数值、字符串、布尔值),所以保证简单类型的数据不变。而变量只指向一个地址,指向复合类型数据(对象和数组),所以无法保证复合类型的数据不变。
  • 如果想要将对象冻结,则使用Object.freeze方法
const foo = Object.freeze({})
  • Object.keys(obj) 能讲对象中的key以数组的方式返回

顶层对象的属性

  • 浏览器:window,self
    Node:global
    Web Worker: self

  • 缺点:

    1. 无法编译时就报出变量未声明(因为全局变量可能是顶层对象创造的,是动态的)
    2. 可能无意间创建了全局变量
    3. 顶层对象的属性到处可以读写,不利于模块化编程
    4. window对象指的是浏览器的窗口对象,不大合适。
  • ES6规定,let,const,class命令声明的全局变量不属于顶层对象的属性。

  • 函数中的this在严格模式下指向的不是顶层对象而实undefined

想要在严格模式下返回全局对象的代码(如果用了CSP,Content Security Policy就无法使用)

new Function('return this')()
  • npm安装 system.global 可以统一顶层对象为global
  1. // ES6 模块的写法
    import shim from ‘system.global/shim’; shim();
    保证各种环境里面,global对象都是存在的。

  2. // ES6 模块的写法
    import getGlobal from ‘system.global’;
    const global = getGlobal();
    上面代码将顶层对象放入变量global。

变量的解构赋值

let [a, b, c] = [1, 2, 3];
可以从数组中提取值,按照对应位置,对变量赋值。
这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。


let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。

let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null

Map与Object的区别

https://stackoverflow.com/questions/18541940/map-vs-object-in-javascript
map便于以for…of 遍历对象,以及能直接获取对象的size。

字符串

codePointAt

  • codePointAt与 for…of 方法结合能正确识别32位的UTF-16字符。

let s = '