首页 > 其他分享 >理解JS中数组的常见应用

理解JS中数组的常见应用

时间:2023-05-27 12:45:06浏览次数:55  
标签:arr 常见 return 元素 JS 数组 var array

JavaScript中数组是用方括号包裹起来的一组元素,各元素之间以逗号隔开,例如:

var array = [1,2,4,6];

如上述代码所示,数组array是若干整数构成的数组。

数组元素的获取

获取数组元素需采用数组名加下标的方式。下标从0到数组长度减一,第一个元素用arry[0]表示,第二个元素用arry[1]表示,以此类推...

  var array = [1,2,4,6];
  array[1]; // 返回2
  arraay[2]; //返回4
  var len = array.length; //数组长度为4
  array[len-1]; //6

push()和pop()

在数组的尾部添加一个或若干个给定的元素用push方法,在数组尾部删除元素用pop方法

  var array = [1,6];
  //添加尾部元素
  array.push(8,9);  // [1,6,8,9]
  //删除尾部元素
  array.pop();      // 9
  array  //[1,6,8]      

unshift()和shift()

在数组的头部添加一个或若干个指定元素用unshift方法,在数组头部删除元素用shift方法

  var array = [1,6];
  //添加头部元素
  array.unshift(8,9);  // [8,9,1,6]
  //删除头部元素
  array.shift();      // 8
  array  //[9,1,6]        

slice()

使用slice方法可以截取数组部分元素,slice(start,end),start表示开始索引值,end表示结束索引值。slice方法生成了一个新数组,原先数组的值不变。

  var array = [1,2,3,'A','B','C']; 
  array.slice(2,5); //[3,'A','B'] 开始索引2,结束索引5,但不包含5
  array; //[1,2,3,'A','B','C']
  var array1 = array.slice();  //创建一个新数组
  array1;   // [1,2,3,'A','B','C']
  array1 === array; // false

splice()

splice方法可以从指定位置删除一些元素,然后再新加一些元素。splice方法改变了原数组,返回了一个被删除元素形成的数组。

  var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
  // 从索引2开始删除3个元素,然后再添加两个元素:
  arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
  arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
  // 只删除,不添加:
  arr.splice(2, 2); // ['Google', 'Facebook']
  arr; // ['Microsoft', 'Apple', 'Oracle']
  // 只添加,不删除:
  arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
  arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

concate()

concat方法把当前的Array和另一个Array连接起来,并返回一个新的Array:

  var arr = ['A', 'B', 'C'];
  var added = arr.concat([1, 2, 3]);
  added; // ['A', 'B', 'C', 1, 2, 3]
  arr; // ['A', 'B', 'C']

join()

join方法可以将数组用给定的字符串连接起来,生成一个新的字符串

  var arr = ['A', 'B', 'C', 1, 2, 3];
  arr.join('-'); // 'A-B-C-1-2-3'

map()

该方法将创建一个新的数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

  var arr=[1,3,4,55,23];
  arr.map(function(x){
      //每个元素乘以2
      return x*2;
  })
  //[2,6,8,110,46]

filter()

该方法将创建一个新的数组,这个新数组由原数组中的每个元素都调用提供的函数进行判断,满足条件的元素保留后所组成的。

  var arr=[1,3,4,55,23];
  arr.filter(function(x){
      //每个元素乘以2
      return x>10;
  })
  //[55,23]

forEach()

对数组的每个元素执行一次给定的函数。

  var arr=[1,3,4,55,23];
  arr.forEach(function(x){
      //在控制台打印出元素
      console.log(x);
  })
  //1
  //3
  //4
  //55
  //23

every()

对数组的每一个元素按给定的函数判断是否满足条件,如果都满足则返回true,相反则返回false

  var arr=[23,11,9,8,12,2];
  arr.every(function(x){
      return x>10;
  })
  //false

some()

对数组的元素按给定的函数判断是否存在满足的情况,如果存在则返回true,否则则返回false

  var arr=[23,11,9,8,12,2];
  arr.some(function(x){
      return x>10;
  })
  //true

reduce()

对数组中的每个元素按序执行一个提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入, 最后将其结果汇总为单个返回值。

  var arr=[10,8,12,56];
  arr.reduce(function(sum,x){
      return sum+x;
  });
  //86

find()

对数组元素按照给定的函数进行查找,并返回第一个满足条件的数组元素

  var arr=[-2,-4,12,0,13]
  arr.find(function(x){
      return x>0
  });
  //12

