大型门户网站建设功能,东莞网络营销信息推荐,阿克苏网站建设咨询,石家庄哪里有做外贸网站的公司一、数组prototype方法探究
1、不改变原数组
1. concat()
这个是数组拼接方法#xff0c;可以将两个数组或多个数组拼接并返回一个包含两个数组或多个数组内容的新数组#xff0c;不会改变原数组
方法里面理论上可以写入n个参数#xff0c;
const arr [1,2];
var str …一、数组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)没有则按照lengthindex的方法继续默认为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.如果开始和结束参数是负数不是从后面开始而是以lengthstartlengthend的方式来计算替换的范围
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则返回个空数组
替换
其实不仅可以用来替换也可以用来增加数据而且是任意位置得添加比原始方法如unshiftpush更灵活
用来替换该方法至少有三个参数第一个参数是要开始删除位置第二个参数是要删除的数量第三个到第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)// 打印结果
[李狗蛋, 二狗子, 三狗子, 死狗仔, 王翠花, 李二丫]
[]
