JS基础之数组常用方法

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script>

        // 两种创建方式

        // 构造函数

        var arr = new Array();

        //字面量的方式

        var arr = [];

 

        //1.Array.isArray(对象)---->判断这个对象是不是数组

        var arr1 = ["21", "iw", "19jw", "321", "iajd", "哈哈", "呵呵"];

        console.log(Array.isArray(arr1)); //true

 

        //2.instanceof----判断对象是不是数组类型

        console.log(arr1 instanceof Array); //true

 

        //3.Array.from() 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

        var arr3 = ["a", "b", "c"];

        var newArr = Array.from(arr3);

        console.log(newArr); //(3) ["a", "b", "c"]

 

        //4.push(),添加一个或者多个元素到数组的末尾,返回的是新数组的长度

        var arr4 = ["hello", "world", "tq"];

        arr4.push("911", "yiding");

        console.log(arr4); //(5) ["hello", "world", "tq", "911", "yiding"]

        var len = arr4.push("911", "yiding");

        console.log(arr4, len); //(7) ["hello", "world", "tq", "911", "yiding", "911", "yiding"] 7


 

        //5.pop(),删除数组末尾的一个元素,返回的是被删除的元素

        var arr5 = ["hello", "world", "tq"];

        var ele = arr5.pop();

        console.log(arr5, ele); //(2) ["hello", "world"] "tq"

 

        //6.shift():从数组开头删除元素,返回被删除的元素

        var arr6 = ["hello", "world", "tq"];

        var ele2 = arr6.shift();

        console.log(arr6, ele2); //(2) ["world", "tq"] "hello"

 

        // 7. unshift(): 将元素添加到数组的开头, 返回新数组的长度

        var arr7 = ["hello", "world", "tq"];

        var ele3 = arr7.unshift("numberone", "hehe");

        console.log(arr7, ele3); //(5) ["numberone", "hehe", "hello", "world", "tq"] 5

 

        //8. sort排序

        var arr8 = ["b", "cc", "a", "cdb", "ads"];

        arr8.sort(); //按照ASCII编码排序

        console.log(arr8); //(5) ["a", "ads", "b", "cc", "cdb"]

 

        //大到小

        var nums = [10, 30, 89, 12];

        nums.sort(function (n1, n2) {

            return n2 - n1;

        })

        console.log(nums) //(4) [89, 30, 12, 10]

 

        //小到大

        var nums = [10, 30, 89, 12];

        nums.sort(function (n1, n2) {

            return n1 - n2;

        })

        console.log(nums) //(4) [10, 12, 30, 89]

 

        var arr8 = [1, 40, 20, 10, 100];

        //a---arr[j]

        //b---arr[j+1]

        arr8.sort(function (a, b) {

            if (a > b) {

                return 1;

            } else if (a == b) {

                return 0;

            } else {

                return -1;

            }

        });

        console.log(arr8); //(5) [1, 10, 20, 40, 100]

 

        //9.reverse():反转数组

        var nums = [10, 23, 67, 93, 12, 90];

        nums.reverse();

        console.log(nums); //(6) [90, 12, 93, 67, 23, 10]

 

        //拼接

 

        //10. join():将数组转换成拥有一定格式的分隔符的字符串,可以指定分隔符,例如“|”

        var names = ["流程", "吃喝", "人生", "酸辣", "撑住"];

        var str = names.join("|");

        console.log(str); //流程|吃喝|人生|酸辣|撑住

 

        //11. concat():将多个数组合并成一个新的数组,返回一个新的数组

        var names = ["流程", "吃喝", "人生", "酸辣", "撑住"];

        var a = ["hahah", "呵呵呵"];

        var b = ["q", "hqu", "isu"]

        // var newArr = names.concat(nums, a);

        var newArr = names.concat(a, b);

        console.log(newArr);

        //(10) ["流程", "吃喝", "人生", "酸辣", "撑住", "hahah", "呵呵呵", "q", "hqu", "isu"]


 

        // 截取/选取

 

        // 12.slice(start,end):在数组中从指定的位置开始到指定的位置结束,返回新的数组

        var names = ["流程", "吃喝", "人生", "酸辣", "撑住"];

        var new_names = names.slice(3);

        console.log(new_names); //["酸辣","撑住"]

        var new_names = names.slice(2, 5);

        console.log(new_names); // ["人生", "酸辣", "撑住"]


 

        //13. splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,

        //并以数组形式返回被修改的内容。此方法会改变原数组。

        // splice(index, howmany, ele, ele...): 添加 / 删除 / 替换

        // index:从哪个开始

        // howmany:删除几个

        //ele:重新往数组中放入新的元素

        const months = ['Jan', 'March', 'April', 'June'];

        months.splice(2, 2, 'Feb');

        console.log(months); //(3) ["Jan", "March", "Feb"]

        months.splice(1, 0, 'Feb');

        console.log(months); //(5) ["Jan", "Feb", "March", "April", "June"]

        months.splice(2, 1, 'May'); //插入

        console.log(months); //(4) ["Jan", "Feb", "May", "Feb"]

 

        // es5方法

 

        //14. forEach(function(element,index,array){}):遍历数组的方法

        // function (element, index, array) {}:用来遍历的函数

        var stus = ["流程", "吃喝", "人生", "酸辣", "撑住"];

        stus.forEach(function (element, index, array) {

            console.log(element, index, array);

        });

 

        //15. filter():过滤,将数组中满足条件的元素过滤到一个新的数组中

        //返回值是一个新的数组

        var stus = ["流程", "吃喝", 8, "人生", "酸辣", "撑住", 1, 4];

        var new_stus = stus.filter(function (ele, index, arr) {

            return typeof (ele) === "string";

        })

        console.log(new_stus); //(5) ["流程", "吃喝", "人生", "酸辣", "撑住"]

 

        //16. some():判断数组中是否有元素满足指定的条件,如果有:true,否则:false

        var stus = ["流程", "吃喝", 8, "人生", "酸辣", "撑住", 1, 4];

        var flag = stus.some(function (ele, index, arr) {

            return ele === "流程";

        })

        console.log(flag); //true

 

        //17. every():判断数组中是否每一个元素都满足指定的条件,如果是:true,否则:false

        var stus = ["流程", "吃喝", 8, "人生", "酸辣", "撑住", 1, 4];

        var flag1 = stus.every(function (ele, index, arr) {

            return typeof (ele) === "string";

        })

        console.log(flag1); //false

 

        //18. map():数组中的每个元素都要执行这个函数,把执行后的结果重新的全部的放在一个新的数组中

        // map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理的后值。

        // map()方法按照原始数组元素顺序依次处理元素。

        // map不会对空数组进行检测

        // map不会改变原始数组

        // arr.map(function(currentValue,index,arr),thisValue)

 

        // 查找

        //19. indexOf():在数组查找指定的元素,返回该元素第一次出现的索引的位置,如果

        //没有该元素,返回-1;

        var stus = ["流程", "吃喝", 8, "人生", "酸辣", "撑住", 1, 4];

        var index = stus.indexOf("吃喝");

        console.log(index); //1

 

        //20. includes():查找数组中是否包含指定的元素,是:true,  不是:false

        var stus = ["流程", "吃喝", 8, "人生", "酸辣", "撑住", 1, 4];

        var flag = stus.includes("撑住");

        console.log(flag); //true

    </script>

