title: es6小记
变量与常量
let 定义变量, const 定义常量，常量定义一次后，不可更改
let r = 2
r = 4
console.log(r) r =====> 4
const pi = 3.14
pi = 3.2
console.log(pi) 报错Assignment to constant variable.
不可重复定义
var foo = 1
var foo = 2
console.log(foo) foo =====> 2
let foo = 1
let foo = 2
console.log(foo) 报错Identifier 'foo' has already
块级定义域
事例 1:
if (true) {
var test = 1
}
console.log(test) test =====> 1
if (true) {
let test1 = 1
}
console.log(test1) 报错ReferenceError: test1 is not defined
事例 2:
let arr = [1, 2, 3, 4]
for (var i = 0; i < arr.length; i++) {
// do nothing
}
console.log(i) i =====> 4
for (let j = 0; j < arr.length; j++) {
// do nothing
}
console.log(j) j =====> ReferenceError: j is not defined
不存在变量提升
console.log(names)
var names = 'pig'
names ======> undefined
因为var存在变量提示，实际代码操作如下：
var names;
console.log(names)
names = 'pig'
console.log(age)
let age = 10
age =====> Identifier 'age' has already been declared
箭头函数
参数 => 表达式/语句
let value1 = 1;
let double = x => 2 * x; // x为参数
let treble = x => {
return 3 * x;
}
console.log(double(value1)) =====> 2
console.log(treble(value1)) =====> 3
继承外层作用域，没有自己的this指针，没有独立作用域
var obj = {
commonFn: function () {
console.log(this)
},
arrowFn: () => {
console.log(this)
}
}
obj.commonFn() // this指向obj
输出： {
commonFn: function () {
},
arrowFn: () => {
}
}
obj.arrowFn() // // this指向obj的作用域，也就是windows
输出： {
window {
...
}
}
不能用作构造函数，不能用new生成一个对象
let Animai = function () {
}
let animai = new Animai()
animai =====> Animai {}
let Animai1 = () => {
}
let animai1 = new Animai1()
animai1 =====> 报错：Animai1 is not a constructor
没有prototype属性
let commonFn = function () {}
let arrowFn = () => {}
console.log(commonFn.prototype) =====> { constructor }
console.log(arrowFn.prototype) =====> undefined
模版字符串
基本用法
let str = `
<div>
<h1 class="title">123</h1>
</div>
`
document.querySelector('body').innerHTML = str //html页面显示模版字符串的内容
添加变量
let name = 'pig'
let str = `
<div>
<h1>${name}</h1>
</div>
`
document.querySelector('body').innerHTML = str //html页面显示pig
添加方法
let getName = () => {
return 'my pig'
}
let str = `
<div>
<h1>${getName()}</h1>
</div>
`
document.querySelector('body').innerHTML = str //html页面显示my pig
循环遍历
let arr = ['pig', 'dog', 'duck']
let str = `
<ul>
${
arr.map(name => `<li>I am ${name}</li>`).join('')
}
</ul>
`
document.querySelector('body').innerHTML = str
//html页面显示三个li，分别输出语句 I am pig / I am dog / I am duck
promise
基础用法
new Promise((resolve, reject) => {
// 异步函数
if (4 == 2) {
resolve()
} else {
reject()
}
}).then((res) => {
// resolve
console.log('success', res)
}, (err) => {
// reject
console.log('fail', err)
})
控制台输出：fail undefined
两个请求，一个请求成功后触发第二个请求，第二个请求成功后输出值
var promise1 = new Promise((resolve, reject) => {
if (6 > 2) {
resolve()
} else {
reject()
}
})
var promise2 = new Promise((resolve, reject) => {
if (3 > 2) {
resolve()
} else {
reject()
}
})
promise1.then(() => {
return promise2
}).then(() => {
console.log('promise2 success')
})
控制台输出：promise2 success
面向对象-类
基础用法
class Animal {
constructor (name) {
this.name = 'animal'
this.myname = name
}
getName () {
return this.name + ',' + this.myname
}
}
let animal = new Animal('pig') // 实例化Animal的类
console.log(animal.getName()) // 控制台输出：animal，pig
类的继承
class Animal {
constructor () {
this.name = 'animal'
}
getName () {
return this.name
}
}
class Cat extends Animal{
constructor () {
super() // 如果不加这行代码，会报错Must call super constructor in derived class before accessing 'this' or returning from derived
this.name = 'cat'
}
}
let animal = new Animal()
let cat = new Cat()
console.log(animal.getName()) =====> animal
console.log(cat.getName()) =====> cat
对象的写法
原本es5的写法
var name = 'pig',
age = 18
var obj = {
name: name,
age: age,
getName: function () {
return this.name
},
getAge: function () {
return this.age
}
}
console.log(obj.getName()) =====> pig
现在es6的写法
let name = 'pig',
age = 18
let obj = {
name, //变量名可以直接用作对象的属性名称
age,
getName () { //方法可以简写
return this.name
},
['get' + 'Age'] () { //表达式作为属性名或者方法名
return this.age
}
}
console.log(obj.getName()) =====> pig
console.log(obj.getAge()) =====> 18
-
Object.keys // 获取对象的所有属性名，放回的是一个数组
Object.keys(obj) =====> ['name', 'age', 'getName', 'getAge']
-
Object.assign // 对象的整合
Object.assign({a: 1, b: 2}, {a: 3, b: 3, c: 5}) =====> {a: 3, b: 3, c: 5}
模块化
基本用法
export： 导出模块的内容
let str = 'string'
let obj = {
name: 'pig'
}
export {
str,
obj
}
import： 在其他js文件获取模块的内容
import {str, obj, fn} from './module.js'
console.log('name', obj.name) =====> 'pig'
console.log('str', str) =====> 'string'
默认输出/引用
输出默认值：
export default {a: 1}
引用默认值：（引用时可以使用任意名称接受传递过来的值）
import foo from './module.js'
console.log('foo', foo)
补充知识点
image.png
image.png
image.png
