ES5及以前数组的常用方法:

1、concat( ):数组合并。该方法用于连接两个或多个数组。该方法不会改变现有的数组,仅会返回被连接数组的一个副本。

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

2、join( ):数组转字符串。该方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的,默认使用’,'号分割,不改变原数组。

var arr = [2,3,4];
console.log(arr.join());  //2,3,4
console.log(arr);  //[2, 3, 4]

3、pop( ):删除最后一个元素。返回最后一个元素,会改变原数组。

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

4、push( ):数组向后添加。该 方法可向数组的末尾添加一个或多个元素,并返回新的长度。末尾添加,返回的是长度,会改变原数组。

var a = [2,3,4];
var b = a.push(5);
console.log(a);  //[2,3,4,5]
console.log(b);  //4
//push方法可以一次添加多个元素push(data1,data2....)

5、unshift( ):数组向前添加。该方法可向数组的开头添加一个或更多元素,并返回新的长度,改变原数组。

var arr = [2,3,4,5];
console.log(arr.unshift(3,6)); //6
console.log(arr); //[3, 6, 2, 3, 4, 5]
//tip:该方法可以不传参数,不传参数就是不增加元素。

6、reverse( ):数组翻转。会改变原数组。

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

7、shift( ):删除第一个元素。并返回第一个元素的值,改变原数组。

var arr = [2,3,4];
console.log(arr.shift()); //2
console.log(arr);  //[3,4]

8、slice( ):数组元素的截取,返回一个新数组,新数组是截取的元素,可以为负值。

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

9、sort( ):对数组元素进行排序;

var fruit = ['cherries', 'apples', 'bananas'];
fruit.sort(); // ['apples', 'bananas', 'cherries']var scores = [1, 10, 21, 2];
scores.sort(); // [1, 10, 2, 21]

10、splice( ):删除元素,并向数组添加新元素;该方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。splice() 方法会直接对数组进行修改。

var a = [5,6,7,8];
console.log(a.splice(1,0,9)); //[]
console.log(a);  // [5, 9, 6, 7, 8]
var b = [5,6,7,8];
console.log(b.splice(1,2,3));  //[6, 7]
console.log(b); //[5, 3, 8]

11、toString( ):数组转字符串;
12、toLocaleString( ):将数组转换为本地数组。
13、forEach( ):数组进行遍历;
14、map( ):没有return时,对数组的遍历。有return时,返回一个新数组,该新数组的元素是经过过滤(逻辑处理)过的函数。
15、filter( ):筛选。
16、every( ):当数组中每一个元素在callback上被返回true时就返回true。(注:every其实类似filter,只不过它的功能是判断是不是数组中的所有元素都符合条件,并且返回的是布尔值)。

var arr = [1,56,80,5];
var main = arr.every(n => n > 0);
console.log(main)   //输出:true

17、some( ):当数组中有一个元素在callback上被返回true时就返回true。(注:every其实类似filter,只不过它的功能是判断是不是数组中的所有元素都符合条件,并且返回的是布尔值)。

var arr = [1,-56,80,-5];
var main = arr.some(n => n > 0);
console.log(main)    //输出:true

18、reduce( ):回调函数中有4个参数。prev(之前计算过的值),next(之前计算过的下一个的值),index,arr。把数组列表计算成一个单一值 。

var arr = [10,20,30,40]
let result = arr.reduce(function(prev,next,index,arr){return prev + next;
})
console.log(result);  //输出:100

19、 indexOf 和 lastIndexOf
都接受两个参数:查找的值、查找起始位置
不存在,返回 -1 ;存在,返回位置。indexOf 是从前往后查找, lastIndexOf 是从后往前查找。
indexOf

var a = [2, 9, 9];
a.indexOf(2); // 0
a.indexOf(7); // -1if (a.indexOf(7) === -1) {// element doesn't exist in array
}

lastIndexOf

var numbers = [2, 5, 9, 2];
numbers.lastIndexOf(2);     // 3
numbers.lastIndexOf(7);     // -1
numbers.lastIndexOf(2, 3);  // 3
numbers.lastIndexOf(2, 2);  // 0
numbers.lastIndexOf(2, -2); // 0
numbers.lastIndexOf(2, -1); // 3

