slice

从已有的数组中返回选定的元素。该方法不会修改数组,而是返回一个子数组。

语法:arr.slice(start,end)

start: 必须,规定从何处开始选取。如果是负数,就是从尾部开始算起的位置(-1指最后一个元素,-2指倒数第二个元素);

end:   可选,规定从何处结束选取。如果没有指定,则切分的数组包含从start到数组结束的所有元素。

示例:

   var arr = [0, 4, 5, 4, 7, 6, 9];
  arr.slice(2, 4); //[5,4]
  arr.slice(-3, 6); //[7,6]
  arr.slice(5); //[6,9]

可以使用slice快速将伪数组转为数组:

function f() {
var arr = Array.prototype.slice.call(arguments);
}

splice

向数组中添加或删除项目,并返回被删除的项目。该方法会改变原来的数组。

语法:arr.splice(index,howmany,item1,item2,...,itemX)

  index: 必需。规定添加或删除的位置,使用负数可从数组结尾处规定位置;

  howmany: 必需。要删除的数量。如果设置为0,则不会删除项目。

  itemX: 可选。向数组添加的新项目。

示例:

     var arr = [0, 4, 5, 4, 7, 6, 9];
console.log(arr.splice(2, 2)); //[5,4]
console.log(arr); //[0, 4, 7, 6, 9]
console.log(arr.splice(2, 0, 8, 10)); //[]
console.log(arr); //[0, 4, 8, 10, 7, 6, 9]

join

将所有元素放入一个字符串,元素是通过指定的分隔符进行分隔的。返回字符串。该方法不会修改原数组。

语法:arr.join(separator)

  separator: 可选,指定要使用的分隔符。如果省略,则使用逗号作为分隔符。

示例:

     var arr = [0, 1, 2, 3];
console.log(arr.join()); //'0,1,2,3'
console.log(arr.join('.')); //'0.1.2.3'

push

向数组的末尾添加或删除一个或多个元素,并返回数组的新长度。该方法会改变原数组。

语法:arr.push(newelement1,newelement2,...,newelementX)

  newelement1: 必需。要添加到数组的第一个元素。

  newelementX: 可选,可添加多个元素。

示例:

     var arr = [0, 1, 2, 3];
console.log(arr.push(1)); //
console.log(arr); //[0, 1, 2, 3, 1]

pop

删除数组的最后一个元素,并返回它删除的元素的值。如果数组已经是空,则不改变数组,并返回undefined。该方法会改变原数组。

语法:arr.pop()

示例:

     var arr = [0, 1, 2, 3];
console.log(arr.pop()); //
console.log(arr); //[0, 1, 2]

shift

删除数组的第一个元素,并返回它删除元素的值。如果数组已经是空,则不改变数组,并返回undefined。该方法会改变原数组。

语法:arr.shift()

示例:

     var arr1 = [0, 1, 2, 3];
console.log(arr1.shift()); //
console.log(arr1); //[1, 2, 3] var arr2 = [];
console.log(arr2.shift()); //undefined
console.log(arr2); //[]

unshift

向数组的开头添加或删除一个或多个元素,并返回数组的新长度。该方法会改变原数组。

语法:arr.unshift(newelement1,newelement2,...,newelementX)

  newelement1: 必需。要添加到数组的第一个元素。

  newelementX: 可选,可添加多个元素。

示例:

     var arr = [0, 1, 2, 3];
console.log(arr.unshift(4, 5)); //
console.log(arr); //[4, 5, 0, 1, 2, 3]

reverse

颠倒数组中元素的顺序。该方法会改变原来数组。

语法:arr.reverse()

示例:

     var arr = [0, 1, 2, 3];
console.log(arr.reverse()); //[3, 2, 1, 0]
console.log(arr); //[3, 2, 1, 0]

sort

对数组的元素进行排序。该方法会改变原数组。

