这是我参与 8 月更文挑战的第 25 天，活动详情查看： 8月更文挑战

感激相遇你好我是阿ken

作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容：

5.5_数组对象

JavaScript 中的数组对象可以使用 new Array 或字面量“[ ]” 来创建。

5.5.1_数组类型检测

在开发中，有时候需要检测变量的类型是否为数组。~~例如，在两数中。要求华人的参数必须是一一个数组，不能传入其他类型的值，否则会出错，所以这时候可以在函数中检测参数的类型是否为数组。~~ 数组类型检测有两种常用的方式，分别是使用 instanceof 运算符和使用Array.isArray() 方法。

示例代码如下：

var arr = [];
var obj = { };
// 第1种方式
console.log ( arr instanceof Array );
// 输出结果:true
console.log ( obj instanceof Array );
// 输出结果:false
//第2种方式
console.log ( Array.isArray(arr) );
// 输出结果:true
console.log ( Array.isArray(obj) );
// 输出结果:false

上述代码中，如果检测结果为true，表示给定的变量是一个数组，如果检测结果为false，则表示给定的变量不是数组。

5.5.2_添加或删除数组元素

JavaScript 数组对象提供了添加或删除元素的方法，可以实现在在数组的末尾或开头添加新的数组元素，或在数组的末尾或开头移出数组元素。

添加或删除数组元素：

方法名	功能描述	返回值
push( 参数1… )	数组末尾添加一个或多个元素，会修改原数组	返回数组的新长度
unshift( 参数1… )	数组开头添加一个或多个元素，会修改原数组	返回数组的新长度
pop()	删除数组的最后一个元素，若是空数组则返回 undefined，会修改原数组	返回删除的元素的值
shift()	删除数组的第一个元素，若是空数组则返回undefined，会修改原数组	返回第一个元素的值

需要注意的是，push() 和 unshift() 方法的返回值是新数组的长度，而 pop()和 shift()方法返回的是移出的数组元素。

案例：演示

<script>
var arr = ['Rose', 'Lily'];
console.log('原数组:'+ arr);
var last = arr.pop();
console.log('在末尾移出元素:'+ last + '- 移出后数组:' + arr);
var len = arr.push('Tulip', 'Jasmine');
console.log('在末尾添加元素后长度变为:'+ len + '- 添加后数组:'+ arr);
var first = arr.shift();
console.log('在开头移出元素:'+ first + ' - 移出后数组:' + arr);
len = arr.unshift('Balsam', 'sunflower');
console.log('在开头添加元素后长度变为:' + len + '- 添加后数组:' + arr);
</script>

在这里插入图片描述

从上述代码可以看出，push() 和 unshift() 方法可以为指定数组在末尾或开头添加一个或多个元素，而 pop() 和 shift() 方法则只能移出并返回指定数组在未尾或开头的一个元素。

5.5.3_[案例] 筛选数组

案例：要求在包含工资的数组中，剔除工资达到2000或以上的数据，把小于2000的数重新放到创新的数组里面。其中数组为[1500，1200，2000， 2100， 1800]。

var arr = (1500, 1200, 2000, 2100, 1800];
var newArr = [];

for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
newArr.push(arr[1);
// 相当于: newArr (newArr.length] = arr[i];
}
}

console.log(newArr);
// 输出结果: (3) [1500, 1200, 1800]

上述代码中，第 1 行代码为原数组 arr。第 2 行代码定义了新数组 newArr，存放工资低于 2000 的数据。第 3 行代码在 for 循环语句中通过 if 语句进行判断，如果符合要求则使用 push() 方法，存储到新数组 newArr 中。

5.5.4_数组排序

数组排序可以实现数组元素排序或者颠倒数组元素的顺序等。

排序方法：

方法名	功能描述
reverse()	颠倒数组中元素的位置，该方法会改变原数组，返回新数组
sort()	对数组的元素进行排序，该方法会改变原数组，返回新数组

需要注意的是，reverse() 和 sort() 方法的返回值是新数组的长度。

//反转数组
var arr = ['red', 'green', 'blue'];
arr.reverse();
console.log(arr);//输出结果:(3) ["blue", "green","red"]
//上述演示了 reverse() 方法的使用，实现数组元素的反转。
//数组排序
var arr1 = [13, 4, 77, 1, 7];
arrl.sort(function(a, b) 
return b - a;//按降序的顺序排列
});
console.log(arr1);//输出结果: (5) [77,13,7,4,1]
//上述演示了 sort() 方法的使用，实现数组元素从大到小进行排序。

在这里插入图片描述

return a - b;// 按升序的顺序排列

在这里插入图片描述

5.5.5_数组索引

在开发中，若要查找指定的元素在数组中的位置，则可以利用 Array 对象提供的检索方法。

检索方法：

