首页 > 其他分享 >js数组方法详解

js数组方法详解

时间:2024-03-19 18:34:26浏览次数:26  
标签:const 元素 value js 详解 数组 return array

数组是js中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响。

 

创建数组

一. 字面量方式

const array = [1,2,3,4,5];

 

二. 使用Array构造方法

1. 无参构造 - 创建一个长度为0的空数组

const array = new Array();

 

 

2. 带参构造

(1)如果只传一个数值参数,则表示创建一个初始长度为指定数值的空数组

const array = new Array(3);  //length=3空数组

(2)如果传入一个非数值参数或多参数,则表示创建一个包含指定元素的数组

const array = new Array('4'); // ['4']
const array2 = new Array(1,2,3,4); // [1,2,3,4] 

 

 

 

三. Array.of方法创建数组(es6新增)

const array = Array.of(1,2,3); // [1,2,3]

 

 

四. Array.from方法创建数组(es6新增)

const array = Array.from([4,5,6]); // [4,5,6]

 

 

数组方法

数组创建完了,接下来我们来看一下数组中的每一个方法的详细用法

1. push - 用于从数组末尾向数组添加元素,可以添加一个或多个元素,并返回新的长度。

const array = [1,2,3];
array.push(4); // [1,2,3,4]
array.push(5,6,7); // [1,2,3,4,5,6,7]

 

2. pop - 用于删除数组的最后一个元素并返回被删除的元素。

const array = [1,2,3,4];
const value = array.pop();  // array [1,2,3]    value 4

 

 

3. shift - 用于删除数组的第一个元素并返回删除的元素。

const array = [1,2,3,4];
const value = array.shift(); // 1 [2,3,4]

 

 

4. unshift - 用于向数组开头添加一个或多个元素,并返回新的长度。

const array = [4,5,6];
array.unshift(2,3); // [2,3,4,5,6]
array.unshift(1); // [1,2,3,4,5,6]

 

 

5. join - 用于数组转字符串。用传入参数作为分隔符,默认逗号为分隔符。

const array = [1,2,3];
const value1 = array.join();  // '1,2,3'
const value2 = array.join('-'); // '1-2-3'

 

 

6. toString和toLocaleString - 用于数组转字符串

const array = [1,2,3];
const value1 = array.toString();  // '1,2,3'
const value2 = array.toLocaleString();  // '1,2,3'

 


7. sort - 用于数组排序

const array = [1,3,6,4];
array.sort((a,b) => {return a > b ? 1 : -1}); // 1 生序   -1 降序 [1,3,4,6]

 

8. reverse - 用于颠倒数组中元素的顺序

const array = [1,2,3,4];
array.reverse(); // [4, 3, 2, 1]

 


9. concat - 用于连接两个或多个数组。不会改变原数组,只会返回被连接数组的一个副本

const array = [1,2,3];
const value = array.concat([4,5,6],7,8,[9,10,11]);  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

 

 

10. includes(es7新增) - 用于判断一个数组是否包含某个值,是返回true,否则false

const array = [0,1,2,3,4];
const value = array.includes(2);  // true

 


11. indexOf - 用于返回数组中某个指定元素第一次出现的位置,返回索引,没有的话返回-1

const array = [0,1,2,3,4,5];
const value = array.indexOf(2);  // 2

 

 

12. lastIndexOf - 用于返回一个指定的元素在数组中第一次出现的位置,从后向前搜索,没有的话返回-1

const array = [0,1,2,3,4,5,2];
const value = array.lastIndexOf(2);  // 6 

 

13. slice - 用于数组、字符串提取某个部分,并生成新的字符串或数组,不改变原数组

const array = [1,2,3,4,5,6,7];
const value = array.slice(1,3); // [2,3]

 

 

14. splice - 用于添加或删除数组中的元素,参数为 (开始位置,删除个数,添加的元素)

const array = [1,2,3,4,5,6,7];
const value = array.splice(1,3,8,9,10); // array [1, 8, 9, 10, 5, 6, 7]    value [2, 3, 4]

 

15. find()与findIndex()(es6新增) - find返回匹配的值(第一个),findIndex返回匹配位置的索引(第一个)

const array = [1,2,3,4,5,6,7];
const value = array.find((item, keys, arr) => { return item > 3; }) // 4
const index = array.findIndex((item, keys, arr) => { return item > 3; }) // 3

 

 

16. filter - 创建一个新数组,其中的元素是通过检查指定数组中符合条件的所有元素,不会改变原数组

const array = [1,2,3,4,5,6,7];
const value = array.filter((v,i,a) => { return v > 3 }) // array [1, 2, 3, 4, 5, 6, 7]  value [4, 5, 6, 7] 


17. map - 用于遍历数组每个元素,返回一个新数组,元素为原始数组处理后的值。不会改变原数组

const array = [1,2,3,4,5,6,7];
const value = array.map((v,i,a) => { return v += 1 }) // array [1, 2, 3, 4, 5, 6, 7]  value[2, 3, 4, 5, 6, 7, 8]

 

 

18. forEach - 用于遍历数组每个元素,并将元素传递给回调函数

let value = 0;
const array = [1,2,3,4,5,6,7];
array.forEach((v,i,a) => { value += v })  // 28


19. every - 用于判断数组中的每一项是否都满足条件,只有都满足才返回true

