JavaScript零基础纯小白学习——数组

操作数组

• .length 获取数组长度

var arr = [1, 2, 'a', null, true];
arr.length; // 5

如果直接对 arr.length 赋值会改变原数组的长度，如：

arr.length = 7;
arr; // [1, 2, 'a', null, true, undefined, undefined]

• 修改值 通过索引修改原数组的值

var arr = [1, 2, 'a', null, true];
arr[0] = 'first';
arr; // ['first', 2, 'a', null, true]

如果赋值时，超出了数组原有的长度也会引起原数据的改变

arr[7] = 'abd';
arr; // ['first', 2, 'a', null, true, undefined, 'abd']

• .indexOf 返回一个指定元素的位置

arr.indexOf(true); // 5

• .slice 截取数组的部分元素，返回一个新的数组

arr.slice(); //复制这个数组
arr.slice(0,3); //复制从索引0开始到索引2位置的元素
arr.slice(3); //从索引3的位置复制到末尾 

• .push 往数组的末尾添加元素

arr.push('a', 'b');
arr; // ['first', 2, 'a', null, true, 'a', 'b']

• .pop 删除数组最后一个元素，并返回改元素

arr.pop(); // 返回 ’b
arr; // ['first', 2, 'a', null, true, 'a']

• .unshift 在数组首位插入元素

arr.unshift('c', 'd'); 
arr; // ['c', 'd', 'first', 2, 'a', null, true, 'a', 'b']

• .shift 删除索引为0的元素, 返回删除的元素

arr.shift(); // ’c'
arr; // [ 'd', 'first', 2, 'a', null, true, 'a', 'b']

• .sort 对数组进行排序, 默认按照ASCII码排序，改变原数组

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

• .reverse 反转列表，作用在原数组上

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

• .splice 从指定的索引开始删除若干元素，再从该位置添加元素

var arr = ['a', 'b', 'c', 'd'];
// 只删除不添加
arr.splice(1.2); // 返回删除的元素 ['b', 'c']
arr; // ['a', 'd']
// 只添加不删除
arr.splice(1, 0, 'e', 'r'); //返回[]
arr; ['a, 'd', 'e', 'r']
//删除并在原位置添加
arr.splice(0, 2, 'f', 'd'); // 返回 ['a', 'd']
arr; // ['f', 'd', 'e', 'r']

• .concat 数组拼接，不改变原数组，返回一个新的数组

var arr1 = [1, 2];
var arr2 = [3, 4];
arr1.concat(arr2);// [1,2,3,4]
arr1; // [1,2]
arr2.concat(6,7,[8,9]); //[3,4,6,7,8,9]

• .join 将数组中的元素按照指定字符串连接起来，返回连接的字符串

var arr = ['h', 'e', 'll', 'o']
arr.join('');// hello
arr.join('-'); //h-e-ll-o

数组的遍历

方式一：

var arr = ['a', 'b', 'c', 'd'];
for (i=0; i <arr.length; i++) {
console.log(i); // 0,1,2,3
console.log(arr[i])； //'a', 'b', 'c', 'd'
}

方式二：

var arr = ['a', 'b', 'c', 'd'];
for (var i in arr) {
console.log(i); // 0,1,2,3
console.log(arr[i])； //'a', 'b', 'c', 'd'
}

方式三：

var arr = ['a', 'b', 'c', 'd'];
for (var i of arr) {
console.log(i); // 0,1,2,3
console.log(arr[i])； //'a', 'b', 'c', 'd'

for … in 和 for … of 的区别：
数组也是一个对象，也可以给数组添加属性，如：

var arr = [1,2,3];
arr.name = 'A';

此时使用方式二，方式三分别执行一下

var arr = ['a', 'b', 'c'];
arr.name = 'A';
//方式二
for (var i in arr) {
console.log(i); // 0,1,2, name
}
// 方式三
for (var i of arr) {
console.log(i); // 0,1,2
}

由此可以看出：使用for of 只会遍历数组内的元素，不会遍历数组的属性。

方式四：

var arr = ['a', 'b', 'c'];
arr.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + ', index = ' + index);
});
//A, index = 0 
//B, index = 1
//C, index = 2