数组方法

  1、Array.join([param]) 方法:将数组中所有的元素都转换为字符串并连接起来,通过字符 param 连接,默认使用逗号,返回最后生成的字符串

  2、Array.reverse() 方法:将数组中的元素颠倒顺序(在原数组中重新排列它们),返回逆序数组

  3、Array.sort([function]) 方法:将数组中的元素按字母表顺序排序并返回排序后的数组,可选参数 function 是一个比较函数,它定义了排序的规则

  4、Array.concat([params]) 方法:创建并返回一个新数组,它的元素包含原数组的元素和 params,若 params 里有一个是数组,则会连接数组的元素,但它不会递归扁平化数组的数组,即如果 params 有一个是多维数组,它连接的是多维数组里子数组,而不是子数组的元素

  5、Array.slice([beg], [end]) 方法:返回指定数组的一个片段或子数组,范围是 [beg, end),不会改变原数组,若参数有负数,则表示相对数组末尾的偏移量

  6、Array.splice([index], [size], [params]) 方法:在数组中插入或删除元素的通用方法,返回删除的子数组,index 指定插入或删除位置,size 指定删除个数,params指定插入的元素,会改变数组,若 params 里有数组,则插入数组(注意和 concat 的区别)

  7、Array.push(params) 方法:在数组尾部添加一个或多个元素,返回数组新长度

  8、Array.pop() 方法:删除数组最后一个元素,并返回删除元素的值

  9、Array.unshift(params) 方法:在头部添加一个或多个元素(后面的元素会移动到更高索引位置来获得足够的空间),并返回数组新的长度,它插入 params 的方法是一次性全部插入,即插入元素顺序和它们在列表里的顺序是一样的

  10、Array.shift() 方法:删除头部第一个元素,并返回其值,然后自动移动数组的元素以填补头部空缺

  11、toString() 和 toLocaleString() 将数组中每个元素转化为字符串并连接起来,toString() 采用逗号分隔,而 toLocaleString() 则使用本地化分隔符连接这些字符串,输出不包括方括号或其他任何形式的包裹数组值得分隔符

let arr = [1, 2, 3, 4, 5];

let str = arr.join(" ");
console.log(str); // 输出 "1 2 3 4 5" arr.reverse();
console.log(arr); // 输出 [5, 4, 3, 2, 1] arr.sort(function (a, b) {
return a-b; // 采用升序排序,若为 b-a 则为降序,排序规则通过该函数设置
});
console.log(arr); // 输出 [1, 2, 3, 4, 5] let arr_t = arr.concat([6, 7, [8, 9], 10]); // 没有递归扁平化数组
console.log(arr_t); // 输出 [1, 2, 3, 4, 5, 6, 7, [8, 9], 10] arr_t = arr.slice(0, 3); // [0, 3) 子数组
console.log(arr_t); // 输出 [1, 2, 3] arr_t.splice(0, 0, 4, 5); // 在下标为 0 处删除 0 个元素,并插入元素 4 和 5
console.log(arr_t); // 输出 [4, 5, 1, 2, 3] let len = arr.push(6, 7); //在尾部插入元素 6 和 7,返回新长度
console.log("arr: ",arr, "\tlen: ", len);
arr.pop(); arr.pop(); // 把新插入得 2 个元素都 pop 掉,每次只能 pop 一个
console.log(arr); len = arr.unshift(-1, 0); // 在头部一次性插入 2 个元素,注意所插入元素的顺序
console.log("arr: ",arr, "\tlen: ", len);
arr.shift(); arr.shift(); // 把新插入得 2 个元素都 shift 掉,每次只能 shift 一个
console.log(arr); str = arr.toString();
console.log(str);
str = arr.toLocaleString();
console.log(str);

ES5 中的数组方法:

  ES5 定义了 9 个新的数组方法来遍历、映射、过滤、检测、简化和搜索数组,大多数方法的第一个参数接收一个函数,并对每个元素(或一些元素)调用一次该函数,对不存在的元素不调用传递该函数(稀疏数组)。一般情况下,该函数 function(val, index, arr) 第一个参数为数组元素,第二个为下标,第三个为数组本身。调用的函数被看作方法的第二个参数(可选)的方法。ES5 中数组的方法都不会改变原数组!

  

  1、forEach() 方法:从头至尾遍历数组,为每个元素调用指定的函数,且无法在所有元素都传递给调用函数之前终止遍历。除非在 try 块里,并抛出一个异常才能终止

