ES6第一部分

作者:frank 发表日期:2016-06-17 20:34:56 更新日期:2016-06-17 20:34:56 分类:猿文色

摘要

解构赋值,字符串,正则,数值,数组,函数

正文

  • 解构赋值(相同的数据结构)

     // 数组
     let [a, b, c] = [1, 2, 3];                      // a = 1, b = 2, c = 3
     let [a = 1, b = 1, c = b] = [null, undefined];  // a = null, b = 1, c = 1
     let [[a], [b]] = [[1], [2]];                    // a = 1, b = 2
    
     // 对象
     let {foo, bar} = {foo: 1, bar: 2};              // foo = 1, bar = 2
     let {foo = 1, bar} = {foo: undefined, bar: 2};  // foo = 1, bar = 2
     let {bar: x, foo: y} = {foo: 1, bar: 2};        // foo bar = undefined, x = 2, y = 1
    
     // foo bar x y = undefined, xv = 2, yv = 1
     let {bar: {y: xv}, foo: {x: yv}} = {foo: {x: 1}, bar: {y: 2}};
    
     // 字符串
     const [a, b, c, length] = 'frank';  // a = 'f', b = 'r', c = 'a', length = 'n'
     const {length} = 'frank';           // length = 5
    
     // 数值,布尔:将基本类型转换为对象表示,在进行解构
     let {toFixed} = 4;      // toFixed === Number.prototype.toFixed
     let {toString} = 4;     // toString === Boolean.prototype.toString
    
     // undefined, null: 无法转换为对象,进行解构会报错
     let {props} = undefined; // error
    
     // 函数参数解构
     function add([a, b]) {
         return a + b;
     }
    
     add([1, 2]);
    
     // 用途
     [x, y] = [y, x]; // 交换变量的值
    
     return [1, 2, 3]; // 返回多个值
    
     const {a, b, c} = json; // 提取值
    
  • 字符串

     // 新增函数
     includes(), startsWith(), endsWith()
     'x'.repeat(3);          // 'xxx'
     'x'.padStart(5, 'ab');  // 'ababx'
     'x'.padEnd(5, 'ab');    // 'xabab'
    
     // 模板字符串:大括号中可以放置任何表达式
     let x = 1, y = 2;
     `${x} + ${y} = ${x + y}`; // 'x + y = 3'
    
  • 正则

     /^\uD83D/u.test('\uD83D\uDC2A'); // u修饰符,表示 Unicode 模式
    
     let r = /a+/y; // y粘连修饰符,匹配必须从剩余的第一个位置开始
    
  • 数值的扩展

     0b111110111 === 503;    // 0b前缀表示二进制数
     0o767 === 503;          // 0o前缀表示八进制数
    
     Number.isFinite(), Number.isNaN();
    
     Number.parseInt(), Number.parseFloat(); // 将全局方法移植到 Number 对象上
    
     Number.isInteger(); // 注意: 3 和 3.0 相同
    
     Number.EPSILON; // 2.220446049250313e-16 极小的常量,可接受的误差范围
    
     // javascript中超过2的53次方,数字就不精确了
     Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER; // 最大最小的安全数
     Number.isSafeInteger();
    
     Math.trunc();   // 去掉一个数字的小数部分
     Math.sign();    // 判断一个数到底是正数,负数还是零
     Math.cbrt();    // 计算一个数的立方根
     Math.clz32();   // 返回一个数的32位无符号整数形式有多少个前导0
     Math.imul();    // 返回两个数以32位带符号整数形式相乘的结果
     Math.fround();  // 返回一个数的单精度浮点数形式
     Math.hypot();   // 返回所有参数的平方和的平方根
    
     Math.expm1(); // 返回 Math.exp(x) - 1
     Math.log1p(); // 返回 Math.log(1 + x)
     Math.log10(); // 返回以10为底的 x 的对数
     Math.log10(); // 返回以2为底的 x 的对数
    
     Math.sinh();
     Math.cosh();
     Math.tanh();
     Math.asinh();
     Math.acosh();
     Math.atanh();
    
     // 新增运算符:指数运算符
     2 ** 2 = 4;
     2 ** 3 = 8;
     3 ** 3 = 27;
    
  • 数组的扩展

     Array.from();   // 将类数组对象或者可遍历对象转换为数组
     Array.of();     // 将一组值转换为数组
    
     arr.copyWithin();   // 数组内部复制:将一段位置复制到另一段
     arr.find();         // 找到第一个符合条件的数组成员并返回
     arr.findIndex();    // 找到第一个符合条件的数组成员并返回其索引
     arr.fill();         // 使用给定值填充数组
    
     arr.entries();  // 返回遍历器对象,对键值对的遍历
     arr.keys();     // 返回遍历器对象,对键的遍历
     arr.values();   // 返回遍历器对象,对值的遍历
    
     arr.includes(); // 返回数组是否包含给定值,indexOf 方法使用 === 运算符,造成NaN误判
    
     // ES7 数组推导:通过现有数组生成新数组
     a1 = [1, 2, 3 , 4];
     a2 = [for (i of a1) i * 2]; // [2, 4, 6, 8]
    
  • 函数的扩展

     // 参数默认值:定义了默认值的参数应该是函数的尾参数
     function add(a, b = 10) {
         return a + b;
     }
     add(10); // 20
    
     // length 属性:函数预期传入的函数的个数
     (function a(){}).length;                // 0
     (function a(x, y){}).length;            // 2
     (function a(x, y, ...args){}).length;   // 2
    
     // 参数默认值应用
     function foo(isNotNaN = throwIfNaN()) {
         return isNotNaN;
     }
    
     // rest 参数:c 是一个剩余参数的数组,之后不能有其他参数
     function foo(a, b, ...c) {
     }
    
     // 扩展运算符 ... rest参数的逆运算:替代数组的 apply 方法
     console.log(...[1, 2, 3]); // 1 2 3
     Math.max(3, 2, 9);
     Math.max(...[3, 2, 9]);
     [...[1, 2, 3], ...[4, 5, 6], 7];    // 合并数组
     [a, ...b] = [1, 2, 3, 4, 5];        // 与解构复制结合使用,a = 1, b = [2, 3, 4, 5]
     [...'hello'];                       // ['h', 'e', 'l', 'l', 'o']
    
     // name 属性:返回函数的函数名
     let fun = function() {}; // fun.name, ES5返回'', ES6返回 fun
    
     /* 箭头函数
      *  函数体内的 this 定义是所在的对象,不是调用时的对象
      *  不可以当做构造函数
      *  不能使用 arguments 对象,不存在,可以使用 rest 参数
      *  不能使用 yield
      */
     let fun = (...nums) => nums;
    
     // ES7 函数绑定:运算符 :: >>> object::fun
     frank::sayHi()::sayHello()::sayBye();
    
     /* 尾调用:函数的最后一步是执行某个函数
      *  尾调用优化:只保留内部函数的调用栈,节省内存
      *  尾递归:尾调用递归,非常节省内存
      */
     function f() {
         return g();
     }