语法:arr.sort(sortby)

  sortby: 可选。规定排序顺序。必须是比较函数,有两个参数a和b,如果a小于b,在排序后a应该出现在b之前(从小到大排),则返回一个小于0的值。如果没有参数,则按照字符编码顺序对数组中的元素进行排序。

示例:

     var arr1 = ['a', 'b', 'z', 'A', 'Z'];
console.log(arr1.sort()); //["A", "Z", "a", "b", "z"]
console.log(arr1); // ["A", "Z", "a", "b", "z"] var arr2 = [1, 5, 10, 1000];
console.log(arr2.sort()); //[1, 10, 1000, 5] function sortNumber1(a, b) {
return a - b;
}
function sortNumber2(a, b) {
return b - a;
}
console.log(arr2.sort(sortNumber1)); //[1, 5, 10, 1000]
console.log(arr2.sort(sortNumber2)); //[1000, 10, 5, 1]

concat

连接两个或多个数组。返回被连接数组的一个副本。该方法不会修改原来的数组。

语法:arr.concat(arrX,arrX,...,arrX)

  arrX: 必需。可以是具体的值,也可以是数组对象,可以是任意多个。

示例:

     var arr1 = [1, 2, 3];
console.log(arr1.concat(4, 5)); //[1, 2, 3, 4, 5]
console.log(arr1); //[1, 2, 3] var arr2 = [4, 5];
console.log(arr1.concat(arr2)); //[1, 2, 3, 4, 5] var arr3 = [6, [7, 8]];
console.log(arr1.concat(arr2, arr3)); // [1, 2, 3, 4, 5, 6, [7, 8]]
console.log(arr1.concat(arr2, 6, [7, 8])); //[1, 2, 3, 4, 5, 6, 7, 8]

toString

将数组转换为字符串并返回结果。返回值与没有参数参与的join()方法返回的字符串相同。

语法:arr.toString()

示例:

1     var arr=[1,2,3];
2 console.log(arr.toString()); //'1,2,3'

valueOf

返回数组对象的原始值。

语法:arr.valueOf()

示例:

1     var arr=[1,2,3];
2 console.log(arr.valueOf()); //[1, 2, 3]

some

测试数组中的某些元素是否通过回调函数实现的测试。数组中的每个元素执行一次回调函数,如果找到一个使得回调函数返回真值的值,some将会立即返回true,否则返回false。

语法:arr.some(function(item,index,arr),thisArg)

参数:item:当前元素的值。必需

   index:当前元素的索引值。可选

   arr:当前数组对象。可选

   thisArg:执行回调函数时的用于this的值(使用时不能用箭头函数,因为箭头函数在词法上绑定了this值)。可选

示例:

测试数组中是否有元素大于10

//测试数组中是否有元素大于10
console.log([2, 5, 8, 1, 4].some(item => item > 10)) //false
console.log([2, 5, 8, 11, 4].some(item => item > 10)) //true

map(以下都是ES6方法)

返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

语法:arr.map(function(item, index, arr), thisArg)

参数:item:当前元素的值。必需。

   index:当前元素的索引值。可选。

   arr:当前元素属于的数组对象。也就是数组本身。可选。

   thisArg:执行回调函数时的用于this的值(使用时不能用箭头函数,因为箭头函数在词法上绑定了this值)。可选

示例:

求数组中每个元素的平方根。

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
console.log(roots); //[1, 2, 3]

 反转字符串

var str = '12345';
console.log(Array.prototype.map.call(str, x => x).reverse().join('')); //'54321'

通常情况下,map方法中回调函数只需要接受一个参数,就是正在被遍历的数组元素本身。但这并不意味着只给回调函数传了一个参数。例如:

