var let const
var存在变量提升，可重复声明变量
a = 3
var a
var a = 4
let不可重复声明，并且不可声明前置，存在块级作用域
let a = 3
let a = 4 // 报错
var a = 5 // 报错
a = 3
let a // 报错
for(let i=0;i<3;i++){
console.log(i)
}
console.log(i) // 报错
暂时性死区(TDZ)：在let声明变量之前都是该变量的死区，在死区范围内该变量不能被使用。
const声明的常量不可改变,不可声明前置，存在块级作用域
const a = 1
a = 2 // 报错
const a //报错
const obj = {a:1}
obj.a = 2 // √
obj = {a:2} //报错
适用于let同样适用于const
解构赋值
1.数组解构
let [a,b,c] = [1,2,3]
console.log(a,b,c)
let [a,[b],c] = [2,[3],4]
a // 2
b // 3
c // 4
let [a] = 1 //报错
2.默认值
let [a, b=2] = [3]
a //3
b //2
let [a, b=2] = [3,4]
a //3
b //4
数组对应值没有(undefined)就使用默认值，有就使用对应值
undefined和null分别对应值区别
let [a=1,b=3] = [undefined, null]
a //1
b //null
let [a=1,b=a] = [2]
a //2
b //2
对象的解构赋值
let [name,age] = ['hunger', 3]
let p1 = {name,age}
// 等同于
let p2 = {name:name,age:age}
范例
let {name,age} = {name:'zzz',age:4}
name // 'zzz'
age // 4
等同于
let name
let age
[{name:name,age:age} = {name:'zzz',age:4}]
默认值
let {x,y=5} = {x:1} x //1 y //5
函数解构
function add([x=1],[y=2]){
return x+y
}
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}
let [x,y] = [1,2]
[x,y] = [y,x]
x //2
y //1
字符串
let website = 'zzzzz'
let who = 'me'
let str = `hi
This is ${website}.
${who} can study fronted here
`
数组
拓展
var a = [1,2]
console.log(...a) //1,2
var b = [...a,3]
console.log(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)
}
sort([1,5,3]) //5
函数
默认值
function sayHi(name='zzz'){
console.log(`hi,${name}`)
}
sayHi()
sayHi('qqq')
模块化
写法1
// profile.js
export var firstname = 'Michael';
export var lastname = 'Jackson';
export var year = '1958'
// useage.js
import {firstname,lastname,year} from './profile.js';
console.log(firstname) //Michael
console.log(lastname) //Jackson
console.log(year) // 1958
写法2
// profile.js
var firstname = 'Michael';
var lastname = 'Jackson';
var year = 1958;
export {firstname,lastname,year};
// useage.js
import {firstname,lastname,year} from './profile.js';
console.log(firstname) //Michael
console.log(lastname) //Jackson
console.log(year) // 1958
写法3
// helper.js
export function getName(){}
export function getYear(){}
// main.js
import {getName,getYear} from './helper.js';
getName()
写法4
// helper.js
function getName(){}
function getYear(){}
export {getName,getYear}
// main.js
import {getName,getYear} from './helper.js';
getName()
写法5
// export-default.js
export default function(){
console.log('foo')
}
// import-default.js
import getName from './export-default.js';
getName()
class和继承
构造函数
// es6
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
sayHello() {
console.log(`hello,${this.name},i am ${this.age} year old`);
}
}
// es5
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function(){
console.log(`hello,${this.name},i am ${this.age} year old`);
}
var p = new Person('hunger',2);
静态方法
class EventCenter {
static fire() {
return 'fire';
}
static on() {
return 'on';
}
}
等同于
function EventCenter() {
}
EventCenter.fire = function(){}
EventCenter.on = function(){}
继承
class Person {
constructor(name,age)
this.name = name;
this.age = age;
}
sayHello(){
console.log(`hello,${this.name},i am ${this.age} year old`)
}
class Student extends Person {
constructor(name,age,score) {
super(name,age);
this.score = score;
};
sayScore(){
console.log(`hello,${this.name},i am ${this.age} year old,i get ${this.score}`)
}
}
