javascript--数组

目录

内置对象概述

javascript 中的数组 

数组对象——新建数组

 访问数组

 for...in;for....of;遍历数组

遍历数组新方法 map()  映射

forEach() 遍历

filter 过滤

迭代求和 reduce

数组对象 ——方法

includes() 判断字符串是否包含指定的子字符串

pop() 方法删除数组的最后一个元素

push()  数组的末尾添加元素

concat() 连接两个或多个数组

sort()排序数组

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

splice() 数组中添加/删除项目

数组对象---其他

回顾数组方法

javascript封装函数,调用javascript函数


内置对象概述

JavaScript将一些常用功能预先定义成对象,用户可以直接使用,这种对象就是内置对象 。

对象具有属性和方法,使用对象的属性或方法的格式:
对象名.属性[=值]或 对象名.方法名([参数])

javascript 中的数组 

数组是可以在内存中连续存储多个元素的结构
数组的下标索引从0开始.通过length可获取数组的总长度。

数组的上下界  [0 , myarr.length-1]

数组对象——新建数组

<script>
    //构造函数

    var arr = new Array(); //空数组
    // arr[0] = 100;
    // arr[1] = "hello";
    // arr[3] = false;
    arr[arr.length] = 100;  //arr[0] = 100;

    arr[arr.length] = "hello" //arr[1] = "hello";


    var arr = new Array(100,"hello",true); //空数组

    var arr = new Array(10); //创建一个长度为10的数组
    var arr = new Array("hello"); //创建含有一个元素的数组


    字面量
    var arr = [];  //空数组
</script>

 访问数组

 <script>
    var arr = [10,"hello",false];

    console.log(arr.length);  //数组访问
    console.log(arr);
    console.log(arr[1]);

    for(var i = 0;i<arr.length;i++){
        console.log(arr[i]);   //数组访问
    }
</script>

 for...in;for....of;遍历数组

<script>
     var arr = [10, "hello", false];


     for (var i in arr){    //遍历数组
         console.log(arr[i]);
     }

    for (var val of arr) {    //遍历数组
        console.log(val);
    }

</script>

遍历数组新方法 map()  映射

使用map遍历数组,返回新处理的数组

var arr = [1, 2, 3, 4];
var test2 = arr.map(function(value, index, item) {   

  console.log(value, index, item);   

  return value * value;

});
console.log(test2);// [1, 4, 6, 19]

//映射
<script>
    var arr = [1, 2, 3, 4, 5, 6];
    var res = arr.map(function (v, i, arr) {
        // console.log(v);
        // console.log(i);
        // console.log(arr);
        return v + "world"
    })
    console.log(res);

    var arr = [59, 60, 68, 69, 87, 98];
    var res = arr.map(function (v, i, list) {
        if (v >= 60) {
            return v + "及格"
        } else {
            return v + "不及格"
        }
    })
    console.log(res);
</script>

forEach() 遍历

使用forEach遍历数组,无返回值

var arr = ["a", "b", "c", "d"]; // value 数组中每个值
// index value在数组中对应的下标
// item 数组本身 arr.forEach(function (value, index, item) {

    console.log(value, index, item);

});

<script>
    var arr = [90, 70, 100, "hello"];
    arr.forEach(function (v, i, list) {
        // console.log(v);
        // console.log(i);
       // console.log(list);
         if (v % 2 == 1) {
            return; //利用return 模拟continue的效果
        }
        console.log(v);

    });  //回调函数
    
    //无返回值

    arrObj.forEach(function(v,i,arr){
        v   //当前遍历的每个元素
        i   //当前元素对应的下标(下标就是索引,从0开始)
        arr  //数组本身
    })
</script>

filter 过滤

<script>
    var arr = [59, 60, 68, 69, 87, 98];
    var res = arr.filter(function (v, i, list) {
        // console.log(list);
        return v % 2 === 0;  //找出偶数   返回值,满足条件的所有的值
    });
    console.log(res);


    var arr = [59, 60, 68, 69, 48, 98];   //求和
    var sum = 0;
    var res = arr.filter(function (v, i, ist) {
        sum += v;
    });
    console.log(sum);
</script>

迭代求和 reduce

