JavaScript- The Good Parts Chapter 6

Thee(你) I’ll chase(追逐;追捕) hence(因此;今后), thou(你;尔,汝) wolf in sheep’s array.
—William Shakespeare, The First Part of Henry the Sixth
An array is a linear(线的,线型的;直线的,线状的;长度的) allocation(分配,配置;安置) of memory in which elements are accessed by integers that are used to compute offsets. Arrays can be very fast data structures. Unfortunately, JavaScript does not have anything like this kind of array.

Instead, JavaScript provides an object that has some array-like characteristics. It converts array subscripts(下标) into strings that are used to make properties. It is significantly slower than a real array, but it can be more convenient to use. Retrieval and updating of properties work the same as with(正如) objects, except that there is a special trick with integer property names. Arrays have their own literal format. Arrays also have a much more useful set of built-in methods, described in Chapter 8.

Array Literals

Array literals provide a very convenient notation(记号法) for creating new array values. Anarray literal is a pair of(一对,一副) square brackets surrounding zero or more values separated by commas. An array literal can appear anywhere an expression can appear. The first value will get the property name ‘0‘, the second value will get the property name ‘1‘, and so on:

> var empty = [];
undefined
> var numbers = [
...     ‘zero‘, ‘one‘, ‘two‘, ‘three‘, ‘four‘,
...     ‘five‘, ‘six‘, ‘seven‘, ‘eight‘, ‘nine‘
... ];
undefined
> empty[1]          // undefined
undefined
> numbers[1]        // ‘one‘
‘one‘
> empty.length      // 0
0
> numbers.length    // 10
10

The object literal:

> var numbers_object = {
...     ‘0‘: ‘zero‘,  ‘1‘: ‘one‘,   ‘2‘: ‘two‘,
...     ‘3‘: ‘three‘, ‘4‘: ‘four‘,  ‘5‘: ‘five‘,
...     ‘6‘: ‘six‘,   ‘7‘: ‘seven‘, ‘8‘: ‘eight‘,
...     ‘9‘: ‘nine‘
... };
undefined
> numbers_object[0]
‘zero‘

produces a similar result. Both numbers and number_object are objects containing 10 properties, and those properties have exactly the same names and values. But there are also significant differences. numbers inherits from Array.prototype, whereas number_object inherits from Object.prototype,so numbers inherits a larger set of useful methods. Also, numbers gets the mysterious length property, while number_object does not.

In most languages, the elements of an array are all required to be of the same type.JavaScript allows an array to contain any mixture of values:

> var misc = [
...     ‘string‘, 98.6, true, false, null, undefined,
...     [‘nested‘, ‘array‘], {object: true}, NaN,
...     Infinity
... ];
undefined
> misc.length    // 10
10
> misc.string
undefined
> misc[‘string‘]
undefined
> misc[0]
‘string‘

Length

Every array has a length property. Unlike most other languages, JavaScript’s array length is not an upper bound. If you store an element with a subscript that is greater than or equal to the current length, the length will increase to contain the new element. There is no array bounds error.

The length property is the largest integer property name in the array plus one. This is not necessarily the number of properties in the array:

> var myArray = [];
undefined
> myArray.length             // 0
0
> myArray[1000000] = true;
true
> myArray.length             // 1000001
1000001
> // myArray contains one property.
undefined

The [] postfix subscript(下标) operator converts its expression to a string using the expression’s toString method if it has one. That string will be used as the property name. If
the string looks like a positive integer that is greater than or equal to the array’s current length and is less than 4,294,967,295, then the length of the array is set to the new subscript plus one.

> myArray[0] = 100
100
> myArray[0]
100
> myArray[‘0‘]
100
> myArray[‘0‘] = 9
9
> myArray[‘0‘]
9
> myArray[0]
9

The length can be set explicitly. Making the length larger does not allocate more space for the array. Making the length smaller will cause all properties with a subscript that is greater than or equal to the new length to be deleted:

> numbers.length = 10
10
> numbers
[ ‘zero‘,
  ‘one‘,
  ‘two‘,
  ‘three‘,
  ‘four‘,
  ‘five‘,
  ‘six‘,
  ‘seven‘,
  ‘eight‘,
  ‘nine‘ ]
> numbers.length = 11
11
> numbers
[ ‘zero‘,
  ‘one‘,
  ‘two‘,
  ‘three‘,
  ‘four‘,
  ‘five‘,
  ‘six‘,
  ‘seven‘,
  ‘eight‘,
  ‘nine‘,
   ]
> numbers.length = 3
3
> numbers
[ ‘zero‘, ‘one‘, ‘two‘ ]

A new element can be appended to the end of an array by assigning to the array’s current length:

