ES6学习

ES6学习
webstorm设置es6

let命令限定作用域

const常量定义

常量本身不能再赋值，但它里边的元素可以再赋值

进制转换

二进制：0b
八进制：0o
十六进制：0x

console.log(0b10);//2
console.log(0o10);//8
console.log(0x10);//10
/!*===:值一样，类型一样*!/
console.log(0b11 === 3);//true
console.log(0o10 === 8);//true
console.log(0x10 === 16);//true
/!*进制转换*!/
let num = 10;
console.log(num.toString(2));
console.log(num.toString(4));
console.log(num.toString(8));
console.log(num.toString(16));

嵌入字符串

/*字符串嵌入方式*/
/*字符串模板定义*/
let name = "shiyashu";
let mystr1 = "你好，${name}!";
/*``:反单引号,定义字符串模板*/
let mystr2 = `你好，${name}!`;
console.log(mystr1);
console.log(mystr2);
/*解析模板*/
function tagged(formats,...args) {
    console.log(formats);
    console.log(args);
}
tagged `你好，${name}!`

模板的延长线

/*字符串嵌入方式*/
/*字符串模板定义*/
/*模板的延长线*/
/*活用字符串模板*/
let name = "shiyashu";
let address = "网吧";
let mystr = `你好，${name}!
晚上一起去${address}玩吗？
等你的回信。`
console.log(mystr);
/*扩展文字模板*/
let fmtstr = markdown `你好，${name}!
晚上一起去${address}玩吗？
等你的回信。`;
console.log(fmtstr);
function markdown(formats,...args) {
    console.log(formats);
    console.log(args);
    var result = "# 信息标题\n";
    for(var i = 0;i < formats.length;i++){
        result += formats[i]+"**"+(args[i]|| '')+"**";
    }
    return result;
}

Symbol

/*ES6新增Symbol的原始类型*/
let str1 = String("helloworld!");
let str2 = String("helloworld!");
console.log(str1 == str2);
console.log(str1 === str2);
let s1 = Symbol("mySymbol!");
let s2 = Symbol("mySymbol!");
console.log(typeof s1);
console.log(s1.toString());
/*Symbol:内部唯一Id，hash值，比较*/
console.log(s1 == s2);
console.log(s1 === s2);

/*作为常量*/
const Java = Symbol();
const Ruby = Symbol();
const Perl = Symbol();
const Php = Symbol();
const VB = Symbol();
var lang = Java;
if (lang === Java) {
    console.log('Java的未来在哪里？');
}
if (lang === Ruby) {
    console.log('再学个Ruby on Rails吧');
}
/*作为属性*/
let s1 = Symbol("mySymbol!");
let s2 = Symbol("mySymbol!");
var obj = {};
obj[s1] = "hello";
obj[s2] = "world";
console.log(obj);
console.log(obj[s1]);
console.log(obj[s2]);
/*半隐藏属性*/
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, 'Kitty', 18);
console.log(user[MYKEY],user.name,user.age);
console.log(user.checkKEY(123));
console.log(user.checkKEY(456));
console.log(Object.keys(user));
console.log(JSON.stringify(user));

解构赋值

[destructuring assignment]

/*解构赋值*/
/*数组赋值*/
let [a,b,c] = [10,20,30];
console.log(a,b,c);
let [x,y,...other] = [1,2,3,4,5];
console.log(x,y,other);
/*对象赋值*/
let {name, age} = {name:'Kitty', age:18};
console.log(name, age);
/*函数赋值*/
let [num1, num2] = func1();
console.log(num1, num2);
function func1() {
    return [10,20];
}
/*函数参数名赋值*/
console.log(func2({}));
console.log(func2({x:10}));
console.log(func2({y:10}));
console.log(func2({x:10,y:10}));
function func2({x=1,y=2}) {
    return x+y;
}

数组循环 for… of

/*数组循环*/
let list = [10,20,30];
Array.prototype.Len = function () {};
/*只关心数组的值*/
for(let val of list)
    console.log(val)
/*关心对象所有属性*/
for(let val in list)
    console.log(val,list[val]);

函数的默认值

/*函数的默认值*/
/*字符参数*/
function sayHello(name = "kitty") {
    console.log(`hello ${name}`);
}
sayHello();
sayHello("shiyashu");
function add(a = 1, b = a) {
    return a+b;
}
console.log(add());
console.log(add(10));
console.log(add(10,20));
/*必须指定参数*/
function required() {
    throw new Error("参数未指定");
}
function sayBye(name = required()) {
    console.log(`${name} bye!`);
}
//sayBye();
sayBye("kitty");

可变长参数

/*可变长参数*/
function sum(...args) {
    let result = 0;
    args.forEach(val => {
        result += val;
    });
    return result;
}
/*function sum(...args) {
    let result = 0;
    args.forEach(function (val) {
        result += val;
    });
    return result;
}*/
console.log(sum(1,2,3));
console.log(sum(1,2,3,4,5,6,7,8,9,10));