let mul = 1, arr = [1, 2 ,3, 4, 5];
arr.forEach(function (value) {
mul *= value; // mul = 1*2*3*4*5
});
/*arr.forEach(function (value, index, array) {
mul *= array[index];
}); 与上面的等价*/
console.log(mul);

  2、map() 方法:将调用数组的每个元素都传递给指定函数,并返回一个新数组,它包含该函数的返回值(注意和 forEach 的区别)。若调用的数组是稀疏数组,则返回的也是稀疏数组

let arr = [1, 2, 3, 4, 5];

let arr_t = arr.map(function (value) {
return value * 2; //把 arr 里的元素都 *2
}); // map() 具有返回值 console.log(arr_t); //返回 [2, 4, 6, 8, 10]

  

  3、filter() 方法:返回满足一定条件的调用数组的一个子集,传递的函数是用来逻辑判断的(返回 true 或 false)。同时,该方法会跳过稀疏数组中缺少的元素,即返回的数组总是稠密

let arr = [1, 2, 3, 4, 5];

let arr_t = arr.filter(function (value) {
return value % 2 == 1; // 筛选奇数
}); console.log(arr_t); // 输出[1, 3, 5]

  

  4、every()some() 方法:对调用数组的每个元素进行判定,返回 true 或 false,every 表示所有元素都满足条件,而 some 表示有元素满足条件。它们会尽早终止遍历,而不是访问每一个数组元素!

let arr = [1, 2, 3, 4, 5];

let flag = arr.every(function (value) {
return value > 1;
});
console.log("Every num > 1: ", flag); // 返回 false flag = arr.some(function (value) {
return value > 4;
});
console.log("Some num > 4: ", flag); // 返回 true

  5、reduce(function, [initVal])reduceRight(function, [initVal]) 方法:使用指定函数将数组元素进行组合,生成单个值,第一个参数是执行简化操作的函数,而第二个是初始值,若未指定,则以第一个第一个元素(reduce)或最后一个(reduceRight)作为初始值。它使用的函数与 forEach() 不同,数组元素、索引及本身作为第 2~4 个参数传递给函数,第一个参数为到目前为止简化操作积累的结果(起初为初始值,接下来每次操作后的结果都会存储在第一个参数里)。reduce() 处理数组从低到高,而 reduceRight() 处理数组从高到低

let arr = [3, 2, 1];

let pow = arr.reduce(function (accumulator, value) {
return Math.pow(accumulator, value); // accumulator^value,初始值为 3
});
console.log(pow); // 输出 3^2^1 let sum = arr.reduceRight(function (init, value) {
return init + value;
}, 0); // 初始值为 0
console.log(sum); // 输出 1+2+3,注意顺序

  6、indexOf(val, [index])lastIndexOf(val, [index]) 方法:搜索整个数组中和 val 恒等的元素,返回第一个相匹配的元素的索引,如果没找到则返回 -1,index 指定搜索开始的下标。它不接受一个函数作为参数!!indexOf() 从低往高搜索,而 lastIndexOf() 从高往低。若 index 为负数,则它代表相对数组末尾的偏移量。

let arr = [1, 2, 3, 3, 2, 1];

let res = arr.indexOf(3, 2);    // 从下标为 2 开始搜索与 3 恒等的数,并返回下标
console.log(res); //输出 2 res = arr.lastIndexOf(3);
console.log(res); // 输出3