> numbers[numbers.length] = ‘shi‘
‘shi‘
> numbers
[ ‘zero‘,
  ‘one‘,
  ‘two‘,
  ‘shi‘ ]

It is sometimes more convenient to use the push method to accomplish the same thing:

> numbers.push(‘go‘)
5
> numbers
[ ‘zero‘,
  ‘one‘,
  ‘two‘,
  ‘shi‘,
  ‘go‘ ]

Delete

Since JavaScript’s arrays are really objects, the delete operator can be used to remove elements from an array:

> delete numbers[2]
true
> numbers
[ ‘zero‘,
  ‘one‘,
  ,
  ‘shi‘,
  ‘go‘ ]

Unfortunately, that leaves a hole in the array. This is because the elements to the right of the deleted element retain their original names. What you usually want is to decrement the names of each of the elements to the right.

Fortunately, JavaScript arrays have a splice method. It can do surgery(外科;外科手术) on an array,deleting some number of elements and replacing them with other elements. The first
argument is an ordinal(序数) in the array. The second argument is the number of elements to delete. Any additional arguments get inserted into the array at that point:

> numbers.splice(2,1)
[  ]
> numbers
[ ‘zero‘,
  ‘one‘,
  ‘shi‘,
  ‘go‘ ]
> numbers.splice(2,1,‘two‘)
[ ‘shi‘ ]
> numbers
[ ‘zero‘,
  ‘one‘,
  ‘two‘,
  ‘go‘ ]

The property whose value is ‘shi‘ has its key changed from ‘4‘ to ‘3‘. Because every property after the deleted property must be removed and reinserted with a new key,this might not go quickly for large arrays.

Enumeration

Since JavaScript’s arrays are really objects, the for in statement can be used to iterate over all of the properties of an array. Unfortunately, for in makes no guarantee about the order of the properties, and most array applications expect the elements to be produced in numerical order. Also, there is still the problem with unexpected properties being dredged up(疏浚;回忆起) from the prototype chain.

Fortunately, the conventional(符合习俗的,传统的;常见的;惯例的) for statement avoids these problems. JavaScript’s for statement is similar to that in most C-like languages. It is controlled by three clauses—the first initializes(初始化) the loop, the second is the while condition, and the third does the increment:

> myArray = [1,2,3,4,5,6,7]
[ 1,
  2,
  3,
  4,
  5,
  6,
  7 ]
> var i;
undefined
> for (i = 0; i < myArray.length; i += 1) {
...     console.log(myArray[i]);
... }
1
2
3
4
5
6
7
undefined//这个是node.js控制台输出的,因为循环语句并没有返回值

Confusion

A common error in JavaScript programs is to use an object when an array is required or an array when an object is required. The rule is simple: when the property names are small sequential integers, you should use an array. Otherwise, use an object.

JavaScript itself is confused about the difference between arrays and objects. The typeof operator reports that the type of an array is ‘object‘, which isn’t very helpful.

> typeof myArray
‘object‘

JavaScript does not have a good mechanism for distinguishing between arrays and objects. We can work around that deficiency(缺陷,缺点;缺乏;不足的数额) by defining our own is_array function:

var is_array = function (value) {
    return value &&
        typeof value === ‘object‘ &&
        value.constructor === Array;
};
> var is_array = function (value) {
...     return value &&
...         typeof value === ‘object‘ &&
...         value.constructor === Array;
... };
undefined
> is_array(myArray)
true

Unfortunately, it fails to identify arrays that were constructed in a different window or frame. If we want to accurately detect those foreign arrays, we have to work a little harder:

var is_array = function (value) {
    return value &&
        typeof value === ‘object‘ &&
        typeof value.length === ‘number‘ &&
        typeof value.splice === ‘function‘ &&
        !(value.propertyIsEnumerable(‘length‘));
};

具体原因请查阅:http://stackoverflow.com/questions/11597583/why-are-cross-frame-or-window-arrays-in-javascript-so-hard-to-identify

下面对要这样做的原因做一个探讨:

two_windown.html

<html>
<script type="text/javascript">
function is_array(value) {
    return value &&
        typeof value === ‘object‘ &&
        value.constructor === Array;
};
myArray = [1,2,3,4,5];
alert("father windown:" + is_array(myArray));

 child = window.open(‘child_windown.html‘, ‘newwindow‘, ‘height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no‘)  

</script>
</html>

child_windown.html

<html>
<script type="text/javascript">
myArray = [1,2,3,4,5];
var obj=window.opener;
alert(obj);
alert("son windown:" + obj.is_array(myArray));//false
</script>
</html>

以上两个文件请务必放在服务器上

