一、变量声明
var、let、const
1. let守则
- 先声明再使用
let a
a = 2
//erroe
a = 1
let a = 2
- 不可重复声明
let a
//error
let a = 1
let a = 2
- 存在块级作用域
{let a = 1
console.log(a)
}
//error
{let a = 1}
console.log(a)
2. 少限制的var
- var打破了let的三个限制
// 使用后声明
a = 1
var a
// 重复var声明
var a = 1
var a = 2
// 忽略块级作用域
{var b = 4}
console.log(b)
3. 严格限制的const
- 遵守let的三大守则
- 并且const声明后的变量只能使用，不能更改
//error
const a = 1
a = 2
- 注意复杂变量的const
const obj = {a:1}
obj.a = 2
//error
const obj = {a:1}
obj = {a:2}
二、解构赋值
1. 数组的解构
- 数组的解构即给变量加
[]
//常规使用：
let a = [1]
//错误使用
let [a] = 1
//进阶使用 ==> 解构数组
let [a] = [1]
let [b,c,d] = [1,2,3]
- 解构变量的默认赋值
let [a=3,b] = [7]
//a:3,b:7
- 对应值为undefined采用默认赋值，null可以正常
let [a=2,b=3] = [undefined,null]
// a : 2 ; b : null
2. 对象的解构
- 解构写法
let {name,age} = {name:'yuyuan',age:18}
//拆开写就是
let name
let age
({name:name,age:age} = {name:'yuyuan'',age:18})
//换一种直观写法
let [name,age] = ['yuyuan',18]
let p = {name,age} // 等价于是 {name:name,age:age}
- 默认赋值
let {x,y=5} = {x:1}
3. 函数解构
function add([a=1,b=2]){return a+b}
add([])
function sum({a=1,b=2},[x=100,y=200]){return [a+x,b+y]}
sum({},[])
4. 应用
let [a,b] = [1,2]
[a,b] = [b,a]
function ajax({url,type='GET'}){……}
ajax({url:'http://localhost:8080/getData'})
三、常用变动：字符串、函数、数组、对象
字符串、函数、数组、对象
1. 字符串
- 多行字符串：`` ，注意\的转义
- 变量插入：
${<变量名>}
2. 数组
- 更新的是
...的使用- 可以代替concat
- 在函数中可以将多个参数直接转换为数组
const a = [1,2,3]
const b = [...a,5]
// b:1,2,3,5
// ...a的意思就是将a的内容展开
function max(arr){return Math.max(...arr)}
// ...代替concat
const a = [1,2,3]
const b = [4,5,6]
const c = b.concat(a)
const d = [...a,...b]
// c === d
// ... 转换为数组
function sort(...arr){console.log(arr.sort())}
sort(1,2,45,12,10)
3. 函数
- 函数支持默认值
funtion halo(name='yuyuan'){console.log(`${name},halo!`)}
halo() // yuyuan,halo!
halo('yuyuanW') // yuyuanW,halo!
- 函数中对象默认值的区别
// m1调用函数，你需要传一个对象。没有对象，就采用默认对象{}。由于默认对象里面都是undefined，所以属性采用初始值
function m1({x=0,y=0}={}){return [x,y]}
m1() // [0,0]
m1({x:1}) // [1,0]
m1({x:1,y:2}) // [1,2]
//m2参数需要一个对象，没有对象就采用默认对象{x:0,y:0}。如果传了对象，就使用你传的对象，而不是默认对象
function m2({x,y}={x:0,y:0}){return [x,y]}
m2() // [0,0]
m2({x:1}) // [1,undefined]
m2({x:1,y:2}) // [1,2]
- 箭头函数
- 箭头函数的
()，只有一项参数的时候，可以省略() - 箭头函数的
{}，只return一个语句的时候，{return }可以省略 - 箭头函数中就不要讲this了
- 箭头函数的
4. 对象
let name= 'yuyuan'
let age = 18
let user = {name,age}
//析构写法就是
let {name,age} = {name:'yuyuan',age:18}
四、ES6中模块化的写法
替代require和module.exports的是import和export
- export 和 import
- 变量的导出和导入
- 函数的导出和导入
- export default
- 变量的导出和导入
// 变量的导出和导入
const name = 'yuyuan'
const age = 18
export {name,age}
// else file
import {name,age} from '<dir>'
console.log(name)
export const name = 'yuyuan'
exprot const age = 18
//else file
import {name,age} from '<dir>'
console.log(age)
- 函数的导出和导入
// 函数的导出和导入
function max(){……}
export {max}
// else file
import {max} from '<dir>'
max()
export function max(){……}
//else file
import {max} from '<dir>'
max()
- export default 默认导出 , default的意思就是我导出东西后，你引入的时候随便起名字
export default function(){}
// else file
import fuck from '<dir>'
fuck()
五、Class和继承
Class用于定义类，extends用于继承
1. class
- ES5 定义类
function Person(name,age){
this.name = name
this.age = age
}
Person.prototype.sayHalo = function(){
console.log(`halo,my name is ${this.name} , i am ${this.age} years old.`)
}
const a = new Person('yuyuan',18)
- ES6 定义类 (像是ES5的语法糖)
class Person{
constructor(name,age){
this.name = name
this.age = age
}
sayHalo(){
console.log(`halo,my name is ${this.name} , i am ${this.age} years old.`)
}
}
const a = new Person('yuyuan',18)
- 静态的就省略了
2. extends
// 父类 Person
class Person{
constructor(name,age){
this.name = name
this.age = age
}
sayHalo(){
console.log(`halo,my name is ${this.name} , i am ${this.age} years old.`)
}
}
// 子类 Student
class Student extends Person{
constructor(name,age,score){
super(name,age)
this.score = score
}
sayScore(){
console.log(`i get ${this.score}`)
}
}