findIndex()

对数组元素按照给定的函数进行查找,并返回第一个满足条件的数组元素的索引

  var arr=[-2,-4,12,0,13]
  arr.findIndex(function(x){
      return x>0
  });
  //2

findLastIndex()

对数组元素按照给定的函数进行查找,并返回最后一个满足条件的数组元素的索引

  var arr=[-2,-4,12,0,13]
  arr.findLastIndex(function(x){
      return x>0
  });
  //4

sort()

对数组元素按照给定的函数进行排序

  var arr = [34,2,21,12,33,56,10];
  // 按找倒序的方式进行排序
  arr.sort(function(x,y){
      if (x>y){
          return -1;
      }else if(x==y){
          return 0;
      }else{
          return 1;
      }
  })
  //[56, 34, 33, 21, 12, 10, 2]

文章同时发表在:码农编程网 欢迎访问

本节重点:

  • 理解什么是数组;
  • 在数组尾部添加或删除元素;
  • 在数组头部添加或删除元素;
  • 数组元素的截取,连接,转换等操作。
  • 数组其它的常用方法

标签:arr,常见,return,元素,JS,数组,var,array
From: https://www.cnblogs.com/qqxz/p/17436566.html

相关文章

  • jsp学习日志一,基本用法和隐式对象
    基本用法在第一个index.jsp文件中<formaction="monday-01.jsp"><inputtype="text"name="uname"><inputtype="submit"value="提交"></form>而monday.jsp文件中<%Stringa=request.getPa......
  • org.apache.jasper.JasperException: Unable to compile class for JSP: An error occ
    org.apache.jasper.JasperException:UnabletocompileclassforJSP:Anerroroccurredatline:16inthejspfile:/monday-01.jspSystem.outcannotberesolvedtoatype13:<body>14:<%15:Stringa=request.getParameter("uname");......
  • Node.js
    作为一个异步事件驱动的JavaScript运行时,Node.js被设计用来构建可扩展的网络应用。在下面的“HelloWorld”示例中,可以并发处理许多连接,每一个连接都会触发一个回调,而当没有可做的事情时,Node.js就会进入休眠状态。###启动node.jsconsthttp=require('http');constho......
  • 【React工作记录七十】判断数组对象中是否满足某条件
     目录前言导语 核心代码总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语歌谣歌谣数组......
  • 第一个react.js程序:create and show comment
    importReact,{Component}from"react";import{render}from"react-dom";importPropTypesfrom"prop-types";constnode=document.getElementById("root");constdata={post:{id:123,content:......
  • js原型prototype(实例构造函数的属性) __proto__(实例对象的属性) constructor(实例
    functionPerson(name,age){this.name=namethis.age=age}Person.prototype.sayHi=function(){//原型是公共方法解决构造函数new对象公共属性和方法的内存浪费console.log(this.name+'sayhi!!')}constp1=newPerson('aa',12)constp2=new......
  • jsp
    jsp实现原理服务器启动,将编写的jsp文件,转译成java文件,再编译成class文件运行1.1指令JSP的指令,主要是对当前JSP页面设置属性.page:设置当前当前jsp的属性[重要]taglib:用来给当前jsp引入jstl标签库include:包含,将其他内容包含至当前页面[了解]指令语法......
  • Java编程之数组
    数组(容器)数组是一组数据类型相同的数据的组合,将这些数据统一的管理起来,数组本身是一个引用数据类型,数组内存储的类型可以是基本类型也可以是引用类型。数组的特点数组本身是一个引用数据类型数组是在堆内存中的一串连续的地址存在数组在初始化时必须指定长度堆内存的数组空......
  • 九宫格菜单按钮组件,提供常见的宫格布局,如八宫格、九宫格
    快速实现宫格菜单按钮组件,提供常见的宫格布局,如八宫格、九宫格的菜单组件;下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12592效果图如下:   参考代码如下:#宫格菜单按钮组件,提供常见的宫格布局,如八宫格、九宫格####HTML代码部分```......
  • hvv蓝初面试常见漏洞问题(上)
    1.SQL注入漏洞成因:可控变量变量会带入数据库查询变量不存在过滤或者变量过滤不严格注入流程判断是否有注入点orderby判断字段数量unionselect报错查看注入点使用函数查看数据库相关信息注入分类:注入类型:报错、联合、盲注(布尔,时间)、堆叠注入提交方式:get,post,co......