ECMAScript的核心语言 （二）数组 Array

js-笔记

数组值的有序集合

每个值叫做数组的元素

数组的元素可以是任何类型

var arr = [100,'abc',true,null,undefined,{username:'小毛'},[1,2,3]];

每个元素在数组中都有一个位置，用数字表示

称为数组的下标(索引)
数组的索引是从 0 开始的，索引的最大值为2^32-2 4294967294个元素

数组的长度：length属性

注意：只计算非负整数

var array=[];               // 给数组添加元素
array[0] = ['a'];
array[-1] = ['1'];
array['name'] = ['www'];
console.log(array);         // 返回 [Array[1], -1: Array[1], name: Array[1]]
console.log(array.length);  // 返回 1

数组的声明方式：

1、使用直接量，直接赋值

var arr = [1,2,3,4];
console.log(arr);      // 返回[1,2,3,4]
var arr1 = [];         // 声明一个空数组
console.log(arr1);     // 返回[]

2、使用构造函数 new Array()

1.  var array = new Array();
    console.log(array);         // 返回[]
2.  var array1 = new Array('a','b','c');
    console.log(array1);        // 返回['a','b','c']
3.  var array2 = new Array(10,20,30);   
    console.log(array2);        // 返回[10,20,30]
4.  var array3 = new Array(3);  此时3是数组的长度
    console.log(array3);        // 返回[]，是稀疏数组
    document.write(array3);     // 返回[,,]

数组元素的访问、修改、添加： 使用[]，配合下标

1、 数组元素的访问

var newArr = ['a','b','c','d'];
console.log(newArr[3]);     // 返回 d
// 特殊情况，使用数字类型的字符串访问数组                
console.log(newArr[3]);     // 返回 d
console.log(newArr['3']);   // 返回 d,字符串访问数组会自动转换

2、 数组元素的修改

var newArr = ['a','b','c','d'];
newArr[0] = 'www';          // 将a修改成www
console.log(newArr);        // 返回["www", "b", "c", "d"]

3、 数组元素的添加

var arr = [];
arr[0] = 'a';
arr[1] = 'b';
console.log(arr);       // 返回['a','b']

稀疏数组： 不连续索引的数组

稀疏数组出现的原因：

1、创建的时候出现

var arr1=new Array(4);
console.log(arr1);       // 返回 ,,,,
var arr2 = [,,'a',,,];
console.log(arr2);       // 返回 ,,a,,

2、添加元素的时候索引太大

var arr3 = [];
arr3[0] = 'a';
arr3[1] = 'b';
arr3[5] = 'c';
console.log(arr3);       // 返回 a,b,,,,c

3、使用delete删除数组元素造成稀疏数组

var arr4 = [1,2,3,4,5];
delete arr4[2];
delete arr4[3];
console.log(arr4);       // 返回 1,2,,,5
console.log(arr4[2]);    // 返回 undefined，删除掉的元素变成undefined

将稀疏数组变成不稀疏

思路：定义一个新的数组，使用push()将旧数组中不是undefined的元素添加到新数组中

var arr = ['a','b',,,'c'];
var newArr = [];
for(var i = 0; i < arr.length; i++){
    if(arr[i] != undefined){
        // newArr[i] = arr[i];  // 不能直接赋值
        newArr.push(arr[i]);    // push在数组的后面添加元素
    }
}
console.log(newArr);      // 返回 ['a','b','c']
/*
* push过程：
*     []
*     ['a']
*     ['a','b']
*     ['a','b','c']
*/

通过splice() 将稀疏数组变成不稀疏：

写在 数组的方法 -> splice()

判断是否是数组： Array.isArray()

注意： typeof [1,2,3] // 返回 object，不能用于判断

1、ES5提供的新方法 Array.isArray()： true | false

console.log(Array.isArray([]))      // 返回true
console.log(Array.isArray(1000));   // 返回false

2、自定义一个函数，判断一个值是否在数组中

var array = ['a','b','c'];
function getBool(index,arr){
    // 当index值和arr不存在、arr不是数组、arr数组长度小于1时，结束函数
    if(index == undefined || arr == undefined || !Array.isArray(arr) || arr.length < 1){
        alert('请传入正确的参数');
        return;
    }
    // 当数组中的值等于index值时，返回true并结束函数
    for(var i = 0; i<arr.length; i++){
        if(arr[i] === index){
            return true;
        }
    }
    return false;
}
console.log(getBool('a',array));    // 返回 true; a在数组中
console.log(getBool('d',array));    // 返回 false; d不在数组中

判断数组是否具有某个值： arr.indexOf()

如果存在返回下标(索引)，如果不存在返回-1

var arr = ['a','b','c',1,2,3];
console.log(arr.indexOf('a'));  // 返回 0
console.log(arr.indexOf(2));    // 返回 4
console.log(arr.indexOf('d'));  // 返回 -1

数组元素的添加总结：

1、直接指定索引：

var arr = ['a','b','c'];
arr[3] = 'd';
console.log(arr);   // 返回 ['a','b','c','d']

2、使用数组长度进行添加：

var arr = ['a','b','c'];
arr[arr.length] = 'd';
console.log(arr);   // 返回 ['a','b','c','d']

