JS数组基础知识整理

最近在做一个前端的复习,看了向军大叔讲数组的视频,发现有很多细微的知识点我们可能平时没有注意到,所以来写一篇博客来加深印象,本篇都是一些很基础的小知识点。转自原文链接

  • 定义数组
//通过对象形式:数组是一个对象,引用类型
//所以用const定义数组时,改变数组某一项值并没有改变数组地址,所以不会报错,而用const定义普通数据类型,改变数据会重新分配内存空间,所以会报错;
const array = new Array('a','b','c');
//当用这种方式创建一个只有一个数字的数组时
const array = new Array(3)//会得到一个长度为3的空数组,不是我们想要的结果,这时可以用Array.of
const array = new Array.of(a) ==>array[3]
//使用字面量形式
const array = ['a','b','c']

tips:数组在控制台可以用console.table()来查看,会比较清晰

  • 多维数组取值array[][]来取值
  • 如果给数组某一项赋值,前面没有赋值,会自动填充为undefined
例如 const array = ['a']   array[4] = 'b'
==> array ["a", empty × 3, "b"]
==> array[2] "undefined"
  • 数组类型检测
Array.isArray()
  • 数组与其他类型的转化
//数组转化为字符串
let array = ['a','b','c']
array.toString()   ==>  a,b,c
let str = String(array)  ==> a,b,c
let str = array.join('|')  ==>a|b|c //用指定字符连接
//将字符串转化为数组
let str = "abc"
str.split('') ==>['a','b','c'] //split可以指定按什么字符进行拆分
Array.from(str) ==>['a','b','c']
//Array.from可以将类数组转化为数组,最基本就是有length属性的对象
//Array.from可以接收第二个参数,用来对数组的每一项进行处理,类似数组map方法
  • 展开语法...
//连接两个数组
arr1 = ['a','b','c']
arr2 = ['e','f','g']
arr = [...arr1,...arr2]
  • 解构语法
//解构语法在对象中用的较多.可理解为批量赋值
let [name,year] = ['taozi',1999]
==> name = 'taozi'   year = 1999
  • 常用数组方法
    push() 向元素后面追加,返回值为数组的长度,改变原数组
    pop() 从数组后面弹出,返回值为弹出的元素,改变原数组
    unshift() 向数组前面压入,返回值为数组的长度,改变原数组
    shift() 从数组前面弹出,返回值为弹出的元素,改变原数组
    fill() 向数组里填充元素,默认是全部填充,fill(value,start,end) start和end可以设置填充的起始位置和终止位置
    slice() 截取数组,不改变原数组
    splice() 截取并替换元素,splice有多个参数,第一个参数表示截取开始的位置,第二个参数表示截取的元素个数,后面的参数表示在截取位置添加的元素,改变原数组
    array.concat(arr) 合并多个数组,改变原数组
    copyWithin() 复制数组的元素到另外的位置,第一个参数,要复制过去的位置,第二个位置,复制的开始位置,第三个参数,复制的结尾位置,数组的长度不发生改变
let array = [1,2,3,4]
array.copyWithin(2,0,2) ==>[1,2,1,2]
array.copyWithin(3,0,2) ==>[1,2,3,1]
  • 数组的查找
    indexOf() 返回数组所在元素的位置,若不包含,则返回0,从左侧开始查找
    lastIndexOf() 从右侧开始查找,返回值同上
    以上两种查找是严格匹配,若类型和不同,查找不到,并且都可以有第二个参数,表示查找的起始点
    includes() 返回值为truefalse,表示是否找到
  • 数组排序sort()
  • 数组循环操作
    for 常规
    for...of... 循环值,可以操作迭代对象
//for of循环数组时,若value为值类型时,会相当于函数参数,重新开辟内存空间
let arr = [1,2,3]
for(let value of arr){
    
    
   value++;
}
arr [1,2,3] 数组不会发生改变
  • for...in... 循环索引
  • forEach
  • 数组迭代
//以下是可迭代对象,可以调用next()
arr.keys()
arr.values()
arr.entries()
  • every() 用于递归的检测元素,要所有元素操作都要返回真结果才为真。
  • some() 只要有一个元素的操作都为真,结果返回真。
  • filter() 会返回一个新数组,数组的每一项都符合条件.
  • map() 会返回一个新数组,数组中的每一项为map中函数的返回值。
    以上四个函数的参数都为函数function(item,index,self),其中 every() some() filter() 返回truefalse
  • reduce()
    reduce() 中第一个参数也为函数,但参数不一样function(pre,value,index,array)
    默认情况下,在第一次调用时,pre=array[0] value=array[1] indexvalue的索引,array为原数组;下一次pre为上一次的返回值,没有就为undefined,索引值+1,相应的value后移
var arr = ['a','b','c','d']
arr.reduce(function (pre,value,index,array) {
    
    
    console.log(pre,value,index);
})
a b 1
undefined "c" 2
undefined "d" 3

redue()有第二个参数,为pre的初始值,这时,索引和值从0开始而不是默认情况下的从1开始

…此文仅作总结,如有需要,可查看官方文档,好好学习,天天向上

猜你喜欢

转载自blog.csdn.net/weixin_42834729/article/details/107351618
今日推荐