ES6的基础知识(一)

1.ECMAScript 6.0(以下简称ES6)。

2.ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的其中一种实现。

3.对ES6支持的浏览器:超过 90%的 ES6 语法特性都实现了。

 

4.Node(nodejs)是 JavaScript 的服务器运行环境(runtime)。

5.Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码。

npm install --save-dev @babel/core  //在项目目录中安装命令

(1)配置文件.babelrc,存放在项目的根目录下。用于设置转码规则和插件。所有 Babel 工具和模块的使用,都必须先写好.babelrc

//基本格式
{
"presets": [], //设定转码规则的:如安装官方提供的最新规则集:npm install --save-dev @babel/preset-env
"plugins": [] }

将新安装的规则加入.babelrc

  {
    "presets": [
      "@babel/env"
    ],
    "plugins": []
  }

(2)使用工具@babel/cli进行命令行转码

npm install --save-dev @babel/cli  //安装
#基本用法:

# 转码结果输出到标准输出 npx babel example.js # 转码结果写入一个文件 #
--out-file 或 -o 参数指定输出文件 npx babel example.js --out-file compiled.js //单个文件转码输出到compiled.js # 或者 npx babel example.js -o compiled.js # 整个目录转码 # --out-dir 或 -d 参数指定输出目录 npx babel src --out-dir lib //整个src目录转码输出到lib # 或者 npx babel src -d lib # -s 参数生成source map文件 npx babel src -d lib -s

(3)@babel/node模块,实现ES6的REPL(Read Eval Print Loop:交互式解释器),可以直接运行ES6代码

npm install --save-dev @babel/node   //安装
npx babel-node  //进入REPL环境命令
npx babel-node
> (x => x * 2)(1)  //直接执行表达式代码
2
# es6.js 的代码
# console.log((x => x * 2)(1));
npx babel-node es6.js  //直接运行脚本文件
2

(4)使用@babel/register改写require命令。目的是每当使用require加载.js,.jsx,.es和.es6后缀的文件,会自动先用babel转码。它是实时转码,所以只适合在开发环境使用。

npm install --save-dev @babel/register  //安装

// index.js //在一个名为index.js的文件引入es6.js
require('@babel/register');  //要首先加载@babel/register
require('./es6.js');  //引入上面的es6.js文件

//使用
node index.js   //直接执行es6.js中的es6代码,不需要手动对index.js转码

(5)babel API:如果代码需要调用babel API进行转码,那么需要用到@babel/core模块,参考这里

(6)使用@babel/polyfill,为当前环境提供垫片。babel默认只转换新的javas句法(syntax),不转换新的API,如Set,Map等全局对象都不会转码。

ES6在Array对象新增了Array.from方法。babel就不会进行转码,如果想运行这个方法,必须使用babel-polyfill。

http://babeljs.io/docs/usage/options/   //安装

//在脚本头部引入
import '@babel/polyfill';
// 或者
require('@babel/polyfill');

(7)使用@babel/standalone模块,将babel用于浏览器环境。

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>  //将代码插入网页
<script type="text/babel">
// Your ES6 code
</script>

 

6.let 和 const 命令声明变量

(1)let

let 类似于var,但声明的变量只在所在的代码块内有效

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

for循环计数器中就很适合使用let命令

如下例子:

