详解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);

总结

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

(0)

相关推荐

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

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

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

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

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

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

  • 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数组的常用方法

    目录 数组的常用方法 pop() unshift() shift() slice() splice() 数组元素去重 concat() join() reverse() sort() 总结 数组的常用方法 push() 改方法可以向数组末尾添加一个或多个元素,并返回数组的新长度 可以将添加的元素作为方法的参数传递,这些元素会自动添加加到数组的末尾 改方法会将数组新的长度作为返回值返回 var arr = ["小和尚","小猴","小猪",&quo

  • 详解javascript数组去重问题

    首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据.遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复.于是乎,我写出了如下代码A: Array.prototype.clearRepetitionA = function(){ var result = []; var isRepetition; for(var i=0; i<this.length; i++){ isRepetition = false; for(var j=0; j<result.length; j++)

  • 详解JavaScript数组的操作大全

    本文给大家介绍js数组的操作非常详细,感兴趣的朋友一起学习本篇文章吧. 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element[, element[, ...[, elementN]]]]); //创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况

  • 详解JavaScript数组过滤相同元素的5种方法

    方法一:比较内层循环变量的值. var arr = [1, 2, 3, 1, 3, 4, 5, 5]; var resultArr = []; for (i = 0; i < arr.length; i++) { for (j = 0; j < resultArr.length; j++) { if (resultArr[j] == arr[i]) { break; } } if (j == resultArr.length) { resultArr[resultArr.length] = a

  • 详解JavaScript数组和字符串中去除重复值的方法

    原理在代码中表现得非常清晰,我们直接来看代码例子: var ages = array.map(function(obj) { return obj.age; }); ages = ages.filter(function(v,i) { return ages.indexOf(v) == i; }); console.log(ages); //=> [17, 35] function isBigEnough(element) { return element >= 10; } var filte

  • 详解JavaScript什么情况下不建议使用箭头函数

    目录 this指向原理 问题的由来 内存的数据结构 函数 环境变量 箭头函数的缺点 不适用的场景 总结 箭头函数作为ES6新增的语法,在使用时不仅能使得代码更加简洁,而且在某些场景避免this指向问题.但是箭头函数不是万能的,也有自己的缺点以及不适用的场景,虽然可以解决this只想问题,但是也可能会带来this指向问题.具体场景具体分析,本文就深入探讨箭头函数. 箭头函数没有自己的this,其this取决于上下文中定义的this. this指向原理 问题的由来 学懂 JavaScript 语言,

  • 详解JavaScript基于面向对象之创建对象(2)

    接着上文<详解JavaScript基于面向对象之创建对象(1)>继续学习. 4.原型方式        我们创建的每个函数都有一个通过prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法.逻辑上可以这么理解:prototypt通过条用构造函数而创建的那个对象的原型对象.使用原型的好处就是可以让所有对象实例共享它所包含的属性和方法.也就是说,不必在构造函数中定义对象信息,而是直接将这些信息添加到原型中.        原型方式利用了对象的pr

  • 详解JavaScript基于面向对象之继承

    一.面相对象继承机制       这个实例使用UML很好的解释了继承机制.       说明继承机制最简单的方式是,利用一个经典的例子就是几何形状.实际上,几何形状只有两种,即椭圆形(是圆形的)和多边形(具有一定数量的边).圆是椭圆的一种,它只有一个焦点.三角形.矩形和五边形都是多边形的一种,具有不同数量的边.正方形是矩形的一种,所有的边等长.这就构成了一种完美的继承关系,很好的解释了面向对象的继承机制.        在这个例子中,形状是椭圆形和多边形的基类(通常我们也可以叫它父类,所有类都由

  • 详解javascript实现瀑布流绝对式布局

    瀑布流也应该算是流行几年了吧.首先是由Pinterest掀起的浪潮,然后国内设计如雨后春笋般,冒出很多瀑布流的例子,比如,蘑菇街,Mark之(不过最近涉黄,好像被喝茶了),还有淘宝的 "哇哦". 这些都是很棒的例子, 今天我们就聊一聊瀑布流. 一.绝对式布局: JS实现原理 其实瀑布式主要的难点就在于,如果将图片整齐的排列在对应的列下,以及什么时候开始刷新加载图片. 而图片整齐的排列的主要逻辑和算法即,先获取容器内可以放多少列,然后,通过计算,存放第一列的高度,再遍历剩下(除第一列的元

  • 详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于'类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能

随机推荐