一篇短文,看清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新增特性》。

 

未完待续...

 

posted @ 2018-04-20 17:22  海绵小猪  阅读(292)  评论(0编辑  收藏  举报