字符串模板
可以在一段字符串中插入一个变量
for(let i = 0; i < 3; i++){
console.log(`我是第 ${i + 1} 个`)
}
// 我是第1个
// 我是第2个
// 我是第3个
解构赋值
在以前为变量赋值，只能一个个的指定
let a = 1
let b = 2
let c = 3
在 ES6 中可以这么写
let [a,b,c] = [1,2,3]
a // 1
b // 2
c // 3
对象也可以
let obj = {
name: '张三',
age: '18',
city: '北京'
}
let {name,age,city} = obj
name // '张三'
age // 18
city // '北京'
解构赋值的的用途
1. 变换变量的值
let a = 'a'
let b = 'b'
[a,b]=['b','a']
a // 'b'
b // 'a'
2. 函数的传参
let obj = {
name: '张三',
age: '18',
city: '北京'
}
function fn({name,age,city}) {
console.log(name)
console.log(age)
console.log(city)
}
fn(obj)
// 张三
// 18
// 北京
3. 提取 JSON 数据
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
}
let { id, status, data: number } = jsonData;
let 和 const
在 ES6 之前我们可以用 var 来声明一个变量，但是 var 会声明提升，这样就会导致一个问题，如果上面已经有一样的变量名，但是你忘记了，在后面有声明了一次，这样就会覆盖。在以前为了解决这种现象可能要用立即执行函数，使变量只在这个函数作用域类
ES6 出来之后我们可以用 let或const去声明一个变量，如果重复声明就会报错
let
- 它的作用域只在当前的代码块中
- 声明不会提升（因为声明不会提升，所以如果再 let 之前使用，则会直接报错）
- 如果重复用 let 声明同一个变量则会直接报错
const
- 和 let 一样，唯一不一样的地方在于
const声明的变量只能赋值一次
var a = 1
var a = 2
console.log(a) // 2
let b = 1
let b = 1
//Uncaught SyntaxError: Identifier 'b' has already been declared
b = 2
console.log(b) // 2
const C = 1
C = 2
//Uncaught TypeError: Assignment to constant variable.
箭头函数
箭头函数是函数的一种简写方式，它不会改 this 的指向
!(() => {
console.log(this)
}).call('this')
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
!(function () {
console.log(this)
}).call('this')
// String {"this"}
let a = (arguments1,arguments2) =>{
console.log(1)
return arguments1 + arguments2
}
a(1,2)
// 1
// 3
如果只有一个参数可以不写括弧
let a = arguments => {
console.log(1)
return arguments
}
a(2)
// 1
// 2
如果函数体只有一句话可以不写{}
let a = (arguments1,arguments2) => b + c
a(1,2)
// 3
如果只有一个参数且函数体只有一句话
let a = arguments => arguments * 2
a(8) //16
spread 运算符
将 对象 展开
let arr = [1,2,3,4,5]
console.log(...arr) // 1 2 3 4 5
spread 的应用
插入数组
let arr1 = [1,2]
let arr2 = [..arr1,3,4,5]
arr2 // [1,2,3,4,5]
将 String 转换为数组
let string = 'Hello World'
let arr = [...string]
arr //["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]
合并对象
如果有同名的属性就覆盖
let obj1 = {
name: '张三',
age: '18',
}
let obj2 = {
name: '李四',
age: '18',
city: '北京'
}
let obj3 = {
...obj2,
...obj1,
}
obj3 //{name: "张三", age: "18", city: "北京"}
class 类
在 ES5 中可以用构造函数模拟 class
创建 class 类
class Person {
constructor(name,age) {
this.name = name,
this.age = age
}
getName() { // 类里面的方法等同于定义在原型上
console.log(this.name)
}
}
let xiaoming = new Person('小明',18)
xiaoming //Person {name: "小明", age: 18}
xiaoming.getName // 小明
extends 继承
创建一个 Person2 让他继承 Person 的属性和方法
class Person2 extends Person {
constructor(name,age,city) {
super(name,age) //调用父类的constructor（）
this.city = city
}
}
let xiaowang = new Person2('小王',19,'北京')
xiaowang.name //'小王'
xiaowang.age // 19
静态方法
在方法前加上 static 关键字 ，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
class Person {
constructor(name,age) {
this.name = name,
this.age = age
}
static classMethod() { // 类里面的方法等同于定义在原型上
console.log('Hello')
}
}
let xiaoming = new Person('小明',18)
xiaoming.classMethod() // TypeError: foo.classMethod is not a function
Person.classMethod() // 'hello'
