首页 > 其他分享 >对数组操作的相关js函数

对数组操作的相关js函数

时间:2024-11-26 16:28:47浏览次数:7  
标签:arr console 函数 js item let 数组 log

汇总一下 js 中,数组的相关函数(如有问题,请在评论区q我哦!感谢!)

1. 添加和删除 数组元素

// 1. push 在数组末尾添加一个或多个元素,并返回新的长度 (改变原数组)
let array = [1,2,3];
array.push(4);
console.log(array); // 输出[1,2,3,4]

// 2. pop 移除数组末尾的一个元素,并返回该元素 (改变原数组)
let array = [1,2,3];
array.pop();
console.log(array); // 输出[1,2]

// 3. shift 移除数组开头的第一个元素,并返回该元素 (改变原数组)
let array = [1,2,3];
array.shift();
console.log(array); // 输出[2,3]

// 4. unshift 在数组开头添加一个或多个元素,并返回新的长度 (改变原数组)
let array = [1,2,3];
array.unshift(0);
console.log(array); // 输出[0,1,2,3]

2. 迭代数组

// 一. forEach(callbackFn,thisArg)
// 对数组的每个元素执行一次给定的函数.

// callbackFn: 第一个参数是函数。该函数被调用时,将传入以下参数
    // 1. item :数组中,正在处理的当前元素
    // 2. index:正在处理的当前元素的索引
    // 3. array:调用了 forEach 的数组本身

// thisArg: 第二个参数为:执行 callbackFn 时用作 this 的值。
// 我个人理解就是给定函数内,this的指向。(不常用)
// 例如:传入obj对象,给定的函数内 this 指向 obj
let arr = ['a','b','c'];
arr.forEach((item,index)=>{
    console.log(item,index); // a0 b1 c2
})


// 二. map(callbackFn,thisArg) 参数:参考 1.forEach
// 创建一个新数组!! 这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
let arr = [1,2,3];
let newarr = arr.map((item,index)=>{
    return item + index
})
console.log(newarr);    // [1, 3, 5]


// 三. filter(callbackFn,thisArg) 参数:参考 1.forEach
// 创建给定数组一部分的浅拷贝,其包含通过所提供函数实现的测试的所有元素。
let arr = [1, 2, 3, 4, 5];  
let newArr = arr.filter((item)=>{  
    return item > 2;  // 一般返回的是布尔值
});  
console.log(newArr); // 输出: [3, 4, 5]


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

// callbackFn: 为数组中每个元素执行的函数,函数返回值作为下个函数调用时的第一个(accumulator)参数。
// 该函数被调用时,将传入以下参数
// 1. accumulator:上次调用函数(callbackFn)的结果,在第一次调用时
// 如果指定了第二个参数(initialValue),为指定的参数,如果未设置。则为array[0]
// 2. currentValue:当前元素的值,在第一次调用时
// 如果指定了第二个参数(initialValue),为指定的参数。如果未设置,则为array[1]
// 3. currentIndex:currentValue 在数组中的索引位置。在第一次调用时
// 如果指定了 initialValue 则为 0,否则为 1。
// 4. array 使用reduce函数的数组本身

// initialValue: 请看第一个参数(callbackFn)函数中传入的第一二个参数
let arr = [1,2,3];
let newarr = arr.reduce((item,index)=>{
    return item + index
})
console.log(newarr); // 输出: 6

let arr = [1,2,3];
let newarr = arr.reduce((item,item2)=>{
    return item + item2
},10)
console.log(newarr); // 输出: 16


// 五. some(callbackFn, thisArg) 参数:参考 1.forEach
// 数组中的某些元素是否通过了由提供的函数实现的测试
let arr = [1,2,3];
let newarr = arr.some(item=>item%2)
console.log(newarr); // 输出: true

let arr = [2,4,6];
let newarr = arr.some(item=>item%2)
console.log(newarr); // 输出: false


// 六. every(callbackFn, thisArg) 参数:参考 1.forEach
// 数组的所有元素是否都通过了由提供的函数实现的测试
let arr = [1,2,3];
let newarr = arr.every(item=>item%2)
console.log(newarr); // 输出: false

let arr = [1,3,5];
let newarr = arr.every(item=>item%2)
console.log(newarr); // 输出: true

3. 查找元素

// 1. indexOf - 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1
let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(4);
console.log(index); // 输出: 3

// 2. includes - 判断一个数组是否包含一个指定的值,如果是返回 true,否则返回 false
let arr = [1, 2, 3, 4, 5];
let inThree = arr.includes(3);
console.log(inThree); // 输出: true

// 3. find - 返回数组中满足提供的测试函数的第一个元素的值
let arr = [1, 2, 3, 4, 5];
let found = arr.find(function(item) {
  return item > 3;
});
console.log(found); // 输出: 4

// 4. findIndex - 返回数组中满足提供的测试函数的第一个元素的索引
let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(function(item) {
  return item > 3;
});
console.log(index); // 输出: 3

4. 数组转换

// 1. concat - 用于合并两个或多个数组
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = arr1.concat(arr2);
console.log(combined); // 输出: [1, 2, 3, 4, 5, 6]

// 2. slice - 返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝
let arr = [1, 2, 3, 4, 5];
let subArr = arr.slice(1, 3);
console.log(subArr); // 输出: [2, 3]

// 3. splice - 通过删除或替换现有元素或者添加新元素来修改数组,返回由被删除的元素组成的数组
// 参数1:索引值。参数二:移除个数。
let arr = [1, 2, 3, 4, 5];
let removed = arr.splice(2, 2, 'a', 'b');    //在索引2处移除两个参数,并插入'a','b'。
console.log(arr); // 输出: [1, 2, 'a', 'b', 5]
console.log(removed); // 输出: [3, 4]

