未分类

    纪录几个点

    纪录最近想纪录的几个点


    Object.create()

    创建Object的实例有下面三种方法:

    1
    2
    3
    var o1 = Object.create(Object.prototype);
    var o2 = new Object;
    var o3 = {};

    通过:var o4 = Object.create(null);可以创建没有原型的Object,这个对象不能使用 toString,valueOf等函数。

    创建一个以另一个空对象为原型,且拥有一个属性p的对象

    1
    o = Object.create({}, { p: { value: 42 } })


    字符串判断

    在涉及其它运算符(译注:如下面的减号’-‘)时,JavaScript语言不会把数字变为字符串。

    1
    2
    "37" - 7 // 30
    "37" + 7 // "377"


    单目加法运算符

    将字符串转换为数字的另一种方法是使用单目加法运算符。

    1
    2
    "1.1" + "1.1" = "1.11.1"
    (+"1.1") + (+"1.1") = 2.2 // 注:加入括号为清楚起见,不是必需的。


    false 判断

    当传递给条件语句时,所有其他值,包括所有对象会被计算为 true 。

    1
    2
    3
    4
    5
    6
    false
    undefined
    null
    0
    NaN
    空字符串 ("")

    请不要混淆原始的布尔值true和false 与 布尔对象的值true和false.

    1
    2
    3
    var b = new Boolean(false);
    if (b) // this condition evaluates to true
    if (b == true) // this condition evaluates to false


    promise catch error

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    function imgLoad(url) {
    return new Promise(function(resolve, reject) {
    var request = new XMLHttpRequest();
    request.open('GET', url);
    request.responseType = 'blob';
    request.onload = function() {
    if (request.status === 200) {
    resolve(request.response);
    } else {
    reject(Error('Image didn\'t load successfully; error code:'
    + request.statusText));
    }
    };
    request.onerror = function() {
    reject(Error('There was a network error.'));
    };
    request.send();
    });
    }

    for…of statement

    该新特性属于 ECMAScript 2015(ES6)规范,在使用时请注意浏览器兼容性。
    下面的这个例子展示了 for…of 和 for…in 两种循环语句之间的区别。与 for…in 循环遍历的结果是数组元素的下标不同的是, for…of 遍历的结果是元素的值:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    let arr = [3, 5, 7];
    arr.foo = "hello";
    for (let i in arr) {
    console.log(i); // logs "0", "1", "2", "foo"
    }
    for (let i of arr) {
    console.log(i); // logs "3", "5", "7" // 注意这里没有 hello
    }


    剩余参数(rest parameters)

    剩余参数语法允许将不确定数量的参数表示为数组。在下面的例子中,使用剩余参数收集从第二个到最后参数。然后,我们将这个数组的每一个数与第一个参数相乘。

    1
    2
    3
    4
    5
    6
    function multiply(multiplier, ...theArgs) {
    return theArgs.map(x => multiplier * x);
    }
    var arr = multiply(2, 1, 2, 3);
    console.log(arr); // [2, 4, 6]


    列举对象属性

    从 ECMAScript 5 开始,有三种原生的方法用于列出或枚举对象的属性:

    1.for...in 循环
    该方法依次访问一个对象及其原型链中所有可枚举的属性。

    2.Object.keys(o)
    该方法返回一个对象 o 自身包含(不包括原型中)的所有属性的名称的数组。

    3.Object.getOwnPropertyNames(o)
    该方法返回一个数组,它包含了对象 o 所有拥有的属性(无论是否可枚举)的名称。


    使用 defineProperty 为已存在的对象定义 setter

    set 语法将对象属性绑定到要调用的一个函数上, 当尝试设置该属性时

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var o = { a:0 }
    Object.defineProperties(o, {
    "b": { get: function () { return this.a + 1; } },
    "c": { set: function (x) { this.a = x / 2; } }
    });
    o.c = 10 // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
    console.log(o.b) // Runs the getter, which yields a + 1 or 6


    使用defineProperty在存在的对象上定义 getter

    get 语法将一个对象属性绑定到查询该属性时将被调用的一个函数上。

    1
    2
    3
    4
    var o = { a:0 }
    Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });
    console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)

    defineProperty 的 getter/setter 方法就是 Vue 双向绑定的一部分机制。