JavaScript 常用数组函数方法专题

时间:2022-09-03 13:12:18

1、 由字符串生成数组

split() 分割字符串,并将分割的部分作为一个元素保存在一个新建的数组中。

    var  str1 = "this is an emample to using the method of array .";
var str2 = str1.split(" "); //以空格作为分割条件
for(var i = 0; i< str2.length; i++ ){
console.log(str2[i]);
}

2、查找元素

indexOf() 用来查找元素在目标数组中是否存在,如果存在,返回该元素在数组中第一次出现的位置索引,如果不存在,就返回-1。

lastIndexof() 和indexOf()作用一样,但是返回的是相同元素中的最后一个元素的位置索引。

    var names = ["one", "two", "three", "four", "five", "one"];
var position = names.indexOf("one");
if(position >= 0){
console.log("Found " + name + " at position " + position);
}else{
console.log(name + "not found in array .");
}
// Found at position 0
var position2 = names.lastIndexOf("one");
console.log("Found at position " + position2);
// Found at position 5

3、字符串表示

将数组转换成字符串:join() 和 toString()

    var str1 = ["one", "two", "three", "four", "five"];

    var str2= str1.join();
console.log(str2); // one,two,three,four,five str2= str1.toString();
console.log(str2); // one,two,three,four,five console.log(str1); // ["one", "two", "three", "four", "five"]

4、由已有数组创建新数组

concat() 用来合并多个数组创建一个新数组。

splice() 截取一个数组的子集创建一个新数组。

    var str1 = ["one", "two", "three", "four", "five"];
var str2 = ["six", "seven", "eight","nine","ten"]; var str3 = str1.concat(str2);
console.log(str3); // ["one", "two", "three", "four", "five", "six", "seven", "eight"] var str4 = str2.splice(2,4);
console.log(str4); // ["eight", "nine", "ten"]

5、为数组添加元素

push() 将一个元素添加到数组末尾。

unshift() 可以将元素添加在数组的开头。

    var num1 = [1, 2, 3, 4, 5];
console.log(num1); // [1, 2, 3, 4, 5] num1.push(6);
console.log(num1); // [1, 2, 3, 4, 5, 6] var s1 = num1.push();
console.log(s1); // 6 num1[num1.length] = 10;
console.log(num1); // [1, 2, 3, 4, 5, 6, 10] num1.unshift("one", "two");
console.log(num1); // ["one", "two", 1, 2, 3, 4, 5, 6, 10] var s2 = num1.unshift();
console.log(s2); // 9

6、从数组中删除元素

pop() 可以删除数组末尾的元素。

shift() 删除数组中的第一个元素。

    var num1 = [1, 2, 3, 4, 5];

    num1.pop();
console.log(num1); // [1, 2, 3, 4] var s = num1.pop();
console.log(s); // 4 num1.shift();
console.log(num1); // [2, 3] var s3 = num1.shift();
console.log(s3); // 2
console.log(num1); // [3]

7、从数组中间位置添加和删除元素

splice ( 起始索引,需要删除的元素个数,需要添加进数组的元素 )

    var str = [1, 2, 3, 7, 8 , 9];
var nStr = [4, 5, 6]; str.splice(6,0,10,11,12);
console.log(str); // [1, 2, 3, 7, 8, 9, 10, 11, 12] str.splice(3, 0, nStr);
console.log(str); // [1, 2, 3, Array[3], 7, 8, 9, 10] Array[3]是一个数组:[4,5,6] str.splice(3,4);
console.log(str); // [1, 2, 3, 10, 11, 12]

8、给数组排序

reverse() 将数组中的元素的顺序进行翻转。

sort() 按照字典顺序对元素进行排序。

    var num1 = [1, 2, 3, 4, 5];
var num2 = [2, 5,1 ,7, 100, 3, 20];
var str = ["one", "two", "three", "four", "five"]; num1.reverse();
console.log(num1); // [5, 4, 3, 2, 1] str.sort();
console.log(str); // ["five", "four", "one", "three", "two"] // sort()只是按照字典顺序进行排序
num2.sort();
console.log(num2); // [1, 100, 2, 20, 3, 5, 7] // 改进sort()排序
function compare(n1, n2){
return n1-n2;
}
num2.sort(compare);
console.log(num2); // [1, 2, 3, 5, 7, 20, 100]

9、迭代器方法

(1)不生成新数组的迭代器方法

