[关闭]
@lizlalala 2016-09-23T11:18:23.000000Z 字数 5212 阅读 1002

es6学习(二)

es6


解构赋值

从数组或者对象中提取值去对变量/数组赋值被称为解构。

一、数组解构赋值

类似于

  1. let [head, ...tail] = [1, 2, 3, 4];
  2. head // 1
  3. tail // [2, 3, 4]

注意点:
右边必须为可遍历的结构。

  1. let [x, y, ...z] = ['a'];
  2. x // "a"
  3. y // undefined
  4. z // []

为了避免这样,可以考虑给默认值。且一旦右边的值非严格等于undefined,就会覆盖左边的默认值

  1. [x, y = 'b'] = ['a']; // x='a', y='b'
  1. let [a, [b], d] = [1, [2, 3], 4];
  2. a // 1
  3. b // 2
  4. d // 4

二、对象的解构赋值

变量必须与属性同名,才能取到正确的值。本质上类似于

  1. var { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
  2. //eg
  3. var {key1,key2} = {key1:value1,key2:value2}
  4. key1 //value1
  1. var {x,y=5} = {x:1}
  2. x //1
  3. y //5
  4. var {x:y = 3} = {x: 5};
  5. y // 5
  1. var x;
  2. {x} = {x: 1};
  3. // SyntaxError: syntax error
  4. // 正确的写法
  5. ({x} = {x: 1});

三、字符串的解构赋值

  1. const [a, b, c, d, e] = 'hello';
  2. //也可以
  3. for (let codePoint of 'foo') {
  4. console.log(codePoint)
  5. }

数值和布尔值也可以解构

四、用途

  1. [x, y] = [y, x+y];
  1. function example() {
  2. return [1, 2, 3];
  3. }
  4. var [a, b, c] = example();
  1. for (let [key, value] of map) {
  2. console.log(key + " is " + value);
  3. }

字符串扩展

  1. includes/startsWith/endsWith(str,index)
    index为开始搜索的位置
  2. repeat()
  1. "he".repeat(3) //hehehe
  2. "he".repeat(0) //""
  1. 模板字符串
    见另一个笔记es6笔记(一)
    模板编译部分见阮一峰笔记
    • 标签模板
      跟在函数名后面的模板字符串会被识别为多个参数。
      • 用途1
        可以用来对用户传入的数据进行预处理,比如过滤HTML字符串,防止用户输入恶意内容
  1. var message =
  2. SaferHTML`<p>${sender} has sent you a message.</p>`;
  3. function SaferHTML(templateData) {
  4. var s = templateData[0]; //<p>
  5. for (var i = 1; i < arguments.length; i++) {
  6. var arg = String(arguments[i]); //sender
  7. // Escape special characters in the substitution.
  8. s += arg.replace(/&/g, "&amp;")
  9. .replace(/</g, "&lt;")
  10. .replace(/>/g, "&gt;");
  11. // Don't escape special characters in the template.
  12. s += templateData[i];
  13. //templateData[i]这边指has sent you a message.</p>
  14. }
  15. return s;
  16. }
  17. //类似于functionName(strArr,..valuesArr),这边的strArr即为模板字符串中分解出来的所有非变量的字符串所组成的数组。
  18. //"templateData" ["<p>", " has sent you a message.</p>"]
  19. //"arguments" [object Arguments] {
  20. 0: ["<p>", " has sent you a message.</p>"],
  21. 1: "luchen"
  22. }
  23. arguments = strArr + valuesArr

除此之外,还有一个很神奇的用法,就是可以将普通的javascript转换为其他语言,比如说jsx..,找到jsx函数的实现,然后就可以将一个DOM字符串转为React对象..四国以..

  1. jsx`
  2. <div>
  3. <input
  4. ref='input'
  5. onChange='${this.handleChange}'
  6. defaultValue='${this.state.value}' />
  7. ${this.state.value}
  8. </div>
  9. `

数值的扩展

  1. 0b,0o 二进制八进制写法

    1. 0b111110111 === 503
    2. 0o767 === 503
    3. //es5
    4. parseInt("111110111", 2) === 503
    5. parseInt("767", 8) === 503
    6. //转为十进制用Number(str)
    7. Number('0b111')
  2. 原有方法加了Number限定,取消全局函数
    传统方法先用Number转换,然后判断,而现在不会转换,如果非数值,直接false

    1. Number.isFinite() Number.isNaN()
    2. Number.parseInt() Number.parseFloat()
    3. Number.isInteger()
    4. //Number.isInteger(25) // true 25与25.0被认为是同一个数
    5. //Number.isInteger(25.0) // true
  3. 增加极小值,用于浮点数误差判断
    Number.EPSILON
  4. 整数范围
    JavaScript能够准确表示的整数范围在-2^53到2^53之间(开区间)
    现在用Number.MAX_SAFE_INTEGERNumber.MIN_SAFE_INTEGER这两个常量,用来表示这个范围的上下限。

    1. Number.MAX_SAFE_INTEGER === 2**53-1
    2. Number.MAX_SAFE_INTEGER === -(2**53-1)
  5. Math对象的扩展

    • Math.trunc()
      取数的整数部分,截断,非四舍五入。非数值先Number(),不能转则NaN

      1. //等于
      2. function mathTrunc (x) {
      3. return (x < 0 ? Math.ceil(x) : Math.floor(x))
      4. }
    • Math.sign()判断符号

    • 三角函数运算
    • 对数运算
    • 指数运算
      1. 2**3 ===8

