当前位置: 代码迷 >> JavaScript >> JavaScript: The Good Parts 读书笔记(4)
  详细解决方案

JavaScript: The Good Parts 读书笔记(4)

热度:698   发布时间:2012-10-09 10:21:45.0
JavaScript: The Good Parts 读书笔记(四)

四.数组与正则表达式


?

  • 数组:
    ??? 在一般的编程语言中,数组表示的是一段线性分配的内存
    . 它通过整数去计算偏移并访问其中的元素。在这种情况下,数组是很快的数据结构。 不幸的是, Javascript 并没有像数组这样的数据结构。反而, Javascript 提供了一种类似数组的对象 ,这些对象包含了一些拥有数组特征的方法。它把数组的下标转变成字符串用其作为属性 。它明显地比一个真正意义上的数组慢,但它可以更方便地使用。
    ??? 数组对象的属性访问方式与一般的对象一样,但其有一个可以用整数作为属性名的特性。数组也可以使用字面变量来表示。
    var empty = [];
    var numbers = ['one','two','three','four','five','six','seven','eight','nine','ten'];
    
    document.writeln(empty[1]); // undefined
    document.writeln(numbers[1]); // 'two'
    
    document.writeln(empty.length); //  0
    document.writeln(numbers.length); // 10
    ?
    ?现在看看数组对象与一般对象的区别:
    ???
    // 现在看看数组对象与一般对象的区别
    var numbers_obj = {
    	"0" : "one",
    	"1" : "two",
    	"2" : "three",
    	"3" : "four",
    	"4" : "five",
    	"5" : "six",
    	"6" : "seven",
    	"7" : "eight",
    	"8" : "nine",
    	"9" : "ten"
    };
    
    ?
    ???? 二者在某种程度上产生了相似的结果: 它们都包含有10个属性的对象,并且那些属性刚好有相同的名字和值。但是它们也有一些显著的不同。numbers 继承自Array.prototype. 而 numbers_obj 则继承自Object.prototype. 所以numbers 继承了大量有用的方法。同时 numbers也有一个诡异的length 属性。

    ??? 在大多数语言中,一个数组中的元素必须都是相同类型的。但Javascript允许数组包含任意类型的值:
    var misc = ['string', 98.6, true, false, null, undefined,
    				['nested','array'], {object:true} ,NaN ,Infinity];
    document.writeln(misc.length); // 10
    
    ?
    ??? 每个数组都有一个length 属性。和大多数其他语言不通。Javascript 数组的length是没有上限的。如果你用大于或等于当前length 的数字作为下标来保存一个元素,那么length 将 增大来容纳新元素,不会发生数组边界错误。(类似一个Collection). 数组对象允许直接设定length 的值。设置更大的length 无须向数组申请分配更多的空间. 而把length 设小将导致所有下标大于等于新length 的属性被删除:
    numbers.length = 3; // numbers['one','two','three']
    
    // 通过把下标指定为一个数组当前的length. 可以附加一个新的元素到该数组的尾部.
    numbers[numbers.length] = 'shi'; // numbers['one','two','three','shi']
    
    // 相同的功能可以使用push 方法来完成:
    numbers.push('wu'); // numbers['one','two','three','shi', 'wu']
    
    ?
    ??? 由于Javascript中的数组其实就是对象,而其中的元素既是对象的属性。所以可以使用delete运算符来从数组中移除元素:
    ??

    delete numbers[2]; // numbers['one','two', undefined ,'shi', 'wu']
    ?? 不幸的是,那样会在数组中留下一个空洞。这时可以使用splice 方法来将后续元素向前步进:
    ???

    numbers.splice(2,1); // numbers['one','two','shi', 'wu']
    ??? 注意区分 splice(衔接)与slice(分割). slice() 方法并不会修改数组,而是返回一个子数组. splice() 方法会直接对数组进行修改.

    ?? length 这个属性的值是这个数组的最大整数属性名加上1。但它不一定等于数组里的属性的个数(!!)?
    var myArray = [];
    document.writeln(myArray.length); // 0
    myArray[100000] = true;
    document.writeln(myArray.length); // 100001
    
    ?
    ??? []后缀下标运算符将它的表达式转换成一个字符串,如果该表达式有toString()方法,就使用该方法的值。这个字符串将被用作属性名。

    ??? 还是因为Javascript中的数组其实就是对象,所以For in 语句可以用来遍历一个数组中所有的属性.但 for in 语句无法保证属性的顺序。所以在需要保证顺序的情况下还是应该使用 for 循环.

    ??? 在Javascript 编程中,一个常见的错误是在须使用数组时却使用了对象。 而在需要使用对象时却使用了数组。为了避免混淆,一个区分规则为:当属性名是小而连续的整数时,你应该使用数组。否则,使用对象。
    ??? Javascript 本身对于数组和对象的区别还是很混乱的,typeof 运算符对数组进行操作时返回的是 'object' 在大多数情况下,这没有什么意义。
    // Javascript 在区别数组和对象上没有一个好的机制。此时可以通过定义一个 is_array 函数来解决:
    var is_array = function(value){
    	return value && typeof value === 'object' && value.constructor === Array;
    };
    
    document.writeln(is_array([]));
    document.writeln(is_array({}));
    
    ?? 上述判断在识别从不同的窗口(window)或帧(frame)里构造的数组时会失败。如果想要准确地检测那些外部的数组,我们不得不做更多的工作:
    var is_array_enhanced = function(value){
    return value && 
    		typeof value === 'object' &&
    		typeof value.length === 'number' &&
    		typeof value.splice === 'function' &&
    		// 判断属性是否为可枚举的(for in 循环可用),对于所有数组,将得到false.
    		!(value.propertyIsEnumerable('length'));
    };
    document.writeln(is_array_enhanced([]));
    document.writeln(is_array_enhanced({}));
    
    ?
  • 正则表达式
    ??? Javascript的许多特性都借鉴自其他语言。语法借鉴自Java,函数借鉴自Lisp, 原型继承借鉴自Self.而Javascript 的正则表达式则借鉴自Perl.
    ??? Javascript 中可用于正则表达式处理的方法有 regexp.exec, regexp.test, string.match string.replace, string.search 和 string.split.需要注意的时,Javascript中字面变量表达的正则表达式是不支持多行的,所以必须写为一行.
    var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#([\s\S]*))?$/;
    // (?: ...) 表示非捕获型分组。 后缀 ? 表示这个分组时可选的。
    // 非捕获性分组不捕获分组所匹配的内容,当然也就得不到匹配的结果,非捕获性分组以(?:...)表示,
    // 在一些只需要分组匹配但是并不需要得到各个分组匹配的结果时,使用非捕获性分组可以提高匹配速度。
    // 在JavaScript和Java中,捕获性分组所匹配的内容都是以$1,$2,$3...的格式保存的!
    // 一般的分组()即括号中没有 ?: 的使用时regexp对象都会将分组内匹配到的内容记录下来
    
    var url = "http://www.ora.com:80/goodparts?q#fragment";
    var result = parse_url.exec(url);
    var names = ['url','scheme','slash','host','port','path','query','bash'];
    var blanks = '    ';
    var i ;
    document.writeln('<br />');
    for(i = 0 ; i < names.length;i++){
    	document.writeln(names[i]+":"+blanks.substring(names[i].length),result[i]);
    	document.writeln('<br />');
    }
    
    ?? 有两种方法可以创建一个RegExp对象。 在以前的例子中我们看到,优先的是使用字面标量表达法。正则表达式字面变量被包围在一对斜杠中( /.../ ). 注意在JS中斜杠也被用作 除法运算符和注释符 .
    ?? 在构建时,有3个可选的标志可以被加在字面量的末尾:

    ???? G (golbal) 全局的(匹配多次)
    ? ?? I (Ignore Case) 忽略大小写.
    ? ?? M (Multiline) 多行模式(^和$ 能匹配行结束符)?
  相关解决方案