第3章 JS中特殊的对象-数组

第3章 JS中特殊的对象-数组

之前学习的数据类型，只能存储一个值(比如：Number/String)。我们想在一个变量中存储多个值，应该如何存储？

所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。

1.1 数组的创建

// 字面量方式创建数组
var arr1 = []; //空数组
// 创建一个包含3个数值的数组，多个数组项以逗号隔开
var arr2 = [1, 3, 4]; 
// 创建一个包含2个字符串的数组
var arr3 = ['a', 'c']; 
console.log(arr1);
console.log(arr2);
console.log(arr3);

// 可以通过数组的length属性获取数组的长度
console.log(arr3.length);
// 可以设置length属性改变数组中元素的个数
arr3.length = 0;

console.log(arr3[0]);//undefined

数组的元素可以是任意类型的数据，因此，有时数组中的某个元素的值又是一个数组，而这样的数组被称为多维数组，如果数组中只有其他类型的数据，而没有另外的数组值，这样的数组被称为一维数组；

通常，数组被嵌套N层，则称为N维数组，最常见的就是二维数组、三维数组、四维数组，超过一维的数组都会被泛称为多维数组；

数组的维度值越大，复杂度就越高，开发中尽量避免产生高维度值的数组；

var arr1 = [a,b,c]; // 一维数组
var arr2 = [a,b,c,[d,e]]; // 二维数组
var arr3 = [a,b,c,[d,e,[f,g]]]; // 三维数组
var arr4 = [a,b,c,[d,e,[f,g,[h,t,y]]]]; // 四维数组

1.2 获取数组元素

// 格式：数组名[下标]	下标又称索引
// 下标从0开始
// 功能：获取数组对应下标的那个值，如果下标不存在，则返回undefined。
var arr = ['red',, 'green'];
arr[0];	// red
arr[1];	// undefined 下标位置没有数据
arr[2]; // green
arr[5]; // 这个数组的最大下标为2,因此返回undefined

// 获取多维数组的数据
var arr = ['路飞','娜美',['巴基','女帝',['佐助','乔巴']]];
console.log(arr[2][2][0]); //佐助

1.3 遍历数组

遍历：遍及所有，对数组的每一个元素都访问一次就叫遍历。

for循环数组遍历的基本语法：

for(var i = 0; i < arr.length; i++) {
	// 数组遍历的固定结构
}

for循环示例：

var arr1 = [1, 3, 4]; 

for(var i = 0;i<arr1.length;i++){
    console.log(arr1[i]);
}

whil循环示例：

var arr1 = [1, 3, 4]; 

var i = 0;
while(i<arr1.length){
    console.log(arr1[i]);
    i++;
}

1.4 为数组修改添加元素

// 格式：数组名[下标/索引] = 值;
// 如果下标有对应的值，会把原来的值覆盖，如果下标不存在，会给数组新增一个元素。
var arr = ["red", "green", "blue"];
// 把red替换成了yellow
arr[0] = "yellow";
// 给数组新增加了一个pink的值
arr[3] = "pink";

1.5 数组操作案例

案例1：求数组中的所有数的和

//求和
var arr = [10, 20, 30, 40, 50];
//定义变量存储和
var sum = 0;
for (var i = 0; i < arr.length; i++) {
    sum += arr[i];
}
console.log("和为:" + sum);

案例2：获取数组中的最大值

//最大值
var arr = [10, 20, 30, 40, 50, 60];
//假设这个变量中的值是最大的
var maxNum = arr[0];
//遍历数组
for (var i = 0; i < arr.length; i++) {
    //判断
    if (maxNum < arr[i]) {
        maxNum = arr[i];
    }
}
console.log("最大值是:" + maxNum);

案例3： 遍历出数组中所有的偶数

// 遍历出数组中所有的偶数
var arr = [1,2,3,4,5,6,7];
for(var i=0;i<arr.length;i++){
    //判断
    if(arr[i]%2==0){
        console.log(arr[i]);
    }
}

案例4：将数组转为字符串并以 | 分割

//把数组中的每个名字后面拼接一个|然后以字符串的方式输出
var names = ["卡卡西", "佐助", "凤姐", "鸣人", "黑崎一护"];
var str = "";//空的字符串,用来存储最后的拼接的结果的字符串
//不停的遍历数组的数据,并且拼接字符串
for (var i = 0; i < names.length - 1; i++) {
    str += names[i] + "|";//拼接字符串的方式
}
str += names[names.length - 1];
console.log(str);

