JavaScript 中的对象与数组全解析

遇见~未来

已于 2025-01-19 16:59:06 修改

阅读量986

点赞数 20

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2025-01-19 16:42:58 首次发布

本文链接：https://blog.youkuaiyun.com/2301_76428778/article/details/145244371

版权

JavaScript 专栏收录该内容

107 篇文章

订阅专栏

JavaScript 中的对象与数组全解析

JavaScript 中的对象与数组全解析

在 JavaScript 的世界里，对象是非常重要的概念，它主要分为三种类型：自定义对象、内置对象和宿主对象（在浏览器环境中，通常指浏览器对象）。

自定义对象，是开发者根据自身需求创建的对象，通过定义属性和方法，来满足特定的业务逻辑。比如，我们创建一个表示 “人” 的对象，包含姓名、年龄、性别等属性，以及说话、走路等方法。

内置对象是 JavaScript 语言自带的，无需额外声明和创建，可直接使用其属性和方法来构建所需效果。像Array、Boolean、Date、Math、Number、String、RegExp、Function 以及 Events等都是常见的内置对象。它们为开发者提供了大量实用功能，大大提高了开发效率。

宿主对象，在浏览器环境中，由浏览器提供，例如window对象，它包含了很多与浏览器操作相关的属性和方法，像alert用于弹出提示框，setTimeout用于设置定时器等。

接下来，重点讲讲数组，它在 JavaScript 编程中占据着举足轻重的地位。

一、数组的概念

数组是一组数据的集合，同时也是一个对象。数组中的每个数据被称为元素，它能够存放任意类型的元素，是将一组数据存储在单个变量名下的一种优雅方式。与普通对象不同，普通对象使用字符串作为属性名，而数组使用数字作为索引来操作元素，索引从 0 开始。并且，数组的存储性能优于普通对象，所以在开发中，我们常常借助数组来存储数据。

二、创建数组的两种方式

利用数组字面量创建数组：使用[]语法，非常简洁直观。比如，var arr1 = []可以创建一个空数组；var arr = [1, 2, 3, 4, 5, 10]则在创建数组的同时指定了其中的元素，元素之间用逗号分隔。通过console.log(arr)可以输出这个数组，而console.log(arr[3])能获取到数组中索引为 3 的元素，即 4。
利用构造函数创建数组：
- var arr = new Array();可以创建一个空数组，之后可以通过arr[0] = 123等方式向数组中添加元素。
- var arr2 = new Array(20, 30, 40);这种方式在创建数组时直接填充了内容，元素同样用逗号隔开。
- arr3 = new Array(10);则创建了一个长度为 10 的数组。

三、数组的基本操作

索引（下标）：索引用于访问数组元素，数组下标从 0 开始。例如，var arr = ['孙悟空', '猪八戒', '沙和尚', '唐僧']，其索引号依次为 0，1，2，3 。
读取数组中的元素：通过 “数组名 [索引]” 的形式获取数组中的元素。例如，arr[0]可得到孙悟空，arr[2]可得到沙和尚。若读取不存在的索引，不会报错，而是返回undefined 。
向数组中添加 / 替换元素：使用数组[索引] = 值的语法。例如，arr[0] = 10; arr[1] = 33; arr[2] = 22; ，这样就完成了对数组元素的替换操作，如果索引不存在，就相当于向数组中添加了新元素。
获取数组的长度：利用length属性，语法为数组.length。对于连续的数组，它能准确获取数组的长度（即元素的个数）；对于非连续的数组，获取到的是数组的最大索引 + 1。在开发中，应尽量避免创建非连续的数组。
修改 length：当arr.length = 5;时，如果原数组长度小于 5，多出部分会空出来；如果原数组长度大于 5，则多出来的元素会被删除。
向数组的最后一个位置添加元素：采用数组[数组.length] = 值;的语法。比如，arr[arr.length] = 10; arr[arr.length] = 70; ，就可以在数组末尾添加新元素。
数组中的元素类型：数组中的元素可以是任意的数据类型，如字符串、数字、对象、函数等。例如，arr = ["hello", 1, true, null, undefined]; ，还可以将对象作为数组元素，如var obj = {name: "孙悟空",}; arr[arr.length] = obj; ，甚至元素也可以是函数，如arr = [function () {alert(1);}, function () {}, function () {}]; ，此外，数组还可以包含数组，即二维数组，如arr = [[1, 2], [2, 3], ["a", "b"]]; 。

四、检测是否为数组

instanceof 运算符：语法为arr instanceof Array，它可以检测一个变量是否为数组类型。
Array.isArray (参数)：这是 H5 新增的方法，ie9以上版本支持。语法为Array.isArray(value)，用于确定传递的值是否是一个Array。

五、数组的遍历

遍历就是把数组中的每个元素从头到尾都访问一次。常见的遍历方式有以下几种：