3、push()方法： 在数组后面添加元素

注意： push() 有返回值的，返回新数组长度

var arr = ['a','b','c'];
var leng = arr.push('w','ww');
console.log(arr);       // 返回 ["a", "b", "c", "w", "ww"]   
console.log(leng);      // 返回 5，新数组长度

4、unshift()方法： 在数组的前面加入元素

注意： unshift() 有返回值，返回新数组长度

var arr = ['a','b','c'];
var len = arr.unshift('www');
console.log(arr);   // 返回 ['www','a','b','c']
console.log(len);   // 返回 4

5、 splice() 数组的方法中说明

数组元素的删除总结：

1、pop()方法： 删除后面的一个元素

注意： 有返回值，返回被删除的元素

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

2、shift()方法： 删除前面的一个元素

注意： 有返回值，返回被删除的元素

var arr = ['a','b','c'];
var lent = arr.shift();
console.log(arr);   // 返回 ['b','c']
console.log(lent);  // 返回 a

3、splice() 数组的方法中说明

数组的遍历总结

1、for 循环： 不能遍历出特殊下标的元素

var arr = ['大毛','二毛','三毛','四毛'];
arr[-1] = 'abc';
arr['name'] = '曹操';
console.log(arr);       // 返回 ["大毛", "二毛", "三毛", "四毛", -1: "abc", name: "曹操"]
console.log(arr[-1]);   // 返回 abc
for(var i = 0; i < arr.length;i++){
    console.log(arr[i]);   // 返回 大毛 二毛 三毛 四毛
}

2、for in 遍历： 可以遍历出特使下标的元素；并忽略掉没有内容的索引

var arr = ['大毛','二毛','三毛','四毛'];
arr[-1] = 'abc';
arr['name'] = '曹操';
console.log(arr);       // 返回 ["大毛", "二毛", "三毛", "四毛", -1: "abc", name: "曹操"]
console.log(arr[-1]);   // 返回 abc
for(var i in arr){
    console.log(i);         // 返回 0 1 2 3 -1 name；i是数组中所有的下标，包括特殊下标
    console.log(arr[i]);    // 返回 大毛 二毛 三毛 四毛 abc 曹操
}

3、ECMA5的新方法 forEach(function(x){}) ： IE不支持，不能遍历出特殊下标的元素

var arr = ['大毛','二毛','三毛','四毛'];
arr[-1] = 'abc';
arr['name'] = '曹操';
console.log(arr);       // 返回 ["大毛", "二毛", "三毛", "四毛", -1: "abc", name: "曹操"]
console.log(arr[-1]);   // 返回 abc
arr.forEach(function(x){
    console.log(x);     // 返回 大毛 二毛 三毛 四毛； x是数组的每一个元素
})

4、关于稀疏数组的遍历： 推荐使用 for in

var arr = ['大毛','二毛','三毛','四毛'];
arr[-1] = 'abc';
arr['name'] = '曹操';
console.log(arr);       // 返回 ["大毛", "二毛", "三毛", "四毛", -1: "abc", name: "曹操"]
console.log(arr[-1]);   // 返回 abc
var array = [1,2,3,,,,,5,6,7];
for(var i = 0; i < array.length; i++){
    console.log(array[i]);    // 返回 1 2 3 undefined undefined undefined undefined 5 6 7
}
for(var i in array){
    console.log(array[i]);    // 返回 1 2 3 5 6 7；忽略掉没有内容的索引
}

数组的方法：

1、join() 将数组以指定的字符连接成字符串

默认使用,连接

var arr = ['a','b','c'];
console.log(arr.join());        // 返回 a,b,c
console.log(arr.join('--'));    // 返回 a--b--c
console.log(arr.join(''));      // 返回 abc

2、toString() 将数组转换成字符串

var arr = [23,21,3,4,12,15];
console.log(arr.toString());   // 返回 23,21,15,12,4,3
console.log(arr);              // 返回 [23, 21, 3, 4, 12, 15]

3、toLocaleString() 把数组转换为本地字符串(不常用)

4、concat() 合并数组

var arr1 = ['a','b'];
var arr2 = ['1','2'];
console.log(arr1.concat(arr2));         // 返回 ["a", "b", "1", "2"]
console.log(arr2.concat(arr1));         // 返回 ["1", "2", "a", "b"]
console.log(arr2.concat(arr1,[3,4],[5,6]));   // 返回 ["1", "2", "a", "b", 3, 4, 5, 6]
console.log(arr1.concat(1,2,3));        // 返回 ["a", "b", 1, 2, 3]
console.log(arr1.concat(1,2,[4,5,6]));  // 返回 ["a", "b", 1, 2, 4, 5, 6]

5、reverse() 数组翻转：

var arr = ['a','b','c','123'];
arr.reverse();
console.log(arr);   // 返回 ["123", "c", "b", "a"]

6、sort() 数组排序

需要传入匿名函数

默认按照ASCII码，按位比较

var arr1 = [23,21,3,4,12,15];
console.log(arr1.sort());       // 返回 [12, 15, 21, 23, 3, 4]
var arr2 = ['ab','c','ad','d'];
console.log(arr2.sort());       // 返回 ["ab", "ad", "c", "d"]