总结：

数组就是多个数据的集合，有一维数组和多维数组之分，可以使用字面量方式创建数组，使用下标来获取数组元素数据，使用for或者while循环来遍历数组元素；

2.1 Array对象

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

2.1.1 常用属性和方法

length属性: 返回数组的成员数量。

var arr = ['a', 'b'];
console.log(arr.length) // 2

常用方法

• push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

  var a = [];
  a.push(1) // 1
  a.push('a') // 2
  a.push(true, {}) // 4
  console.log(a); //[1, 'a', true, {}]
  

• pop方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组

  var a = ['a', 'b', 'c'];
  a.pop() // 'c'
  console.log(a);// ['a', 'b']
  

• slice方法用于提取原数组的一部分，返回一个新数组，原数组不变。

  它的第一个参数为起始位置(从0开始)，第二个参数为终止位置(但该位置的元素本身不包括在内)。 如果省略第二个参数，则一直返回到原数组的最后一个成员。

  var a = ['a', 'b', 'c'];
  a.pop() // 'c'
  console.log(a);// ['a', 'b']
  

• join方法用于将数组元素以指定字符拼接为字符串，返回一个字符串，原数组不变。

  var a = ['a','b','c','d','e'];
  console.log(a.join('-')) // 'a-b-c-d-e'
  

• 返回数组的字符串表示形式。

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

2.1.2 方法和属性对照表

Array 对象的属性

属性	描述
length 属性	返回一个整数值，此整数比数组中所定义的最高位元素大 1，是实际元素个数。

Array 对象的方法

方法	描述
concat 方法（数组）	返回由两个数组组合而成的新数组。
entries 方法	返回包含数组的键/值对的迭代器。
every 方法	检查定义的回调函数是否为数组中的所有元素返回 true。
fill 方法	使用指定值填充数组。
filter 方法	对数组的每个元素调用定义的回调函数，并返回回调函数为其返回 true 的值的数组。
findIndex 方法	返回满足回调函数中指定的测试条件的第一个数组元素的索引值。
forEach 方法	为数组中的每个元素调用定义的回调函数。
hasOwnProperty 方法	返回一个布尔值，该值指示某个对象是否具有指定名称的属性。
indexOf 方法（数组）	返回某个值在数组中的第一个匹配项的索引。
isPrototypeOf 方法	返回一个布尔值，该值指示某个对象是否存在于另一个对象的原型链中。
join 方法	返回由一个数组的所有元素串联而成的 String 对象。
keys 方法	返回包含数组的索引值的迭代器。
lastIndexOf 方法（数组）	返回指定值在数组中的最后一个匹配项的索引。
map 方法	对数组的每个元素调用定义的回调函数并返回包含结果的数组。
pop 方法	从数组中移除最后一个元素并将该元素返回。
propertyIsEnumerable 方法	返回一个布尔值，该值指示指定属性是否为对象的一部分且是否可枚举。
push 方法	将新元素追加到一个数组中，并返回数组的新长度。
reduce 方法	通过对数组中的所有元素调用定义的回调函数来累积单个结果。 回调函数的返回值是累积的结果，并且作为对回调函数的下一个调用中的参数提供。
reduceRight 方法	通过对数组中的所有元素调用定义的回调函数来按降序顺序累积单个结果。 回调函数的返回值是累积的结果，并且作为对回调函数的下一个调用中的参数提供。
reverse 方法	将元素顺序被反转的 Array 对象返回。
shift 方法	从数组中移除第一个元素并将返回该元素。
slice 方法（数组）	返回一个数组中的一部分。
some 方法	检查定义的回调函数是否为数组的任何元素返回 true。
sort 方法	返回一个元素已经进行了排序的 Array 对象。
splice 方法	从一个数组中移除元素，如有必要，在所移除元素的位置上插入新元素，并返回所移除的元素。
toLocaleString 方法	返回使用当前区域设置的字符串。
toString 方法	返回数组的字符串表示形式。
unshift 方法	在数组的开头插入新元素。
valueOf 方法	获取对数组的引用。
values 方法	返回包含数组的值的迭代器。