ES6常用语法介绍

模块化
导出1个：export default xxx
引入一个：import xxx from ‘文件路径’
导出多个：export x1 export x2
引入多个：import { x1, x2 } from ‘文件路径’

/* util1.js */
export default {
    a: 100
}

/* util2.js */
export function fn1() {
    alert('fn1')
}
export function fn2() {
    alert('fn2')
}

/* index.js */
import util1 from './util1'
import { fn1, fn2 } from './util2'

console.log(util1)
fn1()
fu2()

Class 构造函数

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  sayHello() {
    console.log(`hello, ${this.name}, I am ${this.age} years old`)
  }
}

const p = new Person('zhangsan', 3)
console.log(p.sayHello()) //hello, zhangsan, I am 3 years old
console.log(typeof Person) //'function'
console.log(Person.prototype.constructor === Person) //true

等价于

function Person(name, age) {
  this.name = name
  this.age = age
}

Person.prototype.sayHello = function() {
  console.log(`hello, ${this.name}, I am ${this.age} years old`)
}

var p = new Person('zhangsan', 3)

两者的关系其实是语法糖：Class语法形式上模仿 java c#，本质上也是用的原型那一套，只不过易读性更好。

两者在继承上的区别

let var const
var 可声明前置

a = 3
var a //声明前置
var a = 4

let 不可声明前置

a = 3 //报错
let a

let 不可重复声明

let a = 3
let a = 4  //报错

var b = 5 
var b = 6 //正常

let 存在块级作用域

for(let i =0; i<3; i++){
  console.log(i)
}
console.log(i) //报错

const 声明的常量不可改变

const a = 1
a = 2 //报错

let b = 3
b = 4 //正常

const obj = {a:1} //{}是引用类型，obj 存贮的是地址，在栈里
obj.a = 2 //没问题，修改的堆里的数据
obj = {a:2} //报错，修改的是栈里的地址，const 声明的常量不可改变

适用于let的同样适用于const

解构赋值
数组的解构

let [a,b,c] = [1,2,3]
console.log(a, b, c) //1 2 3

let [a, [b], c] = [2, [3], 4]
console.log(a,b,c) //2 3 4

默认值

let [a, b = 2] = [3]
a // 3
b // 2

let [a, b = 2] = [3, 4]
a //3
b //4

let [a=2, b=3] = [undefined, null]
a //2
b //null

let [a=1, b=a] = [2]
a //2
b //2

对象的解构

let [name, age] = ['zhangsan', 3]
let p1 = {name, age}
//等同于
let p2 = {name: name, age: age}

//范例
let {name, age} = {name: 'zhangsan', age: 4}
name //‘zhangsan’
age //4

//等同于
let name
let age
({name: name, age: age} = {name: 'zhangsan', age: 4})

默认值

let {x, y=5} = {x: 1}
x //1
y //5

函数的解构

function add([x=1, y=2]){
  return x+y
}
add() //报错，add(形参)，调用时需要传入一个实参
add([]) //使用默认参数，输出 3
add([2]) //4
add([3,4]) //7

function sum({x, y}={x:0, y:0}, {a=1, b=1}){
    return [x+a, y+b]
}
sum({x:1, y:2}, {a:2}) //[3, 3] 
//{x:1, y:2}替换掉{x, y}={x:0, y:0}中的默认值，{a:2}替换掉{a=1, b=1}中的a=1

字符串
多行字符串

let str =`
Hi,
This is jirengu.com.
You can study frontend here.

字符串模板

let website = 'baidu.com'
let who = 'You'
let str = `Hi
This is ${website}.
${who} can serach.

`
数组
扩展

var a = [1, 2]
console.log(...a)  // 1, 2
var b = [...a, 3]
b // [1, 2, 3]

var c = b.concat([4, 5])
var d = [...b, 4, 5]

函数参数的扩展

function sort(...arr){
  console.log(arr.sort())
}
sort(3, 1, 5)  //[1, 3, 5]

function max(arr){
  return Math.max(...arr)
}
max([3, 4, 1])  // 4

类数组对象 >> 数组

let ps = document.querySelectorAll('p');

Array.from(ps).forEach(p=> {
  console.log(p.innerText);
});

//更直观
[...ps].forEach(p=>{console.log(p.innerText)});

箭头函数
this 的指向

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id); //this 指向 foo 里的this
  }, 100);
}

//  等同于如下ES5
function foo() {
  var _this = this;
  setTimeout(function () {
    console.log('id:', _this.id); 
  }, 100);
}

对象

var name = 'jirengu'
var age = 3
var people = {name, age} //{name:name, age:age}
console.log(people) //{name:'jirengu', age:3}