本笔记参考小马视频 https://www.bilibili.com/video/av24664888?p=2
ECMAScript2015(ES6)是Javascript最标准的语法式样,是在2015年6月由Ecma国籍组织公布的最新版本,现在已经被多个领域和浏览器所广泛采纳和使用。
* class类定义
* import/export模块化
* 函数定义方法改进(默认值,可变参数,箭头函数)
* let/const作用域定义
* for...of列举
* Promise,Map/Set/Proxy嵌入式对象追加
* etc.
+ TypeScript
+ CoffeeScript
+ etc.
https://github.com/lukehoban/es6features
https://babeljs.io/learn-es2015/
用let命令限定作用域。
~~~js
//ES5
if (true) {
var i = 1;
}
console.log(i);//ES6
if (true) {
let i = 1;
}
console.log(i); //变量i未找到
解决重复定义
以下代码ES6不能通过,而ES5可以通过
~~~js
var i = 0;
switch (i) {
case 0:
let value = "helo";
break;
case 1:
let value = "world"; //重复定义错误
break;
}
~~~
常量
~~~js
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]; //错误
~~~
list.push(99);
console.log(list);//[ 10, 20, 30, 99 ]
## 知识点
* 0b:二进制
* 0o:八进制
* 0x:十六进制
## 实战演习
~~~js
//X进制转换为10进制
console.log(0b10); //2
console.log(0o10); //8
console.log(0x10); //16console.log(0b11 === 3); //true
console.log(0o10 === 8); //true
console.log(0x10 === 16);//truelet 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) //[ 'Koma' ]
}
tagged`你好,${name}!再见。`
例二、扩展文字模板:
let name = "Koma"
let address = "网吧"
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;
}
结果
ES6增加了Symbol新的原始类型
不同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
这是false是因为内部分配了哈希值,比较的是id值,而不是value。
## 知识点
* 作为常量
* 作为属性
* 半隐藏属性
## 实战演习
### 作为常量
~~~js
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吧。');
}
~~~
### 作为属性
~~~js
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]);
~~~
### 半隐藏属性
~~~js
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' ] 列出user变量的所有属性
console.log(JSON.stringify(user)); //{"name":"Curry","age":29} json字符串化后也看不到隐藏属性
~~~
## 实战演习
~~~js
//数组赋值
let [a, b, c] = [10, 20, 30];
console.log(a, b, c); //10 20 30let [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
~~~
## 实战演习
let list = [10, 20, 30];
//ES6 语法for(let val of list)
console.log(val);//ES5语法
for(let val in list)
console.log(val, list[val]);
结果
推荐在循环对象属性的时候,使用for...in
,在遍历数组的时候的时候使用for...of
。
for...in
循环出的是key,for...of
循环出的是value
注意,for...of
是ES6新引入的特性。修复了ES5引入的for...in
的不足
for...of
不能循环普通的对象,需要通过和Object.keys()
搭配使用
9、函数的默认值
定义函数时给出参数的默认值
//字符参数
function sayHelo(name = "Curry"){
console.log(`Hello ${name}`);
}
sayHelo(); //Hello Curry
sayHelo("Koma"); //Hello Koma
//数值计算
function add(a=1, b=a){
return a+b;
}
console.log(add()); //2
console.log(add(10)); //20
console.log(add(10, 20)); 30
//必须指定参数
function required(){
throw new Error("参数未制定");
}
function sayBye(name=required()){
console.log(`${name} bye!`);
}
sayBye('Koma'); //Koma bye!
sayBye(); //Error: 参数未制定
* 定义函数时,可以将参数指定为可变数组
function sum(...args) {
let result = 0;
args.forEach(val => {
result += val;
});
return result;
}
console.log(sum(1,2,3)); //6
console.log(sum(1,2,3,4,5,6,7,8,9,10)); //55
通过箭头函数简化代码
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 => { //这里用不到index,也可以不写
return value * value;
});
console.log(newlist);
let title = "ES6从入门到学会";
let price = 25;
let publish = "小马出版社";let book = {
title, price, publish,
toString(){
console.log(`<<${this.title}>> is ${price}元。`);
}
};
book['lang'] = "简体中文"; //新增加一个lang属性console.log(book);
book.toString();
结果