JavaScript 数组

数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。

var arr = ['sxt', 'baizhan', 'it'];

两端的方括号是数组的标志。sxt是0号位置，baizhan是1号位置，it是2号位置。（位置也被称为下标）

除了在定义时赋值，数组也可以先定义后赋值。

var arr = [];
​
arr[0] = 'sxt';
arr[1] = 'baizhan';
arr[2] = 'it';

任何类型的数据，都可以放入数组

var arr = [ 100, [1, 2, 3],false ];

如果数组的元素还是数组，就形成了多维数组

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

length 属性

数组的length属性，返回数组的成员数量

['sxt', 'baizhan', 'it'].length // 3

数组的遍历

数组的遍历可以考虑使用for循环或while循环

var a = ['sxt', 'baizhan', 'it'];
​
// for循环
for(var i = 0; i < a.length; i++) {
  console.log(a[i]);
}
​
// while循环
var i = 0;
while (i < a.length) {
  console.log(a[i]);
  i++;
}

for...in遍历数组

var a = ['sxt', 'baizhan', 'it'];
​
for (var i in a) {
  console.log(a[i]);
}

数组静态方法_Array.isArray()

Array.isArray方法返回一个布尔值，表示参数是否为数组。它可以弥补typeof运算符的不足

var arr = ["尚学堂", 100, true];
console.log(typeof arr); // object

var arr = ['sxt', 'baizhan', 'it'];
Array.isArray(arr) // true

判断是不是数组，用Array.isArray（），如果是数据返回true，反之返回false

数组方法_push()/pop()

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

var arr = [];
arr.push("尚学堂") // 1
arr.push('itbaizhan') // 2
arr.push(true, {}) // 4
arr // [尚学堂, 'itbaizhan', true, {}]

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

var arr = ['尚学堂', 'itbaizhan', 'WEB前端'];
​
arr.pop() // 'WEB前端'
arr // ['尚学堂', 'itbaizhan']

数组方法_shift()/unshift()

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

var arr = ['尚学堂', 'itbaizhan', 'WEB前端'];
​
arr.shift() // '尚学堂'
arr // ['itbaizhan', 'WEB前端']

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

var list = [1, 2, 3, 4, 5, 6];
var item;
​
while (item = list.shift()) {
  console.log(item);
}
​
list // []

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

var arr = ['尚学堂', 'itbaizhan', 'WEB前端'];
​
arr.unshift('baizhan'); // 4
arr // ['baizhan', '尚学堂', 'itbaizhan', 'WEB前端']

unshift方法可以接受多个参数，这些参数都会添加到目标数组头部

var arr = [ '尚学堂', 'itbaizhan' ];
arr.unshift('WEB前端', 'baizhan') // 4
arr // [ 'WEB前端', 'baizhan', '尚学堂', 'itbaizhan' ]

数组方法_join()

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'

数组的join配合字符串的split可以实现数组与字符串的互换

var arr = ["a","b","c"];
var myArr = arr.join("");
console.log(myArr);
console.log(myArr.split(""));

var arr = ["尚学堂","百战程序员"];
var myArr = arr.join("");
console.log(myArr);
console.log(myArr.split(""));

尚学堂百战程序员 ['尚', '学', '堂', '百', '战', '程', '序', '员']

数组方法_concat()

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

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

除了数组作为参数，concat也接受其他类型的值作为参数，添加到目标数组尾部。

[1, 2, 3].concat(4, 5, 6)
// [1, 2, 3, 4, 5, 6]

应用场景

上拉加载，合并数据

注意：

[1, 2, 3].concat(4, 5, 6,[7,8,9]) 

// [1, 2, 3, 4, 5, 6, 7, 8, 9]  合并成一维数组

数组方法_reverse()

reverse方法用于颠倒排列数组元素，返回改变后的数组。注意，该方法将改变原数组

var a = ['a', 'b', 'c'];
​
a.reverse() // ["c", "b", "a"]
a // ["c", "b", "a"]

实现一个字符串反转排列

var str = "hello";
str.split("").reverse().join("")

 

 

数组方法_indexOf()

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

var arr = ['a', 'b', 'c'];
​
arr.indexOf('b') // 1
arr.indexOf('y') // -1

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

['尚学堂', '百战程序员', 'itbaizhan'].indexOf('尚学堂', 1) // -1