JavaScript数组的基本操作

最新推荐文章于 2021-05-24 19:10:30 发布
最新推荐文章于 2021-05-24 19:10:30 发布
阅读量348 收藏
点赞数 1
分类专栏： javascript 文章标签： 数组基本操作 数组去重 数组排序

字符串与数组转换

有时候我们需要把字符串进行转换为数组，则需要split方法，把数组转换为字符串则需要join方法

var star="js,php,java,c++";
star=star.split(",");
console.log(star);//["js", "php", "java", "c++"]

split() 方法用于把一个字符串分割成字符串数组，接收两个参数具体使用说明看下图
这里写图片描述
join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。

var star=["js","php","java","c++"];
star=star.join("");//直接转换为字符串不加分隔符号
console.log(star);//jsphpjavac++

这里写图片描述

一、push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

var star=["js","php","java","c++"];
var stars=star.push("go");//把参数从追加到最后
console.log(star);//["js", "php", "java", "c++", "go"]

这里写图片描述
小技巧：使用push实现两个数组合并：

var arry=["js","php"],arry1=["java","c++"];
    //[].push.apply(arry,arry1);//用push实现两个数组合并
    //arry.push.apply(arry,arry1);//或者这样
    Array.prototype.push.apply(arry,arry1);//用push实现两个数组合并
    console.log(arry);//["js", "php", "java", "c++"]

原因是：因为apply函数接收两个参数，第一个是当前的this 指向，第二个是[数组参数]。执行apply时候会遍历第二个参数依次复制第二个参数内的值。

pop删除数组元素最后一位元素

var star=["js","php","java","c++"];
var del=star.pop();//把最后一位删除，返回是删除的元素
console.log(del);//c++
console.log(star);//["js", "php", "java"]
//小技巧：或者使用star.length-=1;

在工作中也可以这样用，例：

/**
     * 例子
     * @n {Object} 参数列表
     * @callback {Function} 回掉函数
     * */
    function demo(n,callback){
        var arg=[].slice.apply(arguments);//转换为数组
        var callfn=arg.pop();//删除最后一个元素callfn接收删除的元素。
        callfn();//callback
    };

    demo({a:1},function(){
        console.log("callback");
    });

concat方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

var arry=["js","php"],arry1=["java","c++"];
var arry2=arry.concat(arry1);//实现两个数组或者多个数组合并
    console.log(arry);//["js", "php"]
    console.log(arry1);//["java", "c++"]
    console.log(arry2);//["js", "php", "java", "c++"]

二、shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

var arry=["js","php","java","c++"];
var arry2=arry.shift();//删除数组第一个元素
    console.log(arry);//["php", "java", "c++"]
    console.log(arry2);//js

在工作中用到的时候，例子：

   /**
     * @n {Object} 参数列表
     * @callback {Function} 回掉函数
     * */
    function demo(n,callback){
        var arg=[].slice.apply(arguments);//转换为数组
        var new_n=arg.shift();//删除第一个元素。
        console.log(new_n);//{a:1}
    }
    demo({a:1},function(){
        console.log("callback");
    });

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

var arry=["js","php","java","c++"];
var arry2=arry.unshift("go");//zai第一个元素前插入一个元素,返回数组的长度。
    console.log(arry);//原始数组更改 ["go", "js", "php", "java", "c++"]
    console.log(arry2);//数组长度 5

三、reverse() 方法用于颠倒数组中元素的顺序。注释：该方法会改变原来的数组，而不会创建新的数组。

var arry=["js","php","java","c++"];
var arry2=arry.reverse();//颠倒数组中元素的顺序。
    console.log(arry);//在原始数组，颠倒数组 ["c++", "java", "php", "js"]
    console.log(arry2);//返回颠倒的数组 ["c++", "java", "php", "js"]

比如有时候面试官考察你书写一个颠倒数组的函数，不用reverse。我是这样写的：

