详解JavaScript数组的常用方法

目录
  • 数组的常用方法
  • pop()
  • unshift()
  • shift()
  • slice()
  • splice()
    • 数组元素去重
  • concat()
  • join()
  • reverse()
  • sort()
  • 总结

数组的常用方法

  • push() 改方法可以向数组末尾添加一个或多个元素,并返回数组的新长度
  • 可以将添加的元素作为方法的参数传递,这些元素会自动添加加到数组的末尾
  • 改方法会将数组新的长度作为返回值返回
var arr = ["小和尚","小猴","小猪","小沙","小龙"];
var result = arr.push("江流","心猿","木龙","刀圭","意马");
console.log("返回值:"+result);
console.log("新数组:"+arr);

pop()

该方法可以删除数组最后一个元素,并将被删除的元素作为返回值

var arr = ["江流","心猿","木龙","刀圭","意马"];
var result = arr.pop();
console.log("返回值:"+result);
console.log("新数组:"+arr);

unshift()

  • 想数组开头添加一个或多个元素,并返回新的数组长度
  • 向前边插入元素以后,其他的元素索引会依次调整
var arr = ["江流","心猿","木龙","刀圭","意马"];
var result = arr.unshift();
console.log("返回值:"+result);
console.log("新数组:"+arr);

shift()

可以删除数组第一个元素,并将被删除的元素作为返回值

var arr = ["江流","心猿","木龙","刀圭","意马"];
var result = arr.shift();
console.log("返回值:"+result);
console.log("新数组:"+arr);

slice()

  • 可以用来从数组提取指定元素
  • 该方法不会改变元素数组,而是将截取到的元素封装到一个新的数组中返回

参数:

  • 第一个参数:截取开始位置的索引,包含开始索引
  • 第二个参数:截取结束位置的索引,不包含结束索引(截取到数组不包括该值)
  • 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
    • 索引可以传递一个负值,如果传递一个负值,则从后往前计算
    • 1倒数第一个
    • 2倒数第二个
var arr = ["江流","心猿","木龙","刀圭","意马"];
var result = arr.slice(1,3);
console.log("截取到的数组:"+result);
console.log("原数组不会发生改变:"+arr);

splice()

  • 可以用来删除数组中的指定元素
  • 使用该方法会影响到原数组,会将指定元素从原数组中删除,并将被删除的元素作为返回值

参数

  • 第一个参数:表示开始位置的索引,包含开始索引
  • 第二个参数:表示删除的个数,不包含结束索引(截取到数组不包括该值)
var arr = ["江流","心猿","木龙","刀圭","意马"];
var result = arr.splice(1,3);
console.log("删除到的元素:"+result);
console.log("原数组会发生改变:"+arr);

  • 第三个参数及以后:可以传递一些新的元素,这些元素将hi自动插入到开始位置索引前边
var arr = ["江流","心猿","木龙","刀圭","意马"];
var result = arr.splice(1,2,"孙悟空","猪八戒");
console.log("删除的元素:"+result);
console.log("原数组会发生改变:"+arr);

数组元素去重

var arr = [1, 1, 5, 6, 4, 5, 2, 3, 7, 9, 4, 4, 4, 1];
for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
        if (arr[i] === arr[j]) {
            arr.splice(j, 1);//删除当前j所在位置的元素
            j--;//删除j所在元素后,后边元素会自动补位,需要重新在j这位置重新比较一次
        }
    }
}
console.log(arr);

concat()

  • 该方法可以连接两个或多个数组,并将新的数组返回
  • 该方法不会对原数组产生影响
var arr1 = ["江流","心猿","木龙","刀圭","意马"];
var arr2 = ["唐僧","孙悟空","猪八戒","沙僧","白龙马"];

var result = arr1.concat(arr2,"心猿意马");
console.log("新数组:"+result);

join()

  • 该方法可以将数组转换为一个字符串
  • 该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回
  • join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接词,如果不指定连接词符,则默认使用,作为连接符
var arr = ["江流","心猿","木龙","刀圭","意马"];

var result = arr.join("-");
console.log("新数组:"+result);
console.log("result的类型为:"+typeof(result));