ES6数组的常用方法:

1、Array.from( ):将对象或字符串转成数组,注意得有length。

var  arrayLink = {"0":"a","1":"b","2":"c",length:3}var arr = Array.from(arrayLink)console.log(arr)   // 输出: [a,b,c]console.log(Array.from("abcdefg"))  //输出:["a", "b", "c", "d", "e", "f", "g"]console.log(Array.of(1,2,3,4,5))  //输出: [1, 2, 3, 4, 5]

2、Array.of( ): 将一组值转换为数组。这个方法的主要目的,是弥补数组构造函数 Array() 的不足。因为参数个数的不同,会导致 Array() 的行为有差异。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

3、copyWithin(target,start(可选),end(可选)):数组内数据的复制替换

arr.copyWithin(target, start, end)
const arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(3))// [1,2,3,1,2] 从下标为3的元素开始,复制数组,所以4, 5被替换成1, 2
const arr1 = [1, 2, 3, 4, 5]
console.log(arr1.copyWithin(3, 1))
// [1,2,3,2,3] 从下标为3的元素开始,复制数组,指定复制的第一个元素下标为1,所以4, 5被替换成2, 3
const arr2 = [1, 2, 3, 4, 5]
console.log(arr2.copyWithin(3, 1, 2))
// [1,2,3,2,5] 从下标为3的元素开始,复制数组,指定复制的第一个元素下标为1,结束位置为2,所以4被替换成2
  • target:从该位置开始替换数据;
  • start:从该位置开始读取数据,默认为0;
  • end:到该位置停止数据的读取,默认为数组的长度

4、find( ):用于找出第一个符合条件的数组成员。

 var arr = [1,-5,2,9,-6];var main = arr.find(n =>  n < 0);console.log(main);   //输出:-5

5、findIndex( ):返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

const arr = [1, "2", 3, 3, "2"]
console.log(arr.findIndex(n => typeof n === "number")) // 0

6、fill(value,start,end):使用给定值,填充一个数组。

  • value:填充的值;
  • start:开始填充的位置;
  • end:填充结束的位置。

7、keys( ):对键名的遍历。

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.keys()) {console.log(v)
}
// 0 1 2//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.keys()) {console.log(v)
}
// 'a' 'b' 'c'//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.keys()) {console.log(v)
}
// 'a' 'b'

8、values( ):对键值的遍历。

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.values()) {console.log(v)
}
//'a' 'b' 'c'//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.values()) {console.log(v)
}
// 'a' 'b' 'c'//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.values()) {console.log(v)
}
// 'a' 'b'

9、entries( ):对键值对的遍历。

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.entries()) {console.log(v)
}
// [0, 'a'] [1, 'b'] [2, 'c']//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.entries()) {console.log(v)
}
// ['a', 'a'] ['b', 'b'] ['c', 'c']//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.entries()) {console.log(v)
}
// ['a', 'a'] ['b', 'b']

10、includes( ):数组原型的方法,查找一个数值是否在数组中,只能判断一些简单类型的数据,对于复杂类型的数据无法判断。该方法接受两个参数,分别是查询的数据和初始的查询索引值。

let arr = [12,34,223,45,67]console.log(arr.includes(45))   //输出:true[1, 2, NaN].includes(NaN)     // true[1, 2, NaN].indexOf(NaN)      // -1

