当前位置:首页 > 日记 > 正文

JavaScript你不知道的一些数组方法

JavaScript你不知道的一些数组方法

concat

var a = [1,2,3];a.concat([4,5,6],7,8);//[1,2,3,4,5,6,7,8]

注意,a数组并没有改变,只是返回了一个新数组。

copyWithin

它接受三个参数。

target (必需):从该位置开始替换数据。
start (可选):从该位置开始读取数据,默认为 0 。如果为负值,表示倒数。
end (可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。

这三个参数都应该是数值,如果不是,会自动转为数值

// 将 3 号位复制到 0 号位 [1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5] // -2 相当于 3 号位, -1 相当于 4 号位 [1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5] // 将 3 号位复制到 0 号位 [].copyWithin.call({length: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, length: 5} // 将 2 号位到数组结束,复制到 0 号位 var i32a = new Int32Array([1, 2, 3, 4, 5]); i32a.copyWithin(0, 2); // Int32Array [3, 4, 5, 4, 5] // 对于没有部署 TypedArray 的 copyWithin 方法的平台 // 需要采用下面的写法 [].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); // Int32Array [4, 2, 3, 4, 5] 

entries

var a = [1,2,3];var en = a.entries();en.next().value;//[0.1];

返回一个迭代对象

every

function isBigEnough(element, index, array) { return (element >= 10);}var passed = [12, 5, 8, 130, 44].every(isBigEnough);// passed is falsepassed = [12, 54, 18, 130, 44].every(isBigEnough);// passed is true

每项都通过测试函数返回true,否则返回false

fill

[1, 2, 3].fill(4)   // [4, 4, 4][1, 2, 3].fill(4, 1)   // [1, 4, 4][1, 2, 3].fill(4, 1, 2)  // [1, 4, 3][1, 2, 3].fill(4, 1, 1)  // [1, 2, 3][1, 2, 3].fill(4, -3, -2) // [4, 2, 3][1, 2, 3].fill(4, NaN, NaN) // [1, 2, 3]Array(3).fill(4);   // [4, 4, 4][].fill.call({length: 3}, 4) // {0: 4, 1: 4, 2: 4, length: 3}

改变的是数组本身

filter

function isBigEnough(value) { return value >= 10;}var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);// filtered is [12, 130, 44]

返回一个新的数组

find

方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefind

function isBigEnough(element) { return element >= 15;}[12, 5, 8, 130, 44].find(isBigEnough); // 130

findIndex

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

function isBigEnough(element) { return element >= 15;}[12, 5, 8, 130, 44].findIndex(isBigEnough); // 3

forEach

let a = ['a', 'b', 'c'];a.forEach(function(element) { console.log(element);});// a// b// c//语法array.forEach(callback(currentValue, index, array){ //do something}, this)array.forEach(callback[, thisArg])

callback

为数组中每个元素执行的函数,该函数接收三个参数:currentValue(当前值)数组中正在处理的当前元素。index(索引)数组中正在处理的当前元素的索引。arrayforEach()方法正在操作的数组。thisArg可选可选参数。当执行回调 函数时用作this的值(参考对象)

注意: 没有办法中止或者跳出 forEach 循环,除了抛出一个异常。如果你需要这样,使用forEach()方法是错误的,你可以用一个简单的循环作为替代。如果您正在测试一个数组里的元素是否符合某条件,且需要返回一个布尔值,那么可使用 Array.every,Array.some。如果可用,新方法 find()或者findIndex()也可被用于真值测试的提早终止。

include

arr.includes(searchElement)arr.includes(searchElement, fromIndex)

参数

searchElement

需要查找的元素值。

fromIndex

可选

从该索引处开始查找 searchElement

。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

返回值

一个 Boolean。

[1, 2, 3].includes(2);  // true[1, 2, 3].includes(4);  // false[1, 2, 3].includes(3, 3); // false[1, 2, 3].includes(3, -1); // true[1, 2, NaN].includes(NaN); // true

indexOf

arr.indexOf(searchElement)arr.indexOf(searchElement[, fromIndex = 0])

参数

searchElement

要查找的元素

fromIndex

开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,仍然从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0.

返回值

首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1

let a = [2, 9, 7, 8, 9]; a.indexOf(2); // 0 a.indexOf(6); // -1a.indexOf(7); // 2a.indexOf(8); // 3a.indexOf(9); // 1if (a.indexOf(3) === -1) { // element doesn't exist in array}

join

str = arr.join()// 默认为 ","str = arr.join("")// 分隔符 === 空字符串 ""str = arr.join(separator)// 分隔符

keys

keys() 方法返回一个新的Array迭代器,它包含数组中每个索引的键