// 4. join - 将所有数组元素,通过传入的参数,连接成一个字符串
let arr = [1, 2, 3, 4, 5];
let joinedStr = arr.join('-');
console.log(joinedStr); // 输出: "1-2-3-4-5"

// 5. toString - 返回一个字符串,该字符串由数组中的每个元素连接而成,每个元素由逗号分隔
// 通俗讲就是转换成字符串
let arr = [1, 2, 3, 4, 5];
let str = arr.toString();
console.log(str); // 输出: "1,2,3,4,5"

5. 数组排序

// 1. sort - 对数组的元素进行排序并返回数组
let arr = [5, 3, 8, 4, 2];
arr.sort(function(a, b) {
  return a - b;
});
console.log(arr); // 输出: [2, 3, 4, 5, 8]

// 2. reverse - 反转数组的元素顺序
let arr = [5, 3, 8, 4, 2];
arr.reverse();
console.log(arr); // 输出: [2, 4, 8, 3, 5]

标签:arr,console,函数,js,item,let,数组,log
From: https://blog.csdn.net/m0_65015442/article/details/143163201

相关文章

  • Jenkin window bat批处理脚本如何请求api,获取json对象返回值数据
    需求:在jenkins的windowsbat批处理脚本中,请求一个api返回json数据,然后获取返回值的某个指定key的value直接上脚本:cdC:\workspace\jenkinxx\workspace\job-ta-webgitcheckoutmastergitpulldir::使用curl请求APIcurl-shttp://xx.xx.xx.xx:8088/testapi/getData......
  • Jenkin window bat批处理脚本如何 获取json对象返回值数据
    前两天有这么个小需求:在cmd中运行某测试工具后/请求某个api后,会返回一个json结果,其中有一个参数的值每次都变且经常要用,正常情况复制粘贴就好了,但这个值非常长,配上cmd的标记+粘贴的行为,就很酸爽了。然后就想快速提取这个值,顺着cmd的这个思路,就走上了批处理的道路。借这个机会,简......
  • fastjson
    fastjsonfastjson解析流程fastjson是用来实现json字符串和类之间的转换,也就是它可以把类转换为一个json字符串来表示,也可以把代表类的json字符串解析为类当fastjson对相应的json字符串进行解析时会调用类属性的set和get方法一个例子:packageorg.example;importcom.alibaba......
  • Fes.js 中集成常用插件,提升开发效率
    Fes.js是一款基于Vite的现代化Web开发框架,它提供了丰富的插件生态系统,可以极大提升开发效率。本文将介绍如何在Fes.js中集成一些常用的插件,并提供详细的使用案例。状态管理:VuexVuex是Vue.js官方的状态管理库,可以帮助我们更好地管理应用程序的状态。安装......
  • 【类的默认成员函数】构造函数&&析构函数【C++】
    【类的默认成员函数】构造函数&&析构函数【C++】任何一个类在我们不写的情况下,都会自动生成6个默认成员函数构造函数:初始化(不是开空间!)日常实操中最好自己写一个!!!!!!!!Date(){ _year=1; _month=1; _day=1;}特点(1)函数名和类名相同(2)无返回值(3)对象实例化时编译器自动调......
  • H.265流媒体播放器EasyPlayer.js播放器关于播放内网https地址报错(ERR_CERT_COMMON_NA
    随着技术的发展,越来越多的H5流媒体播放器开始支持H.265编码格式。例如,EasyPlayer.jsH5播放器能够支持H.264、H.265等多种音视频编码格式,这使得播放器能够适应不同的视频内容和网络环境。那么播放内网https地址报错(ERR_CERT_COMMON_NAME_INVALID错误)怎么处理?一般这种情况是浏览......
  • C++练级计划->《多态》虚函数表,菱形继承多态
    目录什么是多态?多态的条件虚函数:虚函数的重写:协变 析构函数的重写C++11final和overridefinal:override:总结:三重对比:重载重写重定义对比抽象类多态的原理虚函数表为什么只能是父类的指针或者引用来调用才能形成多态? 动态绑定和静态绑定单继承的虚函数表 ......
  • JavaScript 中的“造物”艺术:对象、构造函数与原型
    走进JS,走近讶语在JavaScript的世界里,对象和面向对象编程(OOP)是不可或缺的一部分。本文将带你深入了解JavaScript中对象的创建方式,特别是ES6中引入的class语法,以及传统的构造函数和原型的概念。希望通过这篇文章,你能对JavaScript的面向对象编程有一个更深入的理解。1.造对象......
  • Nuxt.js 应用中的 webpack:done 事件钩子
    title:Nuxt.js应用中的webpack:done事件钩子date:2024/11/26updated:2024/11/26author:cmdragonexcerpt:webpack:done钩子用于处理Webpack编译完成后的逻辑。在Webpack编译的所有任务完成后,这个钩子会被调用,通常用于通知开发者编译的状态、执行清理工作或作为......
  • MINIMAX稀宇科技 爬虫AI-API复用-海螺前端JS代码的动态调试
    海螺前端JS代码的动态调试环境准备chrome浏览器,burpsuit,实际操作主要操作在chrome浏览器中进行:第零步:通过burpsuit抓包,在重放中改变requestheader参数,定位关键参数第一步:进入需要自动化发包的页面,在js代码中寻找关键参数.第三步:对关键参数的js文件进行分......