JavaScript中的数组个人分享

数组

数组的概念

• 所谓数组就是 - 用来存储多个值的容器,数组中的每一个值叫元素,每个元素都有唯一的一个位置,用数字表示的叫做索引数组,用字符串表示叫关联数组
• 备注: 数组是无类型的:没有特定类型要求(就是存啥都行)
• 注意: 数组是动态的:就是根据需要可以插入新的东西,也可以删除指定的元素

---

一维数组

定义数组

• 就是只有一个行或者一个列
• 一维数组分为三种:

1.字面量/直接量方式:

• 语法:
• var 数组名称 = [元素1,元素2,元素3,...]
• 注意: 变量声明后只写一个中括号'[]' - 表示定义一个空数组

示例代码:

/* 变量声明(设置数组名称)并给数组赋值 */
var arr1 = [];// 调用结果为 [] - 表示空数组
var arr2 = [1000,'一花一世界',true];// 调用结果为 [ 1000, '一花一世界', true ]

console.log(arr1);// 调用结果为 []
console.log(arr2);// 调用结果为 [ 1000, '一花一世界', true ]

控制台调用结果图:

2.构造函数方式:

• 语法:
• var 数组名称 = new Array(元素1,元素2,元素3,...)
• var 数组名称 = new Array(length)
• length - number类型, 表示数组的长度(也是存在元素的个数)的意思
• 注意: 变量声明后new Array()小括号'()'中不填写任何内容 - 表示定义一个空数组

示例代码:

var arr3 = new Array();//调用结果为 [] - 表示空数组
var arr4 = new Array(1000,'一花一世界',true);// 调用结果为 [ 1000, '一花一世界', true ]

console.log(arr3);// 调用结果为 []
console.log(arr4);// 调用结果为 [ 1000, '一花一世界', true ]

控制台调用结果图:

3.函数方式:

• 语法:
• var 数组名称 = Array(元素1,元素2,元素3,...)
• var 数组名称 = Array(length)
• length - number类型,表示数组的长度(也是存在元素的个数)的意思

示例代码:

var arr7 = Array();// 调用结果为 [] - 表示空数组
var arr8 = Array(1000,'一花一世界',true);// 调用结果为 [ 1000, '一花一世界', true ]
var arr9 = Array(10);// 调用结果为 [ <10 empty items> ] - 表示个是数组的长度为10个

console.log(arr7);// 调用结果为 []
console.log(arr8);// 调用结果为 [ 1000, '一花一世界', true ]
console.log(arr9);// 调用结果为 [ <10 empty items> ]

控制台调用结果图:

• 注意:

1. 字面量/直接量方式中的中括号'[]'中直接写'10'就是表示数组的意思
2. 构造函数方式中new Array()小括号中'()'直接写'10'是表示数组的长度
3. 函数方式和构造函数方式一样

示例代码:

var arr6 = [10];//调用结果为 [10]
var arr5 = new Array(10);// 调用结果为 [ <10 empty items> ] - 表示个是数组的长度为10个

console.log(arr5);// 调用结果为 [ <10 empty items> ] - 表示个是数组的长度为10个
console.log(arr6);// 调用结果为 [10]

控制台调用结果图:

---

索引数组

• 索引数组就是表示数组中元素的位置.用数字值表示

  • 数字值表示元素的位置 - 叫角标或下标
  • 数组的长度与元素的个数是一致的
• 注意: 索引数组的角标是从0开始的

示例代码:

var arr = [];// 定义一个空数组
arr [0] = '一花一世界';
arr [1] = true;

console.log(arr);// 调用结果为 [ '一花一世界', true ]
console.log(arr.length);// 调用结果为 2 - 表示被调用数组的长度和元素个数是 2 个

控制台调用结果图:

---

关联数组

• 关联数组就是表示数组中元素的位置使用字符串表示

  • 注意: 关联数组的长度与元素的个数不一致
  • 原因: JavaScript的官方目前不支持关联数组
  • 所以: 关联数组目前无法调用到元素的个数和长度

示例代码:

var arr = [];// 定义一个空数组
arr['name'] = '孙悟空';
arr['age'] = 500+'岁';
arr['job'] = '取经';

console.log(arr);// 调用结果为 [ name: '孙悟空', age: '500岁', job: '取经' ]
console.log(arr.length);// 调用结果为 0

控制台调用结果图:

---

稀疏数组

• 索引数组的位置允许不连续 - 没有定义元素的位置默认为空(undefined)
• 稀疏数组 - 数组的长度与元素的个数不一致

• 备注:

  • 得到undefined值的几种方式:

    1. 定义变量,但未初始化值
    2. 定义变量,并初始化值为undefined
    3. 访问数组中未定义的位置的元素值(默认为undefined)

示例代码:

var arr = [];// 定义一个空数组
arr[0] = '孙悟空';
arr[2] = 500+'岁';
arr[5] = '取经';

console.log(arr);// 调用结果为 [ '孙悟空', <1 empty item>, '500岁', <2 empty items>, '取经' ]
console.log(arr.length);//调用结果为 6


/* 处理稀疏数组,得到正常的索引值 */
var newArr = [];
/* 利用循环语句获取出所有的undefined */
for (var i = 0; i<arr.length; i++){
    /* 用条件判断赛选出 undefined */
    if (arr[i] !== undefined) {
        /* 将当前获取的元素插入指定的数组中 */
        newArr.push(arr[i]);
    }
}
console.log(newArr);// 调用结果为 [ '孙悟空', '500岁', '取经' ]

控制台调用结果图:

---

访问数组的元素

• 注意: 调用数组名称时,得到的只是存储的所有元素数据的集合
• 注意: 数组默认定义未索引数组
• 注意: JavaScript中的关联数组可以定义和访问

