一、let const
1、没有预解析,提升变量作用域
2、在同一作用域不能重复定义
3、只能再自己的作用域使用
4、定义好的值不能修改(const)
二、解构赋值
1、用于数据的解析
let [a, b, c] = [1, 2, 3]
console.log(a, b, c) // 1, 2, 3
三、模板字符串(``)
1、代替了字符串连接 ' + + '
let name = zhangsan
let age = 20
console.log(`我是${name},今年${age}`) // 我是zhangsan,今年20
补充 str.includes() 检测字符串里包含某个字符,返回true或false
str.startsWith() 检测以什么字符串开头,返回true或false
str.endsWith() 检测以什么字符串结尾,返回true或false
str.padStart(填充后字符串长度,填充内容) 往字符串前填充
str.padEnd(填充后字符串长度,填充内容) 往字符串前填充
四、函数默认参数,箭头函数,剩余参数
1、 默认参数
function show(a='欢迎', b='万达') {
console.log(a,b) // 'welcome', 'wd'
}
show('welcome', 'wd')
show('welcome') // 'welcome', '万达'
show('welcome', '') // 'welcome', ''
show('', '') // '', ''
show(,'') // 报错,第一个参数必传
注意:函数参数已经默认已经定义了,不能再在函数里面定义与参数同名
的变量
2、剩余参数(...扩展运算符配合使用)
[1,2,3,4,5] -> ...[1,2,3,4,5] -> 1,2,3,4,5
1,2,3,4,5 -> ...1,2,3,4,5 -> [1,2,3,4,5]
function show(a, b, ...c) {
console.log(a,b,c) // '1', '2', ['3,', '4']
}
show('1', '2', '3', '4')
剩余参数必须放最后
3、箭头函数
很少用 (参数)=> 返回值 eg () => 1
常用 () => {}
注意: 当前this不再是调用者的this,是定义对象的this,箭头函数里面
没有arguments(用...a代替arguments),箭头函数不能当构造函数
五、数组循环,数组新增
1、for of
let arr = ['四川', '北京', '上海']
for (let val of arr) {
console.log(val) // '四川' '北京' '上海'
}
for (let index of arr.keys()) {
console.log(index) // 0 1 2
}
for (let item of arr.entries()) {
console.log(item) //[0, '四川'] [1, '北京'] [2, '上海']
}
for (let item of arr.entries()) {
console.log(item) //[0, '四川'] [1, '北京'] [2, '上海']
}
arr.keys() 数组下标
arr.entries() 数组某一项
2、伪数组转化为真数组Array.from或者扩展运算符(...)
运用:dom节点,非箭头函数里的arguments(一般具备length属性可用)
3、Array.of()将几个字符串,数值或其他转为数组
let a = Array.from(1,2,3)
console.log(a) [1,2,3]
4、find()
let arr = [100, 55, 22, 66, 77, 101]
let res = arr.find((item, index, arr) =>{
return item >100
})
console.log(res) // 101
注意:查找到第一个满足条件的数组元素,如果没有找到返回undefined
5、findIndex()
注意:用法同上,只是返回的是满足条件的数组索引,没找到返回-1
6、fill()
let arr = new Array(5)
arr.fill('222', 1, 3)
console.log(arr) // ['', '222', '222', '', '']
注意第一个参数为填充内容,第二个参数重哪里开始,第三个参数结束但不包括
六、对象用法新增
1、对象简洁写法
let name = 'zhnagsan'
let age = 18
obj = {name: 'zhnagsan', age: 18}
obj = {name, age}
2、Object.is() 比较是否相等
console.log(Object.is(NaN, NAN)) // true
console.log(Object.is(+0, -0)) // false
3、 Object.assign() 合并对象、拷贝
4、 Object.keys()
5、 Object.entries()
6、 Object.values()
7、 对象也可用...扩展运算符
七、promise,解决异步回调问题
new Promise().then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
八、模块化(统一了服务端与客户端模块规范)
注意:模块化需要服务器环境
1、如何定义模块
export xxxx
export {
a, // 可以起别名 a as aaa
b
}
2、如何使用
import {a,b} from './xxxx.js'(如果引入时不要大括号,导出时export后必须加default)
import 可以是相对路径也可以是绝对路径
import 只导入一次模块,无论引入多少次
import 会提升,首先执行
import 引入模块后,如果模块内发生变化,使用也会发生变化
3、动态引入,按需加载
import(./xxxx.js).then(res=> {
console.log(res)
})
九、类和继承
es5面向对象写法
es6
注意:1、es6 class没有与解析功能
es继承
es6继承
十、symbol与generator
1、symbol新增普通数据类型
如何定义:
let symb = Symbol('ccc')
注意:定义前面没有new,返回一个唯一值
可以作为对象的一个key,但for in 循环不能循环出来
2、generator(解决异步,深度嵌套)
function * show() {
}
使用:
十一、async,await(解决异步)
1. await只能放在async函数书中
2. 相对其他解决异步的方法更加语义化
3. 整个async返回也是一个promise对象
4. 如何await后面的promise对象状态返回为reject,那么整个async函数执行会中断
5. try catch 解决第四个问题
十二、Set和WeakSet
1、Set 新增数据结构(类似数组)但是里面不能有重复值
let setArr = new Set(['a','b','c'])
console.log(setArr) // {'a', 'b', 'c'}
setArr.add('a') // {'a', 'b', 'c'}
setArr.add('d') // {'a', 'b', 'c', 'd'}
setArr.delete('a') // {'b', 'c', 'd'}
setArr.has('b') // true
setArr.size()
setArr.clear()
可用for of循环
for (item of setArr) {
console.log(item)
}
注意:用于数组去重比较方便
2、WeakSet 用法与Set差不多(基本不用)
十三、map和Weakmap
1、map类似于json数据
json数据key只能为字符串,map的key为任意类型
使用:let map = new Map()
map.set('a', '1') 设置一个值
map.get(a) 获取一个值
map.delete() 删除一项
map.has() 返回true和false
map.clear() 情况map
总体用法与Set类似,Weakmap可以不用
十四、数字变化,math新增
1、进制
二进制:let a = 0b0100101
八进制:let b = 0o666
2、判断数字
Number.isNAN() 判断是不是一个非数字
Number.isFinite() 判断是不是一个数字
Number.isInteger() 判断是不是一个整数
还有以前的parseInt parseFloat 也集成到了Number上
安全整数 -(2^53 - 1) 到 (2^53 - 1)
Number.isSaveInteger()
3、Math
Math.trunc() 截取整数部分
Math.sign() 判断一个数是正数还是负数还是零正数返回1,负数返回-1,+0返回+0,-
0返回-0,非数字返回NAN
Math.cbrt() 开立方根
还有其他的。。。
十五、ES2018新增
1、命名捕获
用法:?<名字>
用法:k<>