Javascript -- 数组prototype方法探究

droxy

于 2023-07-28 18:20:20 发布

阅读量1k

点赞数

文章标签： javascript 原型模式前端

本文链接：https://blog.csdn.net/QQ1057081261/article/details/131985932

版权

一、数组prototype方法探究

1、不改变原数组

1. concat()

这个是数组拼接方法，可以将两个数组或多个数组拼接并返回一个包含两个数组或多个数组内容的新数组，不会改变原数组

方法里面理论上可以写入n个参数，

const arr = [1,2];
var str = 'Hello';
var newArr = [3,4,5];
const ComArr = arr.concat(str, newArr)
console.log(ComArr)

// 打印结果
[1, 2, "Hello", 3, 4, 5]

2.find()

这个方法是遍历查找数组里面第一个满足条件的值，并将这个值返回回来，该方法有两个参数：

第一个是数组每一项都会执行的回调函数，这个函数有三个参数，第一个是数组的每一项，第二个是数组每一项的下表索引，第三个就是遍历的原数组

第二个是回调时this的指向对象

const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const result = arr.find(item => item > 3)
console.log(result)

// 打印结果
5

改变this

const obj = {
  filt: function (val) {
    return val > 3
  }
}
const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const result = arr.find(function (item) {return this.filt(item)}, obj)
console.log(result)

// 打印结果
5

Tips 这个方法只要找到满足条件的值，就会立即返回，并停止后续操作，如果没有找到则返回undefined

3.findIndex()

这个方法跟上面的方法可以说是一样的，唯一不同的是这个方法返回的不是第一个满足条件的值，而是这个值所在位置的下标索引，如果没有找到则返回-1

const obj = {
  filt: function (val) {
    return val > 3
  }
}
const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const result = arr.find(function (item) {return this.filt(item)}, obj)
console.log(result)

// 打印结果，注意这个是索引值
3

4.flat()

这个方法省去了自己去递归深度拷贝，可以将数组的里面所有项都遍历并添加到第一层数组中返回一个新数组，这个方法只有一个参数，这个参数可以是数值，默认是1，数值是多少，就表示深入递归几次，也可以是一个固定的词(Infinity)，表示任意深入递归

const arr = [1, 2, 3, 5, 4, [3, 2, 1]]
const newArr = arr.flat()
console.log(newArr)

// 打印结果
[1, 2, 3, 5, 4, 3, 2, 1]

Tips 这个方法也可以移除数组里面的空值

5.flatMap()

不说了，有兴趣可以自己了解flatMap

6.includes()

这个方法说有用有用，说没用也没用，因为有很多数组其他的方法也可以达到目的

这个方法就是用来检测数组里面是否存在某个数据，存在则返回true，不存在则返回false，这个方法有两个参数，第一个就是我们要查找的数据，第二个是查询的起始位置(index)，没有则按照length+index的方法继续，默认为0

Tips 对象数组不能使用该方法

Tips 该方法是个通用方法

Tips 查找数据区分大小写

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr3 = [{name: '李狗蛋'}, {gender: '男'}, {age: 23}];
console.log(arr1.includes(5))
console.log(arr2.includes('王翠花'))
console.log(arr3.includes({age: 23}))

// 打印结果
true
true
false

http://www.developcls.com/qa/1795d18c9ce344deb99915557494befd.html

7.indexOf()

这个方法跟includes是一样的，只不过这个方法是返回的指定查找元素的索引，没有则返回-1，该方法有两个参数，第一个就是要查询的数据，第二个就是查找的起始位置索引

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr3 = [{name: '李狗蛋'}, {gender: '男'}, {age: 23}];
console.log(arr1.indexOf(5))
console.log(arr2.indexOf('王翠花'))
console.log(arr3.indexOf({age: 23}))

// 打印结果
3
1
-1

8.lastIndexOf()

这个方法可以看作是indexOf方法的一个查找方向相反的一个相同方法，indexOf是从数组第一项查找到最后一项，而lastIndexOf方法是从数组最后一项查找到数组第一项

