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

目录

数组

通过构造函数的三种方法

字面量创建数组方式

访问数组

遍历数组的方法

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

 操作数组对象的方法 

删除和添加

delete与Vue.delete区别

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

数组去重

indexOf查找

indexOf方法有两个缺点:

indexOf去重

includes查找

 filter()过滤去重 

filter实现模糊搜索两种方式

includes方式

indexOf方式

多重条件过滤

set集合去重

冒泡排序(面试题)

sort() 排序函数()

运用sort() 给对象排序 

​编辑

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

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

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

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

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

前端物理分页案例:

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

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

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

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

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

Array.from转换成数组方法

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>

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>

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值