ES6解析*项目学习记录（二）

5. 数字扩展

进制表示

es6 中，二进制的表示方法都是以 0b 开头

console.log(0b111101110); // 494

es6 中，八进制的表示方法都是以 0o 开头

console.log(0o767); //503

数值判断

判断是否为有效数值

  console.log("15", Number.isFinite(15)); //true
  console.log("NaN", Number.isFinite(NaN)); //false
  console.log("1/0", Number.isFinite(1 / 0)); // false

判断是不是数

  console.log("NaN", Number.isNaN(NaN)); //false
  console.log("0", Number.isNaN(0)); //true

判断是否整数

  console.log(Number.isInteger(25)); //true
  console.log(Number.isInteger(25.0)); //true 25.0 等于 25
  console.log(Number.isInteger(25.1)); //false 25.1 不等于 25
  console.log(Number.isInteger("25")); //false  参数必须是数

数的边界

  console.log(Number.MAX_SAFE_INTEGER); //9007199254740991
  console.log(Number.MIN_SAFE_INTEGER); //-9007199254740991

判断安全范围内的整数

  console.log(Number.isSafeInteger(10)); //true
  console.log(Number.isSafeInteger(10.4)); //false

返回一个小数的整数部分

  console.log(Math.trunc(4.11)); //4
  console.log(Math.trunc(4.9)); //4

判断一个数 正数 负数 零

  console.log(Math.sign(-5)); //-1
  console.log(Math.sign(0)); //0
  console.log(Math.sign(5)); //1
  console.log(Math.sign("ffd")); //NaN

计算立方根

  console.log(Math.cbrt(-1)); //-1
  console.log(Math.cbrt(8)); //2
  console.log(Math.cbrt("gf")); //NaN

6. 数组扩展

数组转换

一组数据转换成数组

  let arr = Array.of(3, "sd", 7, 9, 11);
  console.log("arr=", arr); //[3, "sd", 7, 9, 11]

类数组转真数组

  // 把元素集合转义成数组
  let p = document.querySelectorAll("p");
  let pArr = Array.from(p);
  pArr.forEach(item => {
    console.log(item.textContent);
    //ES6
    //慕课网
    //学习教程
  });
  //映射关系
  console.log(Array.from([1, 3, 5], item => item * 2));
  // [2,6,10]

填充数组

  console.log([1, "a", undefined].fill(7)); // [7,7,7]
  // 后两个参数 起始位置 终止位置
  console.log(["a", "b", "c", "d", "e"].fill(7, 1, 3)); //['a',7,7,'d','e']

打印值

返回数组索引

  for (let index of ["1", "c", "ks"].keys()) {
    console.log(index);
    //0
    //1
    //2
  }

 

返回索引与值, 配合解构使用

  for (let [index, value] of ["1", "c", "ks"].entries()) {
    console.log(index, value);
    //0 '1'
    //1 'c'
    //2 'ks'
  }

从第 3 个位置开始读到 4 之前，放到第 0 个位置

console.log([1, 2, 3, 4, 5].copyWithin(0, 3, 4)); //[4, 2, 3, 4, 5]

找到符合条件的第一个数值

console.log([1, 2, 3, 4, 5, 6].find(item => item > 3)); //4

找到符合条件的第一个索引

console.log([1, 2, 3, 4, 5, 6].findIndex(item => item > 3)); //3

这个数组中是否包括 目标值

  console.log([1, 2, NaN].includes(1)); //true
  console.log([1, 2, NaN].includes(NaN)); //true

7. 函数扩展

参数

参数默认值

  function test(x, y = "world") {
    console.log("默认值", x, y);
  }
  test("hello"); //hello world

是取得参数中的值

  let x = "test";
  function test2(x, y = x) {
    console.log("作用域", x, y);
  }
  test2("kaka"); // kaka kaka

如果参数中没有x 就朝外取值

  let x = "test";
  function test2(c, y = x) {
    console.log("作用域", c, y);
  }
  test2("kaka"); // kaka test

rest 参数, 扩展运算符

  // 把一些离散的值转换成了数组
  function test3(...arg) {
    for (let v of arg) {
      console.log("rest", v);
      // 1
      // 5
      // a
    }
  }
  test3(1, 5, "a");

  // 把数组转成离散的值
  console.log("a", ...[1, 2, 4]); //a 1 2 4

箭头函数

  // this 绑定
  // es5: 函数被调用时的对象
  // es6: 定义时候的对象
  let arrow = v => v * 2;
  console.log(arrow(3)); //6
  let arrow2 = () => 5;
  console.log(arrow2()); //5

尾调用

  function tail(x) {
    console.log("tail", x);
  }
  function fx(x) {
    return tail(x);
  }
  fx(123); // 123

 

8. 对象扩展

简洁表达

  let o = 1;
  let k = 2;
  let es5 = { o: o, k: k };
  let es6 = { o, k };
  console.log(es5);
  console.log(es6);
  // {o: 1, k: 2}

  let es5_method = {
    hello: function() {
      console.log("hello es5");
    }
  };
  let es6_method = {
    hello() {
      console.log("hello es6");
    }
  };

  es5_method.hello();
  es6_method.hello();

属性表达式

  let a = "b";
  let es5_obj = {
    a: "c"
  };
  // 中括号包起变量，a 是变量，变量的值是b
  let es6_obj = {
    [a]: "c"
  };
  console.log(es5_obj); //{a: "c"}
  console.log(es6_obj); //{b: "c"}

新增api

  // 判断相等，等同 ===
  console.log(Object.is("abc", "abc")); //true
  // 引用类型 引用两个不同地址
  console.log(Object.is([], [])); //false

  // 浅拷贝 属性有限制 ，拷贝自身属性的地址
  console.log("拷贝", Object.assign({ a: "a" }, { b: "b" })); //{a: "a", b: "b"

  let test = { k: 123, o: 456 };
  for (let [key, value] of Object.entries(test)) {
    console.log([key, value]);
    // ["k", 123]
    // ["o", 456]

扩展运算符 (es7特性, 支持度不高)

  //扩展运算符 (es7特性)
  //let { a, b, ...c } = { a: "test", b: "kill", c: "ddd", d: "ccc" };
  // c= {
  //   c:ddd,
  //   d:ddd
  // }

9. symbol 类型

symbol 作用

提供一个独一无二的值

  //声明
  let a1 = Symbol();
  let a2 = Symbol();
  console.log(a1 === a2); //false

  // 设定key值，同key 的值是相等的
  let a3 = Symbol.for("a3");
  let a4 = Symbol.for("a3");
  console.log(a3 === a4); //true

使用场景

  // 同键值不会造成冲突
  let a1 = Symbol.for("abc");
  let obj = {
    [a1]: "123",
    abc: 345,
    c: 456
  };
  console.log(obj); //{abc: 345, c: 456, Symbol(abc): "123"}
  /**
   * 对象中有用到symbol作key值时，for in 和 let of 是拿不到属性的
   */
  for (let [key, value] of Object.entries(obj)) {
    console.log(key, value);
    // abc 345
    // c 456
  }
  for (let key in obj) {
    console.log(key, obj[key]);
    // abc 345
    // c 456
  }

  // 这时候就需要一个api了,得到一个数组
  Object.getOwnPropertySymbols(obj).forEach(item => {
    console.log(obj[item]);
    // 123 (只取到symbol)
  });

  // 所有都要那到要使用Reflect, 返回symbol变量作为key值的属性
  Reflect.ownKeys(obj).forEach(item => {
    console.log(item, obj[item]);
    // abc 345
    // c 456
    // Symbol(abc) '123'
  });