面试官:看你熟悉JS,说说JS内置对象吧(数组篇)

247 阅读9分钟

首先JS内置对象是什么?

js的内置对象是在语言中预定义的对象,可以直接在代码中使用,不需要额外的导入或者引用。它提供了很多常用的功能和操作,用来处理不同类型的数据。

常见的JS内置对象有什么?

  1. Array:表示一个集合,可以包含任意类型的数据。
  2. Object:表示对象的基础类型,所有其他对象都继承自它
  3. String:表示一个字符串。
  4. Number:表示一个数字。
  5. Boolean:表示true 或 false。
  6. Date:用来处理日期和时间
  7. Math:提供常用的数学函数和常量,例如对数、三角函数、最大值、最小值等。
  8. Function:表示一个函数,可以被调用和执行。
  9. Error:表示一个错误对象,用于捕获和处理异常。
  10. Promise:用来处理异步操作,提供一直异步处理机制。 这些只是js内置对象的一部分,还有许多其他内置对象可供使用,具体可以去了解和参考 mdn developer.mozilla.org/zh-CN/docs/…

JS内置对象的使用场景 你是否在处理数组时,需要将它从小到大排序、添加或删除元素;在实现某个功能时,封装成函数时,通过传递不同的参数执行代码。js内置对象提供了解决这些问题的方法,提高代码的效率和可行性!接下来让我们来学习内置对象里的常用的数组方法吧!!!

JS内置对象Array

以下是对数组增删改的内容

1.Array.push()

用来将指定的元素添加到数组的尾部,并返回数组的长度

const arr = [1, 2, 3]
arr.push(4)  
console.log(arr)//[ 1, 2, 3, 4 ]
console.log(arr.push(5))//输出arr的长度:5
    //也可以添加多个元素
arr.push(6, 7, 8)//依次添加至数组末尾
console.log(arr)//[1, 2, 3, 4,5, 6, 7, 8]

特殊情况:当你想要将两个数组合并起来时,你可以这样使用,通过对另一个数组采用...扩展运算符来展开数组的元素,然后依次push到数组

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
arr1.push(...arr2)
console.log(arr1) //[ 1, 2, 3, 4, 5,]
2.Array.unshift()

用来将指定的元素添加到数组的头部,并返回数组的长度

arr.unshift(3)
console.log(arr) //[ 3, 4, 5, 6 ]
console.log(arr.unshift(2)) //输出arr的长度:5
    //也可以添加多个元素
arr.unshift(0, 1) //依次添加至数组头部
console.log(arr) //[0,1, 2, 3,4, 5, 6]

同样的也可以进行两个数组的合并,使用扩展运算符

   const arr2 = [4, 5, 6]
   arr1.unshift(...arr2)
   console.log(arr1) //[ 4, 5, 6, 1, 2, 3 ]
3.Array.shift()

相比于unshift()方法,Array.shift()方法就是用来删除数组的第一个元素,并返回删除元素的值

console.log(arr.shift())//返回值是该数组删除的值:1
console.log(arr)    //[ 2, 3, 4, 5, 6 ]

需要注意:若你括号里面填了Number参数,仅且仅会删除数组的第一个值

console.log(arr) //[ 3, 4, 5, 6 ]
4.Array.pop()

用来删除数组的最后一个元素,并且返回删除元素的值

const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.pop()) //返回值是该数组删除的值:6
console.log(arr) //[ 1, 2, 3, 4, 5 ]

需要注意:若你括号里面填了Number参数,仅且仅会删除数组的第一个值

arr.pop(4)
console.log(arr) //[ 1, 2, 3, 4 ]

在非数组对象上调用pop()

const arrayLike = {
    length: 3,
    unrelated: "foo",
    2: 4,
}; 
console.log(Array.prototype.pop.call(arrayLike));// 4
console.log(arrayLike);// { length: 2, unrelated: 'foo' }

这时候你可能会想:为什么删除了对象的最后一个并且length的值-1,其实这是因为,arrayLike对象看起来是类似数组的对象,因为他有一个length属性和一些数值索引,当使用Array.prototype.pop方法时,会检查对象里的length属性,然后会进行删除索引length-1的值,此时,length-1=2,寻找到对象中含有2:4,默认为这是为2的索引,所以删除的元素的值是4,进行删除操作之后,length的值自然也会减一。

5.Array.slice()

用来对原数组的浅拷贝,原数组不改变,返回值是一个新数组。有两个参数可选分别是start和end。