const array = [1,2,3,4,5,6,7];
const value = array.every((v,i) => { return v > 5 })  // false


20. some - 用于判读数组中的某一项是否满足条件,只要有一项满足就返回true

const array = [1,2,3,4,5,6,7];
const value = array.some((v,i) => { return v > 5 })  // true


21. reduce - 累加器,(function, 初始值-默认0)

const array = [1,2,3,4,5,6,7];
const value = array.reduce((total,num) => { return total += num })  // 28
const value = array.reduce((total,num) => { return total += num }, 20)  // 48

 

22. reduceRight - 同reduce,从后向前

const array = [1,2,3,4,5,6,7];
const value = array.reduceRight((total,num) => { return total += num }, 20)  // 48

 

23. fill(es6新增) - 使用特定值填充数组中的一个或多个元素。1个参数时该参数会填充整个数组,两个或三个参数(填充的数,开始位置,结束位置)

const array = [1,2,3,4,5,6,7];
array.fill(1);  // [1, 1, 1, 1, 1, 1, 1]
array.fill(1,3);  // [1, 2, 3, 1, 1, 1, 1]
array.fill(1,3,5);  // [1, 2, 3, 1, 1, 6, 7]

 

 

24. copyWithin(es6新增) - 用于从数组的指定位置拷贝元素到数组的另一个指定位置中

const array = [0,1,2,3,4,5,6,7];
array.copyWithin(3) // [0, 1, 2, 0, 1, 2, 3, 4]
array.copyWithin(3, 1) // [0, 1, 2, 1, 2, 3, 4, 5]
array.copyWithin(3, 1, 3) // [0, 1, 2, 1, 2, 5, 6, 7]

 

标签:const,元素,value,js,详解,数组,return,array
From: https://www.cnblogs.com/liql/p/18083674

相关文章

  • 【NodeJS】GLIBC_2.28 not found CentOS7不兼容Node高版本 npm报错
    CentOS7环境下安装Nvm,在执行nvmuse18.17.0后执行node-v爆出如下错误 bash复制代码node:/lib64/libm.so.6:version`GLIBC_2.27'notfound(requiredbynode)node:/lib64/libc.so.6:version`GLIBC_2.25'notfound(requiredbynode)node:/lib64/libc.so......
  • vue使用JSWebrtc播放webrtc视频流
    1、下载JSWebrtc.min.js文件地址:https://github.com/kernelj/jswebrtc/tree/master/dist 或者再此路径下载 https://files.cnblogs.com/files/blogs/702532/jswebrtc.min.js?t=1710839018&download=true2、使用jswebrtc2.1文件放到public/static目录下,位置不能放错 2......
  • react使用map循环渲染dom时,增加或删减数组,但想保持其余的dom与数据不发生改变
     核心思路:dom渲染与key值有关系,如果想实现上述需求,则需要关注改变前后的循环项的key值是否发生改变currentCabinet?.map((item,index)=><BaseInfokey={`currentCabinet${item?.ciId}`}sceneKey={sceneKey}currentCabinet={item}/>)如以上示例,以ciId为key值,可以保证即......
  • 数组的reduce 的使用和扁平化处理
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></hea......
  • JS常用方法
    1、判断对象数组是否有相同属性相同:true\不相同:falseexportconsthasDuplicates=(array,keyArr)=>{returnarray.some((item,index)=>{returnarray.findIndex((v,i)=>{letkeyValue='';letkeyValue1='';keyA......
  • java数据结构与算法刷题-----LeetCode1005. K 次取反后最大化的数组和(这就不是简单题)
    java数据结构与算法刷题目录(剑指Offer、LeetCode、ACM)-----主目录-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/123063846卷来卷去,把简单题都卷成中等题了文章目录1.排序后从小到大取负2.hash表从小到大排序,省掉排序(这就是为什......
  • 五、jsPlumb实现流程图配置--连线
    一、线条创建在第一篇文章讲到过线条一共有四种类型Bezier、Straight、Flowchart、StateMachine,以及每种类型的样子,接下来就演示如何创建线条。创建一条连线有两种方式:通过代码创建;用户使用鼠标拖拽进行创建。1.通过代码创建使用jsPlumb提供的connectAPI可以创建连线。......
  • 1793.好子数组的最大分数(力扣每日一题)
    1793.好子数组的最大分数给你一个整数数组nums(下标从0开始)和一个整数k。一个子数组(i,j)的分数定义为min(nums[i],nums[i+1],...,nums[j])*(j-i+1)。一个好子数组的两个端点下标需要满足i<=k<=j。请你返回好子数组的最大可能分数。 示例......
  • 使用crypto-js加密
    在utils文件夹创建一个aes.js文件安装cnpminstallcrypto-jsimportCryptoJSfrom"crypto-js";constkey=CryptoJS.enc.Utf8.parse("");//十六位十六进制数作为密钥constiv=CryptoJS.enc.Utf8.parse("");//十六位十六进制数作为密钥偏移量//解密方法exportfu......
  • Pytest教程:详解pytest.main()
    1.什么是 pytest.main() 函数?pytest.main()是Pytest测试框架中的一个函数,用于动态地运行测试。通过调用这个函数,可以在代码中以编程方式执行Pytest测试集而不是通过命令行。1.1 pytest.main() 函数的作用和功能:pytest.main() 函数的主要作用是启动Pytest测试......