reverse()

  • 该方法用来反转数组(前面的元素到后边去,后边的到前边去)
  • 该方法会影响到原数组
var arr = ["江流","心猿","木龙","刀圭","意马"];

arr.reverse();
console.log("颠倒后的arr数组:"+arr);

sort()

该方法可以对数组中的元素进行排序该方法会影响原数组,则默认会按照Unicode编码进行排序

var arr = ["a","d","g","f","k",'v',"d","x"];
arr.sort();
console.log("排序后的arr数组:"+arr);

即使对于纯数字的数组,使用sort()排序时,也会按照Unicode编码进行排序,所以对于数字进行排序,可能会得到错误答案

var arr = [2,14,12,3,5,53,7,31,13];
arr.sort();
console.log("排序后的arr数组:"+arr);

可以自己指定排序的规则

在sort()添加一个回调函数,来指定排序规则

回调函数中需要定义两个形参 (a, b)

浏览器会分别使用数组中的元素作为实参去调用回调函数

浏览器会根据回调函数的返回值来决定元素的顺序

  • 如果返回一个大于0的值,则元素会交换位置
  • 如果返回一个小于0的值,则元素位置不变
  • 如果返回一个0,则认为两个元素相等,也不交换位置
  • 如果需要升序排序,则返回a - b
  • 如果需要降序排序,则返回b - a
var arr = [2, 14, 12, 3, 5, 53, 7, 31, 13];
arr.sort(function (a, b) {
   return a - b;//升序
   //return b - a;降序
});
console.log("排序后的arr数组:" + arr);

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

时间: 2021-11-14

JavaScript数组常用方法实例讲解总结

目录 数组常用方法 concat() 方法 join() 方法 pop() 方法 push() 方法 reverse() 方法 shift() 方法 slice() 方法 sort() 方法 splice() 方法 toSource() 方法 toString() 方法 toLocaleString() 方法 unshift() 方法 valueOf() 方法 导读:在实际开发中,前端工程师除了写页面布局及样式还要对后端返回的数据进行处理,返回的数据大多数是json格式,一般都是返回一个对象或者

JS数组中常用方法技巧学会进阶成为大佬

目录 splice()方法 join()方法 reverse()方法 every()方法 reduce()方法 filter()方法 findIndex()方法 和find()方法 findIndex() find() forEach()方法 some()方法 indexOf()方法 sort ()方法 push()方法 pop()方法 unshift()方法 shift()方法 splice()方法 截取替换数组 第一个参数是起始位置,第二个是截取的个数,第三是替换的元素 ,返回值是截取的元素

JS删除数组指定值常用方法详解