数组常用方法 (es4,es5,es6)相关推荐

  1. 数组方法大全ES5+ES6

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 1. 使用 Array 构造函数 2. 使用数组字面量表示法 数组原型方法 1. join() 2.push()和pop() ...

  2. js数组常用方法总结(包括ES6)

    目录 js数组方法 Array.push( ) Array.pop( ) Array.unshift( ) Array.shift( ) Array.concat(arr1,arr2...) Arra ...

  3. Js Array数组ES5/ES6常用方法

    Js Array数组ES5/ES6常用方法 1.栈方法(先进后出) push():在数组的最后一项后追加值(参数:可以为多个值或数组) 返回:数组的长度,改变了原数组. var a=[1,2,3] a ...

  4. es6删除数组某一项_javascript基础系列:数组常用方法解析

    javascript基础系列:数组常用方法解析 今天是比较特殊的日子,我们编程人员共同的节日,1024,祝每个编程人员节日快乐! 数组是javascript必不可少的一项,今天让我们来总结一下数组操作 ...

  5. es6删除数组某项_javascript基础系列:数组常用方法解析

    javascript基础系列:数组常用方法解析 今天是比较特殊的日子,我们编程人员共同的节日,1024,祝每个编程人员节日快乐! 数组是javascript必不可少的一项,今天让我们来总结一下数组操作 ...

  6. javascript基础系列:数组常用方法解析

    javascript基础系列:数组常用方法解析 今天是比较特殊的日子,我们编程人员共同的节日,1024,祝每个编程人员节日快乐! 数组是javascript必不可少的一项,今天让我们来总结一下数组操作 ...

  7. 史上最全 JS 数组常用方法总结.

    文章目录 js数组常用方法总结 判断是否为数组: Array.isArray() 1.0 数组新增or删除相关方法 push() 方法 末尾添加 unshift() 方法 开头添加 shift() 方 ...

  8. JavaScript的数组常用方法

    数组常用方法 1. push => 语法 arr.push(数据1, 数据2, 数据3, ...) => 作用 把所有的参数按照顺序追加到数组的末尾 => 返回值,追加以后数组的长度 ...

  9. JavaScript get set方法 ES5 ES6写法

    title: JavaScript get set方法 ES5/ES6写法 date: 2018-05-07 10:38:50 tags: 前端 categories: 前端 网上鲜有get和set的 ...

  10. JavaScript数组常用方法解析和深层次js数组扁平化

    前言 数组作为在开发中常用的集合,除了for循环遍历以外,还有很多内置对象的方法,包括map,以及数组筛选元素filter等. 注:文章结尾处附深层次数组扁平化方法操作. 作为引用数据类型的一种,在处 ...

最新文章

  1. ATS 5.3.0中自定义日志格式文件logs_xml.config解读
  2. python比前端好学吗_前端学习到底难不难?
  3. 上班族英语用语:今天你加班吗?
  4. mysql main函数_关于main()函数的小技巧
  5. python3seek_Python seek()和tell()函数详解
  6. python模块介绍- xlwt 创建xls文件(excel)
  7. ZOJ 2562 More Divisors
  8. unc 隐藏共享文件夹_你真的了解任务栏吗?win10任务栏居然隐藏了这么多小窍门...
  9. 《Nodejs入门》一书中存在的问题分析[转]
  10. ubuntu18.04下 c++安装opencv-3.4.6,c++安装opencv-3.4.9,clion配置opencv-3.4.6与 python安装 opencv-3.4.6
  11. 中国区Azure基本实例更新
  12. Linux内核中增加一个新的驱动模块
  13. 03-树2. Tree Traversals Again (25)
  14. 小爱同学app安卓版_小爱同学app下载安卓版-小爱同学 安卓版v2.9.42-pc6手机下载...
  15. Shiro 详细教程(集各教程内容为一体)
  16. Python爬虫:爬取手机App数据,记得安装配置Charles
  17. Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return
  18. 测试员,面对自己30岁后的下坡路,我们该何去何从?
  19. redit高可用之集群
  20. 设计模式只是一把锤子,不要拿着到处去敲!

热门文章

  1. codeforces NCPC2015 GYM 100781A Adjoin the Networks 圖的直徑
  2. 上海计算机一级和四六级,大学英语六级比四级难多少?985学长含泪告诉你!
  3. 计算机网络拨号,个人拨号上网宽带连接设置图文方法
  4. python中while循环只能用来实现无限循环的编程_while循环只能实现无限循环的编程...
  5. mysql在线检测文件是否损坏,mysql数据文件损坏后的修复方法
  6. 面向切面编程--加缓存
  7. C# 获取磁盘空间信息
  8. 三刺激值计算公式_三刺激值及对应的xyU'V'
  9. 【听】天才在左,疯子在右,天才与疯子一线之间
  10. gdb 打印参数出错:which is more than max-value-size