Version
ES6 变量特性
let 和 const
这两个的出现,总感觉是为了开发的代码规范而出现的。我们要逐渐放弃var,在项目中多用let和const
与var的区别:
- var有变量提升,有初始化提升,值可变
- let有变量提升,没有初始化提升,值可变
- const有变量提升,没有初始化提升,值不可变,但如果是定义对象,则属性可变
暂时性死区问题说明:其实let和const是有变量提升的,但是没有初始化提升:
var name = '林三心'
function fn () {
console.log(name)
let name = 'sunshin_lin'
}
fn() // Cannot access 'name' before initialization
块级作用域解决问题:
for(var i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i)
})
} // 5 5 5 5 5
for(let i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i)
})
} // 0 1 2 3 4
ES6 对象特性
Object.keys
可以用来获取对象的key的集合,进而可以获得对应key的value
const obj = {
name: '林三心',
age: 22,
gender: '男'
}
const keys = Object.keys(obj)
console.log(keys) // [ 'name', 'age', 'gender' ]
计算属性名
ES6新增
const key = 'name'
const obj = {
[key+'Message']:'必填'
}
console.log(obj[key+'Message']) // 必填
对象解构赋值
以前想提取对象里的属性需要这么做
const obj = {
name: '林三心',
age: 22,
gender: '男'
}
const name = obj.name
const age = obj.age
const gender = obj.gender
console.log(name, age, gender) // 林三心 22 男
ES6新增了解构赋值的语法
const obj = {
name: '林三心',
age: 22,
gender: '男',
doing: {
morning: '摸鱼',
afternoon: '摸鱼',
evening: 'sleep'
}
}
const { name, age, gender } = obj
console.log(name, age, gender) // 林三心 22 男
// 解构重名
const { name: myname } = obj
console.log(myname) // 林三心
// 嵌套解构
const { doing: { evening } } = obj
console.log(evening) // sleep
对象方法简写
ES6之前
const obj = {
say:function(){
console.log('说话');
},
run:function(){
console.log('跑步');
}
}
ES6新增
const obj = {
say(){
console.log('说话');
},
run(){
console.log('跑步');
}
}
对象属性同名简写
ES6之前
const label = '柏拉图';
const value = 23;
const obj = {
label:label,
value:value
}
ES6新增
const label = '柏拉图';
const value = 23;
const obj = {
label,
value
}
ES6 数组特性
Array.forEach
ES6新加的数组遍历方法
const eachArr = [1, 2, 3, 4, 5]
// 三个参数:遍历项 索引 数组本身
// 配合箭头函数
eachArr.forEach((item, index, arr) => {
console.log(item, index, arr)
})
1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 1, 2, 3, 4, 5 ]
3 2 [ 1, 2, 3, 4, 5 ]
4 3 [ 1, 2, 3, 4, 5 ]
5 4 [ 1, 2, 3, 4, 5 ]
Array.map
常用于返回一个处理过后的新数组
const mapArr = [1, 2, 3, 4, 5]
// 三个参数:遍历项 索引 数组本身
// 配合箭头函数,对每一个元素进行翻倍
const mapArr2 = mapArr.map((num, index, arr) => 2 * num)
console.log(mapArr2)
[ 2, 4, 6, 8, 10 ]
Array.filter
顾名思义,用来过滤的方法
const filterArr = [1, 2, 3, 4, 5]
// 三个参数:遍历项 索引 数组本身
// 配合箭头函数,返回大于3的集合
const filterArr2 = filterArr.filter((num, index, arr) => num > 3)
console.log(filterArr2)
[ 4, 5 ]
Array.some
some,意思就是只有一个是真,那就返回真
const someArr = [false, true, false, true, false]
// 三个参数:遍历项 索引 数组本身
// 配合箭头函数,只要有一个为true,就返回true,一个都true都没有,就返回false
const someArr2 = someArr.some((bol, index, arr) => bol)
console.log(someArr2)
true
Array.every
every跟some是相反的,some是只有一个就行,every是要所有为真才返回真
const everyArr = [false, true, false, true, false]
// 三个参数:遍历项 索引 数组本身
// 配合箭头函数,需要所有为true,才返回true,否则返回false
const everyArr2 = everyArr.every((bol, index, arr) => bol)
console.log(everyArr2)
Array.reduce
- 第一个参数callback函数: pre为上次return的值,next为数组的本次遍历的项
- 第二个参数为初始值,也是第一个pre
// 计算 1 + 2 + 3 + 4 + 5
const reduceArr = [1, 2, 3, 4, 5]
const sum = reduceArr.reduce((pre, next) => {
return pre + next
}, 0)
console.log(sum) // 15
// 统计元素出现个数
const nameArr = ['林三心', 'sunshine_lin', '林三心', '林三心', '科比']
const totalObj = nameArr.reduce((pre, next) => {
if (pre[next]) {
pre[next]++
} else {
pre[next] = 1
}
return pre
}, {})
console.log(totalObj) // { '林三心': 3, sunshine_lin: 1, '科比': 1 }
find 和 findIndex
- find:找到返回被找元素,找不到返回undefined
- findIndex:找到返回被找元素索引,找不到返回-1
const findArr = [
{ name: '科比', no: '24' },
{ name: '罗斯', no: '1' },
{ name: '利拉德', no: '0' }
]
const kobe = findArr.find(({ name }) => name === '科比')
const kobeIndex = findArr.findIndex(({ name }) => name === '科比')
console.log(kobe) // { name: '科比', no: '24' }
console.log(kobeIndex) // 0
数组解构赋值
const array = [100,200,300];
const [item1,item2,item3] = array;
console.log(item1,item2,item3);
ES6 函数特性
默认参数
开发中你曾遇到过这样的问题,如果参数不传进来,你就设置默认参数
function fn (name, age) {
var name = name || '林三 心'
var age = age || 18
console.log(name, age)
}
fn() // 林三心 18
但是这么写确实不优雅,可以使用ES6的默认参数
function fn (name = '林三心', age = 18) {
console.log(name, age)
}
fn() // 林三心 18
fn('sunshine', 22) // sunshine 22
剩余参数
大家可能遇到过这种问题,一个函数,传入参数的个数是不确定的,这就可以用ES6的剩余参数
function fn (name, ...params) {
console.log(name)
console.log(params)
}
fn ('林三心', 1, 2) // 林三心 [ 1, 2 ]
fn ('林三心', 1, 2, 3, 4, 5) // 林三心 [ 1, 2, 3, 4, 5 ]
箭头函数
以前我们使用普通函数
function fn () {}
const fn = function () {}
ES6新加了箭头函数
const fn = () => {}
// 如果只有一个参数,可以省略括号
const fn = name => {}
// 如果函数体里只有一句return
const fn = name => {
return 2 * name
}
// 可简写为
const fn = name => 2 * name
// 如果返回的是对象
const fn = name => ({ name: name })
普通函数和箭头函数的区别:
- 箭头函数不可作为构造函数,不能使用new
- 箭头函数没有自己的this
- 箭头函数没有arguments对象
- 箭头函数没有原型对象
class
以前咱们使用构造函数生成对象,这么做
function Person(name) {
this.name = name
}
Person.prototype.sayName = function () {
console.log(this.name)
}
const kobe = new Person('科比')
kobe.sayName() // 科比
而有了ES6的class可以这么做
class Person {
constructor(name) {
// 构造器
this.name = name
}
sayName() {
console.log(this.name)
}
}
const kobe = new Person('科比')
kobe.sayName() // 科比
值得一提的是,class本质也是function,class是function的语法糖
class Person {}
console.log(typeof Person) // function
除了以上,还需要知道class的以下知识点
静态属性和静态方法,使用static定义的属性和方法只能class自己用,实例用不了
class Person {
constructor(name) {
this.name = name
}
static age = 22
static fn() {
console.log('哈哈')
}
}
console.log(Person.age) // 22
Person.fn() // 哈哈
const sunshine_lin = new Person('林三心')
console.log(sunshine_lin.age) // undefined
sunshine_lin.fn() // fn is not a function
extend继承
class Animal {
constructor(name, age) {
this.name = name
this.age = age
}
}
class Cat extends Animal {
say() {
console.log(this.name, this.age)
}
}
const cat = new Cat('ketty', 5) // 继承了Animal的构造器
cat.say() // ketty 5
函数参数解构
function foo({url,method}){
console.log(url);
console.log(method);
}
foo({url:'www.baidu.com',method:'post'});