数组扩展


对象=》数组

  1. Array.from()
    将以下两种对象转变为数组

    • 类似数组的对象(array-like object),如arguments,getElementsByTag得到的集合
    • 可遍历(iterable)的对象,如Set Map

    任何有length属性的对象,都可以通过Array.from方法转为数组

    (1)用法:

    1. Array.from(arrayLike, x => x * x);

    补充
    扩展运算符(...)也可以做到。主要是以下场景:

    1. function f1(param1,...arr){//确切的说是rest参数
    2. //arr == [v2,v3]
    3. }
    4. f1(v1,v2,v3)
  2. Array.of()
    将一组数值转为数组

    1. Array.of() // []
    2. Array.of(undefined) // [undefined]
    3. Array.of(1) // [1]
  3. arr.copyWithin(destIndex,srcStart,srcEnd)

    1. // 将3号位复制到0号位
    2. [1, 2, 3, 4, 5].copyWithin(0, 3, 4)
  4. arr.find() arr.findIndex
    主要是由于arr.indexOf比较是基于===全等操作符,那么NaN就不能被找到,因为跟NaN有关的表达式都会返回false.
    参数为回调函数

    1. [1, 5, 10, 15].findIndex(function(value, index, arr) {
    2. return value > 9;
    3. }) // 2

    补充:

    1. arr.includes(param1,startIndex) //es7
  5. arr.fill()
    常用语初始化

    1. new Array(3).fill(7) //[7,7,7]
  6. arr.entries(),keys(),values()
    常与for..of一起使用进行对象遍历

    1. for (let index of ['a', 'b'].keys()) {
    2. console.log(index);
    3. }

函数的扩展

  1. 函数参数默认值
    只能作为尾参数

  2. rest参数 值-》数组

    1. function add(...values) {
    2. let sum = 0;
    3. for (var val of values) {
    4. sum += val;
    5. }
    6. return sum;
    7. }
    8. add(2, 5, 3) // 10
  3. 扩展运算符
    将数组-》逗号分隔的序列
    不同于rest参数是在形参中,扩展运算符用于函数调用里

    1. function add(x, y) {
    2. return x + y;
    3. }
    4. var numbers = [4, 38];
    5. add(...numbers) // 42

    常用

    1. Math.max(...[14, 3, 77])
    2. arr1.push(...[13,3,2]) //concat
    3. [...arr1, ...arr2, ...arr3]
    4. [a, ...rest] = list
  4. 箭头函数

  5. 尾递归
    -》递归改写,以解决多余的参数的问题(套一层函数/curry/es6默认值)
    -》优化:循环替代递归
    (1)返回函数而不是返回函数调用,用链式调用来替代嵌套调用
    阮一峰es6
    (2)memonization存储中间值
    具体见高性能javascript(p76)

对象扩展

  1. 属性、方法的简写

    1. var birth = '2000/01/01';
    2. var Person = {
    3. name: '张三',
    4. //等同于birth: birth
    5. birth,
    6. // 等同于hello: function ()...
    7. hello() { console.log('我的名字是', this.name); }
    8. };
  2. 属性名表达式,
    也可以用来定义方法名

    1. let propKey = 'foo';
    2. let obj = {
    3. [propKey]: true,
    4. };
  3. 方法的name属性
    get/set函数 -》person.firstName.name // "get firstName"
    匿名函数 (new Function()).name // "anonymous"
    symbol const key1 = Symbol('description');

  4. Object.is
    在===的基础上补充两点:

    • NaN

      1. Object.is(NaN, NaN) // true
    • +0 -0不相等

      1. Object.is(+0, -0) // false
  5. Object.assign

    • 浅拷贝,如果源对象的某个key的value是对象,那么复制的是这个对象的引用。

      1. var obj1 = {a: {b: 1}};
      2. var obj2 = Object.assign({}, obj1);
      3. obj1.a.b = 2;
      4. obj2.a.b // 2
      5. tong
    • 同名属性,只会替换,不会添加

    • 只能拷贝自身属性,不能拷贝继承的属性以及不可枚举的属性。
    • 用途:

      • 给对象添加属性

        1. class Point{
        2. constructor(x,y){
        3. Object.assign(this,{x,y})
        4. }
        5. }
      • 给对象添加方法

        1. Object.assign(someClass.prototype,{
        2. someMethod(arg1, arg2) {
        3. ···
        4. },
        5. })
      • 克隆对象

        1. function clone(origin) {
        2. let originProto = Object.getPrototypeOf(origin);
        3. return Object.assign(Object.create(originProto), origin);
        4. }
  6. 属性的遍历
    for..in,Object.keys(),Object.getOwnPropertyNames(obj),Object.getOwnPropertySymbols(obj),Reflect.ownKeys(obj)

遍历顺序: 数字(按大小)-》字符串(按生成时间)-》Symbol(按生成时间)

  1. Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
  2. // ['2', '10', 'b', 'a', Symbol()]
  1. es7中的
    Object.getOwnPropertyDescriptors

rest用于对象解构

补充知识

ES5有三个操作会忽略enumerable为false的属性。

es6中所有class的原型的方法都是不可枚举的。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注