箭头函数

[arrow Function]

/*箭头函数*/
let list = [10,20,30];
//ES5
let newlist = list.map(function (value,index) {
    return value * value;
});
console.log(newlist);
//ES6
newlist = list.map((value,index) => {
    return value * value;
});
console.log(newlist);
newlist = list.map(value => {
    return value * value;
});
console.log(newlist);

基本对象定义

/*基本对象定义*/
let title = "ES6从入门到放弃";
let price = 25;
let publish = "B站出版社";
let book = {
    title,price,publish,
    toString(){
        console.log(`<<${this.title}>> is ${price} 元`);
    }
};
book['lang'] = "简体中文";
console.log(book);
book.toString();

类定义class

/*类定义class*/
class Player{
    constructor(name,sex){
      this.name = name;
      this.sex = sex;
    }
    show(){
        console.log(`${this.name}的性别是${this.sex}`);
    }
    static info(){
        console.log("这是一个球员类，你可以使用他创建自己的球员！");
    }
}
let player = new Player("库里","男");
console.log(player.name,player.sex);
player.show();
Player.info();

setter，getter的定义

/*setter，getter的定义*/
class Player {
    constructor(name, sex) {
        this.name = name;
        this.sex = sex;
    }
    get age(){
        /*模板级变量：_*/
        return this._age;
    }
    set age(val){
        this._age = val;
    }
}
let player = new Player("库里","男");
console.log(player);
player.age = 28;
console.log(player);
console.log(player.age);

类继承

/*类继承*/
class Car{
    constructor(brand){
        this.brand = brand;
    }
    show(){
        console.log(`本车的品牌是${this.brand}`);
    }
}
class Lexus extends Car {
    constructor(brand, lineup){
        super(brand);
        this.lineup = lineup;
    }
    getPrice(){
        switch (this.lineup){
            case "RX":
                return 60;
            case "NX":
                return 40;
            default:
                throw new Error("未知车类别！");
        }
    }
}
let mycar = new Lexus("Lexus","RX");
mycar.show();
console.log("价格是：",mycar.getPrice(),"万");

循环我的对象

/*循环我的对象*/
let list = [10,20,30];
let mystr = '你好啊';
let mymap = new Map();
mymap.set('JS','Javascript');
mymap.set('PL','Perl');
mymap.set('PY','Python');
for (let val of list){
    console.log(val);
}
for (let val of mystr){
    console.log(val);
}
for (let [key,val] of mymap){
    console.log(key,val);
}
let it = mymap.values();
let tmp;
while(tmp = it.next()){
    console.log(tmp);
    if(tmp.done) break;
    console.log(tmp.value,tmp.done);
}

可迭代的对象

/*可迭代的对象*/
class Player {
    constructor(list){
        this.list = list;
    }
    [Symbol.iterator](){
        let current = 0;
        let that = this;
        return {
            next(){
                return current < that.list.length ? {
                    value: that.list[current++],
                    done: false
                }:{done:true};
            }
        };
    }
}
let player = new Player(['Curry','Harden','LeBron']);
for(let tmp of player){
    console.log("name:",tmp);
}

简单迭代生成器

/*简单迭代生成器*/
function* myGenerator(){
    yield '一';
    yield '条';
    yield '大';
    yield '河';
    yield '波';
    yield '浪';
    yield '宽';
}
for(let val of myGenerator()){
    console.log(val);
}
function* countdown(begin) {
    while(begin>0){
        yield begin--;
    }
}
for(let tmp of countdown(7)){
    console.log(tmp);
}

简单迭代类

/*简单迭代类*/
class MyList {
    constructor(list){
        this.list  = list;
        this[Symbol.iterator] = function* () {
            let current = 0 ;
            let that = this;
            while(current < that.list.length){
                yield that.list[current++];
            }
        }
    }
}
let mylist = new MyList([101,202,303,404,505]);
for(let val of mylist){
    console.log(val);
}

模板化设计

函数模块设计

math.mjs

/*模板化设计 mjs*/
/*建立一个模块*/
function add(x,y){
    return x+y;
}
function minus(x,y) {
    return x-y;
}
export {add, minus};

main.mjs

/*调用模块功能*/
import {add, minus} from './math';
console.log(add(10,20));
console.log(minus(30,20));

Terminal:

node --experimental-modules src/main.mjs

类模块设计

Player .mjs

/*模板化设计 mjs*/
/*建立一个模块*/
class Player {
    constructor(name){
        this.name = name;
    }
    sayHello(){
        console.log(`hello ${this.name}`);
    }
}
export default Player;

main.mjs

/*调用模块功能*/
import Player from './Player';
let curry = new Player('Curry');
curry.sayHello();

Terminal:

node --experimental-modules src/main.mjs