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()//往数组的第一个添加元素, ...
随机推荐
- SQLServer存储过程实现单条件分页
SQLServer Procedure Pagination_basic: ALTER PROCEDURE [qiancheng].[Pagination_basic] ( ), --name of ...
- Struts中数据处理
对数据操作的3种方法(把数据保存到域中): 方式1:直接获取servletApi 核心类:ServletActionContext提供的静态方法 /** * 方式1:拿到servletApi,执行操作 ...
- 网络安全实验室 脚本关通关writeup
[1]key又又找不到了查看源代码.发现key的路径,点击进行了302跳转,抓包,得到key [2]快速口算要2秒内提交答案,果断上python import requests,re s = requ ...
- Java中实现短信发送
最近跟着做公司的项目偶然接触到的,顺势把这个给记录下来,给自己梳理一下. 采用引入第三方工具的方式,网上查了半天,发现简单的实现方式便是注册一个中国网建的账号,新建账号的时候会附带赠几条免费短信,彩信 ...
- C#对委托的初步理解理解
作为新手对委托的学习: 1.定义委托:委托实际上是一个类,在定义委托前就知道了方法的返回类型和方法的参数类型(可以把委托理解为只知道方法的返回类型和方法的参数类型,不知道方法体) public de ...
- 使用Java语言开发微信公众平台(四)——图文消息的发送与响应
在上一篇文章中,我们实现了被关注回复与关键词回复功能.在用户关注的时候自动推送功能菜单,并根据用户输入的关键词,回复特定信息.但是,我们只能回复文本消息给用户,如何才回复一条图文消息呢?本周,我们一起 ...
- JAVA-Servlet-ServletConfig 与 ServletContext 的区别
什么是ServletConfig? Servlet容器初始化一个servlet对象时,会为这个servlet对象创建一个servletConfig对象.在servletConfig对象中包含了serv ...
- 免安装版Tomcat配置内存
去安装目录下 找 bin 目录找到这个文件 catalina.bat在文件的头部加上 set JAVA_OPTS=-Xms512m -Xmx512m -Xss1024k具体大小自己调整
- c++学习笔记之继承篇
title: c++学习笔记之继承篇 date: 2017-03-26 16:36:33 tags: [c++,继承,public,virtual,private,protected] categor ...
- BZOJ3224普通平衡树【Splay】
3224: Tyvj 1728 普通平衡树 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 11751 Solved: 5013 Descriptio ...