方法名	功能描述
indexOf()	返回在数组中可以找到到给定值的第一个索引，如果不存在，则返回-1
lastIndexOf()	返回指定元素在数组中的最后一个的索引，如果不存在则返回-1

上述方法中，默认都是从指定数组索引的位置开始检索，并且检索方式与运算符 " === " 相同，即只有全等时才会返回比较成功的结果。

案例：演示，

var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log( arr.indexOf('blue') );    //输出结果:2
console.log( arr.lastIndexOf('blue') );//输出结果:4

上述代码中，lastIndexOf() 方法用于在数组中从指定下标位置检索到最后一个给定值的下标。与 indexOf() 检索方式不同的是，lastIndexOf() 方法默认逆向检索，即从数组的末尾向数组的开头检索。

5.5.6_[案例] 数组去除重复元素

接下来我们通过一个案例来演示数组索引的使用。要求在一组数据中，去除重复的元素。其中数组为 [‘blue’, ‘green’, ‘blue’] 。示例代码如下。

function unique(arr) {
var newArr = [];
// 用来存放数组中不重复的元素

// 遍历一遍数组，如果数组内某一元素重复出现则放入新数组中
for(var i = 0; i < arr.length; i++) {
if(newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i]);
}
}

return newArr;
}

var demo = unique(['blue', 'green', 'blue']);
console.log(demo);
// 输出结果: (4) ["blue","green"]

出现过，那么就添加到新数组中，否则不添加。其中第4行代码如果该元素判断如果返回值为-1就说明新数组里面没有该元素。

3利用新数组的在新数组中没有

5.5.7_数组转换为字符串

若需要将数组转换为字符串，可以利用数组对象的 join() 和 toString() 方法实现。

数组转换为字符串：

方法名称	功能描述
toString()	把数组转换为字符串，逗号分隔每一项
join (’ 分隔符 ')	将数组的所有元素连接到一个字符串中

案例：演示，

// 使用toString()
var arr = ['a', 'b', 'c'];
console.log ( arr.toString() );
// 输出结果:a,b,c

// 使用join()
console.log ( arr.join() );
// 输出结果:a,b,c
console.log ( arr.join('') );
// 输出结果:abc
console.log ( arr.join('-') );
// 输出结果:a-b-c

在这里插入图片描述

从上述代码可知，join() 和 toString() 方法可将多维数组转为字符串，默认情况下使用逗号连接。不同的是，join() 方法可以指定连接数组元素的符号。另外，当数组元素为 undefined、null 或空数组时，对应的元素会被转换为空字符串。

5.5.8_其他方法

JavaScript 还提供了很多其他也比较常用的数组方法。例如，填充数组、连接数组、截取数组元素等。

其他方法：

方法名	功能描述
fill()	用一个固定值填充数组中指定下标范围内的全部元素
splice()	数组删除，参数为 splice(第几个开始，要删除个数)，返回被删除项目的新数组
slice()	数组截取，参数为 slice(begin, end)，返回被截取项目的新数组
concat()	连接两个或多个数组，不影响原数组，返回一个新数组

slice() 和 concat() 方法在执行后返回一个新的数组，不会对原数组产生影响，剩余的方法在执行后皆会对原数组产生影响。

案例：splice() 方法在指定位置添加或删除数组元素，

var arr = ['sky', 'wind', 'snow', 'sun'];
// 从索引为2的位置开始，删除2个元索
arr.splice(2, 2);
console.log (arr); 
// 输出结果: (2) ["sky", "wind"]

// 从索引为1的位置开始，删除1个元素后，再添加 snow 元素
arr.splice(1, 1, 'snow');
// 输出结果: (2) ["sky", "snow"]
console.log(arr);

// 从索引为1的位置开始，添加数组元素
arr.splice(1.0, 'hail', 'sun');
console.log(arr);
// 输出结果: (4) ["sky", "hail", "sun", "snow"]

在上述代码中，splice() 方法的第 1 个参数用于指定添加或删除的下标位置；第 2 个参数用于从指定下标位置开始，删除数组元素的个数，将其设置为0，则表示该方法只添加元素；剩余的参数表示要添加的数组元素，若省略则表示删除元素。

今日入门学习暂时告一段落
Peace

🌊🌈往期回顾：

【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十八）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十九）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（二十）

🌊🌈关于后记：

感谢阅读，希望能对你有所帮助博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我感谢每一位小伙伴不吝赐教

原创不易，「点赞」+「关注」 谢谢支持❤

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（十）

🌊🌈关于前言：

🌊🌈关于内容：

5.5_数组对象

5.5.1_数组类型检测

5.5.2_添加或删除数组元素

5.5.3_[案例] 筛选数组

5.5.4_数组排序

5.5.5_数组索引

5.5.6_[案例] 数组去除重复元素

5.5.7_数组转换为字符串

5.5.8_其他方法

🌊🌈往期回顾：

🌊🌈关于后记：