vnsc5858威尼斯城官网ECMAScript6

时间:2019-05-11 09:41来源:计算机教程
  读阮老师的摘录笔记 ^_^ ECMAScript6介绍 # ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现# 有利于保证这门语言的开放性和中立性。# 标准在每年的 6 月份正式

 

读阮老师的摘录笔记^_^

ECMAScript6介绍

# ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现
# 有利于保证这门语言的开放性和中立性。
# 标准在每年的 6 月份正式发布一次
# 因此,ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等,

 

一,let/const

let和const 

1.1 let

let所声明的变量,只在let命令所在的代码块内有效。
for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i  ) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错,不存在变量提升

暂时性死区(temporal dead zone,简称 TDZ)
只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。

typeof x; // ReferenceError
let x;

作为比较,如果一个变量根本没有被声明,使用typeof反而不会报错。typeof undeclared_variable // "undefined" 所以,在没有let之前,typeof运算符是百分之百安全的,永远不会报错。现在这一点不成立了。
另外下面的代码也会报错,与var的行为不同。

// 不报错
var x = x;
// 报错
let x = x;

不允许重复声明
let不允许在相同作用域内,重复声明同一个变量。因此,不能在函数内部重新声明参数,除非在函数里面的子作用域声明。

let

ES6新增了let命令,用于声明变量。其用法类似var,但是声明的变量只在let命令所在的代码块内有效。

{
    let x = 10;
    var y = 20;
}

x  // ReferenceError: x is not defined
y  // 20

注意区别let和var,一个栗子:

vnsc5858威尼斯城官网 1

var声明变量存在变量提升。也就是在声明变量之前就可以使用该变量。

console.log(x)  // undefined,var声明变量之前可以使用该变量
var x = 10;

而let不会这样,let声明的变量不能在声明之前使用。

console.log(x)  // ReferenceError: x is not defined,let声明变量之前不可以使用该变量
let x = 10;

 

注意:

let不允许在相同的作用域内重复声明同一个变量。 

比如:

function foo(){
    let x = 10;
    var x = 20;
}  // 报错

再比如:

function foo(){
    let y = 10;
    let y = 20;
}  // 报错

 一个栗子,var声明的弊端:污染全局

vnsc5858威尼斯城官网 2

ES5中只有全局作用域和函数作用域,并没有块级作用域。

请看下面的示例: 

var name = 'lmj'

function foo(){
    console.log(name)
    if (false){
        var name = 'Bob'
    }
}
foo()  // undefined

出现上述现象的原因就是在函数内部,由于变量提升导致内存的name变量覆盖了外层的name变量。

类似的情况还出现在 for循环的计数变量最后会泄露为全局变量。 

for (var i=0;i<5;i  ){
    console.log('哈哈');
}
console.log(i);  // 5

ES6中的let声明变量的方式实际上就为JavaScript新增了块级作用域。

var name = 'lmj'

function foo(){
    console.log(name)
    if (false){
        let name = 'Bob'
    }
}
foo()  // lmj

此时,在foo函数内容,外层代码块就不再受内层代码块的影响。所以类似for循环的计数变量我们最好都是用let来声明。

再如:

vnsc5858威尼斯城官网 3

vnsc5858威尼斯城官网 4

 

1.2 块级作用域

ES6 允许块级作用域的任意嵌套。内层作用域可以定义和外层作用域同名的变量。块级作用域的出现,实际上使得获得广泛应用的立即执行函数表达式(IIFE)不再必要了。

ES5 规定,函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明。但是,浏览器没有遵守这个规定,为了兼容以前的旧代码,还是支持在块级作用域之中声明函数。ES6 引入了块级作用域,明确允许在块级作用域之中声明函数,但是只在使用大括号的情况下成立,如果没有使用大括号,就会报错。ES6 规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。

为了减轻因此产生的不兼容问题,ES6在附录B里面规定,浏览器的实现可以有自己的行为方式。注意这几条规定只对 ES6 的浏览器实现有效,其他环境的实现不用遵守,还是将块级作用域的函数声明当作let处理。

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