一. 删除数组中所有指定值 先看一种危险的方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> window.onload = function() { var arr = [

JavaScript数组Array的一些常用方法总结

目录 一.JavaScript中创建数组的方式 二.数组方法概括 三.方法详解 1.join() 2.pop() 3.shift() 4.push() 5.unshift() 6.concat() 7.slice() 8.sort() 9.reverse() 10.toString() 11.splice() 12.valueOf() 13.indexOf() 14.lastIndexOf() 15.forEach() 16.map() 17.filter() 18.every() 19.som

JavaScript数组 几个常用方法总结

目录 1.前言 2.filter() 3.map() 4.sort() 5.reduce() 6.forEach() 7.方法列表 8.本文参考 1.前言 数组方法有太多了,本文记录一些本人容易记错的一些数组方法,用于巩固及复习. 后续会慢慢的将其他数组方法添加进来. 善用数组方法可以使数据处理变的优雅且简单. 那下面让我们开始吧: 2.filter() 描述: filter() 方法创建一个新数组,并将符合条件的所有元素添加到创建的新数组中. 语法: Array.filter(callback

javascript数组去重常用方法实例分析

本文实例讲述了javascript数组去重常用方法.分享给大家供大家参考,具体如下: 数组去除重复值是面试常考内容,也是很容易用到的一个技巧,下面就几种去重的方法进行介绍. 首先是最常见的方法,也就是添加一个临时数组,将原数组遍历,加入临时数组,每次加入时判断待加入的元素是否存在于临时数组中,代码如下: // 对数组进行去重操作,只考虑数组中元素为数字或字符串,返回一个去重后的数组 //第一种方法,遍历,将没有的插入临时数组 function uniqArray1(arr) { var n=[]

javascript数组常用方法汇总

本文为大家总结了javascript数组常用方法,具体内容如下 1.join()方法: Array.join()方法将数组中所以元素都转化为字符串链接在一起,返回最后生成的字符串.也可以指定可选的字符串在生成的字符串中来分隔数组的各个元素.如果不指定分隔符,默认使用逗号.案例如下: var a=[1,2,3]; a.join();//=> "1,2,3" 因为没有指定分隔符,默认为逗号. a.join("+");//=> "1+2+3"

Javascript中String的常用方法实例分析

本文实例讲述了Javascript中String的常用方法.分享给大家供大家参考.具体如下: // length属性:获取字符串的字符个数. var s='爱像一阵风'; alert(s.length); // charAt(index)方法:获取指定索引位置的字符,索引从0开始 var s1='我不要再想你'; alert(s1.charAt(4));//想 // indexOf('e',startIndex)方法:获取指定字符串第一次出现的位置.startIndex表示从第几个开始搜索. v

JS数组求和的常用方法总结【5种方法】

本文实例总结了JS数组求和的常用方法.分享给大家供大家参考,具体如下: 题目描述 计算给定数组 arr 中所有元素的总和 输入描述: 数组中的元素均为 Number 类型 输入例子: sum([ 1, 2, 3, 4 ]) 输出例子: 10 方法1. 不考虑算法复杂度,用递归做: function sum(arr) { var len = arr.length; if(len == 0){ return 0; } else if (len == 1){ return arr[0]; } else

JavaScript数组、json对象、eval()函数用法实例分析

本文实例讲述了JavaScript数组.json对象.eval()函数用法.分享给大家供大家参考,具体如下: 一.JavaScript中的数组 数组使用[].new Array()或new Array(count)进行创建 创建数组之后我们可以对其静态初始化,也可以对其动态赋值 数组的常用属性:length 数组的常用方法:toString().join().reverse().push().pop() <script type="text/javascript"> //静

JS数组求和的常用方法实例小结

本文实例总结了JS数组求和的常用方法.分享给大家供大家参考,具体如下: js数组求和的方法 var array = [1, 2, 3, 4, 5]; var sum = 0; 1.for循环 for (let i = 0; i < array.length; i++) { sum += array[i]; } console.log(sum) 运行结果sum为 15,如下图所示: 2.forEach array.forEach(ele => { sum += ele; }); 运行结果同样su

JavaScript交换变量的常用方法小结【4种方法】

本文实例讲述了JavaScript交换变量的常用方法.分享给大家供大家参考,具体如下: 许多算法需要交换2个变量.在编码面试中,可能会问您"如何在没有临时变量的情况下交换2个变量?".我很高兴知道执行变量交换的多种方法.在本文中,您将了解大约4种交换方式(2种使用额外的内存,而2种不使用额外的内存). 1. 解构赋值 解构赋值语法(ES2015的功能)使您可以将数组的项提取到变量中.例如,以下代码对数组进行解构: let a; let b; [a, b] = [1, 2, 3]; a;

JavaScript数组迭代器实例分析

本文实例讲述了JavaScript数组迭代器用法.分享给大家供大家参考.具体如下: 这里注意:如果数组中有0.false."".null.NaN迭代器将会停止 function createIterator(x) { var i = 0; return function(){ return x[i++]; }; } var iterator=createIterator(['a','b','c','d','e','f','g']); var current; while(current

JavaScript 数组的深度复制解析

对于javascript而言,数组是引用类型,如果要想复制一个数组就要动脑袋想想了,因为包括concat.slice在内的函数,都是浅层复制.也就是说,对于一个二维数组来说,用concat来做复制,第二维的数组还是引用,修改了新数组同样会使旧数组发生改变. 于是乎,想要写一个深度复制的函数,来帮助做组数的深度复制. 一般情况下,使用 "=" 可以实现赋值.但对于数组.对象.函数等这些引用类型的数据,这个符号就不好使了. 1. 数组的简单复制 1.1 简单遍历 最简单也最基础的方式,自然

javascript数组操作(创建、元素删除、数组的拷贝)

1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以