首页 > 其他分享 >js操作数据的方法总结

js操作数据的方法总结

时间:2023-02-06 16:22:25浏览次数:37  
标签:总结 arr console log js item 数组 操作 const

数组遍历

  • forEach
    该方法等同于for循环,其没有返回值
    结构:arr.forEach(回调函数,回调函数this的值) 第二个参数当回调函数是箭头函数时无效
  用法:
  arr.forEach(function(item,index,arr){
    // 里面的function是一个回调函数
    // item: 数组中的每一项
    // index:item 对应的下标索引值
    // arr: 就是调用该方法的数组本身
  });
  • map
    该方法使用和forEach大致相同,该方法有返回值,返回一个新数组,工作中需要对数组的每一项进行操作获取操作后的新数组时可以使用此方法
    结构:arr.map(回调函数,回调函数this的值)
  用法:
  const arr = [1,2,3];
  const newArr= arr.map((item,index,arr) => {
     return item * 2;
  });
  console.log(newArr); // [2,4,6]
  console.log(arr); // [1,2,3]
  注:当数组元素类型为引用类型时会改变原数组,因为值类型入参是复制,引用类型是指向同一对象
  const arr2 = [{num:1},{num:2},{num:3}];
  const newArr2 = arr2.map((item,index,arr) => {
     item.num2 = 10;
     return item;
  });
  console.log(newArr2); // [{num: 1, num2: 10},{num: 2, num2: 10},{num: 3, num2: 10}]
  console.log(arr2); // [{num: 1, num2: 10},{num: 2, num2: 10},{num: 3, num2: 10}]
  • filter
    该方法有返回值,返回一个符合条件元素组成的新数组,工作中需要过滤出符合条件的数组元素时可以使用此方法
    结构:arr.filter(回调函数,回调函数this的值)
  用法:
  const arr = [1,2,3];
  const newArr= arr.filter((item,index,arr) => {
     return item > 2;
  });
  console.log(newArr); // [3]
  • some
    该方法判断数组中有没有符合条件的项(只要有,就返回true),如果一个都没有才返回false,原理类似于或运算
    结构:arr.some(回调函数,回调函数this的值)
  用法:
  const arr = [1,2,3];
  const flag = arr.some((item,index,arr) => {
     return item > 2;
  });
  console.log(flag); // true
  const flag2= arr.some((item,index,arr) => {
     return item > 4;
  });
  console.log(flag2);  // false
  • every
    该方法判断数组中所有的项是否满足要求,如果全都满足才返回true,否则返回false,原理类似于与运算
    结构:arr.every(回调函数,回调函数this的值)
  用法:
  const arr = [1,2,3];
  const flag = arr.every((item,index,arr) => {
     return item > 0;
  });
  console.log(flag); // true
  const flag2= arr.every((item,index,arr) => {
     return item > 1;
  });
  console.log(flag2);  // false

数组增删改操作

  • push
    该方法可以在数组的最后面增加一个或多个元素,返回值为添加新元素后数组的长度
    结构:arr.push(值)
  例:
  const arr = [1,2,3];
  const arrLength = arr.push(4,5,6); 
  console.log(arr); // [1,2,3,4,5,6]
  console.log(arrLength); // 6
  • pop
    该方法为删除数组的最后一位元素,返回值为删除的那个元素
    结构:arr.pop()
  例:
  const arr = [1,2,3];
  const arrLength = arr.pop(); 
  console.log(arr); // [1,2]
  console.log(arrLength); // 3
  • unshift
    该方法可以在数组的最前面增加一个或多个元素,返回值为添加新元素后数组的长度
    结构:arr.unshift(值)
  例:
  const arr = [1,2,3];
  const arrLength = arr.unshift(0);
  console.log(arr); // [0,1,2,3]
  console.log(arrLength); // 4
  • shift
    该方法为删除数组第一位元素,返回值为删除的元素
    结构:arr.shift()
  例:
  const arr = [1,2,3];
  const arrLength = arr.shift();
  console.log(arr); // [2,3]
  console.log(arrLength); // 1
  • splice
    该方法可以实现删除或增加或替换元素(任意在任何位置,直接改变原数组,没有返回值)
    结构:arr.splice(开始下标位置,处理的个数,新增的元素1,新增的元素2…)
  例:
  const arr = [1,2,3,4,5,6];
  arr.splice(0,2); // 纯删除
  console.log(arr); // [3,4,5,6];
  arr.splice(1,1,7);  // 替换
  console.log(arr); // [3,7,5,6]
  arr.splice(1,0,8,9);  // 纯添加
  console.log(arr); // [3,8,9,7,5,6]

检查数组是否包含某个元素

  • includes
    该方法可直接检测数组中是否包含某个元素,包含则返回true,不包含则返回false
    结构:arr.includes(值,从某个下标开始)
  例:
  const arr = [1,2,3];
  const flag1 = arr.includes(2);
  const flag2 = arr.includes(4) ;
  const flag3 = arr.includes(2,2);
  console.log(flag1); // true
  console.log(flag2); // false
  console.log(flag3); // false
  • indexOf
    该方法可检测数组中是否包含某个元素,包含则返回第一个匹配元素的索引,不包含则返回-1
    结构:arr.indexOf(值,从某个下标开始)
  例:
  const arr = [1,2,3,5,2];
  const flag1 = arr.indexOf(2);
  const flag2 = arr.indexOf(4) ;
  const flag3 = arr.indexOf(2,2);
  console.log(flag1); // 1
  console.log(flag2); // -1
  console.log(flag3); // 4
  • lastIndexOf
    该方法可检测数组中是否包含某个元素,包含则返回元素的最后一个索引,不包含则返回-1
    结构:arr.lastIndexOf(值,从某个下标开始)
  例:
  const arr = [1,2,3,4,2,5,6,2];
  const flag1 = arr.lastIndexOf(2);
  const flag2 = arr.lastIndexOf(9);
  console.log(flag1); // 7
  console.log(flag2); // -1