First, we ask if the value is truthy. We do this to reject null and other falsy values.Second, we ask if the typeof value is ‘object‘. This will be true for objects, arrays,and (weirdly) null. Third, we ask if the value has a length property that is a number.This will always be true for arrays, but usually not for objects. Fourth, we ask if the value contains a splice method. This again will be true for all arrays. Finally, we ask if the length property is enumerable (will length be produced by a for in loop?).That will be false for all arrays. This is the most reliable test for arrayness that I have found. It is unfortunate that it is so complicated.

Having such a test, it is possible to write functions that do one thing when passed a single value and lots of things when passed an array of values.

Methods

JavaScript provides a set of methods for acting on arrays. The methods are functions stored in Array.prototype. In Chapter 3, we saw that Object.prototype can be augmented. Array.prototype can be augmented as well.

For example, suppose we want to add an array method that will allow us to do computation on an array:

永远要记住javascript中的数组只是一个对象而已

时间: 2024-10-26 22:43:38

JavaScript- The Good Parts Chapter 6的相关文章

JavaScript: The Evil Parts - 1

最近在看JavaScript框架设计,在讲解类型判定的时候提到了一些“匪夷所思的情况”,不过没有明说都是什么时候会出现这些情况.自己玩儿了一下,写写随笔吧.不过可能除了我找到的,还有会其他时候会出现这些诡异的现象2333 问题:在JavaScript中,什么时候会出现 a !== a a == b && b != a a == !a a == b && a == c && b != c a != b && a != c &&

JavaScript- The Good Parts CHAPTER 2

I know it well:I read it in the grammar long ago.—William Shakespeare, The Tragedy(悲剧:灾难:惨案) of Titus Andronicus This chapter introduces the grammar of the good parts of JavaScript, presenting a quick overview of how the language is structured. We wi

JavaScript- The Good Parts Chapter 4

Why, every fault’s condemn’d ere it be done:Mine were the very cipher of a function. . .—William Shakespeare, Measure for Measure The best thing about JavaScript is its implementation of functions. It got almost everything right. But, as you should e

JavaScript: The Good Parts

Chapter 1 Good Parts: JavaScript is an important language because it is the language of the web browser. The very good ideas include functions, loose typing, dynamic objects, and an expressive object literal notation. The bad ideas include a programm

JavaScript- The Good Parts Chapter 3 Objects

Upon a homely object Love can wink.—William Shakespeare, The Two Gentlemen of Verona The simple types of JavaScript are numbers, strings, booleans (true and false), null,and undefined. All other values are objects. Numbers, strings, and booleans are 

JavaScript- The Good Parts Chapter 5 Inheritance

Divides one thing entire to many objects;Like perspectives, which rightly gazed uponShow nothing but confusion. . .—William Shakespeare, The Tragedy of King Richard the Second Inheritance is an important topic in most programming languages. In the cl

读 《JavaScript: The Good Parts》 有感

提炼出一门语言或技术的 Good Parts, 使用该子集去构造健壮稳固的应用. 我们总是倾向于去学习和使用所有的语言特性,好像凡是新的,凡是提供了的, 就有必要去使用: 这本书告诉我们, 要有选择性地学习和使用. 不是所有的语言特性都需要学习和使用. 学习和使用那些设计不良的特性,不仅耗费大量时间和精力,而且有损项目的可维护性,得不偿失:反之,学习那些优良的部分,不仅可以节省时间,腾出更多时间和精力去做更重要的事情,而且有助于将事情做好,提高收益/学习比. 富有技巧性的HACKER可以欣赏其精

《JavaScript高级程序设计》Chapter 15 canvas + Chapter 16 HTML5

Chapter 15 Canvas Chapter 16 HTML5 Chapter 15 Canvas <canvas>元素:设定区域.JS动态在这个区域中绘制图形. 苹果公司引导的.由几组API构成. 2D上下文普及了.WebGL(3D上下文)还未足够普及. 基本用法 首先:width.height属性确定绘图区域大小.后备信息放在开始和结束标签之间. getContext():DOM获得这个canvas元素对象.再在这个对象上调用getContext()获取上下文,传入参数表示获取的是2

《JavaScript高级程序设计》Chapter 14 表单脚本

之前就提到了,JS创建之初是为了减少服务器的压力,而当时这个压力主要体现在表单的验证上.与此同时,JS还为WEB表单增加了一些行为. 表单基础知识 go 文本框脚本 go 选择框脚本 go 表单序列化 go 富文本编辑 go JS表单基础知识 JS中获取表单元素(<form>)的方法: 通过id(所有元素通用)getElementById(""); 通过document.form:document.forms[0] 或者 document.forms["formN