ECMAScript6

1. ECMAScript 6

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。

Ecmascript 是 JavaScript 语言的标注规范。

JavaScript 是 Ecmascript 规范的具体实现，具体实现取决于各大浏览器厂商的支持进度。

Ecmascript 6 也被称作 Ecmascript 2015。

各大浏览器厂商对于最新的 Ecmascript 6 标准支持可以参照：http://kangax.github.io/compat-table/es6/。

对于不支持 ES6 的环境，可以使用一些编译转码工具做转换处理再使用，例如 babel。

1.1 变量声明let与const

let：

  • let 类似于 var，用来声明变量
  • 通过 let 声明的变量不同于 var，只在 let 命令所在的代码块内有效（块级作用域）
  • let 声明的变量不存在变量提升
  • let不允许在相同作用域内，重复声明同一个变量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 1. let声明的变量不存在预解析
console.log(flag);
// var flag = 123;	->打印123
let flag = 456;	// 打印undefined
------------------------

// 2. let声明的变量不允许重复（在同一个作用域内）
let flag = 123;
// let flag = 456;->已声明，不允许重复
--------------------------

// 3. ES6引入了块级作用域
// 块内部定义的变量，在外部是不可以访问的
if (true) {
    // var flag = 123;->打印123
    let flag = 123;
}

{
    // 这里是块级作用域
    let flag = 111;
    console.log(flag);// 打印111
}
console.log(flag);// 打印undefined

for (let i = 0; i < 3; i++) {
    // for循环括号中声明的变量只能在循环体中使用
    console.log(i);
}
console.log(i);// 打印undefined
---------------------------------------
    
// 4. 在块级作用域内部，变量只能先声明再使用
if (true) {
    console.log(flag);// 打印undefined
    let flag = 123;
}

const：

  • const声明一个只读的常量。一旦声明，常量的值就不能改变
  • const 声明必须初始化
  • const的作用域与let命令相同：只在声明所在的块级作用域内有效
  • const命令声明的常量也是不提升，必须先声明后使用
  • const声明的常量，也与let一样不可重复声明
1
2
3
4
5
6
7
8
// const用来声明常量
// 1. const声明的常量不允许重新赋值
const n = 1;
// n = 2;
--------------------------------

// 2. const声明的常量必须初始化
// const abc;

1.2 变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

1.2.1 数组解构

1
2
3
4
let [a, b, c] = [1, 2, 3];	->1 2 3
let [a, b, c] = [, 123,];	->undefined 123 undefined
let [a = 111, b, c] = [, 123,];	->111 123 undefined
console.log(a, b, c);

1.2.2 对象解构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 1. 赋值与顺序无关
let {foo, bar} = {foo: 'hello', bar: 'hi'};	->hello hi
let {foo, bar} = {bar: 'hi', foo: 'hello'};	->hello hi
console.log(foo, bar);
-------------------------------------

// 2. 对象属性别名(如果有了别名，那么原来的名字就无效了)
let {foo: abc, bar} = {bar: 'hi', foo: 'nihao'}; ->nihao hi
// console.log(foo, bar); ->foo未定义
console.log(abc, bar);
--------------------------------------

// 3. 对象的解构赋值指定默认值
let {foo: abc = 'hello', bar} = {bar: 'hi'}; ->hello hi
console.log(abc, bar);

1.2.3 函数参数解构

1
2
3
4
5
function f (p1, { p2 = 'aa', p3 = 'bb' }) {
    console.log(p1, p2, p3)
}

f('p1', { p2: 'p2' }) ->p1 p2 bb

1.2.4 字符串解构

1
2
3
4
5
6
7
8
let [a, b, c, d, e, length] = "hello";
console.log(a, b, c, d, e); ->h e l l o
console.log(length); ->undefined

console.log("hello".length); ->5

let {length} = "hi";
console.log(length); ->2

1.3 字符串

实用方法：

1
2
3
4
5
6
7
8
9
includes(String)：返回布尔值，判断字符串中是否包含指定的字串。参数一：匹配的字串；参数二：从第几个开始匹配
startsWith(String)：返回布尔值，判断字符串是否以特定的字串开始。
endsWith(String)：返回布尔值，判断字符串是否以特定的字串结束。

console.log('hello world'.includes('world',7)); ->false

let url = 'admin/index.php';
console.log(url.startsWith('admin')); ->true
console.log(url.endsWith('phph')); ->false