Array.prototype.myreverse=function(){
    var _length=this.length;//获取数组的长度
    //如果长度大于1则进行颠倒顺序
    if(_length>1){
        //循环一半数据；
        for(var i=0,tmp;i<Math.floor(_length/2);i++){
            //利用第三方变量交换位置
            tmp=this[i];
            this[i]=this[_length-1-i];
            this[_length-1-i]=tmp;
        }
        return this;
    }else{
        return this;
    }
}

这里写图片描述

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

这里写图片描述

没有参数的时候。

var arry3=["12","3","2","11","6","5","0"];
arry3.sort();
console.log(arry3);//["0", "11", "12", "2", "3", "5", "6"]
var arry3=["12","3","2","11","6","5","0"];
arry3.sort(function(a,b){
    if(a*1<b*1){
        return -1;
    }else if(a*1>b*1){
        return 1;
    }else{
        return 0;
    }
});
console.log(arry3);//["0", "2", "3", "5", "6", "11", "12"]

数组中存储的是字符串，如果不*1则不会按照数字大写排序。例如下边:

var arry3=["12","3","2","11","6","5","0"];
arry3.sort(function(a,b){
    if(a<b){ //因为是字符串比较大小按照字符编码的顺序进行排序
        return -1;
    }else if(a>b){
        return 1;
    }else{
        return 0;
    }
});
console.log(arry3);//["0", "11", "12", "2", "3", "5", "6"]

四、slice() 方法可从已有的数组中返回选定的元素。

这里写图片描述

var arry3=["12","3","2","11","6","5","0"];
var arr4=arry3.slice(2,4);
console.log(arry3);//["12", "3", "2", "11", "6", "5", "0"]
console.log(arr4);//["2", "11"]

如果第一个参数是负数的话需要注意，第二个参数是无效的。

var arry3=["12","3","2","11","6","5","0"];
var arr4=arry3.slice(-4);
console.log(arry3);//["12", "3", "2", "11", "6", "5", "0"]
console.log(arr4);//["11", "6", "5", "0"]

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

这里写图片描述

var arry3=["12","3","2","11","6","5","0"];
var arr4=arry3.splice(2,3);
console.log(arry3);//["12", "3", "2", "0"]
console.log(arr4);//["11", "6", "5"]

删除替换

var arry3=["12","3","2","11","6","5","0"];
var arr4=arry3.splice(2,3,"22","44");//删了三个用两个替换
console.log(arry3);//["12", "3", "2", "0"]
console.log(arr4);//["11", "6", "5"]

五、indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置

这里写图片描述
检查数组或者字符串中是否包含【检索的值】，如果存在返回其索引位置。

lastIndexOf则正好与indexOf相反，它是从数组或者字符串末尾开始检索。

六、every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

var arry3=[12,34,4,56,23,9];
var s=arry3.every(function(n){
    return n>10;//用于检索数组中所有元素都满足大于10时返回true
});
console.log(s);
filter函数对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。简单理解就是遍历数组中的每一项，如果满足条件则返回该项。例：
var arry3=[12,34,4,56,23,9];
var s=arry3.filter(function(n){
    return n>10;//用于检索数组中所有元素有满足大于10时返回该项。
});
console.log(s);//[12, 34, 56, 23]

注：filter方法不会更改原始数组。

七、forEach对 Array 对象的每个元素调用指定函数。 此函数是静态的，可在不创建对象实例的情况下调用.

参数：

method：要对数组中每个元素调用的函数。

var arry3=[12,34,4,56,23,9];
arry3.forEach(function(v,i,t){//v代表值，i索引，t当前this
    console.log(v);
    console.log(i);
    console.log(t);
});

曾听前端技术专家说，forEach的效率低，现在我重写了forEach进行对比发现确实低一点儿。

var arry3=[12,34,4,56,23,9];
for(var i=0;i<1000000;i++){
    arry3.push(i+100);//当数组的长度达到1000000forEach的效率会低
}

var statime=new Date();
Array.prototype.forEachs=function(callback){
    var _length=this.length;
    for(var i=0;i<_length;i++){
        callback(this[i],i,this);
    }
}
arry3.forEachs(function(v,i,t){//v代表值，i索引，t当前this
    //console.log(v);
    //console.log(i);
    //console.log(t);
});
console.log(new Date()-statime,"forEachs---timers");//4 "forEachs---timers"


