JS数组及其常用API

不能怂
507 阅读6分钟

JS数组及其常用API

数组

数组的声明与赋值

  • 通过字面量形式创建
  • new Array()构造函数的方式创建
//1.通过字面量形式创建数组
let arr = [1,2,3]

//2.构造函数形式创建数组
let arr1 = new Array(1,2,3)
console.log(arr1)  //[1,2,3]

数组的读与写

若arr.length为num则：

  • arr[num] 不报错但会返回undefined
  • arr[num]=11 可以溢出写
let arr = [1,2,3,4]
//此时数组下标为0，1，2，3

console.log(arr[4]) //undefined
arr[4] = 5
console.log(arr[4]) //5
console.log(arr) //[1,2,3,4,5]

数组的常用方法

  1. push()方法：在数组最后添加一个或多个新的元素，并返回新数组的长度 （后增）
let arr = [1,2,3,4]
console.log(arr.push(5)) //5,返回新数组的长度
console.log(arr) //[1,2,3,4,5]
  1. pop()方法：删除数组最后一个元素，并返回被删除的元素 （后删）
let arr = [1,2,3,4]
let num = arr.pop()
console.log(num) //4,返回被删除的元素
console.log(arr) //[1,2,3]
  1. unshift()方法：在数组前面添加一个或多个元素，并返回新的长度 (前增)
let arr = [1,2,3,4]
console.log(arr.unshift(5,1)) //6,返回新数组的长度
console.log(arr) //[5,1,1,2,3,4]
  1. shift()方法：删除数组首部元素，并返回被删元素 （前删）
let arr = [1,2,3,4]
let num = arr.shift()
console.log(num) //1,返回新数组的长度
console.log(arr) //[2,3,4]

  1. splice()方法：数组进行删除修改，返回被删除的元素组成的数组

    语法：splice(index,length,增加的元素1,增加的元素2,...)

    参数：

    • index：要删除元素的下标
    • length：删除长度
    • 增加的元素：从index开始新增元素，放回被删除的元素组成的数组
let arr = [1,2,3,4,5]
let reArr3 = arr.splice(1,3,1,[1,2],[1,2,3])
console.log(reArr3) //[2,3,4],返回删除元素组成的数组
console.log(arr) //[1,1,[1,2],[1,2,3],5]
  1. concat()方法：合并两个或多个数组，返回新数组，不会改变原数组
let a = [1,2,3]
let b = [2,3,4]
let c = a.concat(b)
console.log(c) //[1,2,3,2,3,4]

  1. slice()方法：剪切当前数组，并返回一个包含剪切值的新数组，不会改变原数组

    语法：slice(startIndex,endIndex)

    参数：

    • startIndex：剪切开始位置，返回的数组中包含开始位置的值
    • endIndex：剪切结束位置，不包含结束位置的值
let arr = [1,2,3,4,5]
let newArr = arr.slice(2,4)
console.log(newArr) //[3,4]
  1. join()方法：将数组转换为字符串，不会改变原数组，此方法会返回转换后的字符串,默认以,分隔
let arr = [1,2,3,4]
console.log(arr.join())// 1,2,3,4
console.log(arr)// [1,2,3,4]
  1. reverse()方法：用于颠倒数组中元素的顺序，返回的是颠倒后的数组，会改变原数组
