js中数组以及常用方法笔记

数组相关的一些介绍：
因为我们最常用的是字面量的方式创建数组,别忘了还有数组的构造函数创建方式：

a、var arr1 = new Array();//创建空数组
b、var arr2 = new Array(10)；//创建一个长度为10的数组
c、var arr3 =  new Array(5,4,3,2,1)；//创建数组并初始化

为了避免arr2的情况,所以可以var arr2 = Array.of(10)//[10]表示只有一个项为10
检测数组
1 检测数组是不是对象可以利用console.log(typeof arr)//object
2 检测是不是数组可以数组可以console.log(Array.isArray(arr2))//true返回一个布尔值判断
在与后台语言交互中,有时候我们需要将数组传递给后台,但是不同语言数组是不能共用的,所有需要转换成字符串传递
1 console.log(String([1,2,3,4]))//1,2,3,4
2 console.log([1, 2, 3, 4, 5].toString())
3 console.log(arr.join("-"))join方法不该变原数组,返回拼接好的字符串
那么从后台拿回来的字符串如何转换成数组呢?
1 const str="我是小凡,我哈哈" console.log(str.split(","));//[我是小凡,我哈哈]
2 const str = "我是小凡,我哈哈" console.log(Array.from(str))//["我", "是", "小", "凡", ",", "我", "哈", "哈"]//这里注意:不是所以的数据都可以放在from方法的后面,这个数据必须有length属性才行,这个方法还可以传入第二个参数(回调函数),表示对转化成的数据进行的操作:const str = "12334566" console.log(Array.from(str, item => parseInt(item) + 1))//[2, 3, 4, 4, 5, 6, 7, 7]
这里还对字符串方法进一步记录一下:
split()方法:用于拆字符串
join()方法:用于拼字符串
对于DOM中元素,我们通过选择器得到的是一个伪数组,不能使用数组原型对象里面的方法,以下方法实现转化
1 const els=document.querySelectorAll("div") --- const newEls = Array.from(els)
2 const els = document.querySelectorAll("div") ----const els1= Array.prototype.map.call(els,v=>v)
3 const els1=[...els]
对于…语法的解释
记住两种情况两句话,…在左边,作用是吸(类似吸星大法),…在右边,作用是撑(类似于打伞)
1 位于左侧的情况-(吸星大法)

let [...argu] = ["Jack", 18, 1, 3, 4, "哈哈"]
console.log(argu)//[ "Jack", 18, 1, 3, 4, "哈哈"]

2 位于右侧的情况(撑伞)

  const argu = ["Jack", 18, 1, 3, 4, "哈哈"]
  let a = ["name", "age", ...argu]
  console.log(a)//["name", "age", "Jack", 18, 1, 3, 4, "哈哈"]

数组中常见方法
-------------------------四大金刚系列--------------------------
pop()方法,弹出数组最后一个元素,得到弹出元素作为返回值,原数组会改变
push()方法,向数组追加一个元素,得到的返回值为数组长度,原数组会改变
unshift()方法,向数组最前面加一个元素,得到返回值为数组长度,原数组会改变
shift()方法,弹出数组第一个元素,得到弹出元素作为返回值,原数组会改变
-------------------------孪兄弟系列------------------------------
slice()方法用于截取,接收两个参数,开始截取的位置,以及结束的位置,方法返回截取的数组,不会改变原数组
splice()方法作用很大,具有删除,替换,增加功能于一体.原数组会改变

  const arr = [1, 2, 4, 3, 5, 6]
 //删除第二项
 arr.splice(1, 1)
 console.log(arr)//[[1, 4, 3, 5, 6]]
 //替换:第二项换成"小明"
 arr.splice(1, 1, "小明")
 console.log(arr)//[[1,"小明", 4, 3, 5, 6]]
 //增加:在第二项后面加小明
 arr.splice(1, 0, "小明")
 console.log(arr)//[[1,"小明",2, 4, 3, 5, 6]]

--------------------------查找系列--------------------------------
indexOf()方法:从左往右找,找到了就返回索引,跳出函数,没有找到就返回-1
lastIndexOf()方法::从右往左找,可以指定开始的位置,结果和上面一样
includes()方法:从左往右找,找到了返回true,否则返回false
find()方法以及findIndex()可以在我的另一篇文章这里查看
数组的清空
1 利用arr=[]来清空数组
2 利用arr.length=0 清空数组
3 利用arr.splice(0,arr.length) 清空数组
4 利用while(arr.pop(){})清空数组
注意:这里arr=[]这种方式和下面的方式是不同的 例如此时有const b=arr 此时b是不会清空的,arr=[]相当于arr指向了一个空数组,原来的数组不改变,记住引用类型数据传递的是地址,而不是数据本身,暂时写到这里,后面有挖掘点再进行补充