js对数组的操作非常频繁,但是每次用到的时候都会被搞混,都需要去查相关API,感觉这样很浪费时间。为了加深印象,所以整理一下对数组的相关操作。

常用的函数

concat()

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

var arr1 = [1, 2, 3]
var arr2 = ['a', 'b', 'c', 'd']
var arr3 = arr1.concat(arr2)
console.log(arr1, arr2, arr3)
// [1, 2, 3] ["a", "b", "c", "d"] [1, 2, 3, "a", "b", "c", "d"]
var arr4 = arr1.concat(1)
console.log(arr4)
// [1, 2, 3, 1]

join()

把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var str = arr1.join('-')
console.log(str)
// 1-2-3-4-5-6-7-8-9
var str1 = arr1.join()
console.log(str1)
// 1,2,3,4,5,6,7,8,9

pop()

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

var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var arr2 = arr1.pop()
console.log(arr1, arr2)
// [1, 2, 3, 4, 5, 6, 7, 8] 9
var arr3 = []
var arr4 = arr3.pop()
console.log(arr3, arr4)
// [] undefined

shift()

删除并返回数组的第一个元素,如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。请注意,该方法不创建新数组,而是直接修改原有的 arrayObject。

var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var arr2 = arr1.shift()
console.log(arr1, arr2)
// [2, 3, 4, 5, 6, 7, 8, 9] 1

unshift()

向数组的开头添加一个或更多元素,并返回新的长度。unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。unshift() 方法不创建新的创建,而是直接修改原有的数组。

var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var arr2 = arr1.unshift(0, 0, 0, 0)
console.log(arr1, arr2)
// [0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 13

push()

向数组的末尾添加一个或更多元素,并返回新的长度。push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject,而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

var arr1 = [1, 2, 3, 4]
var arr2 = [5, 6, 7, 8, 9]
var arr3 = arr1.push(arr2)
console.log(arr1, arr2, arr3)
// [1, 2, 3, 4, [5, 6, 7, 8, 9]]  [5, 6, 7, 8, 9] 5
var arr4 = [1]
var arr5 = arr4.push(5, 6, 7, 8, 9)
console.log(arr4, arr5)
// [1, 5, 6, 7, 8, 9] 6

slice()

从某个已有的数组返回选定的元素,请注意,该方法并不会修改数组,而是返回一个子数组。您可使用负值从数组的尾部选取元素。

var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var arr2 = arr1.slice(-5, -2)
console.log(arr1, arr2)
// [1, 2, 3, 4, 5, 6, 7, 8, 9] [5, 6, 7]
var arr3 = arr1.slice(2, 8)
console.log(arr3)
// [3, 4, 5, 6, 7, 8]
var arr4 = arr1.slice(5)
console.log(arr4)
// [6, 7, 8, 9]

splice()

删除元素,并向数组添加新元素。方法向/从数组中添加/删除项目,然后返回被删除的项目。该方法会改变原始数组。splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var arr2 = arr1.splice(1, 5)
console.log(arr1, arr2)
// [1, 7, 8, 9]  [2, 3, 4, 5, 6]
var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var arr3 = arr1.splice(2, 3, [0, 0, 0, 0])
console.log(arr1, arr3)
// [1, 2, [0, 0, 0, 0], 6, 7, 8, 9]  [3, 4, 5]
var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var arr4 = arr1.splice(2, 3, 0, 0, 0, 0)
console.log(arr1, arr4)
// [1, 2, 0, 0, 0, 0, 6, 7, 8, 9]  [3, 4, 5]

sort()

对数组的元素进行排序,规定排序顺序。参数必须是函数。对数组的引用。请注意,数组在原数组上进行排序,不生成副本。

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。

var arr1 = ['A', 'VCBJN', 'ksjn', 'adf', 'uuu']
var arr2 = arr1.sort()
console.log(arr1, arr2)
// ["A", "VCBJN", "adf", "ksjn", "uuu"] ["A", "VCBJN", "adf", "ksjn", "uuu"]
var arr1 = ['11', '2222', '3', '44', '555']
arr1.sort()
console.log(arr1)
// ["11", "2222", "3", "44", "555"]
var arr1 = ['11', '2222', '3', '44', '555']
arr1.sort((a, b) => a-b)
console.log(arr1)
// ["3", "11", "44", "555", "2222"]

reverse()

颠倒数组中元素的顺序。该方法会改变原来的数组,而不会创建新的数组。

var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var arr2 = arr1.reverse()
console.log(arr1, arr2)
// [9, 8, 7, 6, 5, 4, 3, 2, 1]  [9, 8, 7, 6, 5, 4, 3, 2, 1]

toString()

把数组转换为字符串,并返回结果。当数组用于字符串环境时,JavaScript 会调用这一方法将数组自动转换成字符串。但是在某些情况下,需要显式地调用该方法。arrayObject 的字符串表示。返回值与没有参数的 join() 方法返回的字符串相同。

var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var arr2 = arr1.toString()
console.log(arr1, arr2)
// [1, 2, 3, 4, 5, 6, 7, 8, 9] "1,2,3,4,5,6,7,8,9"

toLocaleString()

把数组转换为本地数组,并返回结果。首先调用每个数组元素的 toLocaleString() 方法,然后使用地区特定的分隔符把生成的字符串连接起来,形成一个字符串。