foreach() 方法,接受一个函数作为参数,对数组中的每个元素使用该函数。

every() 方法,接受一个返回值为布尔型的函数,对数组中的每个元素使用该函数,如果对于所有的元素,该函数都返回true,则该方法返回true,否则会返回false。

some() 方法,也接受一个返回值为布尔型的函数,但是该方法只要有一个元素使得该函数返回true,该方法就返回true。

reduce() 方法,接受一个函数,返回一个值。这个方法会从一个累加值开始,不断对累加值和数组中的后续元素调用该函数,直到数组中的最后一个元素,最后返回得到累加值。

reduceRight() 方法,和reduce()方法区别在于,它是从右到左执行的。

    // forEach() 方法
function square(num){
console.log(num, num * num);
}
var num1 = [1, 2, 3, 4, 5];
num1.forEach(square); // every()方法
function isEven(num){
return num % 2 == 0;
}
var num2 = [6, 7, 8, 9, 10];
var even = num2.every(isEven);
if(even){
console.log("all numbers are even .");
}else{
console.log("not all numbers are even .");
}
// 结果: not all numbers are even // some()方法
function isEven(num){
return num % 2 == 0;
}
var num3 = [1, 2, 3, 4, 5, 6, 7];
var someEven1 = num3.some(isEven);
if(someEven1){
console.log("some numbers are even .");
}else{
console.log("no numbers are even .");
}
// 结果: some numbers are even . var num4 = [1,3,5,7,9];
var someEven2 = num4.some(isEven);
if(someEven2){
console.log("some numbers are even .");
}else{
console.log("no numbers are even .");
}
//结果: no numbers are even . // reduce()方法
function add(runTotal, currentValue){
return runTotal + currentValue;
}
var num6 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var num7 = num6.reduce(add);
console.log(num7); //结果: 55 function concat(accString, item){
return accString + item;
}
var str1= ["one", "two", "three", "four", "five"];
var str2 = str1.reduce(concat) ;
console.log(str2); // onetwothreefourfive // reduceRight()方法
function concat(accString, item){
return accString + item;
}
var str3= ["one", "two", "three", "four", "five"];
var str4 = str3.reduceRight(concat) ;
console.log(str4); // fivefourthreetwoone
(2)生成新数组的迭代器方法

map() 方法,对数组中的每个元素使用某个函数,该数组的元素是对原有元素的某个函数得到的结果。

filter() 方法, 传入一个返回值为布尔型的函数,当对数组中的所有元素使用该函数,结果都是true时,区别于every()方法返回true, filter()方法返回的是一个新数组,这个新数组包含使用该函数后结果为true的元素。

    // map()方法
function curve(num){
return num += 5;
}
var num1 = [5, 15, 25, 35, 45];
var num2 = num1.map(curve);
console.log(num2); // [10, 20, 30, 40, 50] function getFirstWord(str){
return str[0];
}
var str1 = ["one", "two", "three", "four"];
var str2 = str1.map(getFirstWord);
console.log(str2); // ["o", "t", "t", "f"] // filter()方法 //示例一
function isEven(num){
return num % 2 == 0;
}
function isOdd(num){
return num % 2 != 0;
}
var num3 = [];
for(var i = 0 ; i < 20; i++){
num3[i] = i+1;
}
var even = num3.filter(isEven);
console.log("Even numbers : " + even); // Even numbers : 2,4,6,8,10,12,14,16,18,20 var odd = num3.filter(isOdd);
console.log("Even numbers : " +odd); // Even numbers : 1,3,5,7,9,11,13,15,17,19 //示例二
function passing(num){
return num >= 60;
}
var num4 = [];
for(var i = 0 ; i < 20; i++){
num4[i] = Math.floor(Math.random() * 101);
}
var num5 = num4.filter(passing);
console.log("all numbers : " + num4);
// all numbers : 91,92,12,21,99,98,37,99,64,37,47,49,64,75,45,7,85,94,29,24
console.log("passing numbers : " + num5);
// passing numbers : 91,92,99,98,99,64,64,75,85,94 // 示例三
function delAfterC (str){
if(str.indexOf("cie") > -1){
return true;
}
return false;
}
var str3 = ["recieve", "deceive", "percieve", "deceit", "concieve"];
var str4 = str3.filter(delAfterC);
console.log(str4); // ["recieve", "percieve", "concieve"]

PS:本文仅仅是个人学习总结,若有不足还忘谅解,欢迎联系指导。

