javascript 内置对象数组总结及案例

📋 个人简介

• 💖 作者简介：大家好，我是阿牛，全栈领域新星创作者。😜
• 📝 个人主页：馆主阿牛🔥
• 🎉 支持我：点赞👍+收藏⭐️+留言📝
• 📣 系列专栏：硬泡 javascript🍁
• 💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥
  

---

上期传送门：
👉四行js代码让别人无法复制你的网站文字，八行程序员都哭了
👉这些前端案例看似很简单（内附动图）
👉前端实现tab栏切换，这么常见的案例你学会了吗？

---

前言

今天总结javascript中的数组的知识点，并且写一写小案例，很简单的哦！

数组创建的两种方式

• 字面量方式

var arr = [1,2,3];

• new Array()

var arr = new Array(); //创建了一个空的数组
var arr1 = new Array(2);  //这个2表示数组的长度，里面有两个空的数组元素。
var arr2 = new Array(2,3); //等价于[2,3],这样写表示里面有两个元素，是2和3
console.log(arr1);
console.log(arr2);

检测是否为数组的两种方式

• 1.instanceof 运算符，可以用来检测是否为数组。
• 2.Array.isArray(参数)；H5新增的方法，ie9以上支持。

 // 检测是否为数组
        // 1.instanceof 运算符，可以用来检测是否为数组
        var arr = [1,2,3,4];
        var obj = {}
        console.log(arr instanceof Array);
        console.log(obj instanceof Array);
        // 2.Array.isArray(参数)
        console.log(Array.isArray(arr));
        console.log(Array.isArray(obj));

添加数组元素

• push() ：在数组末尾添加一个或多个元素，push完毕之后，返回新数组的长度

	var arr = [1,2,3];
	arr.push(7);
	console.log(arr.push(2,'aniu'));  //返回当前数组长度
	console.log(arr);

• unshift() : 在数组开头添加一个或多个元素，unshift完毕之后，返回新数组的长度

   var arr = [1,2,3];
   arr.unshift('aniu');
   console.log(arr);

删除数组元素

• pop() : 删除数组最后一个元素，返回删除的值。
• shift() : 删除数组第一个元素，返回删除的值。

    var arr = [1,2,3];
    console.log(arr.pop());
    console.log(arr.shift());
    console.log(arr);

数组排序

• 法一：用各种排序算法，这里不再写。
• 法二：用内置的sort()方法，这里写一下sort的用法（不是直接调用sort）

   var arr = [1,2,3,8,9,11,13,23,6];
   arr.sort(function (a,b){
        return a-b;//升序
   });
   console.log(arr);

   arr.sort(function (a,b){
       return b-a;//降序
  });
   console.log(arr);

获取数组元素索引

方法名	说明	返回值
indexOf()	数组中查找给定元素的第一个索引	如果存在返回索引号如果不存在，则返回﹣1。
lastIndexOf()	在数组中的最后一个的索引	如果存在返回索引号如果不存在，则返回﹣1

  var arr = [1,2,3,1];
  console.log(arr.indexOf(1)); // 0
  console.log(arr.indexOf(4)); //-1
  console.log(arr.lastIndexOf(1)); //3

数组转换为字符串

方法名	说明	返回值
toString ()	把数组转换成字符串，逗号分隔每一项	返回一个字符串
join ('分隔符）	方法用于把数组中的所有元素转换为一个字符串。	返回一个字符串

var arr = ['aniu','ai','ni'];
console.log(arr.toString()); //'aniu','ai','ni'
console.log(arr.join('&'));  //'aniu'&'ai'&'ni' 

案例-翻转数组

将数组逆置

     // 翻转数组
        function reverse(arr){
            //检测参数是否为数组
            if (arr instanceof Array){
                var newArr = [];
                for (var i = arr.length - 1;i>=0;i--){
                    newArr [newArr.length] = arr[i];
                }
                return newArr;
            }else{
                return 'error 这个参数要求必须是数组格式[1,2,3]'
            }
          
        }
        console.log(reverse([1,2,3]));

也可直接调用内置的reverse()方法

   var arr = [1,2,3];
   arr.reverse();
   console.log(arr);

案例-数组去重

目标：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重。

核心算法：
1.我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加。
2.我们怎么知道该元素没有存在？利用新数组.indexOf (数组元素)，如果返回是 -1 就说明新数组里面没有该元素。

//数组去重
	function fun(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 = fun(['a','c','f','a','c','g','f','z'])
	console.log(demo);

结语

陆陆续续写了很多前端基础知识和小demo了，这些对初学者都很有用，赶紧关注一手学习吧！这些专栏正在持续更新中。精心打造的软磨硬泡系列哦！

🏰系列专栏
👉软磨 css
👉硬泡 javascript
👉前端实用小demo