<script>
    var arr = [100, 58, 95, 98, 45, 85, 68];
    var res = arr.reduce(function (total, v, i, arr) {
        console.log(total);  
        
        return total + v;  //total = total + v   迭代求和

    }, 0);
    console.log(res);
    //把函数里的返回值,作为回调函数的第一个参数的值
    //返回值:常用来迭代求和
    arrObj.reduce(function(total,v,i,arr){
        //total 初始值,或函数的返回值
        //  v  当前遍历的元素
        //  i  当前元素的下标
    }, 参数2);
    // 参数2: 可选 total的初始值  若省略,total的初始值是数组的第一个

//举例
    var arr = [10, 20, 58, 30, 60, 90];
    var res = arr.reduce(function (total, v, i, arr) {
        return total + v;
    }, 0)
    console.log(res);


    var arr = [50, 45, 68, 80, 85, 90];  //及格分求和
    var res = arr.reduce(function (total, v, i, arr) {
        if (v >= 60) {
            total = total + v
        }
        return total;
    }, 0)
    console.log(res);
</script>

数组对象 ——方法

includes() 判断字符串是否包含指定的子字符串

如果找到匹配的字符串则返回 true,否则返回 false。

注意: includes() 方法区分大小写。

<script>
查找字符串是否包含 "Runoob":
var str = "Hello world, welcome to the Runoob。";
var n = str.includes("Runoob");

n 输出结果:
            true 
</script>

pop() 方法删除数组的最后一个元素

pop() 方法用于删除并返回数组的最后一个元素。  
shift()删除数组第一个元素

语法
arrayObject.pop()
pop() 方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。

<script>
    var arr = [45, 58, 98, 97];
    console.log(arr.pop());
    console.log(arr.shift());
    console.log(arr);

    arrOjb.pop() 删除数组里最后一个元素
    arrOjb.shift() 删除数组里第一个元素
    返回值:删除的元素

</script>

push()  数组的末尾添加元素

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

<script>
    arr.push("world",1)
    console.log(arr);
    console.log(arr.unshift("world",1));
    // arr.Ojb.push(元素1,元素2,....) 在元素的尾部添加一个或多个元素 多个元素之间用逗号隔开
    // arr.Ojb.unshift(元素1,元素2,....) 在元素的头部添加一个或多个元素 多个元素之间用逗号隔开
    // 返回值:新数组的长度



    // 1.创建一个空数组 arr2 = [];
    // 2.遍历数组arr在arr2里 查找是否有arr[i]的值,如果没有把arr[i]放到arr2里,若有,不用放
    // 3.输出 arr2

    //去除重复项,  去重
    var arr = [45, 58, 98, 97, 50, 85];
    var arr2 = [58, 97, 85];
    
    //第一种
    arr.forEach(function (v) {
        if (arr2.indexOf(v) === -1) {
            arr2.push(v)
        }
    });
    console.log(arr2);
    //或者
    var res = arr.filter(function (v, i) {
        return arr.indexOf(v) == i;
    })
    console.log(res);

     //或者
    for (var i = 0; i < arr.length; i++) {
        arr.forEach(function (v) {
            if (arr2.indexOf(v) === -1) {
                arr2.push(v)
            }
        })
    }
    console.log(arr2);
</script>

concat() 连接两个或多个数组

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

返回值:
返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中
生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,
而不是数组。

 <script>
     var a = "hello";
     var b = "world";
     console.log(a.concat(b));// a + b

     var a = [10, 7];
     var b = ["world", true, 100];
     var c = ["xyz", 88, 0]
     console.log(a.concat(b, "abc", 11, c));

     arrObj.concat(参数)
     参数:必需  待连接的数组或元素  多个数组直接用逗号隔开
     返回值:连接后的数组
</script>

sort()排序数组

sort() 方法用于对数组的元素进行排序。

排序顺序可以是字母或数字,并按升序或降序。

默认排序顺序为按字母升序。

注意:当数字是按字母顺序排列时"40"将排在"5"前面。

使用数字排序,你必须通过一个函数作为参数来调用。

函数指定数字是按照升序还是降序排列。