数据拼接与截取

  • join
    该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式拼接起来,默认是以,分割
    结构:arr.join(分隔符)
  例:
  const arr = [1,2,3];
  const str1 = arr.join();
  const str2 = arr.join('-');
  console.log(str1); // 1,2,3
  console.log(str2); // 1-2-3
  • concat
    该方法可以把两个数组里的元素拼接成一个新的数组
    结构:arr.concat(值1, 值2)
  例:
  const arr1 = [1,2,3];
  const arr2 = [4,5,6];
  const arr = arr1.concat(arr2,7,8,[9,10]);
  console.log(arr) //[1,2,3,4,5,6,7,8,9,10];
  • slice
    该方法可以从数组中截取指定的元素段,返回出来,不改变原数组,入参都是可选参数
    结构:arr.slice(开始位,结束位)
  例:
  const arr = [1,2,3,4,5,6];
  const arr1 = arr.slice(); //截取全部
  const arr2 = arr.slice(2); //开始位开始往后截取全部
  const arr3 = arr.slice(2,5); //开始位开始,不包括结束位元素 
  console.log(arr1); //[1,2,3,4,5,6]
  console.log(arr2); //[3,4,5,6]
  console.log(arr3); //[3,4,5]

数组的翻转与排序

  • reverse
    该方法将数组中元素的位置颠倒,并返回该数组,会改变原数组
    结构:arr.reverse()
  例:
  const arr = [1,2,3];
  arr.reverse()];
  console.log(arr); // [3,2,1]
  • sort
    该方法对数组的元素进行排序,并返回数组
    结构:arr.sort(函数)
  例:
  const arr = [1,5,2,6,9,7,3];
  arr.sort(); // 默认排序,会将元素转换为字符串,然后比较它们的 UTF-16 代码单元值实现排序
  console.log(arr);  // [1, 2, 3, 5, 6, 7, 9]
  const arr1 = [1,5,2,6,9,7,3];
  arr1.sort((a, b) => { return a - b }); // 自定义排序,递增
  console.log(arr1);  // [1, 2, 3, 5, 6, 7, 9]
  const arr2 = [1,5,2,6,9,7,3];
  arr2.sort((a, b) => { return b - a }); // 自定义排序,递减
  console.log(arr2); // [9, 7, 6, 5, 3, 2, 1]

标签:总结,arr,console,log,js,item,数组,操作,const
From: https://www.cnblogs.com/ygsrjr/p/17095592.html

相关文章

  • JSON Crack可视化展示 JSON 数据的开源软件使用方法
    进入官网https://jsoncrack.com/在vscode上获取进入直接下载到vscode再给权限即可打开一个json文件打开命令面板(Ctrl+Shift+P)输入jsoncrack-vscode.start即......
  • 一文梳理 Code Review 方法论与实践总结
    作者:方基成(润甫)作为卓越工程文化的一部分,CodeReview其实一直在进行中,只是各团队根据自身情况张驰有度,松紧可能也不一,这里简单梳理一下CR的方法和团队实践。为什么......
  • Hive使用TRANSFORM运行Python脚本总结
    1、Python环境设置可以使用addcachearchive的方法把tar.gz添加到分布式缓存,Hive会自动解压压缩包,但是目录名是和压缩包名称一样的;addcachearchive${env:my_workbenc......
  • python之路64 drf从入门到成神 9个视图子类 视图集、ModelViewSet、ReadOnlyModelV
    视图视图View两个视图基类:APIViewGenericAPIViewAPIView执行流程:新的reqeust,三大认证,全局异常重写了as_view,dispatch类属性:p......
  • 开发经验总结-点滴积累
    <欢迎大家加入iOS开发学习交流群:529560119>啊看到一个新的界面,要细细划分区域,应该怎么设计合理。1.如果是在一个cell中有好几行,每行都是两个label,规则排版一样,这样很好做,但......
  • 《2020总结-2021展望》
    一年又一年2020开局就是一波大“惊喜”,工作以来放的最长的一次假,疫情原因导致我们都居家办公了。现在回想起来,那段时间还是很空闲的,除了工作任务,下班后就没看啥书了,带带娃,刷......
  • 关于 ajax在前端提示SyntaxError: Unexpected end of JSON input
    前几日,在开发微信公众号上的网页时候,前端采用h5+jquery开发,后端采用ASP.net的ashx接收前端的参数,restful采用的是java开发,由于在ASP.ENT的webconfig中增加了<sessionState......
  • JSONP 接口
           ......
  • Json字符串反序列化
    Json反序列化注意事项 1、获取到Json数据 2、对Json进行处理必须对json字符串处理(空格回车去掉)--否则序列化失败处理前: 反序列化失败:   3、反序列化成......
  • Servlet导出Excel,Json
    最近温故了下Servlet知识,以下做一些导出Excel,返回Json的演示以下的这些返回原理其实都是在控制返回的的ContentType,告诉客户端我返回的内容,返回xml等其他思路大同小异返......