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}`)
}
}