数组几种常用方法的基础语法和使用

• 数组会变更的方法，会改变原始数组，直接导致页面的更新：

push（） -尾部添加

unshift（） - 头部添加
shift （）- 头部删除

pop（） - 尾部删除
splice（）-有三个用法，删除，添加，替换

删除元素时，提供下方2个参数
splice(删除的位置的下标，删除几个项元素)

添加元素时，提供下方3个参数
splice(添加的位置，0(要删除的项数),添加的元素)

替换元素时，提供下方三个参数
splice(删除的位置，删除项，插入的任意数量项)
let colors = ["red", "green", "blue"];
var removed = colors.splice(1,2,"pink");  //方法返回删除的项目 ["green", "blue" ]
alert(colors); //["red" ,"pink"]

splice只提供一个参数时，该参数就是删除元素的数量，从0开始删除
let arr =[1,2,3,4,5,6]
arr.splice(2) //[3,4,5,6]
arr.splice(3) //[4,5,6]

sort() - 排序
reverse（） - 翻转

• 返回新数组的一些数组的方法,不会让v-for更新：

fifter() ,slice() ,map() , 
concat().，不会导致v-for的更新，可采用覆盖数组或者this.$set()让v-for更新
this.$set(更新的目标结构，更新的位置，更新的值)

• 快速生成数组的方法 

快速生成数组的方法Array方法
Array(11),生成的就是一个11长度的数组，没有内容[empty*11]
Array(11)
(11) [空属性 × 11]
-----------------------------------------------
让数组有内容，调用数组的from方法，把11个长度的数组转换为带内容的对象，此时每一个内容都是undefined,from这个方法有2个参数，第二个参数是个回调函数，函数有2个参数，value,index
Array.from(Array(11),(value,index)=>{return index})
 [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
----------------------------------------------
 目标：生成2022年的前五年和后五年
 做法：利用from方法先生成一个11位的空数组，在利用第二个回调函数，控制数组的返回值，返回value就是undefined,返回index就是11个索引值，返回2022年的前五年和后五年，就是return 2022+index-5
 Array.from(Array(11),(value,index)=>{return 2022+index-5})
 [2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025, 2026, 2027]
-----------------------------------------------
数组的fill方法，fill方法用来填充数组的内容。该方法存在于Array的原型对象上面，存在三个参数，第一个参数是填充的数字，第二个参数是起始位置的下标，第三个参数是填充的终止位置的下标。
Array(11).fill(1)
(11) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
数组的map方法，map方法会得到一个新的数组，新数组的值是由map方法返回的值决定的
Array(11).fill(1).map((value,index)=>{return 2022+index-5})
(11) [2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025, 2026, 2027]

• 数组去重

// 1,将数组转化为set对象
const set = new Set(this.historyList)
// 2,调用Set对象的delete方法，移除对应的元素
set.delete(this.kw)
// 3,调用 Set 对象的 add 方法，向 Set 中添加元素
set.add(this.kw)
// 4,将Set对象转化Array数组
this.historyList = Array.from(set)
————————————————
版权声明：本文为CSDN博主「画了五官的猕猴」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/luoxiaonuan_hi/article/details/124790603