const arr1 = [1, 2, 3, 4, 5]
console.log(arr1.slice(2)) //[ 3, 4, 5 ]
console.log(arr1.slice(2, 3)) //[ 3 ]
console.log(arr1.slice(-2)) //[ 4, 5 ]
console.log(arr1.slice(1, -2)) //[ 2, 3 ]
console.log(arr1.slice()) //[ 1, 2, 3, 4, 5 ]
console.log(arr1) //[ 1, 2, 3, 4, 5 ]

注意:start和end的值分为正/负数,分为三种情况:

1.start<0,则start = start+array.length

2.start<-array.length 则start=0

3.start>array.length,则不提取任何元素

特殊情况:如果遇到一个类数组的对象,会先读取对象中的length属性,然后再调用Array.prototype.slice方法,传入类数组对象,start和end参数进行截取,返回的还是一个新数组。

const arrayLike = {
    length: 3,
    0: 1,
    1: 2,
    2: 3
}
console.log(Array.prototype.slice.call(arrayLike, 1, 3))//[ 2, 3 ]
6.Array.splice()

用来添加、删除,替换元素就地改变原数组。

参数选择:Array.splice(start,deleteCount,replace1,replace2...),其中start代表的是开始的索引,deleteCount是删除元素的个数,replace代表的是替换的元素,可以替换多个元素。

const arr1 = ['my', 'his', 'her']
    // 添加元素
arr1.splice(0, 0, 'our')
console.log(arr1) //[ 'our', 'my', 'his', 'her' ]
    // 删除元素
arr1.splice(3, 1)
console.log(arr1) //[ 'our', 'my', 'his' ]
    // 替换元素
arr1.splice(2, 1, 'their')
console.log(arr1) //[ 'our', 'my', 'their' ]

接下来就是对数组内容进行筛选

7.Array.sort()

这是一个用来给数组排序,使用非常频繁,话不多说代码展示

const arr1 = ['may', 'april', 'juli', 'august', 'september']
arr1.sort()
console.log(arr1) //[ 'april', 'august', 'juli', 'may', 'september' ]
const arr2 = [1, 300, 10000, 200]
arr2.sort()
console.log(arr2) //[ 1, 10000, 200, 300 ]

是不是看不出哪里出现排序?其实sort方法传函数进行条件筛选的话是会默认将数组里的改变为字符串,再根据UTF-16 码元值升序排序。

添加函数后的sort方法,代码展示!!

const arr3 = [1, 5, 7, 9, 15, 50, 41]
    // 如果你想进行升序排序
arr3.sort((a, b) => {
    return a - b;
})
console.log(arr3) //[ 1,  5,  7, 9,15, 41, 50]
 
// 降序排序
arr3.sort((a, b) => {
    return b - a;
})
console.log(arr3) //[50, 41, 15, 9,7,5,1]

返回值a-b a、b的排序顺序

>0	ab的位置调换

<0	ab的位置不变

===0	ab的位置不变
8.Array.map()

用来创建一个基于调用原数组的每一个元素通过指定的函数的返回值产生的新数组。

   const arr1 = [1, 2, 3, 4, 5, 6]
   const arr2 = arr1.map((x) => x * 2)
   console.log(arr2) //[ 2, 4, 6, 8, 10, 12 ]
   console.log(arr1) //[ 1, 2, 3, 4, 5, 6 ]

在这里我们可以看到array.map()方法是通过传入一个函数,对原数组的每一个值遍历经过处理,最后才形成一个新的数组。

9.Array.forEach()
const arr1 = [1, 2, 3]
arr1.forEach((x) => console.log(x * 2))
  
for (let i = 0; i < arr1.length; i++) {
    console.log(arr1[i] * 2)
}

同样的,这个方法跟map方法都是遍历原数组的每个元素进行处理,但他不会返回一个新数组,而是每执行一次,丢弃返回值。

区别:forEach和map的区别是forEach不能像map一样链式调用,看他们各自的输出就可以看出来~

const arr1 = [1, 2, 3]
arr1.forEach((x) => console.log(x * 2))
    // 2
    // 4
    // 6
    //相比于普通的for循环,更加简洁!

const arr1 = [1, 2, 3]
arr1.forEach((x) => console.log(x * 2))
  
for (let i = 0; i < arr1.length; i++) {
    console.log(arr1[i] * 2)
}
10.Array.filter()

用于创建原数组中符合指定条件的元素,其返回值是一个新数组。可以将它理解为过滤不符合的元素~

