一、JavaScript数组的概念和创建、使用数组JavaScript数组是什么?数组是一堆数据的组合或集合,它是一种数据容器,可以容纳很多的数据。JavaScript的数组和C++或Java中的数组不同,JavaScript的数组可以容纳不同数据类型的数据,例如同一个数组可以添加字符串类型和数值类型的数据。JavaScript中的数组对象是Array和Object一样,也是常用的引用类型,是所有编程语言都有数组,开发中也常用,所以很有必要掌握数组以及相关的操作。
文章图片
JavaScript如何创建数组?和Object对象的创建一样,JavaScript创建数组同样有两种方式:使用new操作符和数组字面量的形式创建数组。数组可以按顺序存储多种不同类型的数据,顺序序号从0开始,称为数组的索引,我们可以通过数组的索引结合[]访问和修改数组中的数据元素,例如array[0]表示访问数组array的第一个数据元素,数组元素的个数称为数组的长度,例子如下:
/**
* 创建数组
* 方式一:使用Array和new操作符
*/
var data = http://www.srcmini.com/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并不会报错,例如array[0] = 1,array[99] = 99,这时中间没赋值的都被填充为空undefined,但是此时length会显示为100,length是表示数组长度的属性,实际上数组中只有两个数组,这样的数组称为稀疏数组,在开发中应该尽量避免稀疏数组的出现,必须的时候需要对数组的元素进行undefined过滤,下面是稀疏数组的实例。
文章图片
二、遍历数组上面提到数组的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():对原数组进行逆向排序。
// 数组的数据结构操作函数
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()函数用于删除或添加原数组的元素,结果影响原数组,该方法接受多个参数,第一个参数表示要删除元素的索引位置,第二个参数表示删除元素的个数,第三个参数开始都是添加都数组的元素,仅传入一个参数表示从开始位置删除到末尾,返回的是删除的元素的数组。
【JavaScript基础快速入门教程(七)(数组创建、遍历数组、数据结构和算法和实例)】使用实例如下:
// 数组的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
推荐阅读
- JavaScript基础快速入门教程(八)(包装数据类型、日期对象、Math对象和全局对象)
- JavaScript基础快速入门教程(六)(对象详解和编程实例)
- vue.js框架快速入门简明教程(五)(表单)
- vue.js框架快速入门简明教程(四)(样式绑定和事件处理器)
- JavaScript基础快速入门教程(五)(函数的定义和调用、带参函数和匿名函数)
- Linux中的tty命令和示例
- Python中的多态性用法指南
- Scala多态性介绍和用法指南
- Linux中的ps命令示例和指南