一篇短文,看清ES6全部新特性——ES6 新增特性小记
我们也许不需要了解所有未使用过的技术细节,但有必要掌握大而全的技术方向,在接触到时快速定位,深入思考。
本文是作者学习阮一峰老师的《ECMAScript入门》过程中,对es6新增特性的简要概括,其中有意忽略了es6中未确定但在es7中包含的标准、使用场景少、高深难理解的少数知识点。目的是使初学者对es新增特性的主要内容快速理解,方便建立知识库,日后查找时更有针对性。
目录:
。。。
一、let关键字
1.实现了块级作用域,let声明的变量只在代码块内有效。
2.let不像var会变量提升。
3.一个代码块内let会绑定变量。
var temp = 1; { console.log(temp); //引用错误,未定义 let temp =0; console.log(temp); //0 }
4.一个代码块里不能重复声明(var和let,let和let)
二、const关键字
就是不可改变的let关键字,同样块级作用域有效,不变量提升,不能重复声明。
在指向引用类型时,不可改变的是地址,对象本事是可以改变的。
三、解构
1.数组解构
var [a,[b],d=5] =[1,[2,3],4]; //a=1,b=2,d=5
左侧匹配不到右侧的变量为undefined;右侧匹配不到左侧没有关系;变量可以有默认值。
2.对象解构
属性名需对应
3.字符串解构
[a,b,c] = '123'; a='1',b='2',c='3'
4.函数解构
function add([a,b]){ return a+b; }
四、字符串扩展
1.str.includes([i])
2.str.startsWith([i])
3.str.endsWith([i])
以上三个返回值都是布尔类型,i是可选参数,表示起始位置
4.str.repeat(n) //字符串重复n次
5.字符串补全长度
str.padStart(5,'a') //长度不足5,在头部用a补全
str.padEnd(5,'b') //长度不足5,在尾部用b补全
6.模板字符串,反引号``标识字符串,${name}嵌入变量
`This is a ${name}.`
7.标签模板
8.String.raw() 反斜杠转义 \变成\\
五、正则扩展
1.y修饰符,必须从头开始匹配
2.sticky属性 ReExp.sticky表示是否使用了y修饰符
3.flags 返回修饰符
六、数值扩展
1.二进制:0b或0B
八进制:0o或0o
2.Number对象的扩展
- Number.isFinite(),
- isNaN(),
- Number.parseInt(),
- Number.parseFloat(),
- Number.isInteger() 是否是整数,3.0是整数
- Number.EPSILON() 浮点数可接受误差范围常量
- Number.isSafeInteger()
3.Math对象的扩展
- Math.trunc() 返回数值的整数部分 Math.trunc(2.1) //2
- Math.sign() 返回值 +1 正数;-1负数;0 0;-0 -0
- Math.cbrt() 计算一个数的立方根
- Math.clz32()
- Math.imul()
- Math.fround()
- Math.hypot() 平方和的平发根
- Math.expm1(),Math.log1p(),Math.log10(),Math.log2()
- Math.sinh(),Math.cosh(),Math.tanh(),Math.asinh(),Math.acosh(),Math.atanh()
七、数组的扩展
1.Array.from(obj, fn)
将类数组、可遍历对象转化为数组,理解成只要有length属性就可以转为数组。fn是转化成数组时对元素的映射处理。
2.Array.of(1,3,5) //[1,3,5]
将一组值转换成数组。
3.[].find(fn)
数组实例的方法,返回该元素or undefined
4.[].findIndex(fn)
返回该元素index or -1
5.[].fill(7) //以7填充数组
[].fill(value,begin,end) //以value填充指定位置
八、对象的扩展
1.属性简写
{ name : 'Amy', age, //等价于age: age hi(){...} //等价于 hi: function(){...} }
2.属性定义支持[表达式]
obj[value1] = obj['color'+'blue']
3.Object.is()
判断是否相等,类似===,区别是+0!=-0,NaN==NaN
4.Object.assign(target, obj1, obj2, ...)
将obj参数的所有属性依次添加到target上,返回target。
5.Object.setPrototypeOf(obj,prototype对象)
设置obj的prototype对象,类似的方法有Object.getPrototypeOf()。
九、新的原始数据类型——Symbol
产生原因:
es5中对象的属性名是字符串类型,易重名,Symbol类型的每个值都是唯一的,可使用在一些可能重名的情形种。
定义和使用:
因为Symbol是原始数据类型,所以不是对象,不需要new。
var s1 = Symbol(); //不在全局登记
var s2 = Symbol('foo'); //登记在全局下
var s3 = Symbol('foo');
s2 === s3 ; //false Symbol类型的值都不相等,用同一个标记登记了也不相等
obj[s1]; //使用时不可以obj.s1,这就成了字符串,等价于obj['s1']
遍历:
不能被keys()、for、Object.getOwnNames()等遍历到,只可以被Object.getOwnSymbols()遍历到。
方法:
Symbol.for('a') 是否有以'a'为参数的全解决登记的Symbol值,有就返回,没有就创建一个全局登记的Symbol值。
Symbol.keyFor('a') 返回全局登记过的Symbol值对应的key,即创建时的参数。
十、Proxy代理
I Proxy对象
使用示例,创建一个代理时,第一个参数是要代理的对象,第二个参数是要监控的操作:
var myProxy = new Proxy(target, { get: function(target, propKey, receiver){...}, //参数依次是被代理对象,属性名,this。下面操作的参数略 set: function(target, propKey, value, receiver){...}, has: function(target, propKey), //in操作 deleteProperty: ..., enmuerate: ..., //for遍历 hasOwn: ..., apply: ..., ... });
方法:Proxy.revocable() 返回带有revoke()方法的Proxy实例,这样实例一执行revoke(),代理就可以取消。
II Reflect对象
Reflect对象有Object和Proxy的多数方法,作用是让更多操作方法化,更可控。
III Object对象
Object.observe(obj, fn, ['事件类型']) ,这种功能不禁联想要双向绑定的实现。
Object.observe(obj, function(changes){ add: update: delete: setPrototype: reconfigure: proventExtensions: }) ;
还有一种方式和代理的监听功能类似,就是set/get访问器,详见作者的《es5新增特性》。
未完待续...