const arr1 = [1, 2, 3, 4]
console.log(arr1.filter((x) => x > 2)) //[ 3, 4 ]
console.log(arr1) //[ 1, 2, 3, 4 ]
11.Array.find()

用于返回原数组中第一个符合条件的值,否则返回undefined。

const arr1 = ['abhd', 'position', 'express', 'gren']
 
console.log(arr1.find((word) => word.length > 5)) //position
 
console.log(arr1.find((word) => word.length > 12))//undefined
        //在对象中用find方法进行查找

const objArray = [
    { name: 'apple', quality: 0.5 },
    { name: 'orange', quality: 0.6 },
    { name: 'banana', quality: 0.4 }
]
const o1 = objArray.find((x) => x.name === 'apple')
console.log(o1)//{ name: 'apple', quality: 0.5 }
12.Array.includes()

给定值用来查找数组中是否含有这个值,返回的是一个布尔值

Array.includes(findItem,startIndex)有两个参数可选,第一个参数是需要查找的值,第二个参数是从哪个索引开始

const arr1 = [1, 2, 3, 4, 5]
console.log(arr1.includes(2)) //true
console.log(arr1.includes(6)) //false
const arr2 = ['dog', 'cat', 'pet']
console.log(arr2.includes('cat')) //true
console.log(arr2.includes('dog', 2)) //false

数组转为字符串的方法

13.Array.join()

用来以一个分隔符来连接一个数组的所有元素形成一个字符串,并返回这个字符串。例如:可以用逗号,空格符和空字符来连接。默认是以逗号隔开。

const arr1 = ['dog', 'cat', 'pet']
console.log(arr1.join()) //dog,cat,pet
console.log(arr1.join('')) //dogcatpet
console.log(arr1.join(',')) //dog,cat,pet
console.log(arr1.join('-')) //dog-cat-pet

返回数组元素的索引值

14.Array.indexOf()

用来返回数组中第一次出现给定元素的下标,如果不存在则返回 -1。

注意:Array.indexOf(findItem,startIndex)有两个参数可选,第一个是查找的元素,第二个是开始查找的索引。

const arr1 = [1, 2, 3, 4, 5]
console.log(arr1.indexOf(2)) //1
const arr2 = ['dog', 'cat', 'pet']
console.log(arr2.indexOf('dog')) //0
console.log(arr2.indexOf('cat', 2)) //-1
console.log(arr2.indexOf('baby')) //-1

在类数组对象中调用indexOf方法,先读取对象中的length属性,再通过传入的值进行查找

const arr3 = {
    length: 3,
    0: 1,
    1: 3,
    2: 4
}
console.log(Array.prototype.indexOf.call(arr3, 1)) //0
15.Array.findIndex()

用来返回数组中第一个满足条件的索引值。否则返回-1。

const arr1 = ['dog', 'cat', 'pet']
console.log(arr1.findIndex((x) => x === 'pet')) //2
console.log(arr1.findIndex((x) => x === 'git')) //-1
16.Array.findLastIndex()

用来返回数组中最后一个满足条件的索引值,否则返回-1。

const arr1 = ['dog', 'cat', 'pet', 'pet', 'pet']
console.log(arr1.findLastIndex((x) => x === 'pet')) //4
console.log(arr1.findLastIndex((x) => x === 'git')) //-1

其他数组方法

17.Array.reverse()

用于反转数组中的元素,将数组中的元素的位置变为与之相反的位置,如最后一个元素回变为第一个元素,第一个元素取代最后一个元素。

const arr1 = ['a', 'b', 'c', 'd', 'e']
arr1.reverse()
console.log(arr1)//[ 'e', 'd', 'c', 'b', 'a' ]
18.Array.reduce()

reduce() 方法对数组中的每个元素按序执行一个提供的 reduce 函数,每一次运行会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

适用情况:用于求数组的每个元素加起来的总和

const arr1 = [1, 2, 3, 4, 5]
const total = arr1.reduce((x, y) => x + y)
console.log(total) //15

另一种情况:如果在总和的基础上,你想要再加上一个数,你也可以采用reduce方法~

传入两个参数,一个是回调函数,另一个是你想要加上的值~

const array = [1, 2, 3, 4, 5];
const initialValue = 10;
 
const sum = array.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}, initialValue);
 
console.log(sum); // 输出:25

这些都是笔者认为比较常用的JavaScript内置对象中的数组方法如果有错误请读者们大胆发言之争错误希望在学习前端的道路上不断学习进步!!!