该方法有两个参数，第一个就是要查询的数据，第二个就是查找的起始位置索引

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr3 = [{name: '李狗蛋'}, {gender: '男'}, {age: 23}];
console.log(arr1.lastIndexOf(5))
console.log(arr2.lastIndexOf('王翠花'))
console.log(arr3.lastIndexOf({age: 23}))

// 打印结果
3
1
-1

Tips 虽然这个查找是最后一项，从后面开始，但是索引值依旧是从第一项开始，而不是从最后开始算的

9.join()

方法是通过指定的分割符号将数组里面的每一项分割并拼接成一个字符串返回，如果没有写入任何符号，则默认是逗号,

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr3 = [{name: '李狗蛋'}, {gender: '男'}, {age: 23}];
console.log(arr1.join())
console.log(arr2.join(''))
console.log(arr3.join('+'))

// 打印结果
1,2,3,5,4,3,2,1
李狗蛋王翠花李二丫
[object Object]+[object Object]+[object Object]

10.keys()

这个方法不知道有什么卵用？返回的是个Array Iterator对象，这个对象看不出什么东西，但是可以同for...in或者for...of方法打印其key值，发现是数组的索引值

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
for(var key of arr2.keys()) {
  console.log(key)
}

// 打印结果
0
1
2

11.slice()

数组浅拷贝，拷贝指定范围内得数组元素并返回一个新数组，但是原数组并不会改变

这个方法有两个参数，第一个开始拷贝得索引值(包括)，默认是0，第二个是结束拷贝得索引值(不包括)，默认数组长度

如果参数是负数则表示从数组后面往前拷贝

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.slice(1, 2)
console.log(arr2)
console.log(arr4)

// 打印结果
["李狗蛋", "王翠花", "李二丫"]
["王翠花"]

12.toString()

将一个指定数组的所有元素，提取出来返回成一个用逗号隔开的字符串，和join方法一样

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.toString()
console.log(arr2)
console.log(arr4)

// 打印结果
["李狗蛋", "王翠花", "李二丫"]
李狗蛋,王翠花,李二丫

13.values()

这个方法返回一个包含数组每一项元素的Array Iterator对象

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.values()
console.log(arr2)
console.log(arr4.next().value)
console.log(arr4.next().value)
console.log(arr4.next().value)

// 打印结果
["李狗蛋", "王翠花", "李二丫"]
李狗蛋
王翠花
李二丫

2、改变原数组

1.copyWithin()

这个数组方法是复制替换，有点类似splice()方法，这个方法接收三个参数，第一个参数是替换的起始位置，第二个参数是要开始复制的数据索引，包括该项，第三个参数是结束复制的数据索引，不包括该项，没有则一直到最后一项

const arr = [1, 2, 3, 4, 5];
const newArr = arr.copyWithin(0, 3, 5);
console.log(newArr)

// 打印结果
[4, 5, 3, 4, 5]

这段代码就是将数组里面从索引3开始(包括)到索引5结束(不包括)中间所有的数据复制，然后从数组索引为0的位置开始赋值

Tips

1、这个方法只能改变数组自身内容，不能改变其他数组

2、原数组会改变，但是长度不会改变

3、三个参数必须是整数，如果是负数，则从数组最后一项开始往前计算

4、如果开始和结束参数都没有，则复制整个数组内容，最后多余的被清除

2.fill()

这个方法跟上面的copyWithin相似，也是替换，不过不是用数组自己的数据去替换，而是用户自己传入一个数据，去替换指定范围的数据

这个方法接收三个参数，第一个参数是用户传入的数据，第二个参数是要开始替换的数据索引，包括该项，默认为0，第三个参数是结束替换的数据索引，不包括该项，没有则一直到最后一项，默认是数组长度

const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const newArr = arr.fill('?', 5, arr.length)
console.log(newArr)

// 打印结果
[1, 2, 3, 5, 4, "?", "?", "?"]

Tips

1.原数组会改变，但长度不会改变

2.这个方法是通用方法，所以该方法不要求this是数组对象(不理解)