console.log(['1', '2', '3'].map(parseInt)); //[1, NaN, NaN]
//上面的语句并没有返回所期望的[1, 2, 3], //通常使用parseInt时只需要传递一个参数,但实际上可以有两个参数,第二个参数是进制数。
//map方法在调用回调函数时,会给它传递三个参数:当前正在遍历的元素,元素索引和原数组。
//parseInt会把第三个参数忽视,但第二个参数会被当成进制数,从而返回了NaN //如果想得到所期望的结果,可以这样写
function returnInt(ele) {
return parseInt(ele, 10);
}
['1', '2', '3'].map(returnInt); //[1, 2, 3] //也可以使用简单的箭头函数
['1', '2', '3'].map(str=>parseInt(str)); //[1, 2, 3]

兼容性:IE9以下不支持。

兼容性解决代码:

if (!Array.prototype.map) {
Array.prototype.map = function (callback, thisArg) {
//判断callback是否为函数类型
if (Object.prototype.toString.call(callback) != '[object Function]') {
throw new TypeError(callback + 'is not a function');
} else {
if (this == null) { //判断map方法的调用者是否存在
throw new TypeError('this is null or not defined')
} else {
var arr = Object(this); //调用map方法的数组
var len = arr.length >>> 0; //数组长度
var k = 0;
var mappedArr = new Array(len); //map方法新产生的数组
while (k < len) { //遍历原数组,调用回调函数
if (k in arr) {
mappedArr[k] = callback.call(thisArg, arr[k], k, arr);
}
k++;
}
return mappedArr;
}
}
}
}

reduce

数组中的每个元素(从左到右)应用一个函数,将其简化为单个值。

语法:arr.reduce(function(tmp, item, index,Array) {}, initialValue )

   tmp:中间结果(index为1时,tmp为arr[0])

   item:当前值

   index:当前索引。 可选

   Array:源数组 。可选

   initialValue:第一次调用callback函数时的第一个参数的值。初始值

如果没有initialValue,回调函数第一次执行,tmp为arr[0],item为arr[1],index为1

如果有initialValue,回调函数第一次执行,tmp为initialValue,item为arr[0],index为0

如果数组为空且没有提供initialValue,会抛出TypeError 。如果数组仅有一个元素(无论位置如何)并且没有提供initialValue, 或者有提供initialValue但是数组为空,那么此唯一值将被返回并且callback不会被执行。

举例:对一个数组求和

const arr = [1, 2, 3, 4]
//未加初始值
const result1 = arr.reduce((tmp, item) => tmp + item)
//添加初始值
const result2 = arr.reduce((tmp, item) => tmp + item, 10)
console.log(result1); //10
console.log(result2); //20

filter

创建一个新数组,包含通过回调函数(返回结果为true)的所有元素。

语法:arr.filter(function(item, index, arr){}, thisArg)

参数:item:当前元素

   index:当前索引。可选

   arr:调用filter的数组arr。可选

   thisArg:执行回调函数时的用于this的值(使用时不能用箭头函数)。可选

举例:获取数组中能被3整除的数字

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const result = arr.filter(item => item % 3 == 0)
console.log(result) //[3, 6, 9]

find

找出第一个符合条件的数组成员。

语法:arr.find(function(item, index, arr), thisArg)

举例:

console.log([1, 4, -5, 10, -2].find(n => n < 0))

findIndex

数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

forEach

循环数组,对数组的每个元素执行一次回调函数

语法、参数与map和filter一样。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
arr.forEach(item => {
console.log(item)
})
//等同于
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}

from

从一个类似数组或者可迭代对象创建一个新的浅拷贝数组实例

语法:arr.from(arrLike[,mapFun])

举例:

console.log(Array.from('foo'))  //["f", "o", "o"]
console.log(Array.from({ 0: 'ab', 1: 'cd', length: 2 }))  //["ab", "cd"]
console.log(Array.from([1, 2, 3], x => x + 1))  //[2, 3, 4]

