ES6

  js
  11 分钟 读完 (大约 1622 个字) 0次访问

ECMAScript2015(ES6)是Javascript最标准的语法式样，是在2015年6月由Ecma国籍组织公布的最新版本，现在已经被多个领域和浏览器所广泛采纳和使用。

let命令

let命令比var命令更加严谨，使用let命令定义变量可以解决var定义变量的作用域问题，以及重复定义问题

1
2
3
4
5
6
if (true) {
    var i = 1;	// ES5
    let j = 1;	// ES6
}
console.log(i);
console.log(j); //变量i未找到
1
2
3
4
5
6
7
8
9
var i = 0;
switch (i) {
  case 0:
    let value = "helo";
    break;
  case 1:
    let value = "world"; //重复定义错误
    break;
}

const命令

用于定义常量

1
2
3
4
5
6
7
8
9
10
const data = 10;

//data = 100; // error

const list = [10,20,30];

list[0] = 100;	// ok
list.push(2);	// ok

//list = [1,2,3];	// error

进制转换

1
2
3
4
5
6
7
8
9
10
11
12
13
console.log(0b10); //2
console.log(0o10); //8
console.log(0x10); //16

console.log(0b11 === 3); //true
console.log(0o10 === 8); //true
console.log(0x10 === 16);//true

let num = 10;
console.log(num.toString(8)); //8进制转换
console.log(num.toString(2)); //2进制转换
console.log(num.toString(16));//16进制转换
console.log(num.toString(5)); //5进制, 看成5进制转换

嵌入字符串

定义模板

1
2
3
4
let name = "Koma";
let mystr = "你好，${name}!";	// 嵌入变量name

console.log(mystr);

解析模板

