《Javascript秘密花园》学习笔记（中）

悠悠 2022-07-30 13:11 88阅读 0赞

《Javascript秘密花园》在线阅读[地址][Link 1]

# 系列文章目录 #

1.  [《Javascript秘密花园》学习笔记（上）][Javascript]
2.  [《Javascript秘密花园》学习笔记（中）][Javascript 1]
3.  [《Javascript秘密花园》学习笔记（下）][Javascript 2]

### 文章目录 ###

*  系列文章目录
 *   *   *  数组
         *  类型

### 数组 ###

为了达到遍历数组的最佳性能，推荐使用经典的 for 循环。

var list = [a,b,c,d];
    for(var i = 0, l = list.length; i < l; i++) {
       //dosomething
       console.log(list[i]);
    }
    //二版本
    for(var i=0,i<list.length,i++){
    	//dosomething
    	console.log(list[i]);
    }

当数组元素很多时，二版本每次循环都要重新计算list.length的值，通过 *l = list.length* 来缓存数组的长度，可以节省性能开销。

**结论**

> 为了更好的性能，推荐使用普通的 for 循环并缓存数组的 length 属性。 使用 for in 遍历数组被认为是不好的代码习惯并倾向于产生错误和导致性能问题

### 类型 ###

JavaScript 有两种方式判断两个值是否相等。分别是""与“=”。  
“”等于操作符在比较前会对两侧的值进行强制类型转化。由于它的复杂转换规则，会导致难以跟踪的问题。强制类型转换也会带来性能消耗。  
“=”严格等于操作符不会进行强制类型转换。如果两个操作数类型不同就肯定不相等也有助于性能的提升。  
比较对象时，“===”比较的不是值是否相等，而是是否属于同一个身份（对象的同一个实例）。  
typeof 只有一个实际的应用：检测一个对象是否已经定义或者是否已经赋值。  
**JavaScript 类型表格**

Value               Class      Type
    -------------------------------------
    "foo"               String     string
    new String("foo")   String     object
    1.2                 Number     number
    new Number(1.2)     Number     object
    true                Boolean    boolean
    new Boolean(true)   Boolean    object
    new Date()          Date       object
    new Error()         Error      object
    [1,2,3]             Array      object
    new Array(1, 2, 3)  Array      object
    new Function("")    Function   function
    /abc/g              RegExp     object (function in Nitro/V8)
    new RegExp("meow")  RegExp     object (function in Nitro/V8)
    {}                  Object     object
    new Object()        Object     object

Class 一列表示对象的内部属性 \[\[Class\]\] 的值。

> JavaScript 标准文档中定义: \[\[Class\]\] 的值只可能是下面字符串中的一个： *Arguments, Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String*.

JavaScript 标准文档只给出了一种获取 \[\[Class\]\] 值的方法，那就是使用 Object.prototype.toString。

function is(type, obj) {
        var clas = Object.prototype.toString.call(obj).slice(8, -1);
        //Object.prototype.toString 返回一种标准格式字符串，所以可以通过 slice 截取指定位置的字符串
        return obj !== undefined && obj !== null && clas === type;
    }
     
    is('String', 'test'); // true
    is('String', new String('test')); // true

> ES5 提示: 在 ECMAScript 5 中，为了方便，对 null 和 undefined 调用 Object.prototype.toString 方法， 其返回值由 Object 变成了 Null 和 Undefined。

typeof运算符可以用来检测变量是否已经定义，例：

var foo = {};
    typeof foo !== 'undefined';//true

除非为了检测一个变量是否已经定义，我们应尽量避免使用 typeof 操作符。

**instanceof 操作符**用来比较两个操作数的构造函数。只有在比较自定义的对象时才有意义。 如果用来比较内置类型，将会和 typeof 操作符 一样用处不大。  
在比较中引入对象的字面值将会导致更加复杂的强制类型转换。  
最好的选择是把要比较的值显式的转换为三种可能的类型之一。

**转换为字符串**

''+10 === '10'; //true
    //将一个值加上空字符串可以轻松转换为字符串类型。

**转换为数字**

+'10' === 10; //true
    //使用一元的加号操作符，可以把字符串转换为数字。

**注** 字符串转换为数字的常用方法：

+'010' === 10
    Number('010') === 10
    parseInt('010', 10) === 10  // 用来转换为整数
     
    +'010.2' === 10.2
    Number('010.2') === 10.2
    parseInt('010.2', 10) === 10

**转换为布尔型**  
通过使用 否 操作符两次，可以把一个值转换为布尔型。

!!'foo';   // true
    !!'';      // false
    !!'0';     // true
    !!'1';     // true
    !!'-1'     // true
    !!{};      // true
    !!true;    // true

[Link 1]: http://www.jb51.net/onlineread/JavaScript-Garden-CN/#array
[Javascript]: https://blog.csdn.net/ccaoee/article/details/51131977
[Javascript 1]: https://blog.csdn.net/ccaoee/article/details/51174402
[Javascript 2]: https://blog.csdn.net/ccaoee/article/details/51174622