模板字符串：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 普通拼接
let obj = {
    username: 'lisi',
    age: '12',
    gender: 'male'
}

let tag = '<div><span>' + obj.username + '</span><span>' + obj.age + '</span><span>' + obj.gender + '</span></div>';
console.log(tag);
-------------------------------------------------------------
    
// 反引号表示模板，模板中的内容可以有格式，通过${}方式填充数据
let fn = function (info) {
    return info;
}
let tpl = `
    <div>
        <span>${obj.username}</span>
        <span>${obj.age}</span>
        <span>${obj.gender}</span>
        <span>${1 + 1}</span>
        <span>${fn('nihao')}</span>
    </div>
`;
console.log(tpl);
  • 模板字符串（template string）是增强版的字符串，用反引号（`）标识
  • 它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量
  • 如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中
  • 模板字符串中嵌入变量，需要将变量名写在 ${} 之中
    • 大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性
    • 大括号内部还可以调用函数

1.4 数组

方法：

1
2
3
4
5
6
7
8
9
Array.from() 将一个伪数组转为一个真正的数组
              实际应用中，常见的类似数组的对象是DOM操作返回的NodeList集合，
              以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。
Array.of() Array.of方法用于将一组值，转换为数组
           这个方法的主要目的，是弥补数组构造函数Array()的不足。
           因为参数个数的不同，会导致Array()的行为有差异。
find() 查找数组中某个元素
findIndex() 查找数组中某个元素的索引下标
includes() 返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似

实例方法：

ES6提供三个新的方法——entries()，keys()和values()——用于遍历数组.
可以用 for...of 循环进行遍历，唯一的区别是 keys() 是对键名的遍历、
values() 是对键值的遍历，entries() 是对键值对的遍历。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const arr = [
    {foo: 'a', name: 'aaa'},
    {foo: 'b', name: 'bbb'},
    {foo: 'c', name: 'ccc'},
];

var item = arr.find(function (item, index) {
    return item.foo === 'b'
});

var item = arr.find(i => i.foo === 'b');

var index = arr.findIndex(function (item, index) {
    return item.foo === 'b'
});
------------------------------------------------------------------

let arr = ['a', 'b', 'c'];

for (let index of arr.keys()) {
    console.log(index)
}

// 不支持
for (let item of arr.values()) {
    console.log(item)
}

// 遍历数组
for (let [index, item] of arr.entries()) {
    console.log(index, item)
}

// 是否包含某个元素
console.log(arr.includes('d'));

1.5 函数的扩展

1.5.1 参数默认值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function foo(param) {
    let p = param || 'hello';
    console.log(p); ->hello
}

foo('hi'); ->hi

function foo(param = 'nihao') {
    console.log(param); ->nihao
}

foo('hello kitty'); ->hello kitty

------------------------------------------
function foo(uname = 'lisi', age = 12) {
    console.log(uname, age); ->lisi 12
}

foo('zhangsan', 13); ->zhangsan 13
foo(); ->lisi 12

1.5.2 参数解构赋值

1
2
3
4
5
6
function foo({uname = 'lisi', age = 13} = {}) {
    console.log(uname, age);
}

foo(); ->lisi 13
foo({uname: 'zhangsan', age: 15}); ->zhangsan 15

1.5.3 rest 参数（剩余参数）

1
2
3
4
5
6
7
function foo(a, b, ...param) {
    console.log(a);
    console.log(b);
    console.log(param);
}

foo(1, 2, 3, 4, 5); ->1 2 [3,4,5]

1.5.4 扩展运算符…

1
2
3
4
5
6
7
8
9
10
11
12
13
function foo(a, b, c, d, e, f, g) {
    console.log(a + b + c + d + e + f + g);
}

let arr = [1, 2, 3, 4, 5, 6, 7];
foo(...arr);
-----------------------------------------------
    
// 合并数组
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3); ->[1,2,3,4,5,6]

1.5.5 箭头函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
var f = v => v

上面的箭头函数等同于：

var f = function(v) {
    return v
}
-------------------------------------------
// 多个参数必须用小括号包住
let foo = (a, b) => {
    let c = 1;
    console.log(a + b + c);
};
foo(1, 2);

let arr = [123, 456, 789];
arr.forEach(function (element, index) {
    console.log(element, index);
});
arr.forEach((element, index) => {
    console.log(element, index);
});
--------------------------------------------------

// 箭头函数的注意事项：
// 1、箭头函数中this取决于函数的定义，而不是调用
function foo() {
    // 使用call调用foo时，这里的this其实就是call的第一个参数
    // console.log(this);
    setTimeout(() => {
        console.log(this.num);
    }, 100);
}

foo.call({num: 1});
--------------------------------------------------

// 2、箭头函数不可以new
let foo = () => {
    this.num = 123;
};
// new foo();
--------------------------------------------------

// 3、箭头函数不可以使用arguments获取参数列表，可以使用rest参数代替
let foo = (a, b) => {
    // console.log(a,b);
    console.log(arguments);//这种方式获取不到实参列表
}
foo(123, 456);

let foo = (...param) => {
    console.log(param);
}
foo(123, 456);

1.6 类与继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
class Animal {
    // 静态方法(静态方法只能通过类名调用，不可以使用实例对象调用)
    static showInfo() {
        console.log('hi');
    }

    // 构造函数
    constructor(name) {
        this.name = name;
    }

    showName() {
        console.log(this.name);
    }
}

let a = new Animal('spike');
a.showName();
// a.showInfo();
Animal.showInfo();
------------------------------------------------------------

// 类的继承extends
class Dog extends Animal {
    constructor(name, color) {
        super(name);//super用来调用父类
        this.color = color;
    }

    showColor() {
        console.log(this.color);
    }
}

let d = new Dog('doudou', 'yellow');
d.showName();
d.showColor();
// d.showInfo();
Dog.showInfo();

1.7 对象

属性的简洁表示法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var foo = 'bar';
var baz = {foo};
baz {foo: "bar"}

等同于
var baz = {foo: foo}
-----------------------------------------------------------
    
除了属性简写，方法也可以简写:
var o = {
    method() {
        return "Hello!"
    }
}

等同于
var o = {
    method: function() {
        return "Hello!"
    }
}

2. Babel

第一：在项目根目录下创建一个 .babelrc 文件，写入以下内容：

1
2
3
4
{
  "presets": [
  ]
}

第二：安装对应的转码规则：

1
2
3
4
5
6
7
8
9
10
11
# ES2015转码规则
npm install --save-dev babel-preset-es2015

# react转码规则
npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3

第三：将 .babelrc 文件中修改为以下内容：

1
2
3
4
5
{
  "presets": [
    "es2015"
  ]
}

第四步（从第四步开始，前三部必不可少）：

  • babel-cli：命令行转码
  • babel-node：babel-cli工具自带一个babel-node命令，提供一个支持ES6的REPL环境
  • babel-register：实时转码，所以只适合在开发环境使用
  • babel-core：如果某些代码需要调用Babel的API进行转码，就要使用babel-core模块

babel-cli：

一种使用方式就是全局安装：npm install -g babel-cli（可以通过 npm root -g 查看全局包安装目录），
只要全局安装了 babel-cli，则会在命令行中多出一个命令：babel。

这里如果使用全局安装的 babel-cli 进行转码是没有问题的，但是问题是如果一旦项目给了别人，别人不知道你使用了这个转码工具，所以解决方式就是将 babel-cli 安装到本地项目中：

1
npm install --save-dev babel-cli

这种第三方命令行工具如果安装到本地项目，会在 node_modules 中生成一个目录：.bin，然后第三方命令行工具会将对应的可执行文件放到该目录中。这样的话，就可以直接在本地项目中使用该第三方命令行工具了。

对于如何使用，则可以通过配置 package.json 文件中的 scripts 字段来配置使用：

1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "babel-demo",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel demo1.js"
  },
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0"
  }
}

babel-register（适合开发阶段，实时编码转换）:

第一：安装 babel-register

1
npm install --save-dev babel-register

第二：添加一个傀儡文件(main.js)：

1
2
require('babel-register')
require('你的核心功能代码入口文件模块')

第三：使用 node 执行 main.js，而不是你的入口文件。



-------------本文结束感谢您的阅读-------------



本文作者： Wgy
本文标题： ECMAScript6
本文链接： https://wgy1993.gitee.io/archives/fa865a02.html
版权声明： 本作品采用 CC BY-NC-SA 4.0 进行许可。转载请注明出处！
知识共享许可协议
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

本站总访问量:

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

程序员的一天