1
2
3
4
5
6
7
8
9
10
$ node
> function tagged(formats, ...args){
...     console.log(formats)
...     console.log(args)
... }
undefined
>
> tagged`你好，${name}！再见。`
[ '你好，', '！再见。' ]
[ 'Koma' ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let name = "tt";
let addr = "重庆"

let str = markdown`我是${name}, 我住在${addr}!`;
console.log(str);	// 我是**tt**, 我住在**重庆**!

// 关键词加粗显示
function markdown(formats, ...args) {
    let result = "";
    for(let i = 0; i < formats.length; ++i) {
        result += formats[i];
        result += (args[i]) ? `**${args[i]}**` : "";
    }
    return result;
}

Symbol原始类型

Symbol内部有个唯一的id（是一个hash值），在作比较时比较的是该id值。

1
2
3
4
5
6
7
8
9
10
11
let str1 = String("HeloWorld");
let str2 = String("HeloWorld");
console.log(str1 == str2);  //结果：true
console.log(str1 === str2); //结果：true, new出来的不相等

let s1 = Symbol("mySymbol");
let s2 = Symbol("mySymbol");
console.log(typeof s1);     //结果：symbol
console.log(s1.toString()); //结果：Symbol(mySymbol)
console.log(s1 == s2);      //结果：false
console.log(s1 === s2);     //结果：false

使用场景

  • 作为常量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const Java = Symbol();
const Ruby = Symbol();
const Perl = Symbol();
const Php  = Symbol();
const VB   = Symbol();

var lang = Php;

if (lang === Java) {
    console.log('Java的未来在哪里？');
}
if (lang === Ruby) {
    console.log('再学个Ruby on Rails吧。');
}
  • 作为属性
1
2
3
4
5
6
7
8
9
10
let s1 = Symbol("mySymbol");
let s2 = Symbol("mySymbol");

var obj = {};
obj[s1] = "helo";
obj[s2] = "world";

console.log(obj);
console.log(obj[s1]);
console.log(obj[s2]);
  • 办隐藏属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const MYKEY = Symbol();

class User {
    constructor(key,name,age){
        this[MYKEY] = key;
        this.name = name;
        this.age = age;
    }
    checkKEY(key){
        return this[MYKEY] === key;
    }
}

let user = new User(123, 'Curry', 29);
console.log(user.name, user.age, user[MYKEY]);
console.log(user.checkKEY(123));   //true
console.log(user.checkKEY(456));   //false
console.log(Object.keys(user));    //[ 'name', 'age' ]
console.log(JSON.stringify(user)); //{"name":"Curry","age":29}

解构赋值

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
//数组赋值
let [a, b, c] = [10, 20, 30];
console.log(a, b, c); //10 20 30

let [x, y, ...other] = [1,2,3,4,5];
console.log(x, y, other); //1 2 [ 3, 4, 5 ]

//对象赋值
let {name, age} = { name: 'Koma', age: 20 };
console.log(name, age);

//函数赋值
function func1() {
    return [10, 20];
}
let [num1, num2] = func1();	
console.log(num1, num2);

//函数参数名指定
function func2({x=1, y=2}){
    return x+y;
}
console.log(func2({}));           //3
console.log(func2({x:10}));       //12
console.log(func2({y:10}));       //11
console.log(func2({x:10, y:20})); //30

for….of循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let list = [10, 20, 30];
Array.prototype.Len = list.length;
Array.prototype.getLen = function () {return Len};

// for...of 只遍历集合中的元素（只关心值）
for(let val of list)
    console.log(val);

// for...in 遍历对象中的所有属性
console.log("----------------------")
for(let val in list)
    console.log(val, list[val]);

/** 运行结果
    10
    20
    30
    ----------------------
    0 10
    1 20
    2 30
    Len 3
    getLen [Function]
*/

默认/可变长形参

  • 形参默认值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function add(a=1, b=a){
    return a+b;
}
console.log(add());
console.log(add(10));
console.log(add(10, 20));

//必须指定参数
function required(){
    throw ;
}
function sayBye(name=required()){
    console.log(`${name} bye!`);
}
sayBye('Koma');
//sayBye();		// Error
  • 可变长形参
1
2
3
4
5
6
7
8
function sum(...args) {
    let result = 0;
    args.forEach(e => result += e);	// 箭头函数
    return result;
}

console.log(sum(1, 2, 3));
console.log(sum(1, 2, 3, 4, 5, 6));

Array扩展

  • includes()：是否包含某个元素， 传入元素即可。
  • find()：查找某个元素。箭头函数返回ture表示找到了，并返回该元素。
  • findIndex()：返回要查找值得索引，没有则返回-1。
  • forEach()：遍历每一项，不能终止
  • some()：箭头函数返回true，终止遍历
  • filter()：过滤，返回一个新数组。箭头函数返回false表示过滤
  • reduce(): 对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值
1
2
3
4
5
6
> let p = [{name: "tt", age: 12}, {name: "ttt", age: 14}];
undefined
> p.reduce((a, b) => a + b.age, 0);
> 26

// a上一次的计算的结果， b数组中的元素， reduce的第二个参数，设置a的初始值

String拓展

  • startsWith()：判断字符是否以…开头
  • endsWith()
  • repeat(n)：将字符串重复n次，并返回新串
  • padStart()：用于填充字符串，如时间格式化显示。参数1字符串长度，参数2用于填充的字符
  • padEnd(maxLength, fillString=’’)

定义基本对象(ES5)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let book = {
    title : "ES6从入门到学会",    
    price : 25,
    publish : "小马出版社",
    toString(){
        console.log(`<<${this.title}>> is ${this.price}元。`);
    }
};

book['lang'] = "简体中文";      // 添加属性
book.price = 49;                // 修改属性z

console.log(book);
book.toString();

类class

支持继承extends

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
class Player {
    // 构造方法
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // setter、getter
    set sex(sex) { this._sex = sex; }
    get sex() { return this._sex; }

    // 静态方法
    static info() { console.log("这是一个球员类，您可以用它建立自己的球员！"); }

    // 实例方法
    show() { console.log(`${this.name} ---- ${this.age}`); }
}

Player.info();
let player = new Player("tt", 18);
console.log(player);		// Player { name: 'tt', age: 18 }

player._sex = "man";
console.log(player);		// Player { name: 'tt', age: 18, _sex: 'man' }
console.log(player.name, player._sex, player.age);	// tt man 18

迭代生成器

注意：fanction后面有一个*

1
2
3
4
5
6
7
8
9
function* countDown(number) {
    while(number) {
        yield number--;
    }
}

for(let num of countDown(5)) {
    console.log(num);	// 从5打印到1
}

迭代器

  • 方式一
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class PlayerList {
    constructor(list) { this.list = list; }

    [Symbol.iterator]() {
        let cur = 0;
        let _list = this.list;
        return {
            next() { 
                // {value:元素值, done: 是否停止迭代};
                return cur < _list.length ? {value:_list[cur++], done:false} : {done:true}
            }
        }
    }
}

let playlist = new PlayerList(["Curry", "Harden"]);
for (let player of playlist) {
    console.log(player);
}
  • 方式二：使用yield
1
2
3
4
5
6
7
8
9
10
11
class PlayerList {
    constructor(list) { 
        this.list = list; 
        this[Symbol.iterator] = function*() {
            let cur = 0;
            while (cur < list.length) {
                yield list[cur++];
            }
        }
    }
}

模块化设计

服务器端模块化规范(CommonJs)

  • 模块分为单文件模块与包
  • 导出：module.exports = {}和exports.模块名 = {}
  • 导入：const 接收名称 = require("...")

ES6统一标准

  • 默认导出与默认导入

    • 默认导出：export default {}， 只能导出一次
    • 默认导入：import 接收名称 from ‘模块标识符’

  • 按需导出/导入

    • 导出：export let num = 10， 可以导出多次
    • 导入：import { num } from '...'

练习

1
2
3
4
5
6
7
8
9
10
11
12
13
// 定义两个函数
function add(...args) {}
function mul(...args) {}

exports.model = {add, mul};				// 导出
const model = require("./model").model;	// 导入

module.exports = {add, mul};			// 导出
const model = require("./model");		// 导入

// ES6默认导出/导入
export default {add, mul};
import model from 'model';
  , 

喜欢这篇文章？打赏一下作者吧

AJAX与跨域访问
NodeJs

评论

  关注我
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×