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. Jquery实现按钮点击遮罩加载,处理完后恢复

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUiLoad.aspx. ...

  2. mybatis 和hibernate的区别

    mybaits 是不完全的orm(对象关系映射(Object Relational Mapping)框架,需要自己书写sql语句 mybatis学习难度必hibernate低适合关系型模型要求不高的软 ...

  3. 【转】地址空间、内核空间、IO地址空间

    http://blog.csdn.net/wuxinke_blog/article/details/8769131 有这么一系列的问题,是否在困扰着你:用户程序编译连接形成的地址空间在什么范围内?内核 ...

  4. 关于WSL(Windows上的Linux子系统)的介绍

    WSL,Windows Subsystem for Linux,就是之前的Bash on [Ubuntu on] Windows(嗯,微软改名部KPI++ 首先要说一句,其实Windows 10在一周 ...

  5. netbeans 字体发虚

    今天更新了netbeans,重启后蛋疼了,字体发虚,搜索网络后有得到如下方案: 对Archlinux,去/usr/share/netbeans/etc,里面找到netbeans.conf,给下面一行参 ...

  6. 项目总结二:模块管理之requireJS

    项目开发前期,对究竟用requireJS 还是sea.js 进行讨论,最后采用requireJS,但是后期遇到了问题--当谷歌地图不能加载时,整个页面卡死的状况. requirejs 的作用: 防止j ...

  7. javascript倒计时调转页面

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  8. LeetCode 228. Summary Ranges (总结区间)

    Given a sorted integer array without duplicates, return the summary of its ranges. Example 1: Input: ...

  9. 在EF中正确的使用事务

    1.EF中使用事务: using (TransactionScope tran = new TransactionScope()) { try { using(var _context = new D ...

  10. 如何线上部署node.js项目

    来源:http://blog.csdn.net/chenlinIT/article/details/73343793 前言 最近工作不是很忙,在空闲时间学习用node+express搭建自己的个人博客 ...