javascript数组——新建数组、访问数组、遍历数组的方法、数组对象的方法、冒泡排序算法、json的正反序列化

是可以在内存中连续存储多个元素的结构

数组的下标索引从0开始，通过length可获取数组的总长度。取值范围 [0 , myarr.length-1]

总结：
1.数组是一个对象
2.是一种数据存储形式
3.数组元素是可以被索引的
4.数组中元素的下标是从0开始的，我们可以通过下标来访问数组中的元素
5.数组可以存储任何形式的数据，包括数组

通过构造函数的三种方法

例1：
var myarr= new Array()
myarr[0]=10;
myarr[2]="hello";
例2：
var myarr= new Array(10，"hello")(长度为2 ，)
例3：
var myarr= new Array(10)
(创建一个长度为10的数组每个元素都为空  只有一个元素 且为数字才可用)

字面量创建数组方式

例1：
var myarr= []
例2：
var myarr=[10,"hello"]

访问数组

索引（下标）：用来访问数组元素的序号（数组下标是从0开始的）

数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过" 数组名[索引] "的形式来获取数组中的元素。（若访问的索引号超出现有索引范围，则返回undefined）
var shuzu = ["小高","小魏","小周","小范"];//数组索引号是从0开始
console.log(shuzu[1]);//我们现在访问的是数组中"小魏"这个元素，索引号为1
增加、更新数组元素、追加数组：数组名[索引号]=值；

使用数组元素为变量赋值：变量名=数组名[索引号];
var arr=[1,2,3];
//通过数组下标来更新数组元素
arr[2]="three";
console.log(arr)；//返回值[1, 2, "three"]
arr[3]="four";
console.log(arr);//返回值[1, 2, "three", "four"]

遍历数组的方法

遍历：遍历就是把数组中的元素从头到尾都访问一次

map映射出的新数组为深拷贝(所以拷贝数组可以直接使用map，而不用再序列化去拷贝赋值数组了)

for... of 注意事项：for of 无法便利对象、数组新追加属性无法输出、且输出值为数组每个元素，以上3点与for in不同。

1、for循环
   for(var i=0; i < 数组名.length; i++){
          console.log(arr[i]);//arr[i]表示数组元素  i表示索引号(下标)
   }
2、for…in 语句格式：
   for(var i in 数组名){
          循环体语句
         console.log(i); // 数组索引
         console.log(数组名[i]);//数组里的每个元素
    }
3、for…of 语句格式：
   for(var item of 数组名){
          循环体语句
         console.log(item); // 数组每个元素
    }
4、forEach方法
      数组名.forEach(function (item, i, arr) {
        console.log(item); //遍历数组的每一个元素
        console.log(i); //当前遍历元素的索引
        console.log(arr); //数组
      });
