ES6常用语法
CMAScript2015(ES6)是Javascript最标准的语法式样，是在2015年6月由Ecma国籍组织公布的最新版本，
现在已经被多个领域和浏览器所广泛采纳和使用
let和const命令
- es6用let命令所在的代码块内有效
//ES5
if (true) {
var i = 1;
}
i // 1
//ES6
if (true) {
let i = 1;
}
i // 变量i未找到
- 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();//<<ES6从入门到学会>> 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);
});
