title: JavaScript中Array方法总览

toc: true

date: 2018-10-13 12:48:14


push(x)

将x添加到数组最后,可添加多个值,返回数组长度。改变原数组

var arr = [1,2,3];
arr.push(4); // 返回4, arr变为[1, 2, 3, 4]
arr.push(5,6); // 返回6, arr变为[1, 2, 3, 4, 5, 6]

unshift(x)

将x添加到数组开头,可添加多个值,返回数组长度。改变原数组

var arr = [4,5,6];
arr.push(3); // 返回4, arr变为[3, 4, 5, 6]
arr.push(1,2); // 返回6, arr变为[1, 2, 3, 4, 5, 6]

pop()

删除数组最后一个元素,返回被删除元素。改变原数组

shift()

删除数组第一个元素,返回被删除元素。改变原数组

join(x)

使用x将数组连接为字符串,x可以为任意对象。不改变原数组

reverse()

反转数组。改变原数组

slice(start,end)

返回索引start到索引end(不包含end)的新数组。不改变原数组

splice(index, count, value)

从索引为index处删除count个元素,插入value,value可为多个值。改变原数组

sort()

对数组排序。改变原数组

var a = [11,9,21,31];
a.sort();
// a为 (4) [11, 21, 31, 9]

sort排序是根据位来进行排序,而非值的大小,先比较第一位,数字在前,字母在后,若相同则比较后面位。

a = [31, 22, 27, 1, 9]
a.sort((a, b)=>{
return a - b
})
console.log(a) // [1, 9, 22, 27, 31] 按数值大小正序排列

toString()

将数组中的元素用逗号拼接成字符串。不改变原数组

toLocaleString()

将数组中的元素使用各自的toLocaleString()转换后用逗号拼接成字符串。不改变原数组

var a = [1, new Date(), 'a', {m: 1}];
var result = a.toLocaleString();
console.log(result); // '1,2018/10/3 下午9:23:59,a,[object Object]'

indexOf(value)

从索引0开始查找value,如果有,返回匹配到的第一个索引,否则返回-1。不改变原数组

lastIndexOf(value)

从最后开始查找value,如果有,返回匹配到的第一个索引,否则返回-1。不改变原数组

concat(value)

将原数组和value拼接成新数组。不改变原数组

var a = [1, 2], b = [3, 4], c = 5;
var result = a.concat(b, c);
console.log(result); // [1, 2, 3, 4, 5]
console.log(a); // [1, 2] b = [3, [4]];
result = a.concat(b, c);
console.log(result); // [1, 2, 3, [4], 5] concat对于嵌套数组无法拉平
console.log(a); // [1, 2]

fill(value, start, end)

使用给定value填充数组,从索引start开始end结束,不包含end。改变原数组

var a = [1, 2, 3, 4, 5];
var result = a.fill(0, 2, 3);
console.log(result); // [1, 2, 0, 4, 5]
console.log(a); // [1, 2, 0, 4, 5] a = [1, 2, 3, 4, 5];
console.log(a.fill(1)); // [1, 1, 1, 1, 1] 参数一个时,将该参数覆盖填充到数组每一项
a = [1, 2, 3, 4, 5];
console.log(a.fill(1, 2)); // [1, 2, 1, 1, 1] 只有start时,从索引start开始填充到数组末位
a = [1, 2, 3, 4, 5];
console.log(a.fill(1, -2)); // [1, 2, 3, 1, 1] 只有start且为负数时,从倒数|start|位开始填充到数组末位

flat()

将二维数组变为一位数组,只能将第二层嵌套数组“拉平”。不改变原数组

map(fn)

对数组中每一个元素执行fn函数,返回所有返回值组成的数组。不改变原数组

flatMap()

相当于flat和map的结合。不改变原数组

copyWithin(target, start, end)

将数组从start到end索引的元素(不包含end)复制到target开始的索引位置。改变原数组

let a = [1, 2, 3, 4, 5]
let result = a.copyWithin(0, 3, 5)
console.log(result) // [4, 5, 3, 4, 5]
console.log(a) // [4, 5, 3, 4, 5] 索引3到5的元素为4和5,复制到从0开始的位置,替换掉了1和2 a = [1, 2, 3, 4, 5]
console.log(a.copyWithin(2)) // [1, 2, 1, 2, 3] 参数只有一个时,start默认为0,end默认为数组长度-1

entries()

返回一个新的Array迭代器对象,可用for...of遍历。不改变原数组

每一次next返回[index,value]

keys()

返回一个新的Array迭代器对象,可用for...of遍历。不改变原数组

每一次next返回{value,done}

value实际为数组的索引:0,1,2,...

keys()

返回一个新的Array迭代器对象,可用for...of遍历。不改变原数组

每一次next返回{value,done}

value实际为数组中每一项的值

forEach()

遍历数组。不改变原数组

var a = [1,2,3,4,5];
var result = a.forEach(function(value, index) {
console.log(value, index);
// 1 0
// 2 1
// 3 2
// 4 3
// 5 4
});
console.log(result); // undefined
console.log(a); // [1, 2, 3, 4, 5]

every(fn)

