JavaScript 数组方法总结

最近公司没项目.所以所幸学学JS.毕竟很多人和我一样.属于培训机构出来的.JS基础也很差.

面试的时候面试官问你 .你会JS不.你会毫不犹豫的回答会.因为你确实用过.但是真正会的或许只是以前项目中需要的方法.

鉴于这种情况 我决定把JS基础篇的东西像JAVA或.net一样在博客园阐述一到.

虽然第一次发技术贴.但是我还是看了很多帖子.我不会很不负责的复制代码 然后走人了事.以下为总结部分:

<script type="text/javascript">
function 数组() {
var colors = ["red", "blue", "green"];
//检测数组
if (colors instanceof Array) {
//如果colors是数组.JS3方法
}
if (Array.isArray(colors)) {
//如果colors是数组.JS5方法
}
//转化方法
alert(colors.toLocaleString()); //red,blue,green
alert(colors.toString()); //red,blue,green
alert(colors.valueOf()); //red,blue,green
alert(colors.join(",")); //red,blue,green
//数组的栈方法
//push()
var count = colors.push("aaa", "bbb", "ccc"); //在原数组末尾添加参数
alert(count); //添加后的长度为6
//pop()
var enditem = colors.pop(); //移除最后一个参数
alert(enditem); //显示移除掉的参数"ccc"
//数组的队列方法
//shift()
var firstitem = colors.shift(); //移除第一个参数
alert(firstitem); //显示移除掉的"red"
//unshift()
var newcount = colors.unshift("000", "111", "222"); //在数组最前添加参数
alert(newcount); //显示添加后的数组长度
//重排序方法
var values = [0, 1, 5, 10, 15];
//recerse()
alert(values.reverse()); //倒序 按数字排序
//sort()
alert(values.sort()); //升序 但是每次比较参数是会加tostring() 所以按字符串排序
//但是可以强制转化下 arraySort方法
alert(values.sort(arraySort.reverse)); //倒序
alert(values.sort(arraySort.sort)); //升序
//操作方法
var letter = ["a", "b", "c"];
//concat()
var letter1 = letter.concat(["d", "e"], ["f", "g"]);//基于当前方法 添加一个或多个新的数组
alert(letter1);//a,b,c,d,e,f,g
//slice()
var letter2 = letter1.slice(1, 4);//去掉第一个 和第4个参数 组成新数组
alert(letter2);//b,c,e,d,g
//splice() 参数1 要修改 删除 添加的起始位置 参数2 要删除的数量 后面的参数都代表要添加的项
alert(letter.splice(0, 1));//从数组的[0]开始 删除一个项
alert(letter.splice(2, 0, "aa", "bb"));//从数组[2]开始添加aa bb
alert(letter.splice(2, 1, "cc", "dd"));//从数组[2]开始先删除一项 然后添加cc dd
//位置方法
//IndexOf()
alert(letter.indexOf(4));//从数组开头寻找
//lastIndexOf()
alert(letter.lastIndexOf(4));//从数组尾部寻找
//迭代方法
//every()
letter = new Array();
letter = [1,2,3,4,5,6,7,8,9,10];
var everyletter = letter.every(function (item, index, array) {
//every方法带3个参数 item 数组中的每一项. index 每一项的索引 . array 数组本身
return item > 2;
//当数组中每一项全部满足大于2时.返回true
//这个例子中当循环到第一项时1小于2 所以直接返回false
});
//some()
var someletter = letter.some(function (item, index, array) {
//some方法和every方法一样带三个参数.同上
return item > 2;
//当数组中任何一项满足这个条件就返回true
//这个例子中当走到第三个3大于2时 直接返回true
});
//filter()
var filterletter = letter.filter(function (item, index, array) {
//filter方法用法和every和some相同.
//但是返回结果为数组中包含的每一项
return item > 2;
//这个例子会返回所有大于2的数字.如3,4,5,6,7,8,9,10
});
//map()
var mapletter = letter.map(function (item, index, array) {
//map方法用法和every和some相同.
//但是返回的结果是在原始数组中对应项上运行传入函数的结果;
return item * 2;
//这个例子我在每个item乘以2.得到的结果为2,4,6,8,10,12,14,16,18,20
});
//forEach()
letter.forEach(function(item, index, array) {
//forEach方法是没有返回结果的.
//和for循环一样 只是围绕的是数组
//在这里可以做任何操作
});
//缩小方法
//reduce()
var value = [1, 2, 3, 4, 5];
var sum = value.reduce(function (item1, item2, index, array) {
//reduce有个参数 item1 前一个值,item2 当前值, index和array和every和some方法一样
//这个例子中第一次执行item1=1,item2=2; 第二次执行时.item1=3(1+2),item2=3 ,第三次执行 6 4 ,第4次执行10,5
//所以结果为15.
return item1 + item2;//15
});
//reduceRight()
var sum1 = value.reduceRight(function (item1, item2, index, array) {
//reduceRight和reduce的区别在于,其实就是反过来执行
//所以结果还是为15
return item1 + item2;//15
});
}

