美文网首页程序员
javaScript易遗忘点及编程风格

javaScript易遗忘点及编程风格

作者: 天上月丶 | 来源:发表于2017-06-14 15:31 被阅读22次

    1.获取对象所有键:

    var arr = ['a', 'b', 'c'];
    Object.keys(arr ); //["0","1","2"]
    
    var obj={
    name:Jack,
    age:12
    }
    Object.keys(obj)//["name","age"]
    
    Object.getOwnPropertyNames(obj)
    

    2.函数的属性和方法

    • name属性:返回紧跟在function关键字之后的那个函数名。
    function f1() {}
    f1.name // 'f1'
    
    var f2 = function () {};
    f2.name // ''
    
    var f3 = function myName() {};
    f3.name // 'myName'
    
    • length属性:返回函数预期传入的参数个数,即函数定义之中的参数个数。
    function f(a, b) {}
    f.length // 2
    
    • 函数的toString方法返回函数的源码。
    function f() {
      a();
      b();
      c();
    }
    
    f.toString()
    // function f() {
    //  a();
    //  b();
    //  c();
    // }
    

    3.通常情况下,eval最常见的场合是解析JSON数据字符串,不过正确的做法应该是使用浏览器提供的JSON.parse方法

    4.位运算符用于直接对二进制位进行计算,一共有7个。

    • 或运算(or):符号为|,表示若两个二进制位都为0,则结果为0,否则为1。

    • 与运算(and):符号为&,表示若两个二进制位都为1,则结果为1,否则为0。

    • 否运算(not):符号为~,表示对一个二进制位取反。

    • 异或运算(xor):符号为^,表示若两个二进制位不相同,则结果为1,否则为0。

    • 左移运算(left shift):符号为<<。
      左移运算符表示将一个数的二进制值向左移动指定的位数,尾部补0,即乘以2的指定次方(最高位即符号位不参与移动)。

    // 4 的二进制形式为100,
    // 左移一位为1000(即十进制的8)
    // 相当于乘以2的1次方
    4 << 1
    // 8
    
    -4 << 1
    // -8
    
    • 右移运算(right shift):符号为>>。
      右移运算符表示将一个数的二进制值向右移动指定的位数,头部补0,即除以2的指定次方(最高位即符号位不参与移动)。
    4 >> 1
    // 2
    /*
    // 因为4的二进制形式为00000000000000000000000000000100,
    // 右移一位得到00000000000000000000000000000010,
    // 即为十进制的2
    */
    
    -4 >> 1
    // -2
    /*
    // 因为-4的二进制形式为11111111111111111111111111111100,
    // 右移一位,头部补1,得到11111111111111111111111111111110,
    // 即为十进制的-2
    */
    
    • 带符号位的右移运算(zero filled right shift):符号为>>>
      该运算符表示将一个数的二进制形式向右移动,包括符号位也参与移动,头部补0。所以,该运算总是得到正值。对于正数,该运算的结果与右移运算符(»)完全一致,区别主要在于负数
    4 >>> 1
    // 2
    
    -4 >>> 1
    // 2147483646
    /*
    // 因为-4的二进制形式为11111111111111111111111111111100,
    // 带符号位的右移一位,得到01111111111111111111111111111110,
    // 即为十进制的2147483646。
    */
    

    5.JavaScript的原生错误类型

    • SyntaxError是解析代码时发生的语法错误。
    // 变量名错误
    var 1a;
    
    // 缺少括号
    console.log 'hello');
    
    • ReferenceError是引用一个不存在的变量时发生的错误。
    unknownVariable
    // ReferenceError: unknownVariable is not defined
    
    console.log() = 1
    // ReferenceError: Invalid left-hand side in assignment
    
    this = 1
    // ReferenceError: Invalid left-hand side in assignment
    
    • RangeError是当一个值超出有效范围时发生的错误。主要有几种情况,一是数组长度为负数,二是Number对象的方法参数超出范围,以及函数堆栈超过最大值。
    new Array(-1)
    // RangeError: Invalid array length
    
    (1234).toExponential(21)
    // RangeError: toExponential() argument must be between 0 and 20 
    
    • TypeError是变量或参数不是预期类型时发生的错误。比如,对字符串、布尔值、数值等原始类型的值使用new命令,就会抛出这种错误,因为new命令的参数应该是一个构造函数。
    new 123
    //TypeError: number is not a func
    
    var obj = {};
    obj.unknownMethod()
    // TypeError: obj.unknownMethod is not a function 
    
    • URIError是URI相关函数的参数不正确时抛出的错误,主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。
    decodeURI('%2')
    // URIError: URI malformed
    
    • eval函数没有被正确执行时,会抛出EvalError错误。该错误类型已经不再在ES5中出现了,只是为了保证与以前代码兼容,才继续保留。

    6.自定义错误

    function UserError(message) {
       this.message = message || "默认信息";
       this.name = "UserError";
    }
    
    UserError.prototype = new Error();
    UserError.prototype.constructor = UserError;
    

    上面代码自定义一个错误对象UserError,让它继承Error对象。然后,就可以生成这种自定义的错误了。

    new UserError("这是自定义的错误!");

    7.JavaScript 编程风格

    • 缩进
      选择空格或tab键缩进,只可选择某一种,不可混淆,若是中途加入项目,遵从原先程序中的风格。
    • 区块
      区块起首的大括号,不要另起一行,要紧跟区块之后,如下所示:
    block{
        ···
    }
    
    • 圆括号

    • 表示函数调用时,函数名与左括号之间没有空格。

    • 表示函数定义时,函数名与左括号之间没有空格。

    • 其他情况时,前面位置的语法元素与左括号之间,都有一个空格。

    • 行尾的分号
      建议不要省略

    • 全局变量
      JavaScript最大的语法缺点,可能就是全局变量对于任何一个代码块,都是可读可写。这对代码的模块化和重复使用,非常不利。
      因此,避免使用全局变量。如果不得不使用,用大写字母表示变量名,比如UPPER_CASE。

    • 变量声明
      JavaScript会自动将变量声明”提升”(hoist)到代码块(block)的头部。

    if (!o) {
      var o = {};
    }
    
    // 等同于
    
    var o;
    if (!o) {
      o = {};
    }
    

    为了避免可能出现的问题,最好把变量声明都放在代码块的头部。

    for (var i = 0; i < 10; i++) {
      // ...
    }
    
    // 写成
    
    var i;
    for (i = 0; i < 10; i++) {
      // ...
    }
    

    另外,所有函数都应该在使用之前定义,函数内部的变量声明,都应该放在函数的头部。

    • new命令
      JavaScript使用new命令,从构造函数生成一个新对象。
      var o = new myObject();
      上面这种做法的问题是,一旦你忘了加上new,myObject()内部的this关键字就会指向全局对象,导致所有绑定在this上面的变量,都变成全局变量。
      因此,建议使用Object.create()命令,替代new命令。如果不得不使用new,为了防止出错,最好在视觉上把构造函数与其他函数区分开来。比如,构造函数的函数名,采用首字母大写(InitialCap),其他函数名一律首字母小写。

    • with语句
      禁止使用with语句。

    • 相等和严格相等
      不要使用“相等”(==)运算符,只使用“严格相等”(===)运算符。

    • 语句的合并
      有些程序员追求简洁,喜欢合并不同目的的语句。比如,原来的语句是

    a = b;
    if (a) {
      // ...
    }```
    他喜欢写成下面这样。
    
    

    if (a = b) {
    // ...
    }

    虽然语句少了一行,但是可读性大打折扣,而且会造成误读,让别人误解这行代码的意思是下面这样。
    
    ```if (a === b){
      // ...
    }```
    建议不要将不同目的的语句,合并成一行。
    - 自增和自减运算符
    自增(++)和自减(--)运算符,放在变量的前面或后面,返回的值不一样,很容易发生错误。事实上,所有的++运算符都可以用+= 1代替。
    
    - switch…case结构
    switch...case结构要求,在每一个case的最后一行必须是break语句,否则会接着运行下一个case。这样不仅容易忘记,还会造成代码的冗长。
    而且,switch...case不使用大括号,不利于代码形式的统一。此外,这种结构类似于goto语句,容易造成程序流程的混乱,使得代码结构混乱不堪,不符合面向对象编程的原则。
    

    function doAction(action) {
    switch (action) {
    case 'hack':
    return 'hack';
    break;
    case 'slash':
    return 'slash';
    break;
    case 'run':
    return 'run';
    break;
    default:
    throw new Error('Invalid action.');
    }
    }

    上面的代码建议改写成对象结构。
    

    function doAction(action) {
    var actions = {
    'hack': function () {
    return 'hack';
    },
    'slash': function () {
    return 'slash';
    },
    'run': function () {
    return 'run';
    }
    };

    if (typeof actions[action] !== 'function') {
    throw new Error('Invalid action.');
    }

    return actionsaction;
    }```
    建议避免使用switch...case结构,用对象结构代替。

    相关文章

      网友评论

        本文标题:javaScript易遗忘点及编程风格

        本文链接:https://www.haomeiwen.com/subject/syysqxtx.html