js的数组方法整理的更多相关文章

  1. Ruby数组方法整理

    数组方法整理 方法列表: all().any().none()和one():测试数组中的所有或部分元素是否满足给定条件.条件可以是语句块中决定,也可以是参数决定 append():等价于push() ...

  2. js 创建数组方法以及区别

    示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...

  3. JS数组方法整理(附使用示例)

    整理目前所用过的数组方法,学习了新增的es6方法. 1.arr.push() 从后面添加元素,返回值为添加完后的数组的长度 let arr = [1,2, is 8.3,4,5] console.lo ...

  4. js中数组方法大全

    js数组方法大全 一:前言 我们在学到js中数组的时候,我们会接触到js中数组的一些方法,这些方法对我们来说,可以很遍历的达到我们想要的结果,但是因为方法比较多,有些方法也不常用,可能会过一段时间就会 ...

  5. js 删除数组方法

    今天遇到一个比较脑残的问题 ,在在用js删除数组的时候 delete 数组[下标]的方法删除数组时,该数组的下标变为null,但是数组的长度并没有发生相应的变化 转而使用splice(小标,第N个)删 ...

  6. JavaScript之数组方法整理

    Array概述      除了Object类型,最常用的类型:      实质:有序的数据列表,      特性:可以动态的调整数组的大小 创建数组的两种方式 构造函数创建方式  var arr = ...

  7. js字符串方法、数组方法整理

    push 向数组末尾添加一项 返回值为数组的长度: pop 删除数组最后一项: unshift 向数组开头增加一项: shift 删除数组第一项: splice 删除数组中的值:1 splice(n, ...

  8. js中数组方法及分类

    数组的方法有很多,这里简单整理下常用的21种方法,并且根据它们的作用分了类,便于记忆和理解. 根据是否改变原数组,可以分为两大类,两大类又根据不同功能分为几个小类 一.操作使原数组改变   1.数组的 ...

  9. JavaScript字符串与数组方法整理

    字符串(String)的方法: 代码后面的都是返回值 var str = "atusdgafsvg"; var str1 = "123456789"; var ...

随机推荐

  1. 【转载】CSS3 filter:drop-shadow滤镜与box-shadow区别应用

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

  2. jfinal编码问题及解决

    使用jfinal出现了常见的编码问题情况 public void test() { Random r = new Random(); try { Connection conn = createCon ...

  3. Hadoop(十一)Hadoop IO之序列化与比较功能实现详解

    前言 上一篇给大家介绍了Hadoop是怎么样保证数据的完整性的,并且使用Java程序来验证了会产生.crc的校验文件.这一篇给大家分享的是Hadoop的序列化! 一.序列化和反序列化概述 1.1.序列 ...

  4. C GOTO使用示例

    GOTO虽然会破坏程序的结构,使用代码可读性变差,但是GOTO依然还是有可用的地方 #include <stdio.h>#include <stdbool.h> int mai ...

  5. 大话JPA

    JPA 是什么 Java Persistence API:用于对象持久化的 API Java EE 5.0 平台标准的 ORM 规范,使得应用程序以统一的方式访问持久层: 首先看一下传统方式访问数据库 ...

  6. Web前端性能优化——如何有效提升静态文件的加载速度

    WeTest 导读 此文总结了笔者在Web静态资源方面的一些优化经验. 一.如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标.那么为了提高页 ...

  7. js文件中使用EL表达式的问题

    var str = '${str}' ; var str = '${obj.属性名}'; 只可以再jsp页面的<script></script>中使用,外部引入的js文件中不能 ...

  8. LeetCode 104. Maximum Depth of Binary Tree (二叉树的最大深度)

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  9. IntelliJ IDEA创建多模块依赖项目

    刚从Eclipse转IDEA, 所以记录一下IDEA的使用 创建多模块依赖项目 1. 新建父工程 这样就创建好了一个普通项目,一般我们会把src删掉,在此项目下新建新的模块 2. 新建子模块 创建供前 ...

  10. MFC属性表单修改“应用”键名并对其响应

    1.重载CPropertySheet的虚函数OnInitDialog(),添加如下代码 BOOL DialogInputData::OnInitDialog() { BOOL bResult = CP ...