let arr = ["a", "b", "c"];let iterator = arr.keys();// undefinedconsole.log(iterator);// Array Iterator {}console.log(iterator.next()); // Object {value: 0, done: false}console.log(iterator.next()); // Object {value: 1, done: false}console.log(iterator.next()); // Object {value: 2, done: false}console.log(iterator.next()); // Object {value: undefined, done: true}

map

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

let array = arr.map(function callback(currentValue, index, array) {  // Return element for new_array }[, thisArg])let numbers = [1, 5, 10, 15];let doubles = numbers.map((x) => { return x * 2;});// doubles is now [2, 10, 20, 30]// numbers is still [1, 5, 10, 15]let numbers = [1, 4, 9];let roots = numbers.map(Math.sqrt);// roots is now [1, 2, 3]// numbers is still [1, 4, 9]

callback

生成新数组元素的函数,使用三个参数:

currentValue

callback 的第一个参数,数组中正在处理的当前元素。

index

callback 的第二个参数,数组中正在处理的当前元素的索引。

array

callback 的第三个参数,map 方法被调用的数组。

thisArg

可选的。执行 callback 函数时 使用的this 值。

返回值

一个新数组,每个元素都是回调函数的结果。

pop和push

pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

push() 方法将一个或多个元素添加到数组的末尾,并返回数组的新长度。

arr.push(element1, ..., elementN)

合并两个数组

该示例使用 apply() 添加第二个数组的所有元素。

注意当第二个数组(如示例中的moreVegs)太大时不要使用这个方法来合并数组,因为事实上一个函数能够接受的参数个数是有限制的。具体可以参考 apply()

var vegetables = ['parsnip', 'potato'];var moreVegs = ['celery', 'beetroot'];// 将第二个数组融合进第一个数组// 相当于 vegetables.push('celery', 'beetroot');Array.prototype.push.apply(vegetables, moreVegs);console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot']

reduce和reduceRight

reduce() 方法对累加器和数组中的每个元素 (从左到右)应用一个函数,将其减少为单个值。

array.reduce(function(accumulator, currentValue, currentIndex, array), initialValue)var total = [0, 1, 2, 3].reduce(function(sum, value) { return sum + value;}, 0);// total is 6var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { return a.concat(b);}, []);// flattened is [0, 1, 2, 3, 4, 5]

callback

执行数组中每个值的函数,包含四个参数

accumulator

上一次调用回调返回的值,或者是提供的初始值(initialValue)

currentValue

数组中正在处理的元素

currentIndex

数据中正在处理的元素索引,如果提供了 initialValue ,从0开始;否则从1开始

array

调用 reduce 的数组

initialValue

可选项,其值用于第一次调用 callback 的第一个参数。如果没有设置初始值,则将数组中的第一个元素作为初始值。空数组调用reduce时没有设置初始值将会报错。

PS: 与 reduceRight()和reduce() 的执行方向相反

reverse

reverse 方法颠倒数组中元素的位置,并返回该数组的引用。

shift与unshift

shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

unshift() 方法将一个或多个元素添加到数组的开头,并返回新数组的长度。

slice

slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。

arr.slice();//[0,end];arr.slice(start);//[start,end];arr.slice(start,end);//[start,end];

slice不修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。原数组的元素会按照下述规则拷贝:

如果该元素是个对象引用 (不是实际的对象),slice会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。

对于字符串、数字及布尔值来说不是String、Number或者Boolean,slice会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。

如果向两个数组任一中添加了新元素,则另一个不会受到影响

some

some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。

const isBiggerThan10 = (element, index, array) => { return element > 10;}[2, 5, 8, 1, 4].some(isBiggerThan10); // false[12, 5, 8, 1, 4].some(isBiggerThan10); // true

toLocaleString与toString

toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。

var number = 1337;var date = new Date();var myArr = [number, date, "foo"];var str = myArr.toLocaleString(); console.log(str); // 输出 "1,337,2017/8/13 下午8:32:24,foo"// 假定运行在中文(zh-CN)环境,北京时区var a=1234a.toString()//"1234"a.toLocaleString()//"1,234"//当数字是四位及以上时,toLocaleString()会让数字三位三位一分隔,像我们有时候数字也会三位一个分号var sd=new Date()sd//Wed Feb 15 2017 11:21:31 GMT+0800 (CST)sd.toLocaleString()//"2017/2/15 上午11:21:31"sd.toString()//"Wed Feb 15 2017 11:21:31 GMT+0800 (CST)"

splice

splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。

array.splice(start)array.splice(start, deleteCount) array.splice(start, deleteCount, item1, item2, ...)

start?

指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从1计数)。

deleteCount 可选

整数,表示要移除的数组元素的个数。如果 deleteCount 是 0,则不移除元素。这种情况下,至少应添加一个新元素。如果 deleteCount 大于start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。

如果deleteCount被省略,则其相当于(arr.length - start)。

item1, item2, ... 可选

要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。

返回值

由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。

相关文章

Excel中2010版进行导入网站数据的

Excel中2010版进行导入网站数据的

网站,数据,操作技巧,操作步骤,电脑软件,  在Excel中,可以利用“获取外部数据”功能导入网页中的数据。今天,小编就教大家在Excel中2010版进行导入网站数据的操作技巧。Excel中2010版进行导入网站数据的操作步骤单击“自网站…

JS实现匀加速与匀减速运动的方法示

JS实现匀加速与匀减速运动的方法示

方法,减速运动,示例,电脑软件,JS,本文实例讲述了JS实现匀加速与匀减速运动的方法。分享给大家供大家参考,具体如下:/* * 动画帧函数 * * */ var requestFrame=function(){ var prefixList=['webkit','moz','ms']; var func; for(va…

PPT2007怎么将视频格式转换图文教

PPT2007怎么将视频格式转换图文教

教程,格式转换,图文教程,转换成,视频,  怎样把PPT转换成视频?通过将PPT输出为视频格式,可以实现更广泛的观看PPT操作。下面小编马上就告诉大家将ppt输出为视频的方法吧。PPT2007转换成视频放映教程打开要转换成视频的PPT。02选择幻灯片放…

解决word2013配置进度的两种方法

解决word2013配置进度的两种方法

方法,配置,两种,进度,电脑软件,  相信总有人遇到过每次打开Office2013都会遇到坑爹的“安装程序正在准备必要的文件”然后再显示“正在配置Microsoft Office Professional Plus 2013"的情况(如下图所示)。那么下面就由小…

excel求和公式使用方法excel求和公

excel求和公式使用方法excel求和公

公式,使用方法,电脑软件,excel,  Excel中经常需要使用求和公式对数据进行求和,求和公式具体该如何使用呢?下面是由小编分享的excel求和公式的使用方法,以供大家阅读和学习。excel求和公式的使用方法1步骤1:拖动鼠标,选取要计算的数据excel求…

查看qq好友天数教程如何查看QQ成为

查看qq好友天数教程如何查看QQ成为

方法,教程,天数,好友,纪念日,  很多人想知道和朋友成为QQ好友有多少天了,如何查看呢?下面是小编为大家整编的查看QQ成为好友天数的方法,大家快来看看吧。查看qq好友天数方法在QQ中查看好友天数有两种方法,一种是使用QQ查看,另一种是使用QQ空间…

怎么知道自己是否插了分页符

怎么知道自己是否插了分页符

分页,检查,步骤,插了,知道自己,  在word编辑中常常需要从第二页插入页码,第一页不需要页眉页脚,大家通常知道插入分隔符可以很好的实现,但是在操作的过程中常常未能如愿,有的时候不知道是否已插入分节符,下面小编就告诉你怎么知道自己是否插了…

在vue-cli脚手架中配置一个vue-rou

在vue-cli脚手架中配置一个vue-rou

路由,配置,脚手架,电脑软件,vue,前言这篇文章给大家讲解的是在vue-cli脚手架中如何配置vue-router前端路由的相关内容,分享出来供打击参考学习,下面来一起看看详细的介绍:首先你需要一个main.js文件//然后引入vue-routerimport VueRouter from…

PPT2010怎么增加撤销次数

PPT2010怎么增加撤销次数

次数,电脑软件,  随着时代发展,PPT办公软件被很普遍的使用在我们工作、生活之中。因为PPT制作过程中,操作很多很繁琐,往往为了一个要达到的效果要试验很多次。做的步骤太多了导致撤销不了是很麻烦的,又要重新开始调整。那么我们就需要增加PP…

怎么在excel中进行隔行填充在excel

怎么在excel中进行隔行填充在excel

填充,隔行,方法,步骤,电脑软件,  Excel作为办公人员常用的软件之一,获得了世界范围的推广和使用。Excel软件依靠其强大的功能,成为一款快速、有效处理函数和公式的优秀软件。我们在编辑Excel表格数据的时候,难免会因为长时间工作眼花导致…

bootstrap表单按回车会自动刷新页

bootstrap表单按回车会自动刷新页

刷新页面,表单,解决办法,按回车,电脑软件,想给form表单增加回车自动提交的功能$('#password').keydown(function(event){ if (event.keyCode == 13) $('#login').click(); });然而,并没有达到预期的效果,而是自动刷新了表单,并将表单…

excel上插入的方法步骤图

excel上插入的方法步骤图

方法,插入图片,步骤,电脑软件,excel,  Excel是一个办公很经常用到的一个办公软件,他主要用于数据的分析、查看、对比等,让数据看起来更直观,更容易对比,而有很多时候需要在Excel上放图片,下面是由小编分享的,希望对你有用。excel上插入图片的方…