ES6 入门笔记

本笔记参考小马视频 https://www.bilibili.com/video/av24664888?p=2

一、概要

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

 1、新特性

* class类定义
* import/export模块化
* 函数定义方法改进（默认值，可变参数，箭头函数）
* let/const作用域定义
* for...of列举
* Promise,Map/Set/Proxy嵌入式对象追加
* etc.

2、类似标准

+ TypeScript
+ CoffeeScript
+ etc.

3、ES6学习参考资料

https://github.com/lukehoban/es6features

https://babeljs.io/learn-es2015/

二、命令

1、let

用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;
}
~~~

 2、const

常量

~~~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 ]

3、进制转换

## 知识点

* 0b:二进制
* 0o:八进制
* 0x:十六进制

## 实战演习

~~~js

//X进制转换为10进制
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进制？嘿嘿
~~~

4、嵌入字符串  ``

反单引号 可以避免做字符串拼接 

例一 文字模板：

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;
}

结果

5、Symbol

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。

6、Symbol使用

## 知识点

* 作为常量
* 作为属性
* 半隐藏属性

## 实战演习

### 作为常量

~~~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字符串化后也看不到隐藏属性 
~~~

 

7、解构赋值

## 实战演习

~~~js
//数组赋值
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
~~~

8、for of

## 实战演习

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 of 和for in区别

1. 推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of。

2. for...in循环出的是key，for...of循环出的是value

3. 注意，for...of是ES6新引入的特性。修复了ES5引入的for...in的不足

4. 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: 参数未制定
 

10、可变长参数

* 定义函数时，可以将参数指定为可变数组

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

 11、箭头函数(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 => { //这里用不到index,也可以不写
    return value * value;
});
console.log(newlist);

 12、JS基本对象定义

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();

结果