//对于sort()方法的扩充 主要是对于数组的转化
var arraySort = {
reverse: function (va1,va2) {
if (va1 > va2) {
return 1;
} else if (va1 < va2) {
return -1;
} else {
return 0;
}
},
sort: function (va1, va2) {
if (va1 > va2) {
return -1;
} else if (va1 < va2) {
return 1;
} else {
return 0;
}
}
};

</script>

  

时间: 2024-10-17 18:25:50

JavaScript 数组方法总结的相关文章

JavaScript数组方法对比(深度学习数组)

JavaScript数组方法对比 众所周知,JavaScript提供了许多对数组进行改变的方法,但是有些会对原数组进行影响,有些不会.下边就列举出来. 一.新增 影响原数组 array.push()  //向数组的末尾添加一个或更多元素,并返回新的长度. var array =[1,2,3,4,5]; array.push(6); // [1,2,3,4,5,6]; array.unshift() //向数组的开头添加一个或更多元素,并返回新的长度. var array =[1,2,3,4,5]

JavaScript数组方法详解

JavaScript数组方法详解 JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法:并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中原型上的方法,本文举例介绍了从ES3到ES7几乎所有的数组方法.这大概是最全的数组方法详解了.希望读者能从中有所收获. 一.各版本数组方法一览表 数组方法名 对应版本 功能 原数组是否改变 pop() ES3- 删除最后一位,并返回删除的数据 是 push() ES3- 在最后一位新增一或多个数据,

JavaScript数组方法总结

由于最近都在freecodecamp上刷代码,运用了很多JavaScript数组的方法,因此做了一份关于JavaScript教程的整理,具体内容如下: 一.普通方法 1.join() 将数组元素连接在一起,并以字符串形式返回参数:可选,指定元素之间的分隔符,没有参数则默认为逗号返回值:字符串对原数组的影响:无2.reverse()将数组的元素顺序变成倒序返回参数:无返回值:数组对原数组的影响:原数组被修改为倒序排列之后的数组3.sort()对数组元素进行排序并返回参数:可选,排序的方法函数,没有

JavaScript - 数组方法应用

数组方法应用 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

javascript数组方法

javascript有许多数组方法,今天整理了一下: var a=[1,2,3]; a.join();//将数组中所有元素都转化为字符串并连接在一起,参数作为分隔符. a.reverse();//将数组中的元素点到顺序,返回逆序数组. a.sort();//将数组中的元素排序并返回排序后的数组. a.concat();//创建并返回一个新数组,其中返回数组包括a中元素和参数. a.slice();//方法返回制定数组的一个片段或子数组,通过下标作为参数截取. a.splice();//在数组中插

4个错误使用JavaScript数组方法的案例

译者按: 做一个有追求的工程师,代码不是随便写的! 原文: Here's how you can make better use of JavaScript arrays 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java线上bug实时监控.真的是一个很好用的bug监控服务,众多大佬公司都在使用. 我保证这是一篇可以快速阅读并吸收的文章

JavaScript数组方法大全(第二篇)

数组方法大全(第二篇) 注意:如有错误欢迎指出,如有雷同纯属巧合,本博客参考书籍JavaScript权威指南,有兴趣的小伙伴可以去翻阅一下哦 forEach()方法 遍历数组,里面可以传递一个方法 var arr = [1,2,3]; arr.forEach(function (item,index,array) { //item:表示数组中元素的每一项 //index:表示每一项所对应的索引 //array:表示原数组 }) map()方法 将调用数组的每个元素传递给指定的函数,并返回一个新的

JavaScript数组方法的兼容性写法 汇总:indexOf()、forEach()、map()、filter()、some()、every()

ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实非常好用.在过去,我会为了兼容性尽量不用这些方法.但是,总不能为了旧的丢了新的吧?!虽然说jQuery已经集成好了不少语法糖,但jQuery体积太庞大,作为一名志于体面的前端儿得知道原生的兼容性写法要怎么写.于是这几天,我开始在琢磨这些方法的兼容性写法.其实并不难,就是以前不够自信不敢写.写完以后,

JavaScript数组方法--flat、forEach、map

今天到flat了,一个第一次知道该方法还是看到一个面试题,别人给了个答案,用到了flat才知道的方法. 前面也写过关于这道面试题的文章,<一道关于数组的前端面试题>. 这里再来说说吧! flat:flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回.不考虑他所谓指定深度,直白一点来说,就是数组扁平化,也就是把一个有多层嵌套的数组,提取为一个只有一层的数组.同样,先看用法吧: var elements = ['Fire', 'Wind',

JavaScript数组方法--reduce、reduceRIght、reverse

今天写的reduce是比较复杂的一个数组方法,其实在这之前我也用过reduce,可是每次用起来总感觉不那么顺手,主要还是因为不熟,对reduce本身不熟.首先reduce这个单词翻译为中文,不那么直观,再加上他的示例比较简单,导致用在复杂情况下,就有点懵逼的感觉.通过自己的理解,我们重构一次,可能更能够方便理解! reduce:reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值.看到MDN给的这句解释,可能就懵了!什么叫reduce