JS数组详解

Array

  数组总共有22种方法,将其分类为对象通用方法、数组转换方法、栈和队列方法、数组排序方法、数组拼接方法、创建子数组方法、数组删改方法、数组位置方法、数组归并方法和数组迭代方法共9类来进行详细介绍。

对象通用方法

  数组是一种特殊的对象,含有toString()toLocaleString()valueOf()方法。

数组转换方法

  Array.join()方法是String.split()方法的逆向操作,后者是将字符串分割成若干块来创建一个数组。

var a = [1,2,3];
console.log(a.join());//'1,2,3'
console.log(a.join(' '));//'1 2 3'
console.log(a.join(''));//'123'

var b = new Array(10);
b.join('-');//'---------',9个连字符组成的字符串

  该方法也能应用于类数组对象上。

console.log(Array.prototype.join.call('hello', '-'));// "h-e-l-l-o"
var obj = { 0: 'a', 1: 'b', length: 2 };
console.log(Array.prototype.join.call(obj, '-'));// 'a-b'
栈和队列方法

  push()pop()方法允许将数组当作栈来使用。unshift()shift()是在数组的头部而非尾部进行元素的插入和删除操作,是把数组当作队列来使用。

var a = [];
console.log(a,a.push(1));//[1] 1
console.log(a,a.push('a'));//[1,'a'] 2
console.log(a,a.push(true, {}));//[1,'a',true,{}] 4
console.log(a,a.push([5,6]));//[1,'a',true,{},[5,6]] 5

  可以合并两个数组,可以使用apply方法

var a = [1, 2, 3];
var b = [4, 5, 6];
console.log(a,Array.prototype.push.apply(a, b));//[1,2,3,4,5,6] 6

  push()方法也可以向对象中添加元素,添加后的对象变成类数组对象,即新加入元素的键对应数组的索引,并且对象有一个length属性。

var obj = {a: 1};
console.log(obj,[].push.call(obj, 2));// {a:1, 0:2, length: 1}
console.log(obj,[].push.call(obj, [3]));// {a:1, 0:2, 1:[3], length: 2}

  pop()方法从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。所以,该数组会改变原数组。

var a = ['a', 'b', 'c'];
console.log(a,a.pop()); // ['a', 'b'] 'c'

  unshift()shift()用法同pop()push()

数组排序方法

  reverse()方法用于反转数组的顺序,返回经过排序之后的数组;而原数组顺序也发生改变。

ar array = [1,2,4,3,5];
console.log(array,array.reverse());//[5,3,4,2,1] [5,3,4,2,1]
var array = ['str',true,3];
console.log(array,array.reverse());//[3,true,'str'] [3,true,'str']

  默认情况下,sort()方法按字符串升序排列数组项,sort方法会调用每个数组项的toString()方法,然后比较得到的字符串排序,返回经过排序之后的数组,而原数组顺序也发生改变。

var array = [1,2,4,3,5];
console.log(array,array.sort());//[1,2,3,4,5] [1,2,3,4,5]
var array = ['3str',3,2,'2'];
console.log(array,array.sort());//[2, "2", 3, "3str"] [2, "2", 3, "3str"]
var array = [1,5,10,50];
console.log(array,array.sort());//[1, 10, 5, 50] [1, 10, 5, 50]

  sort()方法可以接受一个比较函数作为参数,以便指定哪个值在哪个值的前面。比较函数接收两个参数,如果第一个参数应该位于第二个参数之前则返回一个负数,如果两个参数相等则返回0,如果第一个参数应该位于第二个参数之后则返回一个正数。

function compare(value1,value2){
    if(value1 < value2){
        return -1;
    }else if(value1 > value2){
        return 1;
    }else{
        return 0;
    }
}
var array = ['5px',50,1,10];
//当数字与字符串比较大小时,字符串'5px'会被转换成NaN,这样结果就是false
console.log(array.sort(compare));//["5px",1, 10, 50]
数组拼接方法

  concat()方法基于当前数组中的所有项创建一个新数组,先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。所以concat()不影响原数组。

var numbers = [1,2];
console.log(numbers,numbers.concat(3,4));//[1,2] [1,2,3,4]
console.log(numbers,numbers.concat([5,4,3],[3,4,5],1,2));//[1,2] [1,2,5,4,3,3,4,5,1,2]
console.log(numbers,numbers.concat(4,[5,[6,7]]));//[1,2] [1,2,4,5,[6,7]]
创建子数组方法

  slice()方法基于当前数组中的一个或多个项创建一个新数组,接受一个或两个参数,即要返回项的起始和结束位置,最后返回新数组,所以slice()不影响原数组。
  slice(start,end)方法需要两个参数start和end,返回这个数组中从start位置到(但不包含)end位置的一个子数组。
  如果start是负数,则start = max(length + start,0)。
  如果end是负数,则end = max(length + end,0)。

var numbers = [1,2,3,4,5];
console.log(numbers.slice(2));//[3,4,5]
console.log(numbers.slice(2,undefined));//[3,4,5]
console.log(numbers.slice(2,3));//[3]
console.log(numbers.slice(2,1));//[]

