ES6常用语法

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

let和const命令

  1. es6用let命令所在的代码块内有效
//ES5
if (true) {
    var i = 1;
}
i // 1

//ES6
if (true) {
    let i = 1;
}
i // 变量i未找到
  1. const声明一个只读的常量。一旦声明,常量的值就不能改变。
const data = 10;
console.log(data);
//data = 100; //执行错误

const list = [10,20,30];
console.log(list);

list[0] = 100;
console.log(list);

//list = [1,2,3]; //错误

变量的解构赋值

 //数组赋值
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);

//字符串的解构赋值
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

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

//函数参数名指定
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

//遍历Map结构
var 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

箭头函数(Arrow Function)

let list = [10, 20, 30];
//ES5
let newlist = list.map(function(value, index){
    return value * value;
});
console.log(newlist);//[100, 400, 900]

//ES6
newlist = list.map((value, index) => {
    return value * value;
});
console.log(newlist);//[100, 400, 900]

newlist = list.map(value => {
    return value * value;
});
console.log(newlist);//[100, 400, 900]

进制转换

  • 0b:二进制
  • 0o:八进制
  • 0x:十六进制
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进制?嘿嘿

嵌入字符串

  • 字符串嵌入方式
  • 字符串模版定义
let name = "Koma"
let mystr1 = "你好,${name}!"
let mystr2 = `你好,${name}!再见。`

console.log(mystr1);
//你好,${name}!
console.log(mystr2);
//你好,Koma!再见。 

function tagged(formats, ...args){
    console.log(formats)
    console.log(args)
}

tagged`你好,${name}!再见。`

ES6增加了Symbol新的原始类型

(数据类型除了string,number,boolean,undefined,null,object,第七种为symbol)

let str1 = String("HeloWorld");
let str2 = String("HeloWorld");
console.log(str1 == str2);  //结果:true
console.log(str1 === str2); //结果:true

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. 半隐藏属性
作为常量
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吧。');
}
//无输出
作为属性
let s1 = Symbol("mySymbol");
let s2 = Symbol("mySymbol");

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

console.log(obj);//{Symbol(mySymbol): "helo", Symbol(mySymbol): "world"}
console.log(obj[s1]);//helo
console.log(obj[s2]);//world
半隐藏属性
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}

基本对象定义

let title = "ES6从入门到学会";
let price = 25;
let publish = "小马出版社";

let book = {
    title, price, publish,
    toString(){
        console.log(`<<${this.title}>> is ${price}元。`);
    }
};
book['lang'] = "简体中文";

console.log(book);//{title: "ES6从入门到学会", price: 25, publish: "小马出版社", toString: ƒ, lang: "简体中文"}
book.toString();//<> is 25元。

类定义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的定义

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("库里", "男");
player.age = 28;
console.log(player);//Player {name: "库里", sex: "男", _age: 28}
console.log(player.age);//28

循环我的对象

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,value] of mymap){
    console.log(key, value);
}

let it = mymap.values();
let tmp;
while(tmp = it.next()){
    if (tmp.done) break;
    console.log(tmp.value, tmp.done);
}
--------------------------------
let map0 = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');
 //ES5
  map.forEach(function(value, key, map) {
  console.log("Key: %s, Value: %s", key, value);
});

 //ES6
 map0.forEach((value, key, map)=> {
  console.log("Key: %s, Value: %s", key, value);
});

你可能感兴趣的:(ES6常用语法)