let arr = [1,2,3,4,5]
let re = arr.reverse()
console.log(re) //[5,4,3,2,1]
console.log(arr)//[5,4,3,2,1]

  1. indexOf()和lastIndexOf()两者都会元素首次在数组中的位置，未找到返回-1。区别在于indexof从头查找，lastIndexOf从尾部查找。

    语法：indexOf(某元素,startIndex）lastIndexOf(某元素,startIndex)

    参数：

    • 某元素：要查找的元素
    • starIndex：开始查找的下标
let arr = [1,4,2,4,5]
console.log(arr.indexOf(4))// 1
console.log(arr.lastIndexOf(4))// 3

  1. filter()方法：方法返回数组中满足条件的元素组成的新数组，原数组不变 （过滤）

    语法： filter(function(item,index,array){})

    参数：回调函数会在每次遍历时判断item是否符合条件

let arr = [1,2,3,4,5]
let re = arr.filter((item)=>{
    return item > 3
})
console.log(arr) //[1,2,3,4,5]
console.log(re) //[4,5]

  1. map()方法：遍历数组的每个元素都会执行一边回调函数，会把执行玩的函数放到新数组中返回,不改变原数组

    语法：数组.map(function(item,index,arr){})

    参数：是在遍历过程中对每个元素执行的回调函数

let arr = [1, 2, 3, 4]
let re = arr.map((item,index,arr)=>{
  return item*10
})
console.log(re);　　//  [10, 20, 30, 40];
console.log(arr);　　// [1, 2, 3, 4]

  1. every()方法：用于查找元素满足条件，都满足返回true，否则返回false

    语法：数组.every(function(item,index,arr){})

let array = [1, 2, 3, 4];
let bo = array.every((item, index, array) => {
　　return item > 2;
});
console.log(bo);　　　　// false;

  1. some()方法：在遍历时查找是否满足条件的值一旦找到立刻停止，有返回true，没有返回false

    语法：some(function(item,index,arr){})

let array = [1, 2, 3, 4];
let temp = array.some((item, index, array) => {
　　return item > 5;
});
console.log(temp);　　// true

  1. forEach()方法：遍历整个数组，中途不能中断

    语法：forEach(function(item,index,array){},this)

    参数：

    • item： 数组当前遍历的元素，默认从左往右依次获取数组元素
    • index： 数组当前元素的索引，第一个元素索引为0，依次类推
    • arr： 当前遍历的数组
    • this： 回调函数中this指向
let arr = [1,2,3,4,5]
let obj = {a:1}
arr.forEach(function(item,index,arr){
  console.log(`当前元素为${item}索引为${index},属于数组${arr}`);
  console.log(this);//this指向obj
},obj)
  1. isArray()方法：静态方法判断是否为数组
  2. of()和from方法方法：
  • of()方法：将一组值转换成数组
    • 语法：Array.of(num1,num2,...)
  • from()方法：可以将伪数组和可遍历的对象转化为真数组
    • 语法：Array.from(input,[map],[context])
    • 参数：只有input是必填项，想要转换的伪数组或者可遍历字符串
Array.of(1,2,3,4) //[1,2,3,4]
Array.from('hello') //['h','e','l','l',''o]

  1. find()和findIndex()方法：用于查找首次满足条件的值。

    语法：find(function(item,index,array){}) / findIndex(function(item,index,array){})

    区别：

    • find()：返回值，未找到就返回undefind
    • findIndex()：返回索引值，未找到返回-1
let arr = [1,2,3,4,6]
let re = arr.find((item)=>item>2)
let re2 = arr.findIndex((item)=>item>2)
console.log(re,re2); //3 2

  1. reduce()方法：接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

    语法：

    "数组".reduce((sum,item,index,arr)=>{
    //代码段...
    return sum //作为下次累加sum的初始值

},"sum的初始值")
/*
参数：
1. sum：必需，初始值或者计算结束后的返回值
2. item：必需，每次遍历的元素
3. index：可选。当前元素的索引
4. arr：可选。当前元素所属的数组对象  
*/

    //使用事例：
let arr = [1,2,3,4,5]
let sumNum = arr.reduce((sum,item)=>{
    sum += item 
    return sum
},0)
console.log(sumNum) //15

伪数组

伪数组：无法直接调用数组的方法，因为具有length可以通过遍历拿到其中的数据。常见于documen，childnodes之类的返回值为伪数组

特点：

  • 具有length属性
  • 按索引方式存储数据
  • 不可以使用数组的方法

伪数组转化为真数组

  1. 使用Array.from()方法
  2. 使用Array的slice方法，以及call方法将伪数组转化为一个新数组
<!--事例-->
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        let li = document.querySelectorAll('li')
        
        //方法一：Array.from()
        let re = Array.from(li)
        console.log(Array.isArray(re)); //true
        
        
        //方法二：Array.prototype.slice.call(伪数组)
        let re2 = Array.prototype.slice.call(li)
        console.log(Array.isArray(re2)); //true
    </script>
</body>
avatar
文章
阅读
粉丝