ES6速学

Rinsann 2021年11月29日 1,419次浏览

var 和 let 以及 const 的区别

1. var 可重复声明

a = 3
var a
var a = 4

2. let 不可重复前置

a = 3
let a

3. let 不可重复声明

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

4.存在块级作用域

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

IIFE的替换

(function(){
    var a = 1
})()

{
	let a = 1
}

暂时性死区（TDZ）：在 let 声明变量之前都是该变量的死区，在死区内该变量不可使用。

5.const 声明的常亮不可改变

const a = 1
a = 2 //报错

const obj = {a: 1}
obj.a = 2 //没问题
obj = {a: 2} //报错

6.适用于 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 ）就使用默认值，如果有就使用对应值

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

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

3.对象的解构赋值

前置知识

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

解构例子

let {name, age} = {name: 'jihuang', age: 3}
name //'jihuang'
age //3

以上代码等同于

let name
let age
({name:name, age:age} = {name: 'jihuang', age: 4})

4.默认值

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

5.函数解构

function add([x,y]=[1,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]

6.作用

let [x,y] = [1,2];
[x,y] = [y,x];
x //2
y //1

function ajax({url,type='GET'}){
}
ajax({url:'http://localhost:3000/getData'})

字符串

1.多行字符串

let str = `
Hi,
This is yminami.com.
You can meet me here.
`

2.字符串模板

let website = 'yminami.com'
let who = 'You'
let str = `Hi,
This is ${website}.
${who} can meet me here.
`

var data = [1,2,3,4]
var liArr = data.map(v=>`<li>${v}</li>`)
var html = `<ul>${liArr}</ul>`
console.log(html)

数组

1.扩展

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] //[1, 2, 3, 4, 5]

2.函数参数的扩展

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

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

3.类数组对象转数组

let ps = document.querySelectorAll('p');
//1
Array.from(ps).forEach(p => {
    console.log(p.innerText);
});
//2
[...ps].forEach(p => {console.log(p.innerText)})

函数

1.默认值

function sayHi(name="yminami"){
	console.log(`hi,${name}`)
}
sayHi()
sayHi('麻衣前辈')

function fetch(url,{body='',method = 'GET',headers = {}} = {}) {
    console.log(method);
}
fetch('http://example.com')

2.以下两种写法区别

//ex1
function m1({x=0,y=0} = {}) {
	return [x,y];
}

//ex2
function m2({x,y} = {x:0,y:0}){
    return [x,y];
}

//函数没有参数的情况
m1() // [0,0]
m2() // [0,0]

// x 和 y 都有值的情况
m1({x:3, y:8}) // [3,8]
m2({x:3, y:8}) // [3,8]

// x 有值， y无值的情况
m1({x:3}) //[3,0]
m1({x:3}) //[3,undefined]

//x 和 y都无值的情况
m1({}) // [0,0]
m1({}) //[undefined,undefined]

m1({z:3}) // [0,0]
m2({z:3}) // [undefined,undefined]

ex1：调用函数需要传递一个对象，如果你没有传对象就用默认对象 {}，默认对象里面都是 undefined，所以属性使用初始值。

ex2：参数需要是一个对象，如果没有传对象，就用默认对象 {x:0, y:0} 如果传了对象，就是使用你传递的对象。

箭头函数

var f = v => v+1
// 等价于
var f = function(v){return v + 1}

var f  = () => 5;
// 等价于
var f = function(){ return 5};

var sum = (num1,num2) => num1 + num2;
// 等价于
var sum = function(num1,num2){
    return num1 + num2
};

var arr = [1,2,3]
var arr2 = arr.map(v => v * v)
arr2 // [1,4,9]

箭头函数中的 this

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

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

对象

var name = 'yminami'
var age = 3
var people = {name,age} // {name:'yminami',age:3}

let app = {
	selector:'#app',
	init(){},
	bind(){}
}
app.init()

模块化

写法1

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

//useage.js
import {firstName,lastName,year} from './profile';
console.log(firstName)

写法2

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName,lastName,year}

//useage.js
import {firstName,lastName,year} from './profile';
console.log(firstName)

写法3

//helper.js
export function getName(){}
export function getYear(){}
//或
function getName(){}
function getYear(){}
export {getName,getYear}

//main.js
import {getName,getYear} from './helper'
getName()

写法4

//export-default.js
export default function(){
	console.log('foo');
}

// import-default.js
import getNmae from './export-default'
getName()

Class 和 继承

1.构造函数

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

// 等价于
function Person(name,age){
	this.name = name;
    this.age = age;
}


Proson.prototype.sayHello = function(){
    console.log(`heloo,${this.name}, i ma ${this.age} years old`);
};

var p  = new Person('hunger', 2)

2.静态方法

class EventCenter {
	static fire(){
		return 'fire';
	}
	static on(){
		return 'on'
	}
}

// 等价于
function EventCenter(){
}

EventCenter.fire = function(){}
EventCenter.on = function(){}

3.继承

class Person{
	constructor(name,age){
		this.name = name;
		this.age = age;
	}
	sayHello(){
		console.log(`hello, ${this.name}, i am ${this.age} years 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} years old, i get ${this.score}`)
	}
}
上一篇： React——Diffing算法初识