JavaScript 数组方法的更多相关文章

  1. JavaScript数组方法--every、some、fill

    接上一篇,JavaScript数组方法--concat.push,继续其他的数组方法. every:every() 方法测试数组的所有元素是否都通过了指定函数的测试. 先看其使用方法: functio ...

  2. 【译】你应该了解的JavaScript数组方法

    让我们来做一个大胆的声明:for循环通常是无用的,而且还导致代码难以理解.当涉及迭代数组.查找元素.或对其排序或者你想到的任何东西,都可能有一个你可以使用的数组方法. 然而,尽管这些方法很有用,但是其 ...

  3. JavaScript数组方法大全(推荐)

    原网址:http://www.jb51.net/article/87930.htm 数组在笔试中经常会出现的面试题,javascript中的数组与其他语言中的数组有些不同,为了方便之后数组的方法学习, ...

  4. JavaScript 数组方法处理字符串 prototype

    js中数组有许多方法,如join.map,reverse.字符串没有这些方法,可以“借用”数组的方法来处理字符串. <!doctype html> <html lang=" ...

  5. 2018.2.27 JavaScript数组方法应用

    JavaScript数组方法应用 1.找出元素item在给定数组arr中的位置 function indexOf(arr,item){ return arr.indexOf(item); } func ...

  6. JavaScript数组方法详解

    JavaScript数组方法详解 JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法:并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中 ...

  7. JavaScript数组方法速查,32个数组的常用方法和属性

    JavaScript数组方法速查手册极简版 http://30ke.cn/doc/js-array-method JavaScript数组方法速查手册极简版中共收了32个数组的常用方法和属性,并根据方 ...

  8. JavaScript数组方法大集合

    JavaScript数组方法集合 本文总结一下js数组处理用到的所有的方法.自己做个笔记. 数组方法 concat() 合并两个或多个数组 concat()能合并两个或者多个数组,不会更改当前数组,而 ...

  9. 一站式超全JavaScript数组方法大全

    一站式JavaScript数组方法大全(建议收藏) 方法一览表 详细操作 本人总结了JavaScript中有关数组的几乎所有方法(包含ES6之后新增的),并逐一用代码进行演示使用,希望可以帮助大家! ...

  10. JavaScript数组方法总结

    由于最近都在freecodecamp上刷代码,运用了很多JavaScript数组的方法,因此做了一份关于JavaScript教程的整理,具体内容如下: 一.普通方法 1.join() 将数组元素连接在 ...

随机推荐

  1. 一个简单地template模板

    之前的项目中用到了artTemplate模板,感觉挺有意思,于是查看相关资料,自己动手写了个简单地template模板插件.虽然会有一些不足,但也是自己的一番心血.主体代码如下 /* * 一个简单地t ...

  2. vmware 挂起后不能恢复

    报错:未能锁定主内存文件,还原虚拟机状态时出错 虚拟机目录下有一个文件夹,xxx.vmem.lck,里面的lck文件是很久以前的,把它删掉重新恢复就可以了.

  3. 一、PyQt5基础概念与安装配置

    一.初识PyQt5 对于桌面程序开发,用户图形界面(GUI)的设计非常重要.一款美观.易用的用户界面可以很大程度上提高对使用这的友好度.由于Python最初是作为脚本语言开发,并没有GUI功能.但Py ...

  4. linux端口详解大全

    0|无效端口,通常用于分析操作系统 1|传输控制协议端口服务多路开关选择器 2|管理实用程序 3|压缩进程 5|远程作业登录 7|回显 9|丢弃 11|在线用户 13|时间 17|每日引用 18|消息 ...

  5. RNQOJ 21 FBI数

    如果字符串全是0输出B,全是1输出I,01混合输出F,如果字符串分解到只剩下一个字符的时候我们可以很简单的判断出来是B串还是I串,如果处在父节点的位置,这里运用递归,通过子节点的返回值来判断子节点是混 ...

  6. Appium+Python自动化 2 定位元素方式

    1.找到 Android SDK安装路径tools 下面的 uiautomatorviewer.bat,如下截图 2.点击uiautomatorviewer.bat进行启动,左上角一共四个按钮,作用分 ...

  7. appium java 滑动(js滑动和swipe滑动)

    最近有一个页面的内容很多,有的元素需要滑动到底部才能看到,所以就研究一下滑动,下面是我学习到的两种滑动方式 一:用js滑动 用js滑动的思路是很简单,首先是先定位到这个元素,定位到之后不做任何操作,然 ...

  8. 微信小程序开发之搞懂flex布局5——cross axis

    Cross Axis——交叉轴,与Main Axis(主轴)垂直交叉. main axis is row or row-reverse the cross axis runs down the col ...

  9. 关于canvas补充说明

    上篇文章提到的canvas画布,用到f2组件,组件地址https://gw.alipayobjects.com/os/antv/assets/f2/3.0.0/f2.js或利用npm下载:npm in ...

  10. Java:编码与乱码问题

    一.为什么要编码? 由于人类的语言太多,因而表示这些语言的符号太多,无法用计算机的一个基本的存储单元----byte来表示,因而必须要经过拆分或一些翻译工作,才能让计算机能理解. byte一个字节即8 ...