var arr1 = ['jssj', 2, 3, '测试', 5, 6, 7, 8, 9]
var arr2 = arr1.toLocaleString()
console.log(arr1, arr2)
// ["jssj", 2, 3, "测试", 5, 6, 7, 8, 9] "jssj,2,3,测试,5,6,7,8,9"

valueOf()

valueOf() 方法返回 Array 对象的原始值。该原始值由 Array 对象派生的所有对象继承。valueOf() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中。

toSource()

返回该对象的源代码。该原始值由 Array 对象派生的所有对象继承。toSource() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中。只有 Gecko 核心的浏览器(比如 Firefox)支持该方法,也就是说 IE、Safari、Chrome、Opera 等浏览器均不支持该方法。

function employee(name,job,born) {
this.name=name;
this.job=job;
this.born=born;
}
var bill = new employee("Bill Gates","Engineer",1985);
console.log(bill.toSource());
// ({name:"Bill Gates", job:"Engineer", born:1985})

转载请标注原文地址 https://lion1ou.win/2018/04/24/

JavaScript之数组的常用操作函数的更多相关文章

  1. javascript 数组的常用操作函数

    join() Array.join(/* optional */ separator) 将数组转换为字符串,可带一个参数 separator (分隔符,默认为“,”). 与之相反的一个方法是:Stri ...

  2. JavaScript之字符串的常用操作函数

    字符串的操作在js中非常繁琐,但也非常重要.在使用过程中,也会经常忘记,今天就对这个进行一下整理. String 对象 String 对象用于处理文本(字符串). new String(s); // ...

  3. JavaScript中常见的字符串操作函数及用法

    JavaScript中常见的字符串操作函数及用法 最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信 ...

  4. byte数据的常用操作函数[转发]

    /// <summary> /// 本类提供了对byte数据的常用操作函数 /// </summary> public class ByteUtil { ','A','B',' ...

  5. javascript中数组的常用算法深入分析

    Array数组是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array是前端必修的功课.本文将给大家详细介绍了javascri ...

  6. pandas_一维数组与常用操作

    # 一维数组与常用操作 import pandas as pd # 设置输出结果列对齐 pd.set_option('display.unicode.ambiguous_as_wide',True) ...

  7. Java实例 Part4:数组及其常用操作

    目录 Part4:数组及其常用操作 Example01:将二维数组的行列交换 Example02:使用选择排序法对数组进行排序 Example03:使用冒泡排序法对数组进行排序 Example04:使 ...

  8. php课程 4-17 数组键值操作函数有哪些

    php课程 4-17  数组键值操作函数有哪些 一.总结 一句话总结:多看学习视频 1.php中数组的键值操作函数有哪6个? • array_values();获取数组中的值• array_keys( ...

  9. Python--set常用操作函数

    python提供了常用的数据结构,其中之一就是set,python中的set是不支持索引的.值不能重复.无需插入的容器. 简单记录下set常用的操作函数: 1.新建一个set: set("H ...

随机推荐

  1. MySQL ENCODE和DECODE加密列

    用法: ENCODE(str,passwd) DECODE(str,passwd) INSERT INTO test_log_1 VALUES (30,ENCODE("30",&q ...

  2. 阿里云服务器ECS LAMP环境安装(Ubuntu)

    所周知如果要搭建一个网站lamp环境必不可少,但是阿里云初始的时候没有自带lamp环境,原本阿里云自带的包也已经失效了,所以需要自己来安装.但是网上大部分博客都有些老,于是中间遇到了一些小坑,今天就在 ...

  3. 面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统

    面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统 原型模式和基于原型继承的JavaScript对象系统 在 Brendan Eich 为 JavaScrip ...

  4. Guava包学习---I/O

    Guava的I/O平时使用不太多,目前项目原因导致基本上只有在自己写一些文本处理小工具才用得到.但是I/O始终是程序猿最常遇到的需求和面试必问的知识点之一.同时Guava的I/O主要面向是时JDK5和 ...

  5. TTransport 概述

    TTransport TTransport主要作用是定义了IO读写操作以及本地缓存的操作,下面来看TIOStreamTransport是如何实现的. public abstract class TTr ...

  6. php反序列化

    之前听漏洞银行的一个女生讲php反序列化.她说了一句.php反序列话找public变量. 导致我以为必须php反序列化.可控的变量必须是public or protected.private私有的变量 ...

  7. 利用n 升级工具升级Node.js版本及在mac环境下的坑

    一.利用n 升级Node.js 最近在用NPM安装一个nodejs工具时发现,我的nodejs的版本有些旧了.这不是大问题,只要升级就可以了,当然,重新从nodejs.org最新版本是一种方法,但我想 ...

  8. Python 基于request库的get,post,delete,封装

    # coding=utf-8 import json import requests class TestApi(object): """ /* @param: @ses ...

  9. Luogu_2774 方格取数问题

    Luogu_2774 方格取数问题 二分图最小割 第一次做这种题,对于某些强烈暗示性的条件并没有理解到. 也就是每一立刻理解到是这个图是二分图. 为什么? 横纵坐标为奇数的只会和横纵坐标为偶数的相连. ...

  10. java Activiti6 工作流引擎 websocket 即时聊天 SSM源码 支持手机即时通讯聊天

    即时通讯:支持好友,群组,发图片.文件,消息声音提醒,离线消息,保留聊天记录 (即时聊天功能支持手机端,详情下面有截图) 工作流模块---------------------------------- ...