• 如果访问了数组中未定义的位置元素,首先语法不报错,其次结果为undefined

  • 注意: 索引数组中的索引值最大为 arr.length - 1

    • 就是索引值最大的减 1
    • 比如: 上面的索引数组有三个元素 - 就是 3 - 1
    • 因为: 索引数组的索引值第一个是 0

示例代码:

/* 定义数组的默认为索引数组 */
var arr = ['一花一世界',1000,true];
/* 调用数组名称时,得到的是存储所有元素数据的集合 */
console.log(arr);// 调用结果为 [ '一花一世界', 1000, true ]

/* 调用索引数组中的元素 - 用法: 数组名称[索引值] */
console.log(arr[0]);// 调用结果为 一花一世界

console.log(arr[4]);// 调用结果为 undefined

//关联数组
var arr = [];// 定义一个空数组
arr['name'] = '孙悟空';
arr['age'] = 500+'岁';
arr['job'] = '取经';

console.log(arr['name']);// 调用结果为 孙悟空

---

数组的复制

• 表示一个数组对另一个数组进行复制
• 复制分为深复制和浅复制

示例代码:

// 变量声明并赋值
var v = 100;
// 变量声明并赋值
var result = v;

console.log(v);// 调用结果为 100
console.log(result);// 调用结果为 100

v = 200;
console.log(result);// 调用结果为 100


var arr1 = ['一花一世界',true];
var arr2 = arr1;

console.log(arr1);// 调用结果为 [ '一花一世界', true ]
console.log(arr2);// 调用结果为 [ '一花一世界', true ]

arr1 = [100];

console.log(arr1);// 调用结果为 [ 100 ]
console.log(arr2);// 调用结果为 [ '一花一世界', true ]

arr1[0] = 100;

console.log(arr1);// 调用结果为 [ 100 ]
console.log(arr2);// 调用结果为 [ '一花一世界', true ]

分析图:

---

数组的修改

• 表示对数组中的数据值进行修改
• 通过数组的索引值找到对应元素的位置，在通过对指定数据进行重新赋值来完成数组修改

示例代码:

// 索引数组
var arr1 = [];
arr1[0] = '一花一世界';
arr1[1] = true;

// 关联数组
var arr2 = [];// 定义一个空数组
arr2['name'] = '孙悟空';
arr2['age'] = 500+'岁';
arr2['job'] = '取经';

// 通过数组的索引值找到对应元素的位置, 再通过重新赋值的操作进行修改
arr1[1] = '一叶一孤城';
console.log(arr1);// 调用结果为 [ '一花一世界', '一叶一孤城' ]

arr2['job'] = '打妖怪';
console.log(arr2);// 调用结果为 [ name: '孙悟空', age: '500岁', job: '打妖怪' ]

// 如果是新的索引值,就是给数组新增一个元素
arr1[2] = '极乐净土';
console.log(arr1);// 调用结果为 [ '一花一世界', '一叶一孤城', '极乐净土' ]

控制台调用效果图:

---

数组的删除

• 表示对数组中的数据值进行删除
• 使用delete运算符来删除数据值
• 但是只删除数据值，不删除数据值所占的位置空间
• 注意: 数组进行删除后会变成稀疏数组

示例代码:

// 索引数组
var arr1 = [];
arr1[0] = '一花一世界';
arr1[1] = true;

/*
    使用 delete 运算符进行删除数组的元素
      * 注意: 只是删除元素内容,而对应的位置会被保留
 */

delete arr1[1];
console.log(arr1);//调用结果为 [ '一花一世界', <1 empty item> ]
console.log(arr1.length);//调用结果为 2

// 关联数组
var arr2 = [];// 定义一个空数组
arr2['name'] = '孙悟空';
arr2['age'] = 500+'岁';
arr2['job'] = '取经';


delete arr2['age'];
console.log(arr2);// 调用结果为 [ name: '孙悟空', job: '取经' ]
console.log(arr2.length);// 调用结果为 0

控制台调用效果图:

---

循环遍历数组

示例代码:

var arr = ['一花一世界', 101, true, undefined];
// while语句
/*var i = 0;
while (i < arr.length){
    console.log(arr[i]);

    i++;
}*/

// do...while语句
/*var i = 0;
do {
    console.log(arr[i]);

    i++;
} while (i < arr.length);*/

// for语句
for (var i=0; i<arr.length; i++) {
    console.log(arr[i]);
    /*
        调用结果为：
       一花一世界
       101
       true
       ndefined
     */
}

控制台调用效果图:

---

for...in语句

• 注意: for..in语句可以循环遍历关联数组, for语句不行
• 注意: for..in语句循环遍历稀疏数组(直接得到有效元素值), for语句不行

示例代码:

// 关联数组的length属性为 0
var arr1 = [];
arr1['name'] = '孙悟空';
arr1['age'] = 500+'岁';
arr1['job'] = '取经';

/*for (var i=0; i<arr1.length; i++) {
    console.log(arr1[i]);
}*/
// for..in语句可以循环遍历关联数组, for语句不行
for (var i in arr1) {
    console.log(arr1[i]);
    /*
        调用结果为:
            孙悟空
            500岁
            取经
     */
}

// 稀疏数组 - 数组的长度与元素的个数不一致
var arr2 = [];
arr2[0] = '猪八戒';
arr2[3] = 400+'岁';
arr2[5] = '天蓬元帅';

/*for (var i=0; i<arr2.length; i++) {
    console.log(arr2[i]);
}*/
// for..in语句循环遍历稀疏数组(直接得到有效元素值), for语句不行
for (var i in arr2) {
    console.log(arr2[i]);
    /*
        调用结果为:
            猪八戒
            400岁
            天蓬元帅
     */
}