>>>>> 数组

2017-05-23  本文已影响0人  風隨風去

在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活、强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改。

创建数组

在JavaScript多种方式创建数组

构造函数

Array作为构造函数,行为很不一致。因此,不建议使用它生成新数组

// 无参数时,返回一个空数组
new Array() // []

// 单个正整数参数,表示返回的新数组的长度
new Array(1) // [ ,]
new Array(2) // [ , ,]

// 非正整数的数值作为参数,会报错
new Array(3.2) // RangeError: Invalid array length
new Array(-3) // RangeError: Invalid array length

// 单个非正整数参数(比如字符串、布尔值、对象等),
// 则该参数是返回的新数组的成员
new Array('abc') // ['abc']
new Array([1]) // [Array[1]]

// 多参数时,所有参数都是返回的新数组的成员
new Array(1, 2) // [1, 2]
new Array('a', 'b', 'c') // ['a', 'b', 'c']

字面量

  1. 使用方括号,创建空数组,等同于调用无参构造函数
var a4 = [];
  1. 使用中括号,并传入初始化数据,等同于调用带有初始化数据的构造函数
ar a5 = [10];

数组的索引与长度

var arr  = [1,2,3,4];
console.log(arr.length);//4
console.log(arr[0]);//1
console.log(arr[1]);//2

元素添加/删除

删除

pop()

pop方法用于删除数组的最后一个元素,并返回该元素。注意,该方法会改变原数组。

var a = ['a', 'b', 'c'];

a.pop() // 'c'
a // ['a', 'b']

对空数组使用pop方法,不会报错,而是返回undefined。

[].pop() // undefined

shift()

shift方法用于删除数组的第一个元素,并返回该元素。注意,该方法会改变原数组。

var a = ['a', 'b', 'c'];

a.shift() // 'a'
a // ['b', 'c']

shift方法可以遍历并清空一个数组。

var list = [1, 2, 3, 4, 5, 6];
var item;

while (item = list.shift()) {
  console.log(item);
}

list // []

添加

push()

push方法用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度。注意,该方法会改变原数组。

var a = [];

a.push(1) // 1
a.push('a') // 2
a.push(true, {}) // 4
a // [1, 'a', true, {}]

unshift()

unshift方法用于在数组的第一个位置添加元素,并返回添加新元素后的数组长度。注意,该方法会改变原数组。

var a = ['a', 'b', 'c'];

a.unshift('x'); // 4
a // ['x', 'a', 'b', 'c']

unshift方法可以在数组头部添加多个元素

var arr = [ 'c', 'd' ];
arr.unshift('a', 'b') // 4
arr // [ 'a', 'b', 'c', 'd' ]

终极神器 splice

JavaScript提供了一个splice方法用于一次性解决数组添加、删除(这两种方法一结合就可以达到替换效果),方法有三个参数

  1. 开始索引

  2. 删除元素的位移

  3. 插入的新元素,当然也可以写多个

splice方法返回一个由删除元素组成的新数组,没有删除则返回空数组

删除

指定前两个参数,可以使用splice删除数组元素,同样会带来索引调整及length调整

var a = [1, 2, 3, 4, 5];
console.log(a.splice(1,3));//[2, 3, 4]
console.log(a.length);//2
console.log(a);//[1,5]

插入与替换

只要方法第二个参数,也就是删除动作执行的次数设为0,第三个参数及以后填写要插入内容就splice就能执行插入操作,

而如果第二个参数不为0则变成了先在该位置删除再插入,也就是替换效果

var a = [1, 2, 3, 4, 5];
a.splice(1,0,9,99,999);
console.log(a.length); //8
console.log(a);//[1, 9, 99, 999, 2, 3, 4, 5]
a.splice(1,3,8,88,888);
console.log(a.length);//8
console.log(a);//[1, 8, 88, 888, 2, 3, 4, 5]

一个例子:数组去重


var arr = [1, 2, 2, 3,4];

for(var i=0;i<arr.length; i++){
  for(var j=i+1; j<arr.length;j++){
    if(arr[i]==arr[j]){
      arr.splice(j, 1);
      j--;//删除元素后,索引值相应的发生变化
    }
  }
}

常用操作

sort()

sort方法对数组成员进行排序,默认是按照字典顺序排序。排序后,原数组将被改变。

需要特殊注意。sort方法不是按照大小排序,而是按照对应字符串的字典顺序排序。

也就是说,数值会被先转成字符串,再按照字典顺序进行比较,所以101排在11的前面

['d', 'c', 'b', 'a'].sort()
// ['a', 'b', 'c', 'd']