3.如果开始和结束参数是负数，不是从后面开始，而是以：length+start，length+end的方式来计算替换的范围

3.pop()

这个方法是删除数组最后一项元素，并返回该元素值，同时原数组将减少该项元素，所以会改变原数组

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.pop()
console.log(arr2)
console.log(arr4)

// 打印结果
["李狗蛋", "王翠花"]
李二丫

4.push()

这个方法跟pop方法相反，是在数组最后一项元素后面新增一个元素或者多个元素，原数组会添加新增的元素，但是这个方法返回的新增之后的数组的长度，而不是数组

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.push('二狗子')
console.log(arr2)
console.log(arr4)

// 打印结果
["李狗蛋", "王翠花", "李二丫", "二狗子"]
4

5.shift()

这个方法是删除数组第一项元素，并返回该元素值，同时原数组将减少该项元素

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.shift()
console.log(arr2)
console.log(arr4)

// 打印结果
["王翠花", "李二丫"]
李狗蛋

6.unshift()

这个方法跟shift方法相反，是在数组第一项元素前面新增一个元素或者多个元素，原数组会添加新增的元素，但是这个方法返回的新增之后的数组的长度，而不是数组

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.unshift('二狗子')
console.log(arr2)
console.log(arr4)

// 打印结果
["二狗子", "李狗蛋", "王翠花", "李二丫"]
4

7.reverse()

这个方法是将数组的值得顺序颠倒过来，也就是原来最后一项元素变成第一项元素，以此类推，返回一个新数组，改变了原数组

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.reverse()
console.log(arr2)
console.log(arr4)

// 打印结果
["李二丫", "王翠花", "李狗蛋"]
["李二丫", "王翠花", "李狗蛋"]

8.sort()

数组排序，通过原地算法，根据字符得unicode码进行排序，该方法有个比较函数参数，如果用户传入了自己得排序函数，则以这个函数进行排序，函数有两个参数，第一个是元素一，第二个是元素二，两者进行比较，会改变原数组

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr4 = arr1.sort()
console.log(arr1)
console.log(arr4)

// 打印结果
[1, 2, 3, Array(3), 4, 5]
[1, 2, 3, Array(3), 4, 5]

自定义

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
function Compare(a, b) {
  return a-b
}
const arr4 = arr1.sort(Compare)
console.log(arr1)
console.log(arr4)

// 打印结果
[1, 2, 3, 4, 5, Array(3)]
[1, 2, 3, 4, 5, Array(3)]

9.splice()

这个方法既可以删除数组内容，也可以替换数组内容，都是会返回一个数组

删除

用来删除，该方法只有两个参数，第一个参数就是要删除起始位置(包括)，第二个参数就要要删除数据个数，返回得删除得数据组成得数组，原数组相应得回减少被删除得数据

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.splice(1,1)
console.log(arr2)
console.log(arr4)

// 打印结果
["李狗蛋", "李二丫"]
["王翠花"]

Tips

如果删除个数为0，则返回个空数组

替换

其实不仅可以用来替换，也可以用来增加数据，而且是任意位置得添加，比原始方法如：unshift，push更灵活

用来替换，该方法至少有三个参数，第一个参数是要开始删除位置，第二个参数是要删除的数量，第三个到第n个是用来替换的数据，从开始删除的位置开始替换，返回的是被替换的数据组成的新数组

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.splice(1, 1, '二狗子')
console.log(arr2)
console.log(arr4)

// 打印结果
["李狗蛋", "二狗子", "李二丫"]
["王翠花"]

Tips

1.不论删除的个数是多少，替换的数据是多少个，就会替换多少个

2.如果删除个数为0的话，则是新增，原来的要删除位置的数据被替换数据代替，原来的数据顺势往后挪，同时返回一个空数组，因为没有删除任何东西，就没有数据

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.splice(1, 0, '二狗子', '三狗子', '死狗仔')
console.log(arr2)
console.log(arr4)

// 打印结果
["李狗蛋", "二狗子", "三狗子", "死狗仔", "王翠花", "李二丫"]
[]