var statime1=new Date();
arry3.forEach(function(v,i,t){//v代表值，i索引，t当前this
    //console.log(v);
    //console.log(i);
    //console.log(t);
});
console.log(new Date()-statime1,"forEach---timers");//67 "forEach---timers"

效率低了将近17倍。

map类似于filter，只不过map会更改返回数组。例：

var arry3=[12,34,4,56,23,9];
var arry4=arry3.map(function(v,i,t){//v代表值，i索引，t当前this
   return v*v;
});
console.log(arry3);//[12, 34, 4, 56, 23, 9]
console.log(arry4);//[144, 1156, 16, 3136, 529, 81]

some函数与every函数类似，区别在于some对数组的每一项运行给定函数，只要一项满足条件就返回true。而every则是所有项都满足才会返回true；

var arry3=[12,34,4,56,23,9];
var arry4=arry3.some(function(v,i,t){//v代表值，i索引，t当前this
   return v>50;
});
console.log(arry3);//[12, 34, 4, 56, 23, 9]
console.log(arry4);//true

八、reduce与reduceRight都是归并数组的方法，都会迭代数组中的每一项，然后构建一个最终返回值。reduce是从第一个开始，reduceRight则是从最后一个开始的。它们同样接收两个参数，第一个是每项调用的函数，第二个是作为归并的基础的初始值。（选填）

var arry3=[1,3,4,6,5,2];
var arry4=arry3.reduce(function(prev,v,i,t){//prev前一个值v代表值，i索引，t当前this
   return v+prev;
});
console.log(arry3);//[1, 3, 4, 6, 5, 2]
console.log(arry4);//21

例如：reduceRight

var arry3=[1,3,4,6,5,2];
var arry4=arry3.reduceRight(function(prev,v,i,t){//prev前一个值v代表值，i索引，t当前this
   return v+prev;
},30);
console.log(arry3);//[1, 3, 4, 6, 5, 2]
console.log(arry4);//51

数组排序、去重

简单数组排序与复合数组排序：代码如下
  /**
     * 功能：数组排序
     * 说明：
     *     1.如果是[1,2,5,4,9,10]这种简单数组，必须arry，可选bigtosmall
     *     2.如果是复合数组[{a:3},{a:10}] 必须arry，必须bigtosmall，必须key
     * 
     * @arry {Arry} 数组 
     * @bigtosmall {Boolean || false}  从大到小排序
     * @key {String} 数组中值的键。例：数组是[{a:3},{a:10}]，按照"a"的值进行排序
     * 
     * return {olddata:data,newdata:data}返回新数组与原始数组
     * */
    function lksort(arry,bigtosmall,key){
        arry=Object.prototype.toString.call(arry)=="[object Array]"?arry:[];//如果传递的不是数组给定默认值
        //console.log(arry);
        var i=0,//外出循环
        _length=arry.length-1,//数组长度
        j,//内层循环
        tmp,//中间变量
        olddata=[].concat(arry);//原始数组
        //判断是否复合数组
        if(arry[i] && Object.prototype.toString.call(arry[i])=="[object Object]"){
            if(!key){
                throw("请输入键！");
                return false;
            }
        }
        for(;i<_length;i++){
            for(j=0;j<i;j++){
                //这是复合数组执行的
                if(key){
                    if(arry[j][key]>arry[i][key]){
                        tmp=arry[j];
                        arry[j]=arry[i];
                        arry[i]=tmp
                    }
                }else{
                    //普通数组执行的
                    if(arry[j]>arry[i]){
                        tmp=arry[j];
                        arry[j]=arry[i];
                        arry[i]=tmp
                    }
                }
            }
        };
        //如果从大到小排序，则顺序颠倒
        if(bigtosmall){
            arry.reverse();
        };
        //返回原始数组，与新数组
        return {
            olddata:olddata,
            newdata:arry
        }
    }

简单数组去重与复合数组去重：代码如下

