ES6的变化与新特性(上篇)
Part1. 变量声明与作用域的变化
ES6有6种姿势声明变量: var let const function class import
其中let关键字,用来替代var声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,即{}内有效.let声明的变量不存在变量提升
var与let的对比
var a = [];
for(var i = 0;i < 10;i++) {
a[i] = function(){
console.log(i);
}
}
a[0]() //10;
//--------------------
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
//在for循环声明的let变量只在该循环块内有效,
//并且每次循环会重新分配,
//故在新的循环轮次中i是新的变量
变量声明的暂时性死区
let变量绑定的代码块不受外部影响,在代码块开始处到声明该变量声明处存在暂时性死区,这将导致该部分使用暂未声明的变量报错,即使全局存在同名变量也报错.const同理.
栗子
if (true) {
/*此处如果用var声明,会报重复声明的错误,
ES6不允许let和const同作用域重复声明*/
tmp = 'abc';
console.log(tmp); //报错:变量未定义
typeof tmp; //报错:同上
let tmp; //死区结束
console.log(tmp); // undefined
tmp = 123;
console.log(tmp); // 123
}
const关键字
const用于声明常量,其值或指向的对象引用不能改变;
const作用域规则同let,不存在变量提升,存在暂时性死区;
const声明的同时必须赋值,'const a;a=1;console.log(a)'这在非严格模式下输出undefined,严格模式报错;
const声明的对象引用不可变,但对象属性可变;
跨模块常量需要用export声明 export const xx = xx;
函数作用域
ES5 : 存在函数提升,在代码块内的函数会提升到整个函数作用域内
ES5 严格模式 : 函数只能在函数内或顶级作用域声明, 不能再if{} for{}等块内声明
ES6 : 函数不存在提升, if{} for{}等块内声明的函数只在块内有效
Part2. 解构
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring).
- 允许不完全解构
- 解构可运用于var let const import
- 对于Set结构,也可以使用数组的解构赋值。eg: let [x, y, z] = new Set(["a", "b", "c"])
- Generator函数也能解构,赋值过程依次调用函数获取值
- 解构允许附带默认值,生效条件是匹配到严格undefined eg: let [a=1,b=3] = [2] //a=2,b=3
- 解构比较过程是严格相等运算 eg: let [a=undefined] = [null] //a=null 因为 undefined!==null
- 对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,即属性名称只是作为匹配模式
- 已经声明的对象解构赋值最好加上()以避免解释器当成代码块 eg : var x; {x} = {x: 1}; //如果解构语句在行首则报错
- 解构声明等同于分别声明, let和const关键字声明的同区块不能出现重复
- 对象解构时, 若源为基本类型,会转换为对象类型; 数组解构时, 源必须是可遍历的结构或字符串
- 函数参数也能解构, 形参被解构赋值为实参, eg : function foo([x,y]) {};foo([1,2])
- 解构模式内部不要有括号()
示例
var { bar, foo } = { foo: "aaa", bar: "bbb" }; //这是简写形式.
var { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }; //真·解构
var { p: [x, { y : z }] } = { // x='Hello'; p和y 是模式,未声明; z = 'World' EX·嵌套·解构
p: [
"Hello",
{ y: "World", z : "GG" }
]
};
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4]; //...运算符不能放在前面,含义为剩下的参数
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
用途
- 交换变量 [a,b] = [b,a]
- 提取数据, 从返回值提取或从Json提取等等
- 函数默认参数
- 加载模块指定值 eg: import {A,B} from './xx';
Part3. 内置对象扩展与字符串模板
字符串和正则的扩展
- ES6 unicode: Unicode编码放在大括号内,对于>0xFFFF的字符不会错误解释 \u{xxxxx}
- codePointAt() JS字符以UTF-16的格式储存,每个字符固定为2个字节。对于那些需要4个字节储存的字符,字符长度为2,此方法避免该问题, 返回, 返回字符码点, 扩展charCodeAt方法
- fromCodePoint([...code]) 返回Unicode码的对应字符,扩展fromCharCode方法
- at() 返回指定位置字符, 扩展charAt方法
- normalize() 统一同一个字符的不同Unicode
- includes(), startsWith(), endsWith() 终于有这三个方法了,第一个参数是匹配字符,第二个参数是搜索开始位置
- repeat() 重复字符串,参数是自然数
- 模板字符串 终于出来了,here doc写法
//基本用法, <span style="color: #ff0000;">反引号</span>包含
var str = `
Here
is
doc
`;
/**
* 模板替换
* ${}中的变量会被替换成实际值;
* 非字符串变量会自动调用toString()后替换;
* 表达式会计算值后替换;
* 函数会替换为其返回值
*/
var number = 1;
str = `Test ${number} Test`; //Test 1 Test
var bar = {foo : 1 };
var foo = function(){};
`foo ${foo()} ${bar.foo}`; //foo undefined 1
//标签模板(一种函数调用)
var a = 5;
var b = 10;
tag`Hello ${ a + b } world ${ a * b } `;
function tag (){
console.log(arguments[0]); //['Hello ', ' world ', ' ']
console.log(arguments[1]); //15
console.log(arguments[2]); //15
}
//String.raw转义模板字符串
String.raw`Hi\n${2+3}!` //Hi\\n5
数组扩展
Array.from将任何类数组或实现Iterator的类型转换为真·数组
Array.from(arguments);
Array.from({length : 3}); //[undefined,undefined,undefined]
Array.from([1,2],x=>x+1); //[2,3] 接受第二个参数进行map, == Array.from([1,2]).map(x=>x+1);
Array.from({length : 3},()=>this.a,{a:1}); //[1,1,1] 接受第三个参数绑定this
Array.of将从参数构造数组,行为等同于new Array()参数>2时,不存在重载,如Array.of(1,2),返回[1,2] Array.copyWithin 没卵用..
Array.find()和findIndex(), 接受一个函数,返回执行至第一个返回true时的value或者index,接受的函数参数:value, index, arr 弥补indexOf方法, indexOf方法无法识别数组的NaN成员,但是findIndex方法可以借助Object.is方法做到,
Array.includes, 返回bool, 相当于可以识别NaN的indexOf === -1
Array.fill(), 填充值,不多说
entries(),keys()和values() 返回三种遍历器
函数扩展
ES6允许函数拥有默认值, 并且可以和解构赋值同时使用
function fetch(url, { method = 'GET' } = {}){
console.log(method);
}
fetch("test1"); //GET
fetch("test2",{method : "PUT"}); //PUT
函数拥有length属性,含义是预期传入参数个数,不包括默认参数和rest参数, name属性也被标准化
扩展运算符(...)
在形参列表作用是将剩余变量加入...variable数组中,避免arguments对象的使用(注:只能在参数列表最后出现); 在实参列表作用是将数组转换为参数序列(相当于apply的第二个参数用法);
另外,扩展运算符也可以合并数组;配合解构生成数组;转换成为数组(相当于Array.from)
function foo(a,...b){
console.log(b);
}
foo(1,2,3);//[2,3]
function bar(a,b,c) {
console.log(a,b,c);
}
bar(...[1,2,3]); //1,2,3
Lambda表达式
ES6提供了对lambda表达式支持, 又名箭头函数, 格式为 "(/* 参数 /) => {/ 函数体 */}", 以下是其注意点,与匿名函数最大的区别是固化this:
(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象
(2)不可以当作构造函数,也就是说,不可以对lambda表达式使用new命令,否则会抛出一个错误
(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替
(4)不可以使用yield命令,因此箭头函数不能用作Generator函数
关于尾调用优化和尾递归柯里化等函数式编程概念, 以后详述
对象扩展
对象有简洁写法, 不写属性值时, 属性值为属性名称变量的值
对象声明允许属性名表达式, 代替 obj[expr]的写法
let a=1;b=2;
console.log({a,b}); //{a : 1 , b : 2}
let c = {
[a] : 'a',
[foo()] : 'b'
}
console.log(c); //{ '1' : 'a' , foo()的返回值 : 'b'}
Object.is方法, 接受两个参数, 判断两个对象是否相同,这是一种Same-value equality, 相当于可以判断NaN===NaN和+0!==-0的严格等于运算符
Object.assign方法, 与_.extent $.extend作用相同,合并对象(注:采用浅拷贝) ES7提出扩展运算符'...'引入对象, 这已经在Babel实现 Object.keys , Object.values, Object.entries等等其他语法糖不详述.
ES6中可用的遍历对象的6种姿势
- for...in 循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)
- Object.keys(obj) 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)
- Object.getOwnPropertyNames(obj) 返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性)
- Object.getOwnPropertySymbols(obj) 返回一个数组,包含对象自身的所有Symbol属性
- Reflect.ownKeys(obj) 返回一个数组,包含对象自身的所有属性,不管是属性名是Symbol或字符串,也不管是否可枚举
- Reflect.enumerate(obj) 返回一个Iterator对象,遍历对象自身的和继承的所有可枚举属性(不含Symbol属性),与for...in循环相同。