console.log(numbers.slice(-3));//-3+5=2 -> [3,4,5]
console.log(numbers.slice(-8));//max(5 + -8,0)=0 -> [1,2,3,4,5]

console.log(numbers.slice(0,-3));//-3+5=2 -> [1,2]
console.log(numbers.slice(-2,-1));//-2+5=3;-1+5=4; -> [4]

  如果不提供参数,concat()方法返回当前数组的一个浅拷贝。所谓“浅拷贝”,指的是如果数组成员包括复合类型的值(比如对象),则新数组拷贝的是该值的引用。
  如果不提供参数,slice()方法返回当前数组的一个浅拷贝。

数组删改方法

  splice()方法用于删除原数组的一部分成员,并可以在被删除的位置添加入新的数组成员,该方法会改变原数组。
  splice()返回一个由删除元素组成的数组,或者如果没有删除元素就返回一个空数组。
  splice()的第一个参数start指定了插入或删除的起始位置。如果start是负数,则start = max(length + start,0);如果start是NaN,则相当于start = 0。

var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice());// [1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(4));// [1,2,3,4] [5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(-4));//-4+8=4; [1,2,3,4] [5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(-9));//max(-9+8,0)=0 [] [1,2,3,4,5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(NaN));//[] [1,2,3,4,5,6,7,8]

  第二个参数number指定了应该从数组中删除的元素的个数。如果省略第二个参数,从起始点开始到数组结尾的所有元素都将被删除。

var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(0,2));// [3,4,5,6,7,8] [1,2]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(10,2));// [1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,100));// [1] [2,3,4,5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,-5));//[1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,NaN));//[1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,undefined));//[1,2,3,4,5,6,7,8] []

  如果后面还有更多的参数,则表示这些就是要被插入数组的新元素。

var a = [1,2,3,4,5];
console.log(a,a.splice(2,0,'a','b'));//[1,2,'a','b',3,4,5] []
console.log(a,a.splice(2,2,[1,2],3));//[1,2,[1,2],3,3,4,5] ['a','b']
数组位置方法

  indexOf(search,start)方法接收search和start两个参数,返回search首次出现的位置,如果没有找到则返回-1。
  search参数表示要搜索的项;使用严格相等运算符(===)进行比较。

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

  start参数表示该搜索的开始位置,该方法会隐式调用Number()转型函数,将start非数字值(undefined除外)转换为数字。若忽略该参数或该参数为undefined或NaN时,start = 0。

var arr = ['a','b','c','d','e','a','b'];
console.log(arr.indexOf('a',undefined));//0
console.log(arr.indexOf('a',NaN));//0
console.log(arr.indexOf('a',1));//5
console.log(arr.indexOf('a',true));//5
console.log(arr.indexOf('a',-1));//max(0,-1+7)=6; -1
console.log(arr.indexOf('a',-5));//max(0,-5+7)=2; 5
console.log(arr.indexOf('a',-50));//max(0,-50+7)=0; 0

  与indexOf()不同,lastIndexOf()从右向左查找。

数组归并方法

  reduce()方法传入回调函数,参数分别是:
  【1】初始变量,默认为数组的第一个元素值。函数第一次执行后的返回值作为函数第二次执行的初始变量,依次类推。
  【2】当前变量,如果指定了第二个参数,则该变量为数组的第一个元素的值,否则,为第二个元素的值。
  【3】当前变量对应的元素在数组中的索引(从0开始)。
  【4】原数组对象。

values.reduce(function(prev, cur, index, array){
   //todo
});

  reduce()方法第二个(可选)的参数是一个传递给函数的初始值。

var matrix = [
  [1, 2],
  [3, 4],
  [5, 6]
];
// 二维数组扁平化
var flatten = matrix.reduce(function (prev, cur) {
  return prev.concat(cur);
});
console.log(flatten); // [1, 2, 3, 4, 5, 6]
数组迭代方法

  ES5为数组定义了5个迭代方法。每个方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象——影响this的值。
  map()方法对数组的每一项运行给定函数,返回每次函数调用的结果组成的数组。
  forEach()方法对数组中的每一项运行给定函数,这个方法没有返回值。本质上与for循环迭代数组一样。如果需要有返回值,一般使用map方法。
  filter()方法对数组中的每一项运行给定函数,该函数会返回true的项组成的数组。该方法常用于查询符合条件的所有数组项。
  some()方法对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。并且当且仅当数值中的所有元素调用判定函数都返回false,它才返回false。
  every()方法对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true;只要有一项返回false,则返回false。

function(item,index,array){
    //todo
}
数组方法 返回值 是否变异
toString 数组字符串化
toLocalString toString()方法的本地化版本
valueOf 数组对象本身
join 连接后的字符串
push 数组的长度
pop 出栈的元素
unshift 数组的长度
shift 出队的元素
reverse 逆转后的数组
sort 排序后的数组
concat 连接后的数组
concat 截取后的数组
splice 剔除数据组成的数组
indexOf / lastIndexOf 查找到值的索引值
reduce / reduceRight 查找到值的索引值
forEach undefined
map 操作后的数组
filter 返回值为true组成的数组
some true/false
every true/false

你可能感兴趣的:(JS数组详解)