JS数组整理
1. 检测数组的方法:
1. instanceof【操作符】:
var arr = [];
console.log(arr instanceof Array);//true
1. instanceof操作符的问题在于,它假定单一的全局执行环境。假如网页中包含多个框架,那就会存在两个以上的全局执行环境,也就意味着存在两个以上的Array构造函数。使用本方法就失灵了
2. ec5新增了isArray();方法用来确定某个值到底是不是数组,忽略全局执行环境的问题
2. 栈方法(push和pop)。栈是一种LIFO(last in first out)的数据结构,最新添加的最早删除
1. push(),接受任意数量的参数,逐个添加到数组末尾
2. pop(),从数组末尾弹出最后一项
3. 队列方法(shift和unshift)。队列的访问规则是FIFO(first in first out)
1. shift(),取得数组第一项
2. unshift(),向数组头部添加
4. 数组排序
1. sort():
1. 默认情况下sort()按照升序排列数组各项,底层方法是调用每个数组项的toString()方法,然后比较得到的字符串,即使数组中的每一项都是数字,sort()方法比较的也是字符串:
var arr1 = [1,5, 8, 11 , 15];
arr1.sort();
console.log(arr1); //[1, 11, 15, 5, 8]
所以这个方法可以接受一个比较函数作为参数,以便指定哪个值位于哪个值的前面:
var arr1 = [1,5, 8, 11 , 15];
arr1.sort(function(a,b){return b-a;});
console.log(arr1); //[15, 11, 8, 5, 1]
//比较函数中两参数相减,返回正值就交换位置,返回负值就不换
2. reverse():鸡肋
5. 数组操作方法:
1. concat(),拼接串联数组。具体来说,该方法先创建当前数组的一个副本,然后将接受的参数添加到这个副本的的尾部,最后返回新创建的数组,原数组不变。
var colors = ['red' , 'blue' , 'black'];
var newColors = colors.concat('yellow' , 'silver' , ['gloden' ,'white' , 'purple']); console.log(colors); //["red", "blue", "black"]
console.log(newColors); //["red", "blue", "black", "yellow", "silver", "gloden", "white", "purple"]
2. slice():切出子数组。slice()方法接受一个或两个参数,即起始位置和结束位置(含头不含尾)。只有一个参数的情况下,返回从起始位置到最后的所有数组元素,不会影响原始数组。
var bar = ['h' , 'e' , 'l' , 'l' , 'o' , 'w' , 'o' , 'r' , 'l' , 'd'];
var bar1 = bar.slice(5);
console.log(bar1); //["w", "o", "r", "l", "d"]
var bar2 = bar.slice(0,5);
console.log(bar2); //["h", "e", "l", "l", "o"]
3. splice():接合数组,全能的操作数组方法,改变原数组。最主要的的用途是向数组的中部插入元素,用法有3种:
1. 删除指定位置的任意项:
var bar = ['h' , 'e' , 'l' , 'l' , 'o' , 'w' , 'o' , 'r' , 'l' , 'd'];
var bar1 = bar.splice(5 ,5); //从第5项开始删除,删5个
console.log(bar1); //["w", "o", "r", "l", "d"]
console.log(bar); // ['h' , 'e' , 'l' , 'l' , 'o']
2. 插入:传3个以上的参数,第二个参数为0
var bar = ['h' , 'e' , 'l' , 'l' , 'o' , 'w' , 'o' , 'r' , 'l' , 'd'];
var bar1 = bar.splice(5 , 0 , 'xx' , 'oo'); //从第5项开始,删0个,然后插入内容
console.log(bar1); //[],删除0个,所以为空
console.log(bar); //["h", "e", "l", "l", "o", "xx", "oo", "w", "o", "r", "l", "d"]
3. 替换:第二个参数不为0
var bar = ['h' , 'e' , 'l' , 'l' , 'o' , 'w' , 'o' , 'r' , 'l' , 'd'];
var bar1 = bar.splice(5 , 2 , 'xx' , 'oo'); //从第5项开始,删2个,然后插入内容
console.log(bar1); //['w', 'o'],删除的2个
console.log(bar); //["h", "e", "l", "l", "o", "xx", "oo", "r", "l", "d"]
4. join();最为常用的数组拼接字符串的方法
var arr = ['h' , 'e' , 'l' , 'l' , 'o' , 'w' , 'o' , 'r' , 'l' , 'd'];
arr.join();//"h,e,l,l,o,w,o,r,l,d" 默认用逗号分隔符
arr.join('')//"helloworld" 空分隔符
arr.join('*') //"h*e*l*l*o*w*o*r*l*d"
6. 数组位置方法(两个),都接收两个参数:要查找的元素,和查找起点位置的下标。都返回查找的元素在数组中的位置下标,如果没找到,就返回-1
1. indexof()
2. lastIndexof()
7. 数组迭代方法:ES5为数组定义了5个迭代方法,每个方法都接收两个参数:在每个元素上运行的函数、运行该函数的作用域对象[,可选]。函数接收三个参数:(value ,index , array)
1. every():数组中的每一项运行函数,如果函数对每一项全都返回true,才返回true
2. some():数组中的每一项运行函数,如果函数有任何一项返回true,就返回true
//every()和some()方法类似
var num = [1,2,5,6,7,5];
num.every(
function(value, index , array){
return value>=5;
}
); //false,不是每一个元素都大于等于5 var num = [1,2,5,6,7,5];
num.some(
function(value, index , array){
return value>=5;
}
); //true,有一些元素大于等于5
3. filter():数组中的每一项运行函数,返回的是函数过滤后返回true的元素组成的数组
var num = [1,2,5,6,7,5];
num.filter(
function(value, index , array){
return value>=5;
}
); //[5, 6, 7, 5],把大于等于5的值过滤了出来
//这个方法对查询符合某些条件的数组元素非常有用
4. forEach():数组中的每一项运行函数,无返回值
//forEach()只对数组的每个元素运行传入的函数,本质上与使用for循环迭代数组一个样
var num = [1,2,5,6,7,5];
num.forEach(
function(value, index , array){
num[index] = value*5
}
);
console.log(num);//[5, 10, 25, 30, 35, 25]
5. map():数组中的每一项运行函数,返回每次函数调用的结果组成的数组
//map()方法返回一个数组,这个数组的每个元素都是原数组中的元素执行函数之后产生的
var num = [1,2,5,6,7,5];
num.map(
function(value, index , array){
return value*5
}
); //[5, 10, 25, 30, 35, 25]
//注意与forEach()的区别
8. 数组缩小方法reduce()和reduceRight(),都接收两个参数:在每个元素上运行的函数和运行该函数的作用域对象[,可选]。函数接收4个参数:(前一个值(prev) ,当前值 (cur),下标(index) , 数组对象(array)),第一次迭代发生在数组的第二个元素上,也就是说,第二元素的值为当前值,第一元素的值为前一个值,这个函数返回的任何值都会作为第一个参数自动传给下一项,第三个元素自动把值传给当前值(cur)……
var num = [1,3,5,7,9];
num.reduce(
function(prev , cur , index , array){
return prev*cur;
}
); //945
//reduceRight()方法与此类似,只不过方向相反从最后一个元素开始
至此,除了通用的.length和toString()等,数组的相关属性和方法基本就这些了,活学活用才是王道。
JS数组整理的更多相关文章
- Js数组语法
js数组整理导向图 ---欢迎收藏^ - ^
- js数组学习整理
原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...
- js 数组常用的操作函数整理
平时多做企业应用开发,抱着实用为主,对前端技术理解得比较肤浅,下面就是肤浅地对 js 数组的属性和方法及对它操作的 jquery 方法做些记录: js 数组是 js 内建的一个非常强大数据类型,由于 ...
- 常用js方法整理common.js
项目中常用js方法整理成了common.js var h = {}; h.get = function (url, data, ok, error) { $.ajax({ url: url, data ...
- JS数组学习笔记
原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...
- 项目中常用js方法整理common.js
抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...
- 11、js 数组详细操作方法及解析合集
js 数组详细操作方法及解析合集 前言 在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总结,很多时候就算用过几次这个api,在开发中也很容易 ...
- JS知识点整理(二)
前言 这是对平时的一些读书笔记和理解进行整理的第二部分,第一部分请前往:JS知识点整理(一).本文包含一些易混淆.遗漏的知识点,也会配上一些例子,也许不是很完整,也许还会有点杂,但也许会有你需要的,后 ...
- js数组方法大全(上)
# js数组方法大全(上) 记录一下整理的js数组方法,免得每次要找方法都找不到.图片有点多,注意流量,嘻嘻! 本期分享 join() reverse() sort() concat() slice( ...
随机推荐
- php中GD库的一些简单使用
今天了解了一些GD库的简单使用,现在稍微做一下总结! GD库是什么?,graphic device,图像工具库,gd库是php处理图形的扩展库,gd库提供了一系列用来处理图片的API,使用GD库可以处 ...
- 【JavaScript权威指南(第五版)】笔记之第一部分 核心javascript (第1章~第12章)
第一章 javascript概述 ①.javascript是一种松散类型语言;也是一种解释型语言; 第二章 词法结构 ①.大小写敏感 第三章 数据类型和值 ①.isFi ...
- .NET 进程和线程
一.进程:需要有用Process类用法一:Process.Start("calc");该方法弊端:有许多程序不知道它的运行名字到底是什么,如果写错了,就会出现程序崩溃错误用法二:/ ...
- MongoDB启动配置等
目录: 一.mongoDB 启动配置 二.导出,导入,运行时备份 三.Fsync锁,数据修复 四.用户管理,安全认证 一.启动项 mongod --help C:\Windows\system32&g ...
- Android系统简介(上):历史渊源
上个月,看到微信的一系列文章,讲到Linux的鼻祖-李纳斯的传记<Just for Fun>, 其人神乎其能, 其人生过程非常有趣,值得每个程序员细细品味. 而实际上,对我而已,虽然做软件 ...
- OC3_字典
// // main.m // OC3_字典 // // Created by zhangxueming on 15/6/12. // Copyright (c) 2015年 zhangxueming ...
- IP address/地址 检查
1.Determine if a string is a valid IP address in C Beej's Guide to Network Programming 2.9.14. inet_ ...
- 学习C++ Primer 的个人理解(十)
标准库没有给每个容器都定义成员函数来实现 查找,替换等操作.而是定义了一组泛型算法,他们可以用于不同类型的元素或多种容器类型. 迭代器令算法不依赖与容器 算法永远不会执行容器的操作 算法本身不会执行容 ...
- Linux启动提示“unexpected inconsistency;RUN fsck MANUALLY”
问题:在开机启动时,提示“unexpected inconsistency;RUN fsck MANUALLY”进不了系统 解决方法: fsck不仅可以对文件系统进行扫描,还能修正文件系统的一些问题, ...
- yiic创建YII应用 "php.exe"不是内部或外部命令 解决办法
第一步:运行CMD命令. 第二步:进入Yiic文件的目录 (例如在D盘里面 D:/yii/framework) 第三步:D:\yii\framework>yiic webapp D: ...