JS数组(Array)处理函数总结

时间:2022-10-19 23:28:09

1、push() 向数组的末尾添加一个或更多元素,并返回新的长度
例如:

1 <script type="text/javascript">
2 var arr = ["George", "John", "Thomas"];
3 document.write(arr + "<br/>");
4 document.write(arr.push("James") + "<br/>");
5 document.write(arr);
6 </script>

输出结果:
George,John,Thomas
4
George,John,Thomas,James

2、pop() 删除并返回数组的最后一个元素
pop()方法将删除数组的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。
如果数组已经为空,则pop()不改变数组,并返回undefined值
例如:

1 <script type="text/javascript">
2 var arr = ["George", "John", "Thomas"];
3 document.write(arr + "<br/>");
4 document.write(arr.pop() + "<br/>");
5 document.write(arr);
6 </script>

输出结果:
George,John,Thomas
Thomas
George,John

3、unshift() 向数组的开头添加一个或更多元素,并返回新的长度
例如:

1 <script type="text/javascript">
2 var arr = ["George", "John", "Thomas"];
3 document.write(arr + "<br/>");
4 document.write(arr.unshift("James") + "<br/>");
5 document.write(arr);
6 </script>

输出结果:
George,John,Thomas
4
James,George,John,Thomas

4、shift() 删除并返回数组的第一个元素
例如:

1 <script type="text/javascript">
2 var arr = ["George", "John", "Thomas"];
3 document.write(arr + "<br/>");
4 document.write(arr.shift() + "<br/>");
5 document.write(arr);
6 </script>

输出结果:
George,John,Thomas
George
John,Thomas

5、reverse() 颠倒数组中元素的顺序
例如:

1 <script type="text/javascript">
2 var arr = ["George", "John", "Thomas"];
3 document.write(arr + "<br/>");
4 document.write(arr.reverse());
5 </script>

输出结果:
George,John,Thomas
Thomas,John,George

6、sort() 对数组的元素进行排序
对数组的引用。请注意,数组在原数组上进行排序,不生成副本
该方法默认是按照字符编码(ASCII)的顺序进行排序的
例如:

1 <script type="text/javascript">
2 var arr = new Array(6);
3 arr[0] = "John";
4 arr[1] = "George";
5 arr[2] = "Thomas";
6 document.write(arr + "<br/>");
7 document.write(arr.sort());
8 </script>

输出结果:
John,George,Thomas
George,John,Thomas

再来看一个例子:

 1 <script type="text/javascript">
2 var arr = new Array(6);
3 arr[0] = 10
4 arr[1] = 5
5 arr[2] = 40
6 arr[3] = 25
7 arr[4] = 1000
8 arr[5] = 1
9 document.write(arr + "<br/>");
10 document.write(arr.sort());
11 </script>

输出结果:
10,5,40,25,1000,1
1,10,1000,25,40,5

我们可以看到,并非是按照我们认为的按数字大小排序,如果想按照数字大小排序,则需要改变默认的排序方式,自行指定排序规则。
如下:

 1 <script type="text/javascript">
2 var arr = new Array(6);
3 arr[0] = 10
4 arr[1] = 5
5 arr[2] = 40
6 arr[3] = 25
7 arr[4] = 1000
8 arr[5] = 1
9 document.write(arr + "<br/>");
10 document.write(arr.sort(function (a, b) {return a - b;}));// 从大到小
11 </script>

输出结果:
10,5,40,25,1000,1
1,5,10,25,40,1000
如果想要降序排列呢?
将排序规则改为:
function (a, b) {return b - a;}
就OK了

7、concat() 连接两个或更多的数组
该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
例如:

 <script type="text/javascript">
var arr = [1, 2, 3];
var arr1 = [11, 22, 33];
document.write(arr.concat(4, 5, arr1));
</script>

输出结果:
1,2,3,4,5,11,22,33

8、join()
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
例如:

 <script type="text/javascript">
var arr = ['item 1', 'item 2', 'item 3'];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';
</script>

list结果:

'<ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>'
这是迄今为止最快的方法!使用原生代码(如 join()),不管系统内部做了什么,通常比非原生快很多。——James Padolsey, james.padolsey.com

