Blogger Information
Blog 4
fans 0
comment 0
visits 1635
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Javascript数组
Original
465 people have browsed it

JavaScript 的 Array 可以包含任意数据类型,并通过索引来访问每个元素。要取得 Array 的长度,直接访问 length 属性:

  1. var arr = [1,2,3.4,null,"asd"];
  2. arr.length; // 5

值得注意的是,直接给 Array 的 length 赋一个新的值会导致 Array 大小的变化:

  1. var arr = [1,2,3];
  2. arr.length; //3
  3. arr.length = 5;
  4. arr; //arr 变成 [1,2,3,undefined,undefined]
  5. arr.length = 2;
  6. arr; //arr 变成 [1,2]

Array 可以通过索引把对应的元素修改为新的值,因此,对 Array 的索引进行赋值会直接修改这个 Array :

  1. var arr = ['a','b','c'];
  2. arr[1] = 1;
  3. arr; //arr 变成 ['a',1,'c']

特别注意,如果通过索引赋值时,索引超过了范围,同样会引起Array大小的变化:

  1. var arr = [1,2,3];
  2. arr[6] = 6;
  3. arr; //arr 变成 [1,2,3,undefined,undefined,6]

大多数其他编程语言不允许直接改变数组的大小,越界访问索引会报错。然而,JavaScript 的 Array 却不会有任何错误。在编写代码时,注意不要直接修改 Array 的大小,访问索引时要确保索引不会越界。

indexOf

与 String 类似,Array 也可以通过 indexOf() 来搜索一个指定的元素的位置:

  1. var arr = [1,2,'3','abc'];
  2. arr.indexOf(1); //1的索引是 0
  3. arr.indexOf(2); //2的索引是 1
  4. arr.indexOf(3); //3的索引找不到,返回 -1
  5. arr.indexOf('abc'); //abc的索引是 3

slice

slice() 对应 String 的 substring(),它截取 Array 的部分元素,然后返回一个新的 Array:

  1. var arr = ['a','b','c','d','e','f'];
  2. arr.slice(0,3); //从索引0开始到索引3结束,但是不包括3。 ['a','b','c']
  3. arr.slice(3); //从索引3开始到结束。 ['d','e','f']

注意 slice() 的起止参数包括开始索引,不包括结束索引。
如果不给 slice() 传递任何参数,它就会从头到尾截取所有元素。利用这一点,我们可以很容易地复制一个 Array:

  1. var arr = [1,2,3,'1','2','3'];
  2. var arrcopy = arr.slice();
  3. arrcopy; // [1,2,3,'1','2','3']

push 和 pop

push() 向Array 的末尾添加若干元素,pop() 则把 Array 的最后一个元素删除掉:

  1. var arr = [1, 2];
  2. arr.push('A', 'B'); // 返回Array新的长度: 4
  3. arr; // [1, 2, 'A', 'B']
  4. arr.pop(); // pop()返回'B'
  5. arr; // [1, 2, 'A']
  6. arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
  7. arr; // []
  8. arr.pop(); // 空数组继续pop不会报错,而是返回undefined
  9. arr; // []

unshift 和 shift

如果要往 Array 的头部添加若干元素,使用 unshift() 方法,shift() 方法则把 Array 的第一个元素删掉:

  1. var arr = [1, 2];
  2. arr.unshift('A', 'B'); // 返回Array新的长度: 4
  3. arr; // ['A', 'B', 1, 2]
  4. arr.shift(); // 'A'
  5. arr; // ['B', 1, 2]
  6. arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
  7. arr; // []
  8. arr.shift(); // 空数组继续shift不会报错,而是返回undefined
  9. arr; // []

sort

sort() 可以对当前 Array 进行排序,它会直接修改当前 Array 的元素位置,直接调用时,按照默认顺序排序:

  1. var arr = ['B', 'C', 'A'];
  2. arr.sort();
  3. arr; // ['A', 'B', 'C']

reverse

reverse() 把整个 Array 的元素给调个个,也就是反转数组:

  1. var arr = ['one', 'two', 'three'];
  2. arr.reverse();
  3. arr; // ['three', 'two', 'one']

splice

splice() 方法是修改 Array 的“万能方法”,它可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素:

  1. var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
  2. // 从索引2开始删除3个元素,然后再添加两个元素:
  3. arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
  4. arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
  5. // 只删除,不添加:
  6. arr.splice(2, 2); // ['Google', 'Facebook']
  7. arr; // ['Microsoft', 'Apple', 'Oracle']
  8. // 只添加,不删除:
  9. arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
  10. arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

concat

concat() 方法把当前的 Array 和另一个 Array 连接起来,并返回一个新的 Array:

  1. var arr = ['A', 'B', 'C'];
  2. var added = arr.concat([1, 2, 3]);
  3. added; // ['A', 'B', 'C', 1, 2, 3]
  4. arr; // ['A', 'B', 'C']

特别注意,concat() 方法并没有修改当前 Array,而是返回了一个新的 Array。
实际上,concat() 方法可以接收任意个元素和 Array,并且自动把Array 拆开,然后全部添加到新的 Array 里:

  1. var arr = ['A', 'B', 'C'];
  2. arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

join

join() 方法是一个非常实用的方法,它把当前 Array 的每个元素都用指定的字符串连接起来,然后返回连接后的字符串:

  1. var arr = ['A', 'B', 'C', 1, 2, 3];
  2. arr.join('-'); // 'A-B-C-1-2-3'

可以看到,如果Array的元素不是字符串,将自动转换为字符串后再连接。

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post