5、map方法
    映射  一一对应
    var a = 数组名.map(function (item, i, arr) {
         console.log(item); //遍历数组的每一个元素
         console.log(i);//当前元素的索引
         console.log(arr);//数组
    }
map映射出的新数组为深拷贝(所以拷贝数组可以直接使用map，而不用再序列化去拷贝赋值了)
let arr = [1,2,3,4,5];
let newArr = arr.map(i => i);
 
console.log(newArr);   // [1,2,3,4,5]
console.log(arr == newArr); // false

操作数组对象的方法

删除和添加

arrObj.pop()删除数组的最后一个元素返回值：删除的元素

arrObj.shift()删除数组的第一个元素返回值：删除的元素

arrObj.push(元素1，元素2，...)在数组的尾部添加一个或多个元素

arrObj.unshift(元素1，元素2，...)在数组的头部添加一个或多个元素
     数组增删
        var uname = ["小高","小魏","小刘","小张","小程"];
        console.log(uname.pop());//尾部删除
        console.log(uname);
        console.log(uname.shift());//头部删除
        console.log(uname);
        console.log(uname.push("小周","小范"));//尾部添加
        console.log(uname);
        console.log(uname.unshift("小周","小范"));//尾部添加
        console.log(uname);

delete与Vue.delete区别

delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变,length长度不会改变。

Vue.delete 直接删除了数组改变了数组的键值。 length长度改变了

var a=[1,2,3,4] 
var obj=[1,2,3,4] 
delete a[1] 
console.log(a) 
vue.delete(obj,1) 
console.log(obj);

输出结果

数组名.splice(参数1，参数2，参数3) 方法向/从数组中添加/删除项目

参数1：必需从哪个下标开始删除

参数2：必需删除的个数

参数3 ：可选增加的元素，多个元素之间用逗号隔开

返回值：被删除的元素组成的数组

数组去重

indexOf查找

indexOf(item,i) 方法可返回数组中某个指定的元素位置，如果没有搜索到则返回 -1。

item:查找的元素
i:第i项开始查找，默认为0

indexOf方法有两个缺点：

缺点描述 HTML
一是不够语义化 '它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于 -1 ，表达起来不够直观。 代码如下
二是，它内部使用严格相当运算符（ === ）进行判断 这会导致对NaN的误判 代码如下
[NaN].indexOf(NaN)// -1
 
includes使用的是不一样的判断算法，就没有这个问题。
 
[NaN].includes(NaN)// true
indexOf去重
未封装版本：

        var arr4= [1,3,6,4,5,8,2,1,4];
        var arr = [];
        for(var i = 0; i<arr4.length;i++){
            if(arr.indexOf(arr4[i])==-1){
                arr.push(arr4[i])
            }
        }
        console.log(arr);

去重函数封装案例：
<script>
        // 数组去重 函数封装
        function quchong(xingcan) {
            var b = [];
            for (var i = 0; i < xingcan.length; i++) {//数组元素遍历
                var c = xingcan[i];
                if (b.indexOf(c) === -1) {//判断是否含有此元素
                    b.push(c);//若无此元素则添加
                }
            }
            return b;//返回去重后的数组
        }
        var a = ["小高", "小高", "小魏", "小张", "小刘", "小张", "小程","小范","小周"];
        console.log("原数组为：", a);
        console.log("去重后数组为：", quchong(a));
        quchong(a);
 </script>

缺点	描述	HTML
一是不够语义化	`'它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于 -1 ，表达起来不够直观。`	代码如下
二是，它内部使用严格相当运算符（ === ）进行判断	`这会导致对NaN的误判`	代码如下

includes查找

includes()方法，在字符串中使用时，相当于indexOf()，查询成功返回true，失败返回false；

1.Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。该方法属于 ES7 ，但 Babel 转码器已经支持
[1, 2, 3].includes(2); // true
 
[1, 2, 3].includes(4); // false
 
[1, 2, NaN].includes(NaN); // true
2.该方法的第二个参数表示搜索的起始位置，默认为 0 。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为 -4 ，但数组长度为 3 ），则会重置为从 0 开始。
[1, 2, 3].includes(3, 3); // false
 
[1, 2, 3].includes(3, -1); // true

filter()过滤去重

        // 数组过滤 filter()
        var arr4= [1,3,6,4,5,8,2,1,4];
        var arr = arr4.filter(function(item,i,arr){
            return arr4.indexOf(item) == i;
        })
        // console.log(arr); // [1, 3, 6, 4, 5, 8, 2]

filter实现模糊搜索两种方式

includes方式

this.listCrossing.push(...this.allListCrossing.filter(item => {
          return item.name.includes(value);
        }));

indexOf方式

let arr = 被查找数组.filter(item => {
              return item.name.indexOf(this.name) != -1;
            });

多重条件过滤

    思路：根据传入形参数据data逐级判断是否需要筛选
    以下条件为&&关系，所以下一项应为上一项处理后的数据，依次类推
    find(data) {
      if (this.listQuery.areaNo != undefined) { // 路口id
        data = data.filter(item => item.crossingId == this.listQuery.areaNo);
      }
      if (this.listQuery.juncNo != undefined) { // 检测器名称
        data = data.filter(item => item.deviceName.indexOf(this.listQuery.juncNo) != -1);
      }
      if (this.listQuery.name != undefined) { // 路口名称
        data = data.filter(item => item.name.indexOf(this.listQuery.name) != -1);
      }
      this.list = data; // 赋值结果
      console.log(this.list);
    },

set集合去重

// set集合去重
var arr4= [1,3,6,4,5,8,2,1,4];
var arr = Array.from(new Set(arr4));
console.log(arr);

冒泡排序（面试题）

冒泡排序算法的原理如下：

1、比较相邻的元素。如果第一个比第二个大，就交换他们两个。

2、对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。

3、针对所有的元素重复以上的步骤，除了最后一个。

4、持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。
//此处为升序
        var a = [5,2,3,4,4,6,9,7,8];
        for(var i = 0; i < a.length - 1; i++) {//  i表示比较趟数
            for(var j = 0; j < a.length - 1 - i; j++) {//  j表示比较次数 
                if(a[j] > a[j + 1]) {// 若要更改为降序只需更改条件中的>运算符即可
                    var b = a[j];
                    a[j] = a[j + 1];
                    a[j + 1] = b;
                }
            }
        }
        console.log(a);
//比较趟数是： 固定的数组长度-1
//每一轮的比较次数是不同的，比较次数为 固定的数组长度-1后再减当前的趟数：固定的数组长度-1-当前趟数

sort() 排序函数（）

参数：可选若省略，按字符编码升序排序。该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

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

若 a 等于 b，则返回 0。

若 a 大于 b，则返回一个大于 0 的值。
 升降序函数
        var res = [100, 67, 89, 88, 59, 79];
        res.sort(function (x, y) {
            // return x-y;//升序
            return y - x; //降序
        });
        console.log("排序后的数组", res);

运用sort() 给对象排序

<body>
    <h1>对象排序</h1>
</body>
<script>
    // 此方法也可将对象进行排序
    var Objs= [{a:3},{a:6},{a:4},{a:5},{a:2},{a:7},{a:8}]
    Objs.sort(function(x,y){
        return x.a-y.a;//重点：属性相减
    })
    console.log("结果数组", Objs)
</script>
</html>

findIndex 返回满足条件的第一个元素的索引

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
findIndex((item, index, array) => { /* … */ } )
参数： item当前元素，index当前元素索引，array当前调用数组
var arr = ['a','b','c','d'];
   var flag = arr.findIndex(item => {
        return item === 'c';
    })
    console.log(flag) // 得到： 2

reverse()颠倒数组元素的顺序

//reverse() 方法用于颠倒数组中元素的顺序。

var arr = [10, 7, 3, "hello", 9, true, 8];

    // console.log(arr.reverse());

    arr.reverse();

    console.log(arr);

concat() 方法用于连接两个或多个数组

concat() 方法把数组中的所有元素放入一个字符串，返回值为字符串

数组名.concat(参数)

参数：必需。待连接的数组或元素，多个数组或元素之间用逗号隔开。

// 返回值：连接后的数组
    var arr = [10, 7, 3, "hello", 9, true, 8];
    var arr2 = ["abc", 100];
    var arr3 = [false, 1, 9];
    console.log(arr.concat(arr2, arr3, "welcome"));
    //或者var a = arr.concat(arr2, arr3, "welcome")
    //console.log(a)

join() 方法将数组中的所有元素转换一个字符串

join() 方法用于把数组中的所有元素分割后转换一个字符串。

元素是通过指定的分隔符进行分隔的。

若括号里面为（空），字符串之间默认用逗号；若为（"空格"）,字符串之间用空格隔开；若为（""）,字符串之间紧挨着
    var arr = [10, 7, 3, "hello", 9, true, 8];
    console.log(arr.join()); //10,7,3,hello,9,true,8
    console.log(arr.join("-")); //10-7-3-hello-9-true-8
    console.log(arr.join(" ")); //10 7 3 hello 9 true 8
    console.log(arr.join("")); //1073hello9true8

数组名.slice(参数1，参数2) 截取数组

参数1 必选开始截取的位置（包含）

参数2 可选结束截取的位置（不包含），若省略截取到尾部

注意：包含开始不包含结束

前端物理分页案例：
组件库分页器
<a-pagination
 simple
 :current="pageNum"
 :page-size="pageSize"
 :total="rankCrossData.length"
 @change="changePage"
>
</a-pagination>

方法
changePage(index) {
      this.pageNum = index;
      this.rankCrossItem = this.rankCrossData.slice((this.pageNum - 1) * 8, this.pageNum * 8);
    },

数组名.filter(function (形参1，形参2，形参3) {}) 过滤函数

var 新数组名 =数组名.filter((item,index,list)=>{}）

item,index,list 三个参数值

参数1：遍历出来的每一个元素

参数2：遍历出来的每一个元素对应的索引号（下标）

参数3：数组

有返回值如果返回值是true,把满足条件的item返回并且返回的结果为一个数组
条件：筛选出大于等于60的数字
var arr = [70,59,80,100,50];
var a = arr.filter(function(item,i,a) {
           return item >= 60;
    })  
    console.log(a);

数组名.reduce( 参数1，参数2，参数3，参数4)迭代，累加器函数

var （接受结果的）变量名 =数组名.reduce((total,item,index,list)=>{},初始值）

参数1 ：必需参数 total,初始值，或计算后的数值

参数2：遍历出来的每一个元素

参数3：遍历出来的每一个元素对应的索引号（下标）

参数4：数组

有返回值把返回值赋值给total（初始值）
var score =[50,1,24,45,76,86,34,80,60]
    var a =score.reduce(function(total,item){
        return total+item
    },初始值)//（此初始值可以设置，一般设置为0）
    console.log(a)

数组名.every 检测数组所有元素是否都符合指定条件

数组名.every用于检测数组所有元素是否都符合指定条件（通过函数提供）
   如果所有元素都满足条件，则返回 true
   如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测
   返回值：布尔值
arrObj.every(function(item,i,arr){
    return 条件;
});
全选框中单个选项全部选中，全选框也默认选中就使用了此函数
var a = bl.every(function (item) {
                    return item.checked === true;
                });
                qx.checked = a;

数组名.some 检测数组所有元素有一项满足条件

数组名.some用于检测数组所有元素是否有一个符合指定条件（通过函数提供）
   如果有一个元素都满足条件，则返回 true
   如果数组中检测到有一个元素满足，则整个表达式返回 true ，且剩余的元素不会再进行检测
   返回值：布尔值
arrObj.some(function(item,i,arr){
    return 条件;
});

Array.isArray判断参数是否是数组

Array.isArray(参数) 判断参数是否是数组
如果是数组，返回true，否则返回false
console.log(Array.isArray(对象名)); 

Array.from转换成数组方法

Array.from(参数1，参数2)
将可迭代对象转换为数组

参数1：必需要转换为数组的对象
参数2：可选数组中的每个元素都会执行此函数
返回值：数组
var 新数组名 = Array.from(要转换的对象); 

json的正反序列化

json含义：（JavaScript Object Notation）javascript的对象表示法
字符串转换为json数据反序列化

此方法一般用于深拷贝
JSON.parse(str)
举例
var arr = JSON.parse(要转换的对象name);
把json数据转换为字符串序列化
JSON.stringify(obj) 

箭头函数简介

箭头函数作用是使函数书写更加简洁方便，让代码更简洁。

主要操作：

在()与{}之间添加=>即可省略function
若函数中有return,则可将{}与return都省略直接在后方写返回值或式子
以过滤函数举例 数组名.filter(参数1，参数2，参数3)
var arr = [70,59,80,100,50];
        var a = arr.filter(function(item,i,a) {
            return item >= 60;
        })  
        console.log(a);
        // 改为箭头函数
        var a =a.filter((item)=> item >= 60);//在()与{}之间添加=>即可省略function
        console.log(a);//若函数中有return,则可将{}与return都省略直接在后方写返回值或式子

常用数组方法练习

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>上机题</title>
    <style type="text/css">
        /* 三角形 */
        .box {
           width:0;
           height: 0;
           border: 50px solid #fff;
           border-bottom:50px solid #ccc;
        }
    </style>
</head>

<body>
    <!-- 三角形 -->
    <div class="box"></div>
<script>
        var arr1 = [1, 3, 6, 4, 5, 8];
        var arr2 = ["t", "k", "y"];

        数组常用方法

        合并数组 concat()
        var arr = arr1.concat(arr2) // 原数组不变返回新数组[1, 3, 6, 4, 5, 8, 't', 'k', 'y']

        查找数组元素 indexOf()
        var arr = arr2.indexOf("t") // 0 查找不到返回-1

        数组元素转为字符串 join()
        var arr = arr1.join(".") // 括号内为分隔符 1.3.6.4.5.8

        删除数组最后一个元素 pop()
        var arr = arr2.pop() // 返回删除元素 y
        console.log(arr2); //改变原数组 ["t","k"];

        删除数组第一个元素 shift()
        var arr = arr2.shift() // 返回删除元素 t
        console.log(arr2); // 改变原数组["k","y"]

        添加一或多个元素到数组头部 unshift
        var arr = arr1.unshift(arr2) // 返回数组长度7
        console.log(arr1); // 改变原数组[["t","k","y"],1,3,6,4,5,8]

        添加一户或多元素到数组尾部 push
        var arr = arr1.push(arr2); // 返回数组长度7
        console.log(arr1); // 改变原数组[1,3,6,4,5,8,["t","k","y"]]

        截取数组或字符串 splice()
        var arr = arr2.splice(0,1); // t 参数二不写则默认截取到最后 改变原数组

        数组或对象(属性相减)排序 sort()
        var arr = arr1.sort(function(x,y){
            return x-y; //升序 改变原数组[1, 3, 4, 5, 6, 8]
        })

        颠倒数组顺序 reverse()
        var arr = arr2.reverse(); // 改变原数组 ['y', 'k', 't']


        遍历数组方法

        判断数组所有元素是否都满足条件 every()
        var arr = arr1.every(function(item,i,arr){
            return item > 0; //所有元素都满足 true
        })

        过滤函数 filter()
        var arr = arr1.filter(function(item,i,arr){
            return item>4; // 满足条件的 [6, 5, 8]
        })

        数组过滤 filter()
        var arr4= [1,3,6,4,5,8,2,1,4];
        var arr = arr4.filter(function(item,i,arr){
            return arr4.indexOf(item) == i;
        })
        console.log(arr); // [1, 3, 6, 4, 5, 8, 2]

        set集合去重
        var arr4= [1,3,6,4,5,8,2,1,4];
        var arr = new Set(arr4)
        console.log(arr);

        纯indexOf查找去重
        var arr4= [1,3,6,4,5,8,2,1,4];
        var arr =[];
        for(var i =0;i<arr4.length;i++){
            if(arr.indexOf(arr4[i])==-1){
                arr.push(arr4[i])
            }
        }
        console.log(arr);
        console.log(arr);

        sort()排序
        var b = arr1.sort(function(x,y){
            return x-y;
        })
        console.log(b);

        冒泡排序
        for(var i = 0; i<arr1.length-1;i++){
            for(var j =0;j<arr1.length-1-i;j++){
                if(arr1[j]>arr1[j+1]){
                    var b = arr1[j];
                    arr1[j]= arr1[j+1];
                    arr1[j+1] = b;
                }
            }
        }
        console.log(arr1);

        能遍历数组的方法

        所有元素均符合条件 every()
        var b = arr1.every(function(item,i,arr1){
            return item > 0; // 返回true
        })

        至少有一个元素满足条件 some()
        var b = arr1.some(function (item, i, arr1) {
            return item < 0; // 返回false
        })

        返回满足条件的元素 filter()
        var b = arr1.filter(function(item,i,arr1){
            return item > 3; //[6, 4, 5, 8]
        })

        console.log(b);

        数组遍历专属方法 forEach()
        arr1.forEach(function (item, i, arr1) {
            return console.log(item); // 136458
        })
        箭头函数写法
        arr1.forEach((item, i, arr1) => console.log(item)) // 136458

        for in 遍历
        for( var i in arr1){
            console.log(arr1[i]); // 136458
        }

        map映射
        arr1.map(function(item,i,arr1){
            console.log(item); // 136458
        })


        乘法表
        document.write("<table>")
        for (var i = 1; i < 10; i++) {
            document.write("<tr>")
            for (var j = 1; j <= i; j++) {
                document.write(`<td style="border:1px solid #ccc">${i}*${j}=${i * j}</td>`)
            }
            document.write("</tr>")
        }
        document.write("</table>")

        // 水平线金字塔
        for (var i = 10; i >= 1; i--) {
            document.write(`<hr style='width:${i * 10}px'/>`)
        }
        for (var i = 1; i < 10; i++) {
            document.write(`<hr style='width:${i * 10}px'/>`)
        }

        // 金字塔五角星
        for (var i = 1; i < 6; i++) {
            document.write("<div style='text-align:center;width:100px;'>")
            for (var j = 1; j <= i; j++) {
                document.write("⭐")
            }
            document.write("</div>")
        }
    </script>
</body>

</html>