JavaScript 常用数组函数方法专题的更多相关文章

  1. jQuery中常用的函数方法

    jQuery中常用的函数方法总结 Ajax处理 load(url,[data],[callback]) url (String) : 待装入 HTML 网页网址. data (Map) : (可选) ...

  2. JavaScript原生数组函数

    有趣的JavaScript原生数组函数 在JavaScript中,可以通过两种方式创建数组,构造函数和数组直接量, 其中后者为首选方法.数组对象继承自Object.prototype,对数组执行typ ...

  3. php常用数组函数回顾一

    数组对于程序开发来说是一个必不可少的工具,我根据网上的常用数组函数,结合个人的使用情况,进行数组系列的总结复习.里面当然不只是数组的基本用法,还有相似函数的不同用法的简单实例,力求用最简单的实例,记住 ...

  4. JavaScript ES6 数组新方法 学习随笔

    JavaScript ES6 数组新方法 学习随笔 新建数组 var arr = [1, 2, 2, 3, 4] includes 方法 includes 查找数组有无该参数 有返回true var ...

  5. JavaScript常用数组操作方法&comma;包含ES6方法

    一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2,3]; var arr2 = [4,5]; ...

  6. JavaScript常用数组操作方法,包含ES6方法

    一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2,3]; var arr2 = [4,5]; ...

  7. 总结JavaScript常用数组操作方法,包含ES6方法

    一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2,3]; var arr2 = [4,5]; ...

  8. jQuery中常用的函数方法总结

    jQuery中为我们提供了很多有用的方法和属性,自己总结的一些常用的函数,方法.个人认为在开发中会比较常用的,仅供大家学习和参考. 事件处理 ready(fn) 代码: $(document).rea ...

  9. javascript中数组的方法你真的都了解吗?

    本篇文章主要讲述ES5中的数组,包括数组两种创建方式,属性,以及 9 大类 ,总共23个操作方法,非常全面,看完之后ES5数组这一部分基本都了解了,下一篇文章,我会讲述ES6中对数组的加成,新增了哪些 ...

随机推荐

  1. Intellij修改archetype Plugin配置

    Maven archetype plugin为我们提供了方便的创建 project功能,Archtype指我们项目的骨架,作为项目的脚手架. 如fornt end的yo之类.我们能够通过简单的一行控制 ...

  2. nodeJS 菜鸟入门

    从一个简单的 HTTP 服务开始旅程-- 创建一个 server.js 文件,写入: //最简单的 http 服务例子 var http = require("http"); ht ...

  3. js获取url查询参数

    function getURLParamInfo(key) { if (location.search == "") { return undefined; } var a = l ...

  4. &lbrack;Freescale&rsqb;E9学习笔记-LTIB总结

    转自:http://blog.csdn.net/wl_haanel/article/details/6231353   写在前面        符号'##'后面语句均为注释        需要做的操作 ...

  5. 【Hadoop代码笔记】Hadoop作业提交之JobTracker接收作业提交

    一.概要描述 在上一篇博文中主要描述了JobTracker接收作业的几个服务(或功能)模块的初始化过程.本节将介绍这些服务(或功能)是如何接收到提交的job.本来作业的初始化也可以在本节内描述,但是涉 ...

  6. 深入理解 Spring 事务原理

    本文由码农网 – 吴极心原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 一.事务的基本原理 Spring事务的本质其实就是数据库对事务的支持,没有数据库的事务支持,spring是无法提供 ...

  7. Flex中的DataGrid报错(二)

    1.错误描写叙述 此行的多个标记: -holeNum -1067: String 类型值的隐式强制指令的目标是非相关类型 mx.controls:Text. 2.错误原因  将字符串类型赋值给Text ...

  8. java gc的调用机制 和编程规则

    转载:http://sunzhyng.iteye.com/blog/480148 一个优秀的Java程序员必须了解GC的工作原理.如何优化GC的性能.如何与GC进行有限的交互,有一些应用程序对性能要求 ...

  9. VScode查找替换常用正则表达式

    1.从字符串开始到结束,例如:<a href="#">测试</a> (<'.*?>) //匹配到整个a标签 (>'.*?<) //匹 ...

  10. C&num; DataGirdview手动添加数据,导出txt文件并自动对齐

    //DataGirdview手动添加数据 private void btnDataGirdView_Click(object sender,EventArgs e) {       dataGridV ...