[4, 3, 2, 1].sort()
// [1, 2, 3, 4]

[11, 101].sort()
// [101, 11]

[10111, 1101, 111].sort()
// [10111, 1101, 111]

如果想让sort方法按照自定义方式排序,可以传入一个函数作为参数,表示按照自定义方法进行排序。

该函数本身又接受两个参数,表示进行比较的两个元素。

如果返回值大于0,表示第一个元素排在第二个元素后面;

其他情况下,都是第一个元素排在第二个元素前面

[10111, 1101, 111].sort(function (a, b) {
  return a - b;
})
// [111, 1101, 10111]

[
  { name: "张三", age: 30 },
  { name: "李四", age: 24 },
  { name: "王五", age: 28  }
].sort(function (o1, o2) {
  return o1.age - o2.age;
})
// [
//   { name: "李四", age: 24 },
//   { name: "王五", age: 28  },
//   { name: "张三", age: 30 }
// ]

练习:
 
排列 '["1px", "20px", "80px", "10px"]', 根据数值从小到大排序

随机打乱顺序

这里就需要用到我们的Math.random随机函数,它会随机产生0-1之间的数值

var arr = [1, 2, 3, 4, 5,6, 7, 8];
arr.sort(function(a, b){
    return Math.random() - 0.5;
})

join(char)

join方法以参数作为分隔符,将所有数组成员组成一个字符串返回。如果不提供参数,默认用逗号分隔。

var a = [1, 2, 3, 4];

a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"

如果数组成员是undefined或null或空位,会被转成空字符串。

[undefined, null].join('#')
// '#'

['a',, 'b'].join('-')
// 'a--b'

slice(start,end)

slice方法用于提取原数组的一部分,返回一个新数组,原数组不变。

它的第一个参数为起始位置(从0开始),第二个参数为终止位置(但该位置的元素本身不包括在内)。如果省略第二个参数,则一直返回到原数组的最后一个成员。

// 格式
arr.slice(start_index, upto_index);

// 用法
var a = ['a', 'b', 'c'];

a.slice(0) // ["a", "b", "c"]
a.slice(1) // ["b", "c"]
a.slice(1, 2) // ["b"]
a.slice(2, 6) // ["c"]
a.slice() // ["a", "b", "c"]

如果slice方法的参数是负数,则表示倒数计算的位置。

var a = ['a', 'b', 'c'];
a.slice(-2) // ["b", "c"]
a.slice(-2, -1) // ["b"]

concat(array)

concat方法用于多个数组的合并。它将新数组的成员,添加到原数组的尾部,然后返回一个新数组,原数组不变

['hello'].concat(['world'])
// ["hello", "world"]

['hello'].concat(['world'], ['!'])
// ["hello", "world", "!"]

reverse()

reverse方法用于颠倒数组中元素的顺序,返回改变后的数组。注意,该方法将改变原数组。

var a = ['a', 'b', 'c'];

a.reverse() // ["c", "b", "a"]
a // ["c", "b", "a"]

map()

map方法对数组的所有成员依次调用一个函数,根据函数结果返回一个新数组。

var numbers = [1, 2, 3];

numbers.map(function (n) {
  return n + 1;
});
// [2, 3, 4]

numbers
// [1, 2, 3]

map方法接受一个函数作为参数。该函数调用时,map方法会将其传入三个参数,分别是当前成员、当前位置和数组本身。

[1, 2, 3].map(function(elem, index, arr) {
  return elem * index;
});
// [0, 2, 6]

filter()

filter方法的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

[1, 2, 3, 4, 5].filter(function (elem) {
  return (elem > 3);
})
// [4, 5]

filter方法的参数函数可以接受三个参数,第一个参数是当前数组成员的值,这是必需的,后两个参数是可选的,分别是当前数组成员的位置和整个数组。

[1, 2, 3, 4, 5].filter(function (elem, index, arr) {
  return index % 2 === 0;
});
// [1, 3, 5]

indexOf(),lastIndexOf()

indexOf方法返回给定元素在数组中第一次出现的位置,如果没有出现则返回-1。

var a = ['a', 'b', 'c'];

a.indexOf('b') // 1
a.indexOf('y') // -1

indexOf方法还可以接受第二个参数,表示搜索的开始位置。

['a', 'b', 'c'].indexOf('a', 1) // -1

lastIndexOf方法返回给定元素在数组中最后一次出现的位置,如果没有出现则返回-1。

var a = [2, 5, 9, 2];
a.lastIndexOf(2) // 3
a.lastIndexOf(7) // -1
上一篇下一篇

猜你喜欢

热点阅读