前端开发-数组

#博学谷IT学习技术支持#

目录

数组的概念

数组的创建方式

利用数组字面量创建数组

利用 new 创建数组

数组元素的类型

数组的索引

数组的索引是从0开始的

当要查询的索引大于数组的长度时

通过索引改变数组的值

遍历数组

通过修改 length 长度新增数组元素

通过修改数组索引新增数组元素

检测是否为数组

添加删除数组元素的方法

翻转数组reverse()

冒泡排序 sort()

数组索引方法

数组转换为字符串

---

数组的概念 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。 将一组数据存储在单个变量名下。

// 普通变量一次只能存储一个值
var num = 10; 
// 数组一次可以存储多个值
var arr = [1,2,3,4,5];

数组的创建方式 利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组
var 数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑','大黄','瑞奇'];

声明数组并赋值称为数组的初始化 利用 new 创建数组

var arr1 = new Array(3);//括号中参数为数组的长度
arr1[0] = "1";
arr1[1] = "2";
arr1[2] = "3";
for (var i = 0; i < arr1.length; i++) {
    console.log(arr1[i]);
}
//
var arr2 = new Array(4);
//创建数组时不按顺序赋值也是可以的
arr2[1] = "4";
arr2[3] = "5";
arr2[0] = "6";
arr2[2] = "7";
for (var i = 0; i < arr2.length; i++) {
    //可以正常循环打印出来，并不会报错	
    console.log(arr2[i]);
}
//数组中如果不添加元素，那打印出来的元素的值默认就是undefined
var arr3 = new Array(3);
for (var i = 0; i < arr3.length; i++) {
    console.log("第" + (i + 1) + "个元素的值是" + arr3[i]);
}

数组元素的类型

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

var arrStus = ['小白',12,true,28.9];

数组的索引 索引 (下标) ： 用来访问数组元素的序号（数组下标从 0 开始）。 通 过索引来访问、设置、修改对应的数组元素，通过“数组名[索引]”的形式来获取数组中的 元素。

 

数组的索引是从0开始的

  var arr = ["he", "tom", 12, ture];
  console.log(arr[0]); //he

当要查询的索引大于数组的长度时

var arr = [1, 2, 3];
arr[10] = "10";
console.log(arr);//[1,2,3,empty*6,"10"]

使用索引清空数组

把数组设置为0 ，arr.length=0；就可以把数组的元素清空

通过索引改变数组的值

var arr=[1,2,3,4];
arr[2]="a";
console.log(arr)

遍历数组 遍历: 把数组中的每个元素从头到尾都访问一次，我们可以通过 for 循环索引遍历数组中的每一项

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
 console.log(arr[i]);
}

通过修改 length 长度新增数组元素

var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);

其中索引号是 4，5，6 的空间没有给值，就是声明变量未给值，默认值就是 undefined 通过修改数组索引新增数组元素

可以通过修改数组索引的方式追加数组元素

不能直接给数组名赋值，否则会覆盖掉以前的数据

var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);

检测是否为数组 instanceof ，可以判断一个对象是否属于某种类型 Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

添加删除数组元素的方法

 翻转数组reverse()

  var arr = ['pink', 'red', 'blue'];
  arr.reverse();
  console.log(arr);//['blue', 'red', 'pink'];

冒泡排序 sort()

 var arr1 = [13, 4, 77, 1, 7];
 arr1.sort(function(a, b) {
 //  return a - b; 升序的顺序排列
 return b - a; // 降序的顺序排列
 });
 console.log(arr1);

数组索引方法

 // 返回数组元素索引号方法  indexOf(数组元素)  作用就是返回该数组元素的索引号 从前面开始查找
 // 它只返回第一个满足条件的索引号 
 // 它如果在该数组里面找不到元素，则返回的是 -1  
 // var arr = ['red', 'green', 'blue', 'pink', 'blue'];
 var arr = ['red', 'green', 'pink'];
 console.log(arr.indexOf('blue'));
 // 返回数组元素索引号方法  lastIndexOf(数组元素)  作用就是返回该数组元素的索引号 从后面开始查找
 var arr = ['red', 'green', 'blue', 'pink', 'blue'];

 console.log(arr.lastIndexOf('blue')); // 4

数组转换为字符串

        // 数组转换为字符串 
        // 1. toString() 将我们的数组转换为字符串
        var arr = [1, 2, 3];
        console.log(arr.toString()); // 1,2,3
        // 2. join(分隔符) 
        var arr1 = ['green', 'blue', 'pink'];
        console.log(arr1.join()); // green,blue,pink
        console.log(arr1.join('-')); // green-blue-pink
        console.log(arr1.join('&')); // green&blue&pink