es6部分特性
变量提升的原理
js是一边编译一边执行的,在编译阶段,js引擎会搜集所有的变量声明,并且提前让声明生效,至于剩下的语句,则需要等到执行阶段,等到执行到具体的某一句的时候才会生效,这就是变量提升背后的机制。
let和const区别于var的一个重要特性是,它们不存在变量提升
块作用域
用var声明的变量是不感知块作用域的,let和const声明的变量会被绑定到块作用域
暂时性死区
var me = 'xiuyan';
{
me = 'bear';
let me;
}
结果报错
me = 'bear'以上的区域就是暂时性死去,包括本身这行。
这是因为,es6中有明确的规定,如果区块中存在let或者const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域,加入我们尝试在声明前区使用这类变量,就会报错。
暂时性死区的本质:当我们进入当前作用域时,let或者const声明的变量已经存在了,它们只是不允许获取,要想获取它们,必须等到代码执行到声明处。
es6的一些特性
对象和数组的解构
const [a, b, c] = [1, 2, 3]
// a = 1 b = 2 c = 3
const [a, , c] = [1, 2, 3]
// a = 1 c = 3
深层次的嵌套对象的解构
const school = {
classes: {
stu: {
name: 'Bob',
age: 24,
}
}
}
const { classes: { stu: { name } } } = school
解构时同时重命名,新变量名放在冒号后面
const { classes: { stu: { name: newName } } } = school
// newName = 'Bob'
扩展运算符 ‘...’
const newObj = { ...obj }
等价于 const newObj = Object.assign({}, obj);
在数组中,扩展运算可以讲一个数组转为用逗号分隔的参数序列
function mutiple(x, y) {
return x*y
}
const arr = [2, 3]
mutiple(...arr) // 6
扩展运算可以用于合并数组
const arr1 = [1, 2];
const arr2 = [3, 4];
const newArr = [...arr1, ...arr2];
rest参数也是扩展运算的一个应用,它可以把一个分离的参数序列整合成一个数组
function mutiple(...args) {
console.log(args)
}
mutiple(1, 2, 3, 4) // [1, 2, 3, 4]
重点:类数组 !!!
类数组: 它必须是一个对象,它有length属性
类数组转化成真正的数组
const arrayLike = {0: 'Bob', 1: 'Lucy', 2: 'Daisy', length: 3 }
const arr = Array.prototype.slice.call(arrayLike);
Array原型上的slice方法—— 这个方法如果不传参数的话会返回原数组的一个拷贝
const arr = Array.from(arrayLike);
Array.from方法——这是 ES6 新增的一个数组方法,专门用来把类数组转为数组
还有扩展运算符,比如函数内部的arguments变量,也是类数组对象
function demo() {
console.log('转换后的 arguments 对象:', [...arguments])
}
demo(1, 2, 3, 4) // 转换后的 arguments 对象:[1, 2, 3, 4]
模版字符串
优势:
在模版字符串中,空格、缩进、换行都会被保留
支持运算
字符串常用操作方法(es6新增)
以前检测字符串中是否包含某个自字符,需要用indexOf > -1,比如: str.indexOf('abc') > -1;
现在可以使用str.includes('abc');
startsWith,endsWith分别检测字符串是不是以某串字符开头或者结尾
自动重复repeat方法
const str = 'abc'
const newStr = str.repeat(3)
// newStr = 'abcabcabc'