9、slice(start,end) 从某个已有的数组返回选定的元素
请注意,该方法并不会修改数组,而是返回一个子数组
例如:

 <script type="text/javascript">
var arr = ["George", "John", "Thomas"];
document.write(arr + "<br/>");
document.write(arr.slice(1) + "<br/>"); // 从第一个元素开始截取到 数组结尾
document.write(arr);
</script>

输出结果:
George,John,Thomas
John,Thomas
George,John,Thomas

10、splice() 删除元素,并向数组添加新元素
splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改
(1)删除指定范围的数组元素:

 <script type="text/javascript">
var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin"; document.write(arr + "<br/>");
arr.splice(2, 3); // 删除第三个元素以后的三个数组元素(包含第三个元素)
document.write(arr);
</script>

输出结果:
George,John,Thomas,James,Adrew,Martin
George,John,Martin

(2)从指定下标开始插入指定元素(元素个数不限):

 <script type="text/javascript">
var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin"; document.write(arr + "<br/>");
arr.splice(2, 0, "William","JACK"); // 在第三个元素之前插入"William","JACK"
document.write(arr);
</script>

输出结果:
George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Thomas,James,Adrew,Martin

(3)删除指定范围的数组元素,并用指定元素替换(元素个数不限):

 <script type="text/javascript">
var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin"; document.write(arr + "<br/>");
arr.splice(2,3,"William","JACK"); // 删除第三个元素以后的三个数组元素(包含第三个元素),并用"William","JACK"进行替换
document.write(arr);
</script>

输出结果:
George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Martin

以下为最新补充(2017-07-14):

11,查找数据元素位置的方法
indexOf和lastIndexOf接受两个参数:要查找的项和表示查找起点位置的索引。

indexOf: 从前往后查找。例如:

var arr = [10, 11, 12, 13, 14, 15, 12, 18];
console.log(arr.indexOf(12)); // 2
console.log(arr.indexOf(12, 3)); // 6

lastIndexOf: 从后往前查找。例如:

var arr = [10, 11, 12, 13, 14, 15, 12, 18];
console.log(arr.lastIndexOf(12)); // 6
console.log(arr.lastIndexOf(12, 2)); // 2

12,迭代方法
ECMAScript为数据定义了五个迭代方法:
every(): 数组的每一项都满足给定条件则返回true。例如:

var arr = [1,2,3,4,5];
var everyResult = arr.every(function(item, index, array) {
return item > 2;
});
console.log(everyResult); // false,由于不是每一项都满足(item > 2)

some(): 数组中只需有一项满足给定条件则返回true。例如:

var arr = [1,2,3,4,5];
var everyResult = arr.some(function(item, index, array) {
return item > 2;
});
console.log(everyResult); // true, 由于至少有一项满足条件(item > 2)

filter(): 返回所有满足给定条件的数据项所组成的新数组。例如:

var arr = [1,2,3,4,5];
var everyResult = arr.filter(function(item, index, array) {
return item > 2;
});
console.log(everyResult); // [3, 4, 5]
console.log(arr); // [1,2,3,4,5]

map():对数组的每一项应用给定条件,返回新的数组。例如:

var arr = [1,2,3,4,5];
var everyResult = arr.map(function(item, index, array) {
return item * 2;
});
console.log(everyResult); // [2, 4, 6, 8, 10]
console.log(arr); // [1,2,3,4,5]

forEach(): 数组遍历,与for循环一样。例如:

var arr = [1,2,3,4,5];
arr.forEach(function(item, index, array) {
// 执行某些操作
});

13,归并方法
reduce()和reduceRight(), 这两个方法只是遍历方向不同。

var arr = [1,2,3,4,5];
var sum = arr.reduce(function(prev, cur, index, array){
return prev + cur;
});
console.log(sum); // 15

这个函数返回的任何值都会作为第一个参数传给下一项。