/**
     * 功能：数组去重
     * 说明：
     *      1.如果是[1,2,5,4,9,10]这种简单数组，必须arry
     *      2.如果是[{id:3},{id:10}]这种复合数组，必须arry，必须key
     * 
     * @arry {Arry} 数组 
     * @key {String} 数组中值的键。例：数组是[{id:3},{id:10}]，按照"a"的值进行去重
     * 
     * return 返回去重的结果
     * */
    function lkremoval(arry,key){
        var newarry=[],//新数组
        i=0,//外层循环使用的i
        length=arry.length,//数组的长度
        j,//内层循环的j
        istrue;//是否存有
        if(key){
            //
            for(;i<length;i++){
                istrue=0;//每一次循环时候设置为0
                //遍历新数组中是否包含本条数据
                for(j=0;j<newarry.length;j++){
                    if(arry[i][key]==newarry[j][key]){
                        istrue=1;//如果有istrue赋值为1
                    }
                };
                istrue?"":newarry.push(arry[i]);//如果没有，则push进去
            };
        }else{
            //简单数组去重
            for(;i<length;i++){
                //如果没有，则push进去
                if(!(newarry.indexOf(arry[i])>-1)){
                    newarry.push(arry[i]);
                }
            };
        }

        return newarry;
    }

转至：博客园，小小坤

