ES6常用语法介绍

321 阅读1分钟

模块化

  • 导出单个: export default xxx
  • 引入单个: import xxx from '路径'
  • 导出多个: export x1 export x2
  • 引入多个: import{x1,x2} from '路径'
export default{
	a:1
}

export function fn1(){
	alert('fn1')
}


import app from './app'
import {fn1,fn2} from './app1'

class 构造函数

class Dog{
	constructor(name,age){
    this.name=name
    this.age=age
    }
    sayHello(){
    	console.log(`hello,${this.name},I am ${this.age} years old)
    }
}
const a=new Dog('小花',3)
console.log(a.sayHello()) //hello, 小花 3 years old

等价于

function Dog(name, age) {
  this.name = name
  this.age = age
}

Dog.prototype.sayHello = function() {
  console.log(`hello, ${this.name}, I am ${this.age} years old`)
}

var d = new Dog('小花', 3)

let var const

var 可声明前置

a = 1
var a //声明前置
var a = 2

let 不能声明前置

a = 1
let a //报错

let 不能重复声明

let a=3
let a=2 //报错

var a=3
var a=2 //正常

let 存在块级作用域

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

const声明的变量不可改变

const a = 1
a = 2 //报错

let b = 3
b = 4 //正常

const obj = {a:1} //{}是引用类型,obj 存贮的是地址,在栈里
obj.a = 2 //没问题,修改的堆里的数据
obj = {a:2} //报错,修改的是栈里的地址,const 声明的常量不可改变

解构赋值

数组解构

//变量先声明后赋值时的解构
var a, b;

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
//默认值.为了防止从数组中取出一个值为undefined的对象,可以在表达式左边的数组中为任意对象预设默认值。
var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
//解析一个从函数返回的数组
function f() {
  return [1, 2];
}

var a, b; 
[a, b] = f(); 
console.log(a); // 1
console.log(b); // 2

对象解构

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

函数解构

function add([x=1, y=2]){
  return x+y
}
add() //报错,add(形参),调用时需要传入一个实参
add([]) //使用默认参数,输出 3
add([2]) //4
add([3,4]) //7