JS数组(Array)处理函数总结的更多相关文章

  1. JS数组array常用方法

    JS数组array常用方法 1.检测数组 1)检测对象是否为数组,使用instanceof 操作符 if(value instanceof Array) { //对数组执行某些操作 } 2)获取对象的 ...

  2. JS&colon; 数组的循环函数

    JS 数组相关的循环函数,用得挺多,所以有些坑还是要去踩一下,先来看一道面试题. 注意:下面提到的不改变原数组仅针对基本数据类型. 面试题 模拟实现数组的 map 函数. 心中有答案了吗?我的答案放在 ...

  3. 【转】 js数组 Array 交集 并集 差集 去重

    原文:http://blog.****.net/ma_jiang/article/details/52672762 最劲项目需要用到js数组去重和交集的一些运算,我的数组元素个数可能到达1000以上, ...

  4. js数组的splice函数

    一直没搞懂数组的splice函数,今天稍微测试了一下,了解了它的功能,在这里记录一下 1.测试 测试① var a = [1,2,3]; console.info(a.splice(1,1)); co ...

  5. js — 数组Array

    目录 1. isArray 2. 转换方法 3. 分割字符串 join 4. 栈方法 5. 队列方法 6. 重排序方法 7. 操作方法 8. 位置方法 - 索引 9. 迭代方法 数组 array 解释 ...

  6. 「面试指南」JS数组Array常用算法&comma;Array算法的一般解答思路

    先看一道面试题 在 LeetCode 中有这么一道简单的数组算法题: // 给定一个整数数组 nums 和一个目标值 target, // 请你在该数组中找出和为目标值的那两个整数,并返回他们的数组下 ...

  7. &lbrack;学习笔记&rsqb;JS 数组Array push相关问题

    前言: 今天用写了一个二维数组,都赋值为零,然后更新其中一个值,结果和预期是不一样,会整列的相同位置都是同一个值. 1.用Chrome的控制台样例如下: arrs[2][2] =1的赋值,竟然是三个数 ...

  8. JS数组 Array

    1.创建数组 var array=new Array(); 2.添加数组 array.push("111"); array.push("111"); array ...

  9. js 数组array es5-es6&plus; 新增方法函数

    arr.forEach(function(item,index,arr){},this)  相当于普通的for循环,第一个回调参数,第二个this可以重定向[箭头函数则不生效] arr.map() 非 ...

随机推荐

  1. POJ 3414 Pots

    Pots Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Status  ...

  2. CentOS下配置Hadoop集群:java&period;net&period;NoRouteToHostException&colon; No route to host问题的解决

    我用的是hadoop 1.2.1 遇到的问题是: hadoop中datanode无法启动,报Caused by: java.net.NoRouteToHostException: No route t ...

  3. C&num;编写Windows服务程序图文教程(转载)

    Windows Service这一块并不复杂,但是注意事项太多了,网上资料也很凌乱,偶尔自己写也会丢三落四的.所以本文也就产生了,本文不会写复杂的东西,完全以基础应用的需求来写,所以不会对Window ...

  4. SET XACT&lowbar;ABORT 的用法&lbrack;转&rsqb;

    SET XACT_ABORT指定当 Transact-SQL 语句产生运行时错误时,Microsoft® SQL Server™ 是否自动回滚当前事务. 语法 SET XACT_ABORT { ON ...

  5. JS的document&period;images函数使用示例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. C&num; 鼠标移动Winform窗体内或者panel容器内的控件 显示虚线&sol;实现虚线框来确定位置

    C# 鼠标移动WinForm窗体或者panel容器内的控件 移动虚线/实现虚线框来确定位置 1.用到的方法介绍 今天,根据领导指示指导移动容器内的控件,生成虚线框,使用 ControlPaint.Dr ...

  7. CF58E Expression 搜索

    题目传送门:http://codeforces.com/problemset/problem/58/E 题意:给出一个形如$x+y=z$(不一定正确)的式子,试输出一个$a+b=c$的式子,满足:$1 ...

  8. Ubuntu 16&period;04安装idea

    此篇为http://www.cnblogs.com/EasonJim/p/7139275.html的分支页. 前提:必须正确安装JDK和Tomcat. 下载: https://www.jetbrain ...

  9. 关于string的length

    在C++里面,std::string的length()返回的是字节数,与编码方式有关. int main() { std::string s = "我是中国人"; std::cou ...

  10. Java面试题整理1

    Java基础部分 JDK和JRE有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境.JRE:Java Runtime ...