带你走进从零认识JavaScript到精髓（九）JavaScript数组认识

一、数组定义，数组的特点，索引

1.1 数组的定义

数组是值的有序集合（一个数组可以存放多个值）。每个值叫做数组的的一个元素，每个元素在数组中都有一个位置。

1.2 数组的特点

​ a) 数组是值的有序集合

​ b) 数组元素可以是任意类型，并且同一个数组的不同元素也可能有不同的类型

​ c) 每个值叫做一个元素，而每个元素在数组中有一个位置

1.3 关于下标和索引

• 数组下标也称为数组的索引，是用来标识当前存放数据的空格位置的。

二、 数组的创建

2.1 第一种 直接使用字面量进行数组的创建

var arr = [];// 创建一个空数组
var arr = ['laoli', 18, '老李'];// 创建一个包含元素的数组
var arr = [1, 2,];// 这样做IE会识别成3个元素，不推荐
var arr = [, , , , ];// 同样不推荐这样进行操作

6-2.2 第二种 使用new关键字进行创建

var arr = new Array();//创建一个数组
var arr = new Array(10);// 创建一个包含10个数据的数组
var arr = new Array('laoli', 18, '老李');

三、数组元素的写和读

3.1 数组元素赋值（也就是数组元素的写）

创建组之后需要给元素进行赋值(也就是：写)

arrs[0] = 12;
arrs[1] = 'hello';

3.2 访问数组数据（也就是数组元素的读）

​ **A）**直接访问数组指定位置（索引）的数据

​ 通过索引进行访问，如 var num = arrs[1];

​ **B）**遍历数组

​ 通过循环对数组中的数据进行访问

​ for…in的用法

四、 数组长度

数组的length属性，返回数组的长度，也就是数组成员的数量

['a', 'b', 'c'].length // 3

只要是数组，就一定有length属性，length的值等于最大

五、 数组中常用的方法

方法	描述
concat()	连接两个或更多的数组，并返回结果。
indexOf()	搜索数组中的元素，并返回它所在的位置。
isArray()	判断对象是否为数组。
join()	把数组的所有元素放入一个字符串。
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	反转数组的元素顺序。
shift()	删除并返回数组的第一个元素。
slice()	选取数组的的一部分，并返回一个新数组。
sort()	对数组的元素进行排序。
splice()	从数组中添加或删除元素。
toString()	把数组转换为字符串，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。

数组元素的添加和删除

push()

向数组的末尾添加一个或更多元素，并返回新的长度

// push() 方法可向数组的末尾添一个或多个参数
var arr = ["a", "b", "c", "d"];
arr.push("e", "f", "g"); // ["a", "b", "c", "d", "e", "f", "g"]
// 原数组arr改变了
console.log(arr)

unshift()

向数组的开头添加一个或更多元素，并返回新的长度

// unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
var arr = ["香蕉", "橘子", "苹果", "芒果"];
arr.unshift("柠檬","菠萝"); // ["柠檬", "菠萝", "香蕉", "橘子", "苹果", "芒果"] 
// 原数组arr改变了
console.log(arr)

pop()

删除数组的最后一个元素并返回删除的元素

// pop() 方法用于删除数组的最后一个元素并返回删除的元素
var arr = ["柠檬", "菠萝", "香蕉", "橘子", "苹果", "芒果"];
arr.pop(); // "芒果"
// 原数组arr改变了
console.log(arr); // ["柠檬", "菠萝", "香蕉", "橘子", "苹果"]

shift()

删除并返回数组的第一个元素

// shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
var arr = ["柠檬", "菠萝", "香蕉", "橘子", "苹果", "芒果"];
arr.shift(); // "柠檬"
// 原数组arr改变了
console.log(arr); // ["菠萝", "香蕉", "橘子", "苹果", "芒果"]

join()

把数组的所有元素放入一个字符串

// join() 方法用于把数组中的所有元素转换一个字符串
// 元素是通过指定的分隔符进行分隔的。
var arr = ["柠檬", "菠萝", "香蕉", "橘子", "苹果", "芒果"];
arr.join("|"); // 柠檬|菠萝|香蕉|橘子|苹果|芒果
// 原数组没有改变
console.log(arr); // ["柠檬", "菠萝", "香蕉", "橘子", "苹果", "芒果"]

reverse()

反转数组的元素顺序

// reverse() 方法用于颠倒数组中元素的顺序
var arr = ["柠檬", "菠萝", "香蕉", "橘子", "苹果", "芒果"];
arr.reverse(); // ["芒果", "苹果", "橘子", "香蕉", "菠萝", "柠檬"]
// 原数组顺序改变了
console.log(arr); // ["芒果", "苹果", "橘子", "香蕉", "菠萝", "柠檬"]

sort()

对数组的元素进行排序

// sort() 方法用于对数组的元素进行排序
var arr = ["Banana", "Orange", "Apple", "Mango"];
arr.sort(); // ["Apple", "Banana", "Mango", "Orange"]
// 原数组顺序改变了
console.log(arr); // ["Apple", "Banana", "Mango", "Orange"]

// 案例：排序数字 
var arr = [10, 9, 2, 20, 3, 33, 4, 46, 1, 15, 7, 8, 36];
arr.sort();

扩展：

// 数字排序（数字和升序）：
var arr = [40, 100, 1, 5, 25, 10];
arr.sort(
  function(a,b){
    return a-b
  }
);
console.log(); // 1,5,10,25,40,100

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

/*
这个 sort() 方法，如果看上面的例子会非常痛苦。

sort() 方法，有一个可选参数，必须是函数，供它调用。那么就是个回调函数咯！

回调函数的参数要有两个：第一个参数的元素肯定在第二个参数的元素前面!!!

这个方法的排序是看回调函数的返回值：

 如果返回值大于 0，则位置互换。
 如果返回值小于 0，则位置不变。
例子:
*/
var arr = [9,7,2];

arr.sort(function(a,b){
    if(a>b) // 如果 a 大于 b,位置互换
        return 1;
    else //否则，位置不变
        return -1;
});
// 排序结果: 2,7,9

concat()

连接两个或更多的数组，并返回结果

// concat() 方法用于连接两个或多个数组
// 两个数组的连接
var arr1 = ["柠檬"];
var arr2 = ["菠萝", "香蕉", "橘子"];
arr1.concat(arr2); // ["柠檬", "菠萝", "香蕉", "橘子"];

// 连接三个数组
var arr1 = ["柠檬"];
var arr2 = ["菠萝", "香蕉", "橘子"];
var arr3 = ["苹果", "芒果"];
arr1.concat(arr2, arr3); // ["柠檬", "菠萝", "香蕉", "橘子", "苹果", "芒果"]

// 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本
console.log(arr1); // ["柠檬"]
console.log(arr2); // ["菠萝", "香蕉", "橘子"]
console.log(arr3); // ["苹果", "芒果"]

slice()

选取数组的的一部分，并返回一个新数组

/*
slice() 方法可从已有的数组中返回选定的元素。
slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
注意： slice() 方法不会改变原始数组。
*/
// 如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
// 第二个参数如果不写，包含到结尾的所有元素；如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素
var arr = ["柠檬", "菠萝", "香蕉", "橘子", "苹果", "芒果"];
var newArr = arr.slice(1,3);
cosnole.log(newArr); //  ["菠萝", "香蕉"]

splice()

从数组中添加或删除元素

// splice() 方法用于添加或删除数组中的元素。
// 注意：这种方法会改变原始数组
var arr = ["柠檬", "菠萝", "香蕉", "橘子", "苹果", "芒果"];
var arr1 = arr.splice(0, 1, "西红柿")
console.log(arr1); //  ["柠檬"]
console.log(arr); // ["西红柿", "菠萝", "香蕉", "橘子", "苹果", "芒果"]

语法

array.splice(index,howmany,item1,…,itemX)

参数 Values

参数	描述
index	必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	必需。规定应该删除多少元素。必须是数字，但可以是 “0”。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX	可选。要添加到数组的新元素

toString()

把数组转为字符串，并返回结果

// toString() 方法可把数组转换为字符串，并返回结果。
// 注意： 数组中的元素之间用逗号分隔。
var arr = ["柠檬", "菠萝", "香蕉", "橘子", "苹果", "芒果"];
arr.toString(); // 柠檬,菠萝,香蕉,橘子,苹果,芒果

indexOf()

搜索数组中的元素，并返回它所在的位置

/*
indexOf() 方法可返回数组中某个指定的元素位置。
该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。
如果在数组中没找到指定元素则返回 -1。
提示如果你想查找字符串最后出现的位置，请使用 lastIndexOf() 方法。
*/
var arr = ["柠檬", "菠萝", "香蕉", "橘子", "苹果", "芒果"];
arr.indexOf("香蕉"); // 2

语法

array.indexOf(item,start)

参数值

参数	描述
item	必须。查找的元素。
start	可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

lastIndexOf()

搜索数组中的元素，并返回它最后出现的位置

/*
lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。

如果要检索的元素没有出现，则该方法返回 -1。

该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。

如果在数组中没找到指定元素则返回 -1。

提示： 如果你想查找数组首次出现的位置，请使用 indexOf() 方法
*/

var arr = ["柠檬", "菠萝", "香蕉", "橘子", "苹果", "芒果"];
arr.lastIndexOf("苹果"); // 4

isArray()

判断对象是否为数组

// isArray() 方法用于判断一个对象是否为数组。
// 如果对象是数组返回 true，否则返回 false。

var arr = ["柠檬", "菠萝", "香蕉", "橘子", "苹果", "芒果"];
Array.isArray(arr);  // true

总结

以上就是今天带你走进从零认识JavaScript到精髓（九）JavaScript数组认识
会持续更新中…
原创不易，期待您的点赞关注与转发评论😜😜😜