【JavaWeb新手入门】入门篇之JS数组-优快云博客

数组

数组（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

实时效果反馈

1. 下列关于数组的操作，输出结果是：

var arr = [ 'sxt', 'baizhan', 'it' ];
console.log(arr[5])

A 0

B []

C undefined

D “”

答案

1=>C

数组的遍历

数组的遍历可以考虑使用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]);
}

实时效果反馈

1. 下列遍历数组的操作中，画横线的地方应该填写的代码是：

var arr = ["尚学堂", 100, true];
for (var i = 0; i < ___; i++) {
    console.log(arr[i]);
}

A arr

B 10

C length

D arr.length

答案

1=>D

数组静态方法_Array.isArray()

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

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

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

实时效果反馈

1. 下列代码输出分别是？：

var arr = ["尚学堂", 100, true];
var str = "itbaizhan";
console.log(typeof arr);
console.log(Array.isArray(arr));
console.log(typeof str);
console.log(Array.isArray(str));

A object false string false

B object true string true

C object true false false

D object true string false

答案

1=>D

数组方法_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'); 
arr // ['baizhan', 'itbaizhan', 'WEB前端']

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

var arr = [  'itbaizhan' ];
arr.unshift('WEB前端', 'baizhan') 
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(""));

数组方法_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. 下列关于数组输出的结果是：

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

A [1, 2, 3, 4, 5, 6]

B [1, 2, 3, 4, 5, 6, [7, 8, 9]]

C [1, 2, 3, 4, 5, 6, 7, 8, 9]

D [1, 2, 3, 4, 5, 6][7, 8, 9]

答案

1=>C

数组方法_reverse()

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

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

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

实现一个字符串反转排列

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

实时效果反馈

1. 下列关于数组输出的结果是：

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

A olleh

B hello

C ‘o-l-l-e-h’

D ‘h-e-l-l-o’

答案

1=>C

数组方法_indexOf()

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

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

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