<script>
    var arr = [10, 2, 5, 45, 0, "abc"];

    var res = arr.sort(function (x, y) {
        return x - y //升序   return y-  x 降序
    });
    // var res = arr.sort((x, y) => x - y);  利用箭头函数

    console.log(res);

    // arrObj.sort(参数)
    // 参数: 可选函数若省略,按unicode编码进行排序
    // 函数里的形参的相对顺序绝对升序还是降序排列
    // arrObj.sort(function (a, b) { return a - b; }) 升序排列
    // arrObj.sort(function (a, b) { return b - a; }) 降序排列
</script>

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

<script>
    var arr = ['true', 10, 6, 9, "hello"];

    console.log(arr.join("-"));  拼接

    console.log(arr.reverse()); 颠倒顺序

    var str = "Hello world!" //!dIrow ol1eH"
    console.log(str.split("").reverse().join(""));

    .arrobj.reverse()  反转数组
    .arrobj.join(参数),  把数组分割为字符串
    .参数: 可选.分割符若省略,默认用逗号分割
    .若写为空串可以把数组里的每个元素拼接为字符串
    .返回值:字符串
</script>

splice() 数组中添加/删除项目

语法:
arrayObject.splice(index,howmany,item1,.....,itemX)

splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的
一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素
则返回的是含有被删除的元素的数组。

<script>
    var arr = ['true', 10, 6, 9, "hello"];

    console.log(arr.splice(1, 2)); //删除 10,6
    console.log(arr.splice(-2, 2)); //删除 9,hellp

    console.log(arr);

    // arr0bj.splice(参数1,参数2,参数3)在参数1的位置删除参数2个元素并把参数3里的元素添加到参数1位置
    // 参数1:必需  删除/添加元素位置
    // 参数2:必需   删除元素的个数
    // 参数3:可选   添加的元素  多个元素之间用逗号隔开
    // 返回值:删除的元素组成的数组


    //去重
    var arr = [true, 10, 6, 6, 9, 9, 9, "he1lo", 6, true, 9];
    for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] === arr[j]) {
                arr.splice(j, 1);
                j--;
            }
        }
    }
    console.log(arr);


</script>

数组对象---其他

<body>
    <div class="box">11</div>
    <div class="box">11</div>
    <div class="box">11</div>
</body>
<script>
    //通过标签名称获取元素对象
    var oDiv = document.getElementsByTagName("div")   //通过标签名称获取元素对象

    var divarr = Array.from(oDiv);   //转换为数组

    divarr.forEach(function (item) {
        console.log(item);
    })
    // get  获取  // Element  元素  // By    通过  // Tag   标记  // Name   名称
    // Array. from(参数1,参数2)
    // 参数1:必需  要转换为数组的对象
    // 参数2:可选   回调函数|
    //返回值:数组



    // (截取)
    var arr = [10, 1, "he1lo", 7, 8, "abc"];
    console.log(arr.slice(2));
    console.log(arr.slice(-2));
    console.log(arr.slice(2, 4));

    arrObj . slice(参数1,参数2)
    参数1:必需 ,开始截取的位置可以为负
    参数2:可选, 结束截取的位置可以为负  不包含结束
    返回值:截取到的数组



    //(复制)
    var arr = [10, 1, "he1lo", 7, 8, "abc"];
    console.log(arr.copyWithin(0, 3));

    arr0bj. copyWithin(参数1,参数2,参数3)
    参数1:必需复制到指定目标索引位置。
    参数2:可选 元素复制的起始位置。
    参数3:可选 元素复制的结束位置。 若省略,从开始赋值到结尾
    返回值:复制替换后的数组



    //(检测)
    var arr = [10, 1, 7, 8, 100, 80];
     var res = arr.every(function(item,i,arr){
            return item %2 === 0;  //都满足条件时才会返回true
    });
    console.log(res);

    arrobj.every(function (item, i, arr) {
        return 条件;
    })
    检测数组所有元素是否都符合指定条件,如果都符合指定条件才会返回true
    有一个不满足条件,返回false,并且剩余元素不在再进行检测



    //(检测)
    var arr = [10, 1, 7, 8, 100, 80];
    var res = arr.some(function (item) {
        return item === 100;  //有一个满足条件就会返回true
    })
    console.log(res);

    arrobj.some(function (item, i, arr) {
        return 条件;
    })
    检测数组所有元素是否都符合指定条件,如果所有元素都不符合指定条件才会返回false
    有一个满足条件,返回true,并且剩余元素不在再进行检测



    //(填充)
    var arr = [10, 1, 7, 8, 100, 80];
    console.log(arr.fill("hello", 1, 3));  //包含开始,不包含结束

    arrObj.fill(参数1,参数2,参数3)
    参数1:必需 , 用来进行填充的值
    参数2:可选  ,开始填充的位置
    参数3:可选,结束填充的位置 不包含  若省略,从开始位置填充到数组的末尾
    返回值:填充后的新数组



    //查找
      var arr = [10, 1, 7, 8, 100, 80];
      var res = arr.find(function(item){
        return item%2===1;
      })
      console.log(res);

      arrOBJ.find(function(item,i,arr){
        return 条件;
      })
      用于查找满足条件的数组里的第一个元素
      返回值:查找到的元素, 或undifined(找不到时的返回值)



    //查找符合条件的第一个位置的索引
    var arr = [10, 1, 7, 8, 100, 80];
    var res = arr.findIndex(function (item) {
        return item % 2 === 1;
    })
    console.log(res);

    用于查找满足条件的数组里的第一个元素的位置
    返回值:查找到的元素对应的索引, 或-1(找不到时的返回值)