var a = [];
for (var i = 0; i < 10; i++) { //循环变量会泄露为全局变量
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10
var a = [];
for (let i = 0; i < 10; i++) {  //let 声明的i每次循环都是一个从新声明的变量,不过javascript引擎内部会记住上一轮循环的值
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

 

另外:

for (let i = 0; i < 3; i++) { //正确运行是会输出3次abc,函数内部变量i与循环变量i不在同一个作用域,各自有单独的作用域
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

let 不存在变量提升的问题(变量可以在声明之前使用)

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

let的暂时性死区(TDZ):只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError,
  let tmp; //在块中暂形成了tmp的封闭作用域tmp,使得tmp不受全局tmp影响,造成了tmp='abc'出现未定义先使用的错误
}
if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

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

typeof x; // ReferenceError 
let x;

let 不允许在相同的作用域内重复声明同一变量for(var i =0;i<10;i++){a[i] = function(){console.log(i);}console.log(i);console.log(a[i]);console.log(a[i]())

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

let实际为javascript增加了块级作用域。有了块级作用域,使得原本广泛应用的立即执行函数表达式IIFE不再必要

// IIFE 写法
(function () {
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。ES6 规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。ES5是不允许的,不过浏览器为了兼容旧代码,并不会报错。

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

ES6 的块级作用域必须有大括号,如果没有大括号,JavaScript 引擎就认为不存在块级作用域。

 

 (2)const

const声明一个只读常量,一旦声明,值不能改变,所以一旦声明就要立即初始化

const PI = 3.1415;
PI // 3.1415

PI = 3; // TypeError: Assignment to constant variable.

const的作用域与let命令相同,块级内有效。

const声明的常量也不提升。

const声明同样存在暂时性死区TDZ。

const声明的常量也是不能重复。

const的本质:并不是变量的值不能改动,而是变量指向的那个内存地址所保存的数据不得改动。

对于简单类型:数值,字符串,布尔值,值就保存再变量指向的那个内存地址,因此等同于常量。

对于复杂类型:对象和数组,变量指向的内存地址,保存的只是一个指向实际数据的指针,保证的是指针不变,而指针指向的实际数据是可以改变的。

const foo = {};
// 为 foo 添加一个属性,可以成功
foo.prop = 123;  //如果想禁止添加属性,将对象冻结,可以使用const foo = Object.freeze({})
foo.prop // 123  //使用冻结,在严格模式时,该语句会报错。

// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only


//对数组同理
const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

除了对象冻结,也应将对象属性冻结,下面是将对象彻底冻结的函数

var constantize = (obj) => {
    Object.freeze(obj);
    Object.keys(obj).forEach((key,i) => {
        if(typeof obj[key] === 'object'){
            constantize(obj[key]);
        }
    });
}

7.变量的解构赋值:从数组和对象中提取值,对变量赋值。

(1)

let a = 1;
let b = 2;
let c = 3;

//以上等价于以下代码

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 // []

//解构不成功的,变量值就是undefined,如下都是:
let [foo] = [];
let [bar,foo] = [1]; //等同于let [bar,foo]=[1,],结果都是foo解构失败,为undefine
let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
//以上是不完全解构

如果右边不是可遍历结构,将报错。

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值。

(2)

解构默认值

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];  //因为null不严格等于undefined
x // null

(3)对象的解构赋值,与数组不一样的是,对象的解构赋值依据的属性同名,而数组依据的位置次序

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

这实际上说明,对象的解构赋值是下面形式的简写:

let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
let { foo: baz } = { foo: 'aaa', bar: 'bbb' }; //foo是匹配模式,baz才是变量
baz // "aaa"
foo // error: foo is not defined

对象解构同样有默认值。

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

(4)字符串解构

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
let {length : len} = 'hello';
len // 5

还有数值布尔值解构,函数参数解构赋值。

(5)变量解构赋值用途

  • 交换变量的值
let x = 1;
let y = 2;

[x, y] = [y, x];
  • 从函数返回多个值
// 返回一个数组

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();
  • 函数参数的定义
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
  • 提取JSON数据
let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]
  • 函数参数的默认值//避免在函数体内再写var foo= config.foo ||'default'这样的语句
jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};
  •  遍历Map结构
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world
//特别地
// 获取键名
for (let [key] of map) {
  // ...
}

// 获取键值
for (let [,value] of map) {
  // ...
}
  • 输入模块的指定方法
const { SourceMapConsumer, SourceNode } = require("source-map")

 

 

https://www.cnblogs.com/libin-1/p/6716470.html

http://caibaojian.com/es6/

https://www.jianshu.com/p/87008f4f8513

https://www.runoob.com/w3cnote/es6-tutorial.html

http://es6.ruanyifeng.com/

posted @ 2019-06-04 11:11  WayneLiu123  阅读(913)  评论(0编辑  收藏  举报