js 数组方法总结
Array数组:
length属性
可通过array.length增加或者减少数组的长度,如;array.length=4(数组长3,第四位为undefined),也可单纯获得长度。array[array.length]=’’赋值。
检测数组
检测是否数组ES3 instanceof array ES5新增的Array.isArray(),支持的IE9+,Opera 10.5+,Chrome,Safari5+。
一:原数组不变 [,start],表示0或1个参数
concat()
无参,返回数组副本;参数为数组,将两个数组连接;不是数组,添加到结果数组末尾。在concat拷贝原数组的过程中,对象引用时会复制对象引用到组合的新数组中,原数组和新数组中的对象引用都指向同一个实际变量。所以,实际对象被修改时,两数组同时被修改。
粒:
includes()
ES7。返回一个布尔值,表示数组中是否包含给定的值,与字符串includes方法类似。
Includes(searchElement,fromIndex),fromIndex可选,表示开始位置,如果为负值,按升序从array.length+fromIndex索引开始搜索。
Includes()作为一个通用方法,也可以用于其他类型对象,栗子:
(function() {
console.log([].includes.call(arguments, 'a')); // true
console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');
兼容性(IE未实现)
join()
只接受一个参数,分隔符的字符串,然后返回所有项的字符串,array.join(“||”)//1||2||3
如果参数为空,将数组中的元素直接拼接。Undefied or null 转化为空字符串
slice()
将数组的一部分浅复制(shallow copy)存入新的数组并返回,不改变原数组。
1参或两参;1个参返回的是从该参数指定位置到数组末尾项;2个参返回起始和结束位置之间项,不包括结束位置项。
indexOf(searchElement,fromIndex)
要查找的项,(可选)表示查找起点位置的索引。没有找到返回-1,从头开始查找;第二参数表示开始查找的位置,返回的结果依然是数组中的排位。故作用不大。
lastIndexOf()从尾开始查找;
toString()返回由数组中每个值得字符串形式拼接而成的一个逗号分隔的字符串,
valueOf()返回的还是数组。
toLocaleString()和前两者差不多。
二、改变自身方法
arr.copyWithin(target,[, start[, end]]) 兼容问题
数组内部替换操作,负数,倒数开始
[1, 2, 3, 4, 5].copyWithin(-2);
// [1, 2, 3, 1, 2]
[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
// [1, 2, 3, 3, 4]
array.fill(value [,statrt [, end ]])
将指定区间元素填充
[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}
pop()
从数组末尾移除最后一项,减少数组的length值,返回移除的项。
push()
可以接受任意数量的参数,把它们逐个添加到数组的末尾,并返回修改后数组的长度
reverse()
反转数组项的顺序
shift()
移除数组中的第一项并返回第一项,数组长度减1
unshift()
在数组前端添加任意个项,并返回新数组的长度
sort()
默认是按升序排列数组,比较的是字符串。要想按自己想法排序,写方法。Sort(方法名) a>b return 1,反之-1,相等 return 0
splice()最强大的数组方法。向数组的中部插入项。
1:删除,2个参数,要删除的第一项位置和项数,splice(0,2)删除数组中的前两项。
2:插入,3个参数,起始位置、要删除的项数、要插入的项数,如果是多项,继续传入参数,第4,5更多。Splice(2,0,’1’,’2’),当前数组位置2插入字符串1,2;
3:替换,可以向指定位置插入任意数量的项,同时删除任意数量的项。用法同第二条,第二个参数不是0。
栗子:
删除给定数组中的第二项和第三项,并且在得到的新的数组中第一项后面添加一个新的值
var arr1 = ['a','b','c','d','e'];
var arr2 = arr1. splice ( 1 , 2 ,'newvalue');
三、遍历方法
forEach((v, i, a) => {})
让数组的每一项都执行一次给定的函数
v表示当前项的值,i表示当前索引,a表示数组本身
forEach遍历的范围在第一次调用 callback前就会确定。调用forEach后添加到数组中的项不会被 callback访问到。如果已经存在的值被改变,则传递给 callback的值是 forEach遍历到他们那一刻的值。已删除的项不会被遍历到。
entries();
返回一个array
栗子:
var arr = ["a", "b", "c"];
var eArr = arr.entries();
console.log(eArr.next().value); // [0, "a"]
console.log(eArr.next().value); // [1, "b"]
console.log(eArr.next().value); // [2, "c"]
every(),对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true
some()是对数组中每一项运行指定函数,如果该函数对任一项返回true,则返回true
filter()
使用指定的函数测试所有元素,并创建一个包含所有测试通过的元素的新数组
callback函数返回一个布尔值,true即通过测试
不会改变原数组
栗子1
function traverse(){//输出所有页面宽度和高度大于50像素的节点
return Array.prototype.filter.call(document.querySelectorAll('body *'), function(node){
return node.offsetWidth > 50 && node.offsetHeight > 50;
});
}
栗子2
var a1 = ['a', 10, 'b', 20, 'c', 30];var a2 = a1.filter(function(item) {
return typeof item == 'number';
});console.log(a2); // logs 10,20,30
find()
查询到第一个符合条件的就返回 IE不支持
keys() IE不支持
返回一组数组索引的迭代器(类似于entries)
var arr = ['a', , 'c'];
var sparseKeys = Object.keys(arr);
var denseKeys = [...arr.keys()];
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys); // [0, 1, 2]
array.map((v, i, a) => {}) IE9+
返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
map 不修改调用它的原数组本身(当然可以在 callback 执行时改变原数组)
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]
例var number = [1,2,3,4,5,4,3,2,1];
Var everyResult = number.every(function(item,index,array){
//函数
})
Alert(everyResult);
reduce(),reduceRight() (反方向) IE9+
对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。
从第一项开始,接收四个参数:例
Var values = [1,2,3,4,5];
Var sum = values.reduce(function(prev, cur, index, array){
Return prev + cur;
});
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
function(a, b) {
return a.concat(b);
},
[]);// flattened is [0, 1, 2, 3, 4, 5]
Array.prototype.slice.call
真实数组具有slice方法,可以对数组进行浅复制(不影响原数组),返回的依然是数组。类似数组虽然有length属性,可以使用for循环遍历,却不能直接使用slice方法,会报错!但是通过Array.prototype.slice.call则不会报错,本身(类似数组)被从头到尾slice复制了一遍——变成了真实数组!
将类似数组的对象(比如arguments)转换为真实的数组
Array.prototype.slice.call(arguments)
js 数组方法总结的更多相关文章
- js 数组方法比较
js 数组方法比较 table th:first-of-type { width: 80px; } table th:nth-of-type(2) { width: 120px; } table th ...
- js数组方法详解
Array对象的方法-25个 /*js数组方法详解 */ /* * 1 concat() 用于连接多个数组或者值-------------- * 2 copyWithin() 方法用于从数组的指定位置 ...
- 转载收藏(js数组方法大全)
js数组方法大全 JavaScript中创建数组有两种方式 (一)使用 Array 构造函数: var arr1 = new Array(); //创建一个空数组var arr2 = new Arra ...
- js数组方法大全(上)
# js数组方法大全(上) 记录一下整理的js数组方法,免得每次要找方法都找不到.图片有点多,注意流量,嘻嘻! 本期分享 join() reverse() sort() concat() slice( ...
- js数组方法大全(下)
# js数组方法大全(下) 记录一下整理的js数组方法,免得每次要找方法都找不到.图片有点多,注意流量,嘻嘻! 本期分享 forEach() map() filer() every() some() ...
- JS数组方法汇总 array数组元素的添加和删除
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...
- 几个关于js数组方法reduce的经典片段
以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要 ...
- js数组方法详解(最新最全)
数组是js中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响.本文所有的栗子都是在es7环境下测试的,如果有问题欢迎留言交流 ...
- js数组方法解析
js 数组有很多方法,其中有的常用,有的不常用,归纳几个常用的方法,做个总结: 1. 转换方法: 1.1 valueOf():调用这个方法会返回数组本身 <script> var arr ...
- js数组方法
数组方法清空数组1: arr.length=02: arr=[]arr.push()//往数组最后一个添加元素,会待会一个返回值,就是新的数组长度arr.unshift()//往数组的第一个添加元素, ...
随机推荐
- 3314: [Usaco2013 Nov]Crowded Cows
3314: [Usaco2013 Nov]Crowded Cows Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 111 Solved: 79[Sub ...
- cobbler自动安装系统
一.简介 Cobbler是一个快速网络安装linux的服务,而且在经过调整也可以支持网络安装windows.该工具使用python开发,小巧轻便(才15k行python代码),使用简单的命令即可完成P ...
- 浅谈对java中锁的理解
在并发编程中,经常遇到多个线程访问同一个 共享资源 ,这时候作为开发者必须考虑如何维护数据一致性,在java中synchronized关键字被常用于维护数据一致性.synchronized机制是给共享 ...
- python中的I/O
先看比较简单的,标准输入输出流 输出到表屏幕: >>>str = "hello, python" >>>print "content: ...
- (28)初识struts框架
案例剖析中介绍了一个自己写的mystruts框架,这里开始简单的认识struts框架. 1.先看一个简单的struts开发的例子来熟悉一下流程 Struts就是基于mvc模式的框架! (struts其 ...
- windows phone 8.1开发 onedrive操作详解
原文出自:http://www.bcmeng.com/onedrive/ 小梦今天给大家分享一下windows phone 8.1开发 onedrive中的一些操作: Windows phone 8. ...
- 【G】开源的分布式部署解决方案文档 - 使用手册
G.系列导航 [G]开源的分布式部署解决方案 - 导航 已知问题 导航没有联动 因为权限只是做了基础的登录校验,考虑到后面导航要跟权限关联上暂时是写死的. 只有部分界面使用了Vue.js 因为刚开始没 ...
- Ubuntu安装Nginx+PHP7.0.4+MySQL5.6
安装Nginx 1.首先添加nginx_signing.key(必须,否则出错) $ wget http://nginx.org/keys/nginx_signing.key $ sudo apt-k ...
- Tomcat之jvm及连接数设置
一.Tomcat的JVM提示内存溢出 查看%TOMCAT_HOME%\logs文件夹下,日志文件是否有内存溢出错误 二.修改Tomcat的JVM 1.错误提示:java.lang.OutOfMemor ...
- dotweb——go语言的一个微型web框架(三)路由注册
上一章我们讲了如何启动一个dotweb程序,本篇文章将介绍如何注册路由. router是dotweb用来管理路由的结构体,它提供了一些关于路由操作函数. app := dotweb.New() rou ...