个性化阅读
专注于IT技术分析

JavaScript基础快速入门教程(七):数组创建、遍历数组、数据结构和算法和实例

一、JavaScript数组的概念和创建、使用数组

JavaScript数组是什么?数组是一堆数据的组合或集合,它是一种数据容器,可以容纳很多的数据。JavaScript的数组和C++或Java中的数组不同,JavaScript的数组可以容纳不同数据类型的数据,例如同一个数组可以添加字符串类型和数值类型的数据。JavaScript中的数组对象是Array和Object一样,也是常用的引用类型,是所有编程语言都有数组,开发中也常用,所以很有必要掌握数组以及相关的操作。

javascript数组详解

JavaScript如何创建数组?和Object对象的创建一样,JavaScript创建数组同样有两种方式:使用new操作符和数组字面量的形式创建数组。数组可以按顺序存储多种不同类型的数据,顺序序号从0开始,称为数组的索引,我们可以通过数组的索引结合[]访问和修改数组中的数据元素,例如array[0]表示访问数组array的第一个数据元素,数组元素的个数称为数组的长度,例子如下:

/**
 * 创建数组
 * 方式一:使用Array和new操作符
 */
var data = new Array(); // 空构造函数创建数组
// var data = new Array(3); 初始化数组容量为3
// var data = new Array(12, "Tomcat", true) 直接使用数据创建一个数组
data[0] = 12;
data[1] = "Tomcat";
data[2] = true;

// 方式二:使用字面量的方式创建数组
var days = ["Sunday", "Monday", "Tuesday"];
console.log(days);
console.log("数组第一个元素:" + days[0]);
days[3] = "Wednesday";
console.log(days);

输出结果:

javascript数组创建和使用实例

要注意的是给数组赋值的时候,如果没有按索引连续赋值,JavaScript并不会报错,例如array[0] = 1,array[99] = 99,这时中间没赋值的都被填充为空undefined,但是此时length会显示为100,length是表示数组长度的属性,实际上数组中只有两个数组,这样的数组称为稀疏数组,在开发中应该尽量避免稀疏数组的出现,必须的时候需要对数组的元素进行undefined过滤,下面是稀疏数组的实例。

javascript稀疏数组的实例

二、遍历数组

上面提到数组的length属性,这个属性表示数组元素的个数,数组元素的顺序序号称为索引,索引从0开始,遍历数组指的是循环访问数组的所有元素,需要用到数组的length属性和使用索引访问。

JavaScript如何遍历数组?JavaScript遍历数组的方式有两种:for循环和for in遍历数组,其中for in接收的是数组的索引,而不是数组的元素,使用for in遍历对象接收到的是对象的属性名,而不是变量的属性值。

另外还要注意的是,Array也是继承Object的,使用for in循环会把Object属性都遍历出来,这时候可以使用hasOwnProperty()函数过滤掉,或者不用for in,尽量使用for循环遍历数组。

JavaScript遍历数组的实例:

// 遍历数组
var songs = ["Under Mount Fuji", "Naked", "Shall we talk", "Comes and Goes"];

// 使用for循环遍历数组
for (var i = 0; i < songs.length; i++) {
    console.log(songs[i]);
}

// 使用for in遍历数组
for (var index in songs) {
    if (songs.hasOwnProperty(index)) { // 过滤掉继承而来的属性
        var song = songs[index];
        console.log(song);
    }
}

三、数组的数据结构和算法

数组是一种数据结构,数据容器,连续存储在内存中,对数据结构最基本的操作算法有:增加数据、删除数据、修改数据、查找数据和数据排序,上面我们看到的使用[]和索引也可以访问和修改数组中的数据,数组数据结构常用的操作函数有:

  • pop():从数组尾部弹出一个元素,并返回弹出的元素。
  • push():从数组尾部压入一个元素,并返回数组长度。
  • shift():从数组头部弹出一个元素,并返回弹出的元素。
  • unshift():从数组头部压入一个元素,并返回数组的长度。
  • sort():将数组的元素转为字符串并进行排序。
  • reverse():对原数组进行逆向排序。

Pop和push是操作栈数据结构,栈结构先进后出,shift和unshift是操作队列数据结构,队列的特点是先进先出,这两种数据结构可以结合使用,使用实例如下:

// 数组的数据结构操作函数
var movie = ["Time", "Django", "Inception"];

var inception = movie.pop(); // 弹出movie[2]
console.log("movie length: " + movie.length + ", pop " + inception);
var length = movie.push("Interstellar");
console.log(movie); // 此时movie[2] = "Interstellar"
var time = movie.shift();
console.log("movie lenght: " + movie.length + ", shift " + time);
length = movie.unshift("Pulp Fiction"); // 此时movie[0] = "Pulp Fiction"
console.log(movie);
console.log(movie.length); // => 3
console.log(movie.sort()); // 顺序排序
console.log(movie.reverse()); // 逆序排序

数组相关的函数还有concat()数组连接函数和join()元素连接方式,concat()函数用于向原数组批量追加新的元素,返回一个新的数组,但是不会影响原数组,join()函数用于将数组所有元素连接为一个字符串,默认使用逗号分隔,实例如下:

// 数组的concat()和join()函数
var array = [4, 5, 6];
var new_array = array.concat(7, 8, 9);
console.log(new_array); // => 4, 5, 6, 7, 8, 9
var array_str = array.join();
console.log(array_str); // => 4, 5, 6
array_str = array.join("");
console.log(array_str); // => 456

另外数组的函数还有slice()函数和splice()函数,slice()函数用于截取数组的某一部分,slice()函数接受两个参数,第一个参数是起始索引,第二个参数是结束索引,意思是从第一个索引的位置,截取到结束索引的位置,第二个参数默认为数组结束索引,返回新的数组,但不影响原数组。

Splice()函数用于删除或添加原数组的元素,结果影响原数组,该方法接受多个参数,第一个参数表示要删除元素的索引位置,第二个参数表示删除元素的个数,第三个参数开始都是添加都数组的元素,仅传入一个参数表示从开始位置删除到末尾,返回的是删除的元素的数组。

使用实例如下:

// 数组的slice()和splice()函数
var weather = ["sunny", "cloudy", "rainy", "cold"];
var new_weather = weather.slice(2);
console.log(new_weather.toString()); // "rainy", "cold"
new_weather = weather.slice(1, 3);
console.log(new_weather.toString()); // "cloundy", "rainy"

// 从某位置开始删除元素,并从该位置开始插入元素
var numbers = [1, 2, 3, 4, 5];
console.log(numbers.splice(1, 2, 12, 13, 14)); // => 2, 3
console.log(numbers.toString()); // => 1,12,13,14,4,5
赞(0)
未经允许不得转载:srcmini » JavaScript基础快速入门教程(七):数组创建、遍历数组、数据结构和算法和实例

评论 抢沙发

评论前必须登录!