day06-数组

最新推荐文章于 2023-01-17 01:00:00 发布

xingnan.

最新推荐文章于 2023-01-17 01:00:00 发布

阅读量675

点赞数

分类专栏：前端笔记文章标签： html5 javascript css json ajax

本文链接：https://blog.csdn.net/qq_39035580/article/details/118757190

版权

这篇博客详细介绍了JavaScript数组的创建、获取元素、属性、常用方法和排序，包括push、pop、shift、unshift等操作。同时，讲解了数据渲染在表格中的应用，包括如何渲染表格、删除和新增表格数据，强调了遍历和操作数组的注意事项及最佳实践。

摘要由CSDN通过智能技术生成

一、创建数组

数组作用：一个变量存储多个数据

1.1、字面量的形式

1.声明一个数组：var 数组名 = [元素1，元素2，元素3…………]
- 数组名其实就是变量名，只是习惯上称之为数组名
- 元素其实就是数组中保存的数据，只是习惯上称之为元素
2.获取数组中某一个数据:数组名[下标]
3.获取数组中元素的数量:数组名.length
4.总结：数组主要由三要素构成
- 元素：数组中的数据
- 下标：元素在数组中的位置(从0开始按照顺序递增)
- 长度：数组中元素的数量

var cars = ["Saab", "Volvo", "BMW"];

空格和折行并不重要。声明可横跨多行：

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];

请不要最后一个元素之后写逗号（比如 "BMW",）。可能存在跨浏览器兼容性问题。

1.2、使用 JavaScript 关键词 new

var cars = new Array("Audi", "Volvo", "BMW");

以上两个例子效果完全一样。无需使用 new Array()。出于简洁、可读性和执行速度的考虑，请使用第一种方法。

没有必要使用 JavaScript 的内建数组构造器 new Array()。

请使用 [] 取而代之！

new 关键词只会使代码复杂化。它还会产生某些不可预期的结果：

var points = new Array(40, 100);  // 创建包含两个元素的数组（40 和 100）
var points = new Array(40);       // 创建包含 40 个未定义元素的数组！！！

/**
     * js中复杂的数据类型在初始化的编译器要做的事情远多于基本数据类型
     * 所以为了方便开发者，ECMAJavascript为负责数据类型提供了简洁的创建方式
     *
     * 数组的创建方式有两种:
     *      * 简洁方式：[]
     *      * 标准方式： new Array()
     *      * 它们最大的区别就是创建时如果数组的元素只有一个时含义不同
     *          * 简洁方式：[10]; 代表数组长度为1，元素是10
     *          * 标准方式：new Array(10)； 代表数组长度为10，没有元素
     */
//1.创建一个空数组

//1.1简洁方式：最常用
var nums = [];
//1.2 标准方式
var array = new Array();

//2.创建有多个元素的数组
//2.1 简洁方式
var nums1 = [10,20,30,40,50];//创建一个长度为5的数组，元素分别为10，20，30，40，50
//2.2 标准方式
var array1 = new Array(10,20,30,40,50);//创建了一个长度为5的数组，元素分别为10,20,30,40,50
//2.3 这两种方式只是创建的区别，取值和获取长度都是一致
console.log ( nums1[ 2 ], array1[ 3 ]);
console.log ( array1.length, nums1.length );

//3.创建只有一个元素的数组
//3.1简洁方式
var nums2 = [10];//创建一个长度为1的数组，元素是10
var array2 = new Array(10);//创建一个长度为10的数组，没有元素。这是一个空数组
console.log ( nums2 );
console.log ( array2 );

1.3、如何识别数组

typeof 运算符返回 "object"，因为 JavaScript 数组属于对象。

为了解决这个问题，ECMAScript 5 定义了新方法 Array.isArray()：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
Array.isArray(fruits);     // 返回 true

二、获取数组元素

我们通过引用索引号（下标号）来引用某个数组元素。

var cars = ["Audi", "Volvo", "BMW"];
//这条语句访问 cars 中的首个元素的值：
var mycar = cars[0];
//这条语句修改 cars 中的首个元素：
cars[0] = "Opel";

    /**
     * 数组取值：  `数组变量名[下标]`
     *      * 1.数组的下标是从0开始的
     *      * 2.数组的最大下标 = 长度 - 1
     *      * 3.如果数组的的下标超过最大下标时，则得到undefined
     *
     * 数组赋值：`数组变量名[下标] = 值;`
            * 1.：如果下标有对应的值，会把原来的值覆盖
            * 2.如果下标不存在，会给数组新增一个元素，并且数组的长度发生变化
     */

    //下标的作用：数组的取值与赋值
    //数组的下标是从0开始的

    var arr = [20,65,78,90];

    //1.数组的取值: 数组名[下标]

    //a.如果没有超过最大下标：获取该下标对应元素的值
    console.log ( arr[ 2 ] );//78 第三个元素的值
    console.log ( arr[ 0 ] );//20 第0个元素

    //b.如果取值下标超出最大下标则会得到undefined
    console.log ( arr[ 4 ] );/