for 循环：最基础的遍历方式，for (var i = 0; i < arr.length; i++) { console.log(arr[i]); } ，通过索引依次访问数组中的每个元素。
优化版 for 循环：使用临时变量将长度缓存起来，避免重复获取数组长度，当数组较大时，优化效果显著。代码如下：for (var i = 0, len = arr.length; i < len; i++) { console.log(arr[i]); }
for・・・in・・・循环：主要用于对象，但也可用于数组遍历。for (var i in arr) { console.log(i); // 索引 console.log(arr[i]); // 值 } ，不过它会遍历到数组原型链上的属性，所以在使用时需要通过hasOwnProperty方法进行过滤。
for・・・of・・・循环：这是 ES6 引入的新特性，for (var i of arr) { console.log(i); // 值 } ，它直接遍历数组的值，更加简洁直观。
forEach () 方法：该方法接收一个函数作为参数，数组中有几个元素，函数就会执行几次。函数中会传递三个参数，第一个参数是当前正在遍历的元素，第二个参数是当前元素的索引，第三个参数是当前正在遍历的数组。例如，arr.forEach(function (item, index, arr) { console.log(item); // 值 console.log(index); // 索引 console.log(arr); // 当前的数组 }); ，不过此方法只支持IE8以上的浏览器，所以在兼容性要求较高的场景下，建议使用for循环遍历。

六、冒泡排序

冒泡排序是一种经典的算法，用于将一系列数据按照一定顺序排列（从小到大或从大到小）。其原理是重复走访要排序的数列，每次比较两个元素，如果顺序错误就交换它们，直到数列排序完成。之所以叫冒泡排序，是因为最小的元素会像气泡一样，经过多次交换慢慢 “浮” 到数列的顶端。以下是实现冒泡排序的示例代码：

var arr = [1, 3, 6, 4, 5, 2];

var temp;

// 遍历出每个数据

for (var i = 0; i < arr.length - 1; i++) {

// 拿每个arr[i]，跟arr中的每个数据进行一轮对比，然后交换数据，小的在前

for (var j = 0; j < arr.length - 1 - i; j++) {

if (arr[j] > arr[j + 1]) {

temp = arr[j];

arr[j] = arr[j + 1];

arr[j + 1] = temp;

}

console.log(arr);

七、数组的方法

添加删除数组的方法：
- push()：向数组末尾添加一个或多个元素，原数组会发生变化，并返回新数组的长度。例如，var arr = ["孙悟空", "沙和尚", "猪八戒"]; var result = arr.push("唐僧", "蜘蛛精", "白骨精"); console.log(arr); console.log("result=" + result); ，这里result的值为 6，arr变为["孙悟空", "沙和尚", "猪八戒", "唐僧", "蜘蛛精", "白骨精"] 。
- pop()：删除数组的最后一个元素，一次删除一个，原数组会改变，并返回被删除的元素的值。例如，arr.pop(); 调用一次就删除数组的最后一个元素。
- unshift()：向数组开头添加一个或多个元素，原数组变化，并返回新数组的长度。比如，arr.unshift("牛魔王", "二郎神"); ，数组元素顺序会相应调整。
- shift()：删除数组的第一个元素，一次删除一个，原数组改变，并返回被删除的元素的值。例如，arr.shift(); 即可删除数组的第一个元素。

数组剩余常用方法：
- slice()：从数组中提取指定元素，不改变原数组，而是将截取到的元素封装到一个新数组中返回。例如，var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "沙和尚"]; var arr2 = arr.slice(0, 2); console.log(arr2); ，arr2为["孙悟空", "猪八戒"] 。
- splice()：用于删除数组中的指定元素，会影响原数组，将删除的元素作为返回值返回。例如，var result = arr.splice(1, 1, "牛魔王"); ，从索引 1 开始删除 1 个元素，并插入 “牛魔王” 。
- indexOf：查找满足条件的数组索引号，返回在数组中可以找到的一个给定元素的第一个索引，如果不存在，则返回 -1。例如，var arr = ["red", "orange", "green", "yellow", "green"]; var res = arr.indexOf("red"); ，res的值为 0 。
- lastIndexOf：返回指定元素在数组中的最后一个索引，从数组后往前查找，如果不存在，返回 -1。例如，res = arr.lastIndexOf("green"); ，这里res的值为 4 。
- concat()：合并两个或多个数组，并返回新的数组，也可以传其他数据类型，原数组不受影响。例如，var arr = ["孙悟空", "猪八戒"]; var arr2 = ["唐僧"]; var arr3 = ["嫦娥"]; var res = arr.concat(arr2, arr3, "牛魔王"); ，res为['孙悟空', '猪八戒', '唐僧', '嫦娥', '牛魔王'] 。
- join()：将数组转成一个字符串，原数组不受影响，可指定连接符。例如，var res2 = arr.join("hello"); ，若arr为['孙悟空', '猪八戒'] ，则res2为"孙悟空hello猪八戒" 。
- toString：将数组转字符串。例如，console.log(arr.toString(), "toString");
- reverse()：反转数组，直接修改原数组。例如，arr.reverse(); ，数组元素顺序会颠倒。
- sort()：对数组中的元素进行排序，会影响原数组。默认按照Unicode编码排序，对数字排序时可能得到错误结果。可以通过添加回调函数来指定排序规则，例如，升序排序可写成arr.sort(function (a, b) { return a - b; }); ，降序排序则写成arr.sort(function (a, b) { return b - a; }); 。