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 // 报错，重复声明
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} // 报错
// 原因是如果const观察有没有变化，基本类型看值，对象看地址
解构赋值
数组的解构
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 // 报错，左右要一一对应
默认值
let [a,b = 2] = [3]
a // 3
b // 2 未赋值，使用默认值
let [a,b = 2] = [3,4]
a // 3
b // 4 有赋值，使用赋值的值
let [a,b = 2] = [null,undefined]
a // null
b // 2
// 只有当值是undefined的时候才会使用默认值，如果值不是就使用设置的值
let [a=1,b=a] = [2]
a // 2
b // 2
对象的解构赋值
前置知识
let [name,age] = ['hunger',3]
let p1 = {name,age}
// 等同于
let p1 = {name:name,age：age}
解构示例
let {name,age} = {name:'lalala',age:3}
name // 'lalala'
age // 3
以上代码等同于
let name
let age
({name:name,age:age} = {name:'lalala',age:3})
默认值
let {x,y=5} = {x:1}
x // 1
y // 5
函数解构赋值
function add ([x=1,y=2]){
return x+y
}
add() // 报错，必须要传一个参数
add([2]) // 4
add([3,4]) // 7
// 上下两个函数等价
function add ([x,y]=[1,2]){
return x+y
}
add() // 3
add([2]) // 报错，不能传入只有一个值得数组，必须是待遇大于等于参数得个数
add([3,4]) // 7
function sum({x,y}={x:0,y:0},{a=1,b=2}){
return [x+a,y+b]
}
sum ([{x:1,y:2},{a:2}) // [3,3]
{x,y}={x:0,y:0} // 这种没有传8就用默认值
{a=1,b=2} // 这种是必须要传入一个对象
作用
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、多行字符串
`
这里是
多行
字符串
`
2、模板字符串
let a = 14
let b = 15
`
a的值是${a}
b的值是${b}
`
数组
扩展
var a = [1,2]
console.log(...a)
var b = [...a,3]
b // [1,2,3]
var c = b.concat([4,5])
var d = [...b,4,5]
c // [1,2,3,4,5]
d // [1,2,3,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方法可以将类数组对象变成数组
Array.from(ps).forEach(p=>{
console.log(p.innerText);
})
// 直接使用扩展
[...ps].forEach(p=>{
console.log(p.innerText);
})
函数
默认值
function sayHi(name='lalala'){
console.log(`${name}`)
}
sayHi()
sayHi('hehehe')
function fetch(url,{body=''.method='GET',heander={}}={}){
console.log(method);
}
两种写法区别
// 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没有值得shihou
m1({x:3}) // [3, 0]
m2({x:3}) // [3, undefined]
// x,y都没有值的时候
m1({}) // [0, 0]
m2({}) // [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 = 'lalala'
var age = 3
var people = {name,age} // {name:'lalala',age:3}
let app = {
selector:'#app',
init(){
},
bind(){
}
}
模块化
写法一：
// a.js
export var firstName = 'tom';
export var lastName = 'jack';
export var yaer = 1997;
// b.js
import {firstName,lastName,yaer} from 'a.js'
console.log(firstName)
写法二：
// a.js
var firstName = 'tom';
var lastName = 'jack';
var yaer = 1997;
export {firstName,lastName,yaer}
// b.js
import {firstName,lastName,yaer} from 'a.js'
console.log(firstName)
写法三：
// c.js
export function getName(){}
export function getYear(){}
// d.js
import {getName,getYear} from 'c.js'
getName()
写法四：
// c.js
function getName(){}
function getYear(){}
export {getName,getYear}
// d.js
import {getName,getYear} from 'c.js'
getName()
写法五：
// e.js
export default function (){
console.log('lalal');
}
import getName from 'e.js'
getName()
类和继承
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;
}
function prototype。sayHello = function(){
console.log(`
hello,${this.name},i am ${this.age} years old;
`)
}
var p = new Person('lalala',2);
2、静态方法
class EventCenter{
static fire(){
return 'fire';
}
static on(){
return 'on';
}
}
// 等价于
function EventCenter(){
}
EventCenter.fire = function(){return 'fire';}
EventCenter.on = function(){return 'on';}
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(`
my score ${this.score}
`)
}
}