判断是否数组中所有元素都满足fn,返回true或false。不改变原数组

some(fn)

判断是否数组有元素满足fn,返回true或false。不改变原数组

filter(fn)

返回数组中满足fn的所有元素(以新数组的形式)。不改变原数组

find(fn)

返回数组中第一个满足fn函数中条件的元素值,没有则返回undefined。不改变原数组

findIndex(fn)

返回数组中第一个满足fn函数中条件的元素索引,没有则返回undefined。不改变原数组

includes(value)

返回一个布尔值,表示数组中是否包含value。不改变原数组

reduce()

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

相当于一个函数累加器,接受一个回调函数的结果,然后将前一次的函数结果再和下一次的数据再次执行此回调函数。

不改变原数组

reduceRight()

类似于reduce(),只是从数组末尾开始进行累计。不改变原数组

JavaScript中Array方法总览的更多相关文章

  1. Javascript 中 Array的 sort()和 compare()方法

    Javascript 中 Array的 sort()方法其实是把要排序的内容转化为string(调用 toString()), 然后按照字符串的第一位 ascii 码先后顺序进行比较,不是数字. 我们 ...

  2. Javascript中Array(数组)对象常用的几个方法

    Javascript中Array数组的几个常用方法 pop()  --获取数组中末尾的元素 shift() --获取数组中首位元素 push() --在数组中末尾增加元素 slice()  --按照下 ...

  3. JavaScript中reduce()方法

    原文  http://aotu.io/notes/2016/04/15/2016-04-14-js-reduce/   JavaScript中reduce()方法不完全指南 reduce() 方法接收 ...

  4. 详解 JavaScript 中 splice() 方法

    splice() 方法是一个比较少用的方法,但是功能确实很好,并且在我们 coding 的时候,经常有需要 splice() 方法,先介绍一下该方法. 在 JavaScript 中 splice() ...

  5. JavaScript 中Array数组的几个内置函数

    本文章内容均参考<JavaScript高级程序设计第三版> 今天在看JavaScript书籍的时候,看到之前没有了解过的JavaScript中Array的几个内置函数对象,为了之后再开发工 ...

  6. JavaScript中Array(数组) 对象

    JavaScript中Array 对象 JavaScript中创建数组有两种方式 (一)使用直接量表示法: var arr4 = []; //创建一个空数组var arr5 = [20]; // 创建 ...

  7. JavaScript中的方法、方法引用和参数

    首先,我们来看一段代码,如果觉得不甚明白的,则本文会对你有益: var player = function (e) {             return (function f(m) {      ...

  8. JavaScript中的方法

    JavaScript中的方法 在JavaScript中,可以通过对象来调用对应的方法.在JavaScript中,有三个重要的window对象方法:用于显示警告信息的alert.用于显示确认信息的con ...

  9. 浅谈 JavaScript 中 Array 类型的方法使用

    前言:Array 类型是 JavaScript 中除了 Object 类型以外最常用的类型. 一.创建数组 JavaScript 中的数组与其他语言中的数组有着很大的区别.例如Java.PHP等语言中 ...

随机推荐

  1. Python·Jupyter Notebook各种使用方法记录

    标签(空格分隔): Python 一 Jupyter NoteBook的安装 1 新版本Anaconda自带Jupyter 2 老版本Anacodna需自己安装Jupyter 二 更改Jupyter ...

  2. weblogic管理脚本

    start.sh Java代码  #!/usr/bin/bash # # start.sh # @auth: zhoulin@lianchuang.com # SERVER_STATUS () { s ...

  3. checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中

     checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...

  4. [转]Linux+XAMPP+eolinker开源版v3.2.4

    eolinker是一个由国人开源的接口管理系统(AMS),特性及介绍详见开源中国-eolinker首页. 搭建步骤参考:eolinker开源指南 系统环境:CentOS Linux release 7 ...

  5. 初涉springboot

    1.首先,我们需要了解微服务是什么? 微服务 (Microservices) 是一种软件架构风格,它是以专注于单一责任与功能的小型功能区块 (Small Building Blocks) 为基础,利用 ...

  6. Underscore模板的使用

    一.开篇 下载underscode.js 二.使用 <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. 微信小程序 | canvas绘图

    1.新的尺寸单位 rpx rpx(responsive pixel): 可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则 ...

  8. 谈谈javascript中原型继承

    什么是继承?拿来主义:自己没有,别人有,把别人的拿过来使用或者让其成为自己的 如何实现继承的方式 原型继承 混入继承 经典继承 1. 混入继承 由于一个对象可以继承自任意的对象,即:o可以继承自对象o ...

  9. 让html页面不缓存js的实现方法

    很多朋友都会碰到这样的情况:如果我们页面加载了js的话下次打开时也会是调用这个js缓存文件,但对于我们调试时是非常的不方便了,本文就来谈论如何解决这一问题,下面一起来看看. 不缓存JS的方法其实挺简单 ...

  10. vue-cli webpack配置中 如何启动less-loader sass-loader

    在vue-cli中构建的项目是可以使用less的,但是查看package.json可以发现,并没有less相关的插件,所以我们需要自行安装. //第一步:安装 npm install less les ...