zoukankan      html  css  js  c++  java
  • 一篇短文,看清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新增特性》。

    未完待续...

  • 相关阅读:
    xtu数据结构 I. A Simple Tree Problem
    图论trainning-part-1 A. 最短路
    xtu数据结构 D. Necklace
    xtu数据结构 G. Count the Colors
    xtu数据结构 B. Get Many Persimmon Trees
    xtu数据结构 C. Ultra-QuickSort
    NYOJ 118 修路方案
    POJ 1679 The Unique MST
    NYOJ 115 城市平乱
    NYOJ 38 布线问题
  • 原文地址:https://www.cnblogs.com/feitan/p/5562655.html
Copyright © 2011-2022 走看看