升序

arr.sort(function(a,b){
    return a-b;
})

例：

var arr1 = [23,21,3,4,12,15];
arr1.sort(function(a,b){
    return a-b;
})
console.log(arr1);      返回[3, 4, 12, 15, 21, 23]

降序

arr.sort(function(a,b){
    return b-a;
})

例：

var arr1 = [23,21,3,4,12,15];
arr1.sort(function(a,b){
    return b-a;
})
console.log(arr1);      返回[23, 21, 15, 12, 4, 3]

7、slice() 截取数组； -- 不破坏原来的数组；返回截取部分的元素

slice(2,5); 下标2截取到下标5，不包括下标5

var arr = ['a','b','c','123','aa','bb'];
console.log(arr.slice(2,5));    // 返回 ["c", "123", "aa"]；截取部分的元素
console.log(arr);       // 返回 ["a", "b", "c", "123", "aa", "bb"]；不破坏原来的数组

slice(2); 从下标2开始截取后面全部内容

var arr = ['a','b','c','123','aa','bb'];
console.log(arr.slice(2));       返回["c", "123", "aa", "bb"]
console.log(arr);       // 返回 ["a", "b", "c", "123", "aa", "bb"]；不破坏原来的数组

8、splice() 数组截取、添加、删除、替换； -- 破坏原数组；返回截取部分的元素

1. 截取

splice(2,2); 从下标为2开始，截取2个元素

var arr = ['a','b','c','123','aa'];
console.log(arr.splice(2,2));    // 返回 ["c", "123"]
console.log(arr);                // 返回 ["a", "b", "aa"]，原数组被改变

splice(2); 从下标为2开始截取后面全部内容

var arr = ['a','b','c','123','aa'];
var arr = ['a','b','c','123','aa'];
var newArr1 = arr.splice(2); 
console.log(newArr1);   返回["c", "123", "aa"]

2. 添加

var arr = ['a','b','c','123','aa'];
console.log(arr.splice(4,0,'abc'));   // 返回 []，在下标为4的前面添加 abc
console.log(arr);                     // 返回["a", "b", "c", "123", "abc", "aa"]

3. 替换

var arr = ['a','b','c','123','aa'];
console.log(arr.splice(4,1,'bb'));   // 返回 ["aa"]，将下标为4的替换成 bb
console.log(arr);                    // 返回 ["a", "b", "c", "123", 'bb']

4. 删除

删除一个

var arr = ['a','b','c','123','aa'];
console.log(arr.splice(3,1));   // 返回 ["123"]，删除下标3的元素
console.log(arr);               // 返回 ["a", "b", "c", "aa"]

删除二个

var arr = ['a','b','c','123','aa'];
console.log(arr.splice(2,2));   // 返回 ["c", "aa"]，从下标2开始，删除两位
console.log(arr);               // 返回 ["a", "b"]

5. 使用splice将稀疏数组变成不稀疏：

思路：将undefined删除掉

var index = [1,2,,,,,4];
for(var i = 0; i < index.length ;i++){
    if(index[i] == undefined){
        index.splice(i,1);
        i--;    // 下标为i的元素被删除，所以需要i--来获取因删除而往前进的元素
    }
}
console.log(index);      // 返回 1,2,4  

多维数组：数组中还是数组

用[][]方式访问多维数组内的元素

var index = [[1,2,4], [4,5,6], ['a','b','c'], ['aa','bb']];
console.log(index);             // 返回 [Array[3], Array[3], Array[3], Array[2]]
console.log(index.length);      // 返回 4
console.log(index[3][1]);       // 返回 bb

类数组对象 arguments ：

arguments 不是数组，不具有数组的方法

function demo(){
    console.log(arguments);     // 返回 [1, 2, 9, 8, 6, 4]
    // console.log(arguments.reverse());  // 报错，不具有数组的方法
}
demo(1,2,9,8,6,4);

元素的集合，获取一组元素

获取所有的li：

var list = document.getElementsByTagName('li');
console.log(list);
// console.log(list.reverse()); 不具有数组的方法

获取ul中的li：

var ul = document.getElementById('ulContent');
var lis = ul.getElementsByTagName('li');
console.log(lis);

元素的集合的遍历： --推荐使用for循环

1、for 遍历：

for(var i = 0;i < list.length;i++){
    console.log(list[i]);
}

2、for in 遍历： -- 会将不需要的内容遍历出来

for(var i in list){
    console.log(i, list[i]);
}

自定义的类数组

var obj={}
for(var i = 0; i < 5; i++){
    obj[i] = i*i;
}
console.log(obj);   // 返回 Object {0: 0, 1: 1, 2: 4, 3: 9, 4: 16, length: 5}

作为数组使用的字符串：

var str = 'abcdefghijklmnopqrstuvwxyz';
console.log(str[0]);    // 返回 a
console.log(str[1]);    // 返回 b
str[0] = 'b';           // 不能修改
console.log(str);       // 返回 abcdefghijklmnopqrstuvwxyz

作者 wendy
2019 年 5月 23日