</head>

 

<body>

 

</body>

 

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[removed] $(function() { function setCurrentSlide(ele, index) { $(".swiper1 .swiper-slide").removeClass("selected"); ele.addClass("selected"); //swiper1.initialSlide=index; } var swiper1 = new Swiper('.swiper1', { // 设置slider容器能够同时显示的slides数量(carousel模式)。 // 可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。 // loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。 slidesPerView: 5.5, paginationClickable: true,//此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。 spaceBetween: 10,//slide之间的距离(单位px)。 freeMode: true,//默认为false,普通模式:slide滑动时只滑动一格,并自动贴合wrapper,设置为true则变为free模式,slide会根据惯性滑动且不会贴合。 loop: false,//是否可循环 onTab: function(swiper) { var n = swiper1.clickedIndex; } }); swiper1.slides.each(function(index, val) { var ele = $(this); ele.on("click", function() { setCurrentSlide(ele, index); swiper2.slideTo(index, 500, false); //mySwiper.initialSlide=index; }); }); var swiper2 = new Swiper('.swiper2', { //freeModeSticky 设置为true 滑动会自动贴合 direction: 'horizontal',//Slides的滑动方向,可设置水平(horizontal)或垂直(vertical)。 loop: false, // effect : 'fade',//淡入 //effect : 'cube',//方块 //effect : 'coverflow',//3D流 // effect : 'flip',//3D翻转 autoHeight: true,//自动高度。设置为true时,wrapper和container会随着当前slide的高度而发生变化。 onSlideChangeEnd: function(swiper) { //回调函数,swiper从一个slide过渡到另一个slide结束时执行。 var n = swiper.activeIndex; setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n); swiper1.slideTo(n, 500, false); } }); }); [removed]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值