let var const
-
var 可聲明前置
a = 3
var a
var a = 4
-
let不可聲明前置
a = 3 //報(bào)錯(cuò)
let a
-
let不可重復(fù)聲明
let a = 3
let a = 4 //報(bào)錯(cuò)
var a = 5 //報(bào)錯(cuò)
-
存在塊級(jí)作用域
for(let i =0; i<3; i++){
console.log(i)
}
console.log(i) //報(bào)錯(cuò)
IIFE的替換
(function(){
var a = 1
}())
{
let a = 1
}
暫時(shí)性死區(qū)（TDZ）：在let聲明變量之前都是該變量的死區(qū)抄谐，在死區(qū)內(nèi)該變量不可使用
-
const 聲明的常量不可改變
const a = 1
a = 2 //報(bào)錯(cuò)
const obj = {a: 1}
obj.a = 2 //沒(méi)問(wèn)題
obj = {a: 2} //報(bào)錯(cuò)
適用于let的同樣適用于const
解構(gòu)賦值
-
數(shù)組的解構(gòu)
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 //報(bào)錯(cuò)
-
默認(rèn)值
let [a, b = 2] = [3]
a // 3
b // 2
let [a, b = 2] = [3, 4]
a //3
b //4
數(shù)組對(duì)應(yīng)對(duì)值有沒(méi)有产弹？如果沒(méi)有（數(shù)組對(duì)沒(méi)有指undefined）就使用默認(rèn)值盗誊，如果有就使用對(duì)應(yīng)值
let [a=2, b=3] = [undefined, null]
a //2
b //null
let [a=1, b=a] = [2]
a //2
b //2
-
對(duì)象的解構(gòu)賦值
let [name, age] = ['hunger', 3]
let p1 = {name, age}
//等同于
let p2 = {name: name, age: age}
解構(gòu)范例
let {name, age} = {name: 'jirengu', age: 4}
name //‘jirengu’
age //4
以上代碼等同于
let name
let age
({name: name, age: age} = {name: 'jirengu', age: 4})
-
默認(rèn)值
let {x, y=5} = {x: 1}
x //1
y //5
-
函數(shù)解構(gòu)
function add([x=1, y=2]){
return x+y
}
add() //Error 會(huì)報(bào)錯(cuò)
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
function ajax({url, type=‘GET’}){
}
ajax({url: ‘http://localhost:3000/getData’})
字符串懈息、數(shù)組属铁、函數(shù)骄噪、對(duì)象
字符串
1佛舱、多行字符串
let str =`
Hi,
This is jirengu.com.
You can study frontend here.
`
2诸尽、字符串模板
let website = 'jirengucom'
let who = 'You'
let str = `Hi
This is ${website}.
${who} can study frontend here
`
數(shù)組
1原杂、擴(kuò)展
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]
2、函數(shù)參數(shù)的擴(kuò)展
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
3您机、類(lèi)數(shù)組對(duì)象轉(zhuǎn)數(shù)組
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(p=> {
console.log(p.innerText);
});
[...ps].forEach(p=>{console.log(p.innerText)});
函數(shù)
1穿肄、默認(rèn)值
function sayHi(name='jirengu') {
console.log(`hi, ${name}`)
}
sayHi()
sayHi('ruoyu')
function fetch(url, { body='', method = 'GET', headers = {} } = {}) {
console.log(method);
}
fetch('http://example.com')
以下兩種寫(xiě)法的區(qū)別?
//ex1
function m1({x = 0, y = 0} = {}) {
return [x, y];
}
//ex2
function m2({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
// 函數(shù)沒(méi)有參數(shù)的情況
m1() // [0, 0]
m2() // [0, 0]
// x 和 y 都有值的情況
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]
// x 有值，y 無(wú)值的情況
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]
// x 和 y 都無(wú)值的情況
m1({}) // [0, 0];
m2({}) // [undefined, undefined]
m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]
ex1： 調(diào)用函數(shù)需要你傳遞一個(gè)對(duì)象际看，如果你沒(méi)傳對(duì)象就用默認(rèn)值對(duì)象{}咸产，默認(rèn)值對(duì)象里面都是 undefined， 所以屬性使用初始值
ex2：參數(shù)需要是一個(gè)對(duì)象仲闽，如果沒(méi)傳對(duì)象脑溢，就用默認(rèn)值對(duì)象{ x: 0, y: 0 }如果傳了對(duì)象，就使用你傳遞的對(duì)象
2赖欣、箭頭函數(shù)
var f = v => v+1
//等價(jià)于
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]
箭頭函數(shù)里面的 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);
}
對(duì)象
var name = 'jirengu'
var age = 3
var people = {name, age} //{name:'jirengu', age:3}
let app = {
selector: '#app',
init() {
},
bind() {
}
}
app.init()
類(lèi)和繼承
構(gòu)造函數(shù)
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log( `hello, ${this.name}, i am ${this.age} years old`);
}
}
等價(jià)于
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('chp', 2);
靜態(tài)方法
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} 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}`);
}
}
模塊化
有五種寫(xiě)法
寫(xiě)法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)
寫(xiě)法2
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
//useage.js
import {firstName, lastName, year} from './profile';
console.log(firstName)
寫(xiě)法3
//helper.js
export function getName(){}
export function getYear(){}
//main.js
import {getName, getYear} from './helper';
getName()
寫(xiě)法4
//helper.js
function getName(){}
function getYear(){}
export {getName, getYear}
//main.js
import {getName, getYear} from './helper';
getName()
寫(xiě)法5
// export-default.js
export default function () {
console.log('foo');
}
// import-default.js
import getName from './export-default'
getName()