Mr_Liu3518
关注
专栏目录
JavaScript - 数组和数组的基本操作
weixin_44175290的博客
02-27 338
认识数组数据类型 - Array - 是一个 js 内的数据类型，是一个复杂数据类型。也是一个‘盒子’。用来存储数据的盒子 - 数组内存储的数据是按照‘序号’排列的，有序的数据集合 - 序号：叫做 索引 或者 下标，从0开始，依次+1 创建数组数据类型 1. 字面量方式创建 - 创建空数组： var arr = [] - 创建一个带有数据的数组：var arr = [数据1， 数据2，...] 2. 内置构造函数方式创建 - 创建空数组：var arr = new Array() -
JavaScript对数组的常见操作
BOM485480的博客
11-18 145
遍历数组 for…of 循环 for(let item of items)循环遍历数组项 let ary = ["css", "Javascript", "Vue.js", "React.js"] for (let book of ary) { console(book) } Tips: 可以使用break语句跳出循环 array.forEach()循环 array.forEach()方法通过在每个数组项上调用callback来实现遍历 let ary = ["css", "Javascript",
【C语言】实现两个值的交换函数——三种方法
ly_6699的博客
09-29 2686
在前面的博客中，我实现了【[交换两个值的函数](https://blog.csdn.net/ly_6699/article/details/83833561)】和【[交换两个数组的函数](https://blog.csdn.net/ly_6699/article/details/82833500)】，但是我使用的交换思想都是通过临时变量记录的方法。 下面我将介绍为两个值交换内容时，可使用的三种交换思想：
c语言元素互换,用一个函数互换数组内的两元素 come on
weixin_30146171的博客
05-24 348
C/C++ code#include #define SWAP(a,b) do ((&(a))!=(&(b)))?((a)^=(b)^=(a)^=(b)):((a)=(a)); while (0)char *p1="1" ,*p2="2" ;char c1=1 , c2=2 ;short s1=1 , s2=2 ;int i1=1 , i2...
定义一个数组，用函数交换数组中的两个元素（C语言）
weixin_45773503的博客
03-08 5715
定义一个数组，用函数交换数组中的两个元素 #include <stdio.h> void swap(int *a, int *b); int main(void) { int Array[]={1,2,3,4,5}; swap(Array+1, Array+3); for(int i=0; i<5; i++){ printf("%d " ,Array[i]); } ...
javascript数组操作方法小结和3个属性详细介绍
12-08
通过以上讲解，我们可以更熟练地使用JavaScript数组进行各种操作，理解和掌握这些基本方法和属性对于日常开发工作至关重要。在实际应用中，根据需求选择合适的方法，能有效提高代码的效率和可读性。
JavaScript学习笔记之数组基本操作示例
10-17
本篇学习笔记将深入探讨JavaScript数组的基本操作，包括定义、连接、排序、添加、删除和修改元素。 一、数组定义 在JavaScript中，定义数组有以下两种方式： 1. 直接通过方括号[]创建：`var a = [1, 2, 3];` 2. ...
JavaScript数组基本操作--增加、删除、截取、替换
qq_43651106的博客
05-14 1423
方法目录 栈、队列操作 push pop unshift shift 截取替换 slice splice 方法特性 对于数组操作的每一个方法我们要关注以下三个特性 是否操作原数组 返回值 传递的参数 栈、队列操作 push() 在数组的末尾添加一个元素 直接操作原数组 返回值：执行添加后数组的长度 参数：el (要添加的元素) // 原数组 var arr = [132, 645, 561]; // 执行pop()方法, value <== 返回值 var value = ar
JavaScript数组常用操作技巧汇总
10-25
JavaScript数组操作技巧汇总的知识点详细解读： ...以上就是JavaScript数组常用操作技巧的详细解读，涵盖了数组的基本操作方法和一些实际使用场景。掌握这些技巧有助于编写更加高效、优雅的JavaScript代码。
湖北工业大学在河南2021-2024各专业最低录取分数及位次表.pdf
09-16
全国各大学在河北2021-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
西南交通大学在河南2021-2024各专业最低录取分数及位次表.pdf
09-16
全国各大学在河北2021-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
DAY27使用的实时脚本文件
09-16
博客链接：https://blog.csdn.net/qq_47248729/article/details/142303818?spm=1001.2014.3001.5502
天水师范学院在河北2021-2024各专业最低录取分数及位次表.pdf
09-16
全国各大学在河北2021-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
matlab simulink 双馈风机调频，风电调频，风火水调频，虚拟惯性控制，下垂控制 参与系统一次调频的Matlab Si
09-16
matlab simulink 双馈风机调频，风电调频，风火水调频，虚拟惯性控制，下垂控制 参与系统一次调频的Matlab Simulink模型 系统为三机九节点模型，所有参数已调好且可调，可直接运行，风电渗透率20% 也可研究风火联合，火电调频等。有同步机调速器。 风电调频，IEEE9节点，双馈风机调频，一次调频，火电调频，同步机调频。 同步机部分带有调速器等部分。并网电压电流。 风电附带下垂控制，虚拟惯性控制，风电渗透率20%，有参考文献。也可研究风电并网，并网电压，电流波形
基于python实现的给定微博数据的反作弊识别
09-16
【作品名称】：基于python实现的给定微博数据的反作弊识别 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】： 基于给定微博数据进行垃圾微博识别 ###进度 对MICRO_BLOG.txt解析完毕 总天数:370 总微博数量:2056089 总垃圾微博数量:300555 ###程序运行的方法 python main.py ###目录结构 conf: 项目配置 data: 原始数据文件,未上传到github export: 程序输出文件 main.py: 主程序 垃圾微博判定策略 某个用户在30秒内连续发布15条微博，则命中垃圾微博策略 命中后，垃圾行为映射表中该用户对应次数+1，垃圾微博映射表中命中的所有微博对应出现次数+1 每次命中策略结束时清空该用户对应的15条微博信息 【资源声明】：本资源作为“参考资料”而不是“定制需求”，代码只能作为参考，不能完全复制照搬。不一定能够满足所有人的需求，需要有一定的基础能够看懂代码，能够自行调试代码并解决报错，能够自行添加功能修改代码。
linux下文件删除脚本
09-16
https://blog.csdn.net/chengsinuo123456/article/details/142306575 简单写一个linux批量删除文件脚本（不含文件夹）附属文件，你需要自己nano或vi它修改成你需要的样子
第8周实践课安排.pdf
09-16
第8周实践课安排.pdf
西南医科大学在河北2021-2024各专业最低录取分数及位次表.pdf
09-16
全国各大学在河北2021-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
Delphi 案例介绍.docx
最新发布
09-16
Delphi 案例介绍
JavaScript 数组操作详解
"JavaScript数组详解，包括构造函数、属性、方法等" ...以上就是JavaScript数组的基本知识，包括创建、属性、方法以及原型链上的扩展。通过理解并熟练运用这些概念，可以有效地管理和操作JavaScript中的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值