</script>

回顾数组方法

<script>
    // ECMAScript
    数组方法:
    删除: 返回值:删除的元素
    srrObj.shift() 头部删除
    srrObj.pop() 尾部删除
    srrObj.splice(开始删除的位置, 删除的个数,添加的元素(多的话用逗号隔开元素1, 元素2,)) 删除元素的数组


    添加: 返回值:新数组的长度
    arrObj.unshift(元素1, 元素2, .....) 头部添加
    arrObj.push(元素1, 元素2, .....) 尾部添加


    排序:
    arrObj.sort() 按字符编码进行排序
    arrObj.sort(function (a, b) {
        return a - b; 升序
        return b - a; 降序
    }) 按字符编码进行排序


    分隔:
    arrObj.join()   把数组分隔为字符串  默认用逗号连起来
    arrObj.join(分隔符)
    arrObj.join('')  添加符号为空串 紧挨


    链接:
    arrObj.concat(arr2, arr3, 元素1, ...)

    查找:
    arrObj.every(function (item) {
        return item % 2 === 0;
        return 条件;
    })
    返回值: 布尔值
    当数组里的每个元素都符合条件时,才会返回true,有一个不满足条件,则返回false,并且剩下的元素不再进行检测

    arrObj.some(function (item) {
        return item % 2 === 0;
        return 条件;
    })
    返回值: 布尔值
    当数组里的有一个元素不符合条件时,返回true,有满足条件时,则返回false,并且剩下的元素不再进行检测

    arrObj.find(function (item) {
        return 条件;
    })
    返回值: 满足条件的元素  找不到 返回undefined
    当数组里的元素满足条件时,则返回该元素 (第 一 个) , 若都不满足条件,则返回undefined

    arrObj.findIndex(function (item) {
        return 条件;
    })
    返回值: 满足条件的元素  找不到 返回undefined
    当数组里的元素满足条件时,则返回该元素 (第 一 个) , 若都不满足条件,则返回 - 1

    Array.from(obj)  把对象转换为数组
    Array.isArray(参数)  判断参数是否为数组


    遍历数组:
    for (var i = 0; i < arrObj.length; i++) {
        arrObj[i];
    }

    for (var i in arrObj) {
        arrObj[i];
    }

    for (var val of arrObj) {
        val;
    }


    方法:
    arrObj.forEach(function (item, i) {
        item 遍历的元素;
        i  下标;
    })

    映射:
    arrObj.map(function (item, i) {
        return item * 2; 元素二倍

    })

    过滤 / 筛选: 返回的 return 条件为ture所有的 item 构成的数组
    arrObj.filter(function (item, i) {
        return item % 2 === 0;
        return true;
    })


    迭代求和:
    arrObj.reduce(function (total, item) {
        return total + item;
    }, 0)


</script>

javascript封装函数,调用javascript函数

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值