考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。

注:这一部分例子看教程代码。

本质上,块级作用域是一个语句,将多个操作封装在一起,没有返回值。用do表达式(提案)可以使块级作用域可以变为表达式。

let x = do {
  let t = f();
  t * t   1;
};

const

 

const用来声明常量。const声明变量必须立即初始化,并且其值不能再改变。

const声明常量的作用域与let相同,只在声明所在的块级作用域内有效。 

例如:

 

const PI = 3.14;

全局对象的属性:

ES6规定:var命令和function命令声明的全局变量依旧是全局对象的属性;let命令、const命令和class命令声明的全局变量不属于全局对象的属性。

查看下面的示例代码:

var x = 10;
let y = 20;
window.x  // 10
window.y  // undefined

vnsc5858威尼斯城官网 5

1.3 const命令

const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。

const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,不能控制指向值是否可变。因此,将一个对象声明为常量必须非常小心。

如果真的想将对象冻结,应该使用Object.freeze方法。除了将对象本身冻结,对象的属性也应该冻结。

ES5 只有两种声明变量的方法:var命令和function命令。ES6除了添加let和const命令,后面章节还会提到,另外两种声明变量的方法:import命令和class命令。所以,ES6 一共有6种声明变量的方法

变量的解构赋值

ES6允许按照一定的模式,从数组或对象中提取值,对变量进行赋值,这种方式被称为解构赋值。

var [x, y, z] = [10, 20, 30]
x  // 10
y  // 20
z  // 30

对象的解构赋值:

var {x, y} = {x: 10, y: 20}
x  // 10
y  // 20

vnsc5858威尼斯城官网 6

1.4 顶层对象的属性

ES5之中,顶层对象的属性与全局变量是等价的。

顶层对象的属性与全局变量挂钩,被认为是JavaScript语言最大的设计败笔之一。ES6为了改变这一点,一方面规定,为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。

字符串

1.5 global对象

ES5 的顶层对象,本身也是一个问题,因为它在各种实现里面是不统一的。

  • 浏览器里面,顶层对象是window,但 Node 和 Web Worker 没有window。
  • 浏览器和 Web Worker 里面,self也指向顶层对象,但是 Node 没有self。
  • Node 里面,顶层对象是global,但其他环境都不支持。

同一段代码为了能够在各种环境,都能取到顶层对象,现在一般是使用this变量,但是有局限性。

  • 全局环境中,this会返回顶层对象。但是,Node 模块和 ES6 模块中,this返回的是当前模块。
  • 函数里面的this,如果函数不是作为对象的方法运行,而是单纯作为函数运行,this会指向顶层对象。但是,严格模式下,这时this会返回undefined。
  • 不管是严格模式,还是普通模式,new Function('return this')(),总是会返回全局对象。但是,如果浏览器用了CSP(Content Security Policy,内容安全政策),那么eval、new Function这些方法都可能无法使用。

现在有一个提案,在语言标准的层面,引入global作为顶层对象。也就是说,在所有环境下,global都是存在的,都可以从它拿到顶层对象。垫片库system.global模拟了这个提案,可以在所有环境拿到global。

include、startsWith、endsWith

在此之前,JavaScript中只有indexOf方法可用来确定一个字符串是否包含在另一个字符串中。

ES6中又提供了3种新方法:

includes():返回布尔值,表示是否找到了参数字符串。

stratsWith():返回布尔值,表示参数字符串是否在源字符串的开始位置。

endsWith():返回布尔值,表示参数字符串是否在源字符串的结尾位置。

示例:

var s = "Hello world!";

s.includes("o")  // true
s.startsWith("Hello")  // true
s.endsWith("!")  // true

这三个方法都支持第2个参数,表示开始匹配的位置。

示例:

s.includes("o", 8)  // false
s.startsWith("world", 6)  // true
s.endsWith("Hello", 5)  // true

二,变量的解构(Destructuring)赋值

编辑:计算机教程 本文来源:vnsc5858威尼斯城官网ECMAScript6

关键词: