JS基础(4)——数据结构(2)——数组属性和方法

4-2-1 数组相关属性

这里主要就是要介绍length这个属性，用于返回数组元素的个数。

let arr = [1,2,3,4,5];
console.log(arr.length); // 5

我们利用此属性，可以快速的清空数组，这种方法比使用重新赋值的效率要高些，如下：

let arr = [1,2,3,4,5];
arr.length = 0;
console.log(arr); // []

其实我们使用length属性就是可以随意的对数组的长度进行操控，例如：

let arr = [1,2,3,4,5];
arr.length = 3;
console.log(arr); // [1,2,3]

4-2-2 数组相关方法

1. 添加删除方法

数组可以表现得像栈一样。

栈是一种 LIFO（Last-In-First-Out）数据结构，这种数据结构的特点是后进先出。

JavaScript 中专门提供了push()和pop()方法，用来实现类似栈的行为。

let arr = [];
let i = arr.push("red","blue");
console.log(arr); // [ 'red', 'blue' ]
console.log(i); // 2

let j = arr.pop();
console.log(arr); // [ 'red' ]
console.log(j); // blue

注意push()方法推入元素的时候是从右往左边推入的，如下：

let arr = [];
arr.push("red","blue","pink");
console.log(arr);
// 只有一个入口
//  -----------------
// | red  blue  pink
//  -----------------

队列方法的特点是先进先出 FIFO（First-In-First-Out），因为有两个出口。

在 JavaScript 中提供了shift()方法，该方法可以去除数组中第一个元素并且返回该元素。

利用shift()和push()方法就可以实现从右往左的队列。

// 从右往左的队列
let arr = [];
arr.push("red","green","pink");
let item = arr.shift();
console.log(item); // red
console.log(arr); // [ 'green', 'pink' ]

如果要实现从左往右的队列，可以使用unshift()方法和pop()方法的配合。unshift()方法的作用是在数组开头推入一个元素

// 从左往右的队列
let arr = [];
arr.unshift("red","green","pink");
let item = arr.pop();
console.log(item); // pink
console.log(arr); // [ 'red', 'green' ]

总结：

push()和pop()可以算是一组方法，作用分别是在数组尾部推入和弹出元素。unshift()和shift()也可以算是一组方法，作用分别是在数组头部推入和弹出元素。

注：推入的时候可以一次性推入多个元素，返回的是新数组的长度。弹出的时候一次只能弹出一个元素，返回的是弹出的那个元素。

2. 操作方法

操作方法里面介绍3个操作方法，分别是concat()，slice()和splice()

concat()方法是先创建当前数组的一个副本，然后将接收到的参数添加到副本的末尾，最后返回新构建的数组，而原本的数组不会变化。

let arr = [1,2,3];
let arr2 = arr.concat("red","blue");
console.log(arr);//[ 1, 2, 3 ]
console.log(arr2);//[ 1, 2, 3, 'red', 'blue' ]

slice()方法可以接收一个或者两个参数，代表返回项的起始和结束位置。

1 个参数：那就代表起始位置，返回从指定的起始位置到数组末尾的所有项目
2 个参数：那就代表从指定的起始位置到指定的末尾位置之间的项，但是不包括结束位置的项目。

注意：slice()方法不会影响原始数组

let arr = [1,2,3,4,5,6,7,8,9,10];
// 一个参数
let i = arr.slice(3);
console.log(i); // [ 4, 5, 6, 7, 8, 9, 10 ]
console.log(arr); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
// 两个参数
let j = arr.slice(2,6);
console.log(j); // [ 3, 4, 5, 6 ]
console.log(arr); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

如果传入的是负数，则用数组长度加上该数来确定相应的位置

let arr = [1,2,3,4,5,6,7,8,9,10];
// 一个参数
let i = arr.slice(-3);// 等价于slice(7)
console.log(i); // [ 8, 9, 10 ]
// 两个参数
let j = arr.slice(-6,-2); // 等价于slice(4,8)
console.log(j); // [ 5, 6, 7, 8 ]
// 不满足条件返回空数组
let k = arr.slice(-2,-6); // 等价于slice(8,4)
console.log(k); // []

splice()这个方法非常的厉害，可以实现对数组的 3 种类型的操作：删除，插入和替换，相当于是增删改操作都可以用这个方法来实现。

删除：可以删除任意数量的元素，只需要指定 2 个参数：要参数的第一项位置和要删除的项数。

let arr = [1,2,3,4,5,6,7,8,9,10];
// 从下标为3的元素开始删除，删除5个元素
// 将删除的元素返回给i
let i = arr.splice(3,5);
console.log(i); // [ 4, 5, 6, 7, 8 ]
console.log(arr); // [ 1, 2, 3, 9, 10 ]

插入：可以向任意位置插入任意数量的元素。只需要提供 3 个参数：起始位置，0（要删除的项目），要插入的项目。

let arr = [1,2,3,4,5,6,7,8,9,10];
// 从下标为3的元素之前开始插入
let i = arr.splice(3,0,"red","blue");
console.log(i); // []
console.log(arr);
// [ 1, 2, 3, 'red', 'blue', 4, 5, 6, 7, 8, 9, 10 ]

替换：替换的原理在于插入的时候同时进行删除，这样就实现了替换功能。

let arr = [1,2,3,4,5,6,7,8,9,10];
// 从下标为3的元素之前开始插入
// 插入多少，刚好就删除多少
let i = arr.splice(3,2,"red","blue");
console.log(i); // [ 4, 5 ]
console.log(arr);
// [ 1, 2, 3, 'red', 'blue', 6, 7, 8, 9, 10 ]

数组和字符串相互转换：join() 和 split()

join()是将数组转为字符串，可以传入分隔符作为参数。

let arr = [1,2,3];
let str = arr.join("");
console.log(str); // 123
let str2 = arr.join(",");
console.log(str2); // 1,2,3

split()是将字符串转为数组，传入参数指明以什么作为分隔符。

let str = "Hello";
let arr = str.split("");
console.log(arr); // [ 'H', 'e', 'l', 'l', 'o' ]
let arr2 = str.split("l");
console.log(arr2); // [ 'He', '', 'o' ]

3. 数组重排序方法

重排序涉及到两个方法：reverse()和sort()

reverse()用于反转数组项的顺序，注意使用该方法时会改变原来数组的顺序，而不是返回一个副本。

let arr = [1,2,3,4,5];
console.log(arr.reverse()); // [ 5, 4, 3, 2, 1 ]
console.log(arr); // [ 5, 4, 3, 2, 1 ]

sort()是按照升序排列数组每一项。

let arr = [0,12,3,7,-12,23];
console.log(arr.sort());
// [ -12, 0, 12, 23, 3, 7 ]

可以看到，我们调用sort()方法以后排序并没有正确的按照升序来进行排序。

原因在于sort()方法排序时首先会调用每个元素的toString()转型方法，然后比较得到的字符串。即使每一项都是数值，sort()方法比较的也是字符串。

解决方法：sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个数的前面，返回一个负数，如果两个参数相等，返回 0，如果第一个参数应该位于第二个数的后面，返回一个正数。

let arr = [0,12,3,7,-12,23];
console.log(arr.sort(function(a,b){
    if(a < b){
        return -1;
    }else if(a > b){
        return 1;
    }else{
        return 0;
    }
}));

如果是要进行降序排列，只需要将返回值进行修改即可。

let arr = [0,12,3,7,-12,23];
console.log(arr.sort(function(a,b){
    if(a < b){
        return 1;
    }else if(a > b){
        return -1;
    }else{
        return 0;
    }
}));

事实上我们的比较函数还有一种更加简单的书写方法，如下：

let arr = [0,12,3,7,-12,23];
console.log(arr.sort(function(a,b){
    return a - b;
    // 降序就返回 b - a
}));

最后需要注意的是，reverse()和sort()方法，返回值是经过排序之后的数组。

4. 位置方法

JavaScript 还为数组提供了两个位置方法：indexOf()和lastIndexOf()

这两个方法都接收两个参数：要查找的项目和查找的起点位置索引。区别在于一个是从数组开头开始找，一个是从数组末尾开始找。如果没找到就返回 -1。

let arr = ["H","e","l","l","o"];
console.log(arr.indexOf("l")); // 2
console.log(arr.lastIndexOf("l")); // 3
console.log(arr.indexOf("z")); // -1

还需要注意的是，这两个方法进行查找时使用的是全等进行比较。

let arr = ["1","2","3"];
console.log(arr.indexOf(1)); // -1

includes()用于查看数组里面是否包含某个元素，包含返回 true，否则返回 false。

let arr = ["1","2","3"];
console.log(arr.includes(2)); // flase
console.log(arr.includes("2")); // true
console.log(arr.includes(7)); // false

Mr.Yan