上章节讲完JS数组的私有方法,这个章节我们继续讲解数组的原型方法。
Array的原型属性
一、Array.concat()
该方法用于合并两个或多个数组,属于浅拷贝,不改变原有数组,形成新的数组。
let arr1 = [1,2,3]
let arr2 = [1,2,3]
let arr = arr1.concat(arr2, 6)
console.log(arr) //[1, 2, 3, 1, 2, 3, 6]
该方法和扩展运算符得到结果相同
let arr1 = [1,2,3]
let arr2 = [1,2,3]
let arr = [...arr1, ...arr2, 6]
二、Array.copyWithin()
该方法用于到该数组的指定位置
Array.copyWithin(target[, start[,end]])
拷贝start到end位置元素到target位置,其中包括start元素但不包括end元素。
let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]
三、Array.fill()
该方法来填充到该数组的指定位置
let arr = [2, 2, 3, 4];
console.log(arr.fill(0, 2, 4));
// [2, 2, 0, 0]
四、Array.entries()
该方法集合了keys()、values() 的优点,返回key和value。
将数组返回得到迭代器Iterator对象,该迭代器对象原型有个next()方法,可遍历迭代器得到[key,value]
let arr = ["a", "b", "c"];
let iterator = arr.entries();
for(let i = 0; i < 3; i++){
console.log(iterator.next().value)
}
[0, "a"]
[1, "b"]
[2, "c"]
五、Array.every()
该方法检测数组是否通过测试,如有一个不通过则返回false,全部通过返回true。
arr.every(callback(value,index,arr))
let fn = (value, index, arr) => {
return (value >= 6);
}
let aa = [12, 5, 8, 130, 44].every(fn);
// false
let bb = [12, 54, 18, 130, 44].every(fn);
// true
六、Array.some()
该方法与every()方法意思相反,如果通过测试则返回true,否则返回false。常用于检测数组中是否存在某个元素值。
let fn = (value, index, array) => {
return value > 10;
}
console.log([2, 5, 8, 1, 4].some(fn)); // false
console.log([5, 12, 8, 1, 4].some(fn)); // true
七、Array.filter()
Array,filter(callback(value,index, arr))
该方法过滤条件符合的元素
let arr = [1,2,3,6,7,8]
let tempArr = arr.filter(item => item % 2 === 0)
console.log(tempArr) // [2,6,8]
八、Array.find() 和Array.findIndex()
这两个方法一起讲,是因为这两个是配套的方法,find方法返回条件符合的值,否则返回undefined,而findIndex方法返回符合条件的索引,否则返回-1。从名字看就很容易区分。
参数都是callback(item, index, arr)
let arr = [1,2,3,6,7,8]
let tempArr = arr.find(item => item > 7)
let tempArrs = arr.findIndex(item => item > 7)
console.log(tempArr) // 8
console.log(tempArrs) // 5
九、Array.flat()
该方法对数组递归遍历合并成一个新数组
let arr = [1,2,3,[6,[7,8]]]
let tempArr = arr.flat(1) // [1, 2, 3, 6, [7, 8]]
let tempArrs = arr.flat(Infinity)// [1, 2, 3, 6, 7, 8]
十、Array.map()和Array.flatMap()
map方法和flatMap()方法类似,但是map()方法不会对返回的指定元素降层处理,而flatMap()则会对返回数组的元素进行一次降层
let arr = [1,2,3]
let tempArr = arr.map(item => [item*2])
let tempArrs = arr.flatMap(item => [item*2])
console.log(tempArr) // [[2],[4],[6]]
console.log(tempArrs) //[2, 4, 6]
十一、Array.forEach()
该方法对数组进行遍历,就不举例说明了,参数就是callback(value, index, arr)
与for循环遍历类似
十二、Array.includes()
该方法查找元素是否在数组中,如果在则返回true,否则返回false
let item = {num: 1}
let arr = [{num: 2}]
arr.push(item)
console.log(arr.includes(item)) // true
十三、Array.indexOf()
该方法查找数组中指定元素的索引值
十四、Array.join()
该方法将数组转化成指定分割的字符串,默认用逗号‘,’分割
let arr = ['hello','world']
arr.join() "hello,wrold"
arr.join('') "helloworld"
十五、Array.keys(),Array.values()
这两个是一对,两者都是返回数组的Iterator对象,前者返回的是组数的索引,后者返回的是数组的值,为了方便记忆,此处和对比进行讲解。
let arr = [1,2,3]
console.log(arr.keys()) // Array Iterator {}
console.log([...arr.keys()]) // [0, 1, 2]
console.log(Object.keys(arr)) // ['0', '1', '2']
console.log(arr.values()) // Array Iterator {}
console.log(Object.values(arr)) // [1, 2, 3]
从上面可以看出
1.数组的keys方法得到的索引是数字,需要通过解构或者Array.from()等方法转化为数组,而Object.keys()由于JSON原因,返回的是字符串索引数组。
2.主要区别还是返回的对象不同,一个发挥Iterator对象,另一个返回数组。
十六、Array.pop()和Array.push()
这两个方法不再详细讲解了,比较常用的方法,前者栈尾出栈,后者栈尾进栈。
十七、Array.shift()和Array.unshift()
这两个方法也不做细讲了,前者栈顶进栈,后者栈顶出栈,和前面两种方法相反。
十七、Array.reduce()和Array.reduceRight()
前者从左至右遍历,后者从右至左遍历,主要用来求和、相加等操作。
参数:callback[,initValue],其中callback(total, value, index, arr)
let arr = ['a', 'b', 'c', 'd', 'e'];
let left = arr.reduce((total, value) => total + value)
let right = arr.reduceRight((total, value) => total + value);
console.log(left); // "abcde"
console.log(right); // "edcba"
十八、Array.reverse()
该方法主要对原数组进行反序,改变。
十九、Array.slice()和String.slice()
这两个方法相同,都是截取对应数组或者字符串,都不会改变原数组
参数:[start, end),理科生一眼就能看懂,这是包括开始start,不包括结束end。
同时支持参数为负数,即从末尾开始算,-1表示末尾元素。
let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.slice(2,4))
//['c','d']
二十、Array.sort()
顾名思义,该方法主要用于排序。
先说说冒泡排序
let arr = [2,4,6,34,1,4,34,76,34,56,23,898,3]
// 冒牌排序经典解析:
// 1.需要使用两个循环,因为每个元素都要和后面的每个元素做比较
// 2:循环长度是一样的,外层循环少掉最后一个元素,内层循环少掉第一个元素,都是arr.length-1次
for(let i=0; i<arr.length-1; i++) {
let temp = null
for(let j=i+1; j<arr.length; j++){
if(arr[i] > arr[j]){
[arr[i], arr[j]] = [arr[j], arr[i]]
// temp = arr[j]
// arr[j] = arr[i]
// arr[i] = temp
}
}
}
console.log(arr) //[1, 2, 3, 4, 4, 6, 23, 34, 34, 34, 56, 76, 898]
Array.sort()方法主要用于对数组进行排序,如果没有指定方法,则会按照字符串Unicode码点进行排序
let arr = ['df', 'dfsf', 'we', 'fty', 'gfh']
console.log(arr.sort()) // ["df", "dfsf", "fty", "gfh", "we"]
这个方法的主要用处还是指定callback() 对数组进行排序,参数:callback(a,b)
返回三种结果:如果返回的值大于零,b在a之前,如果返回的值小于零,则a在b之前,如果返回零,a,b位置保持不变。
所以,对于数字型数组,可以巧妙的使用该方法:a-b(升序),b-a(降序)
let arr = [2,4,6,34,1,4,34,76,34,56,23,898,3]
arr.sort((a,b) => a-b)
console.log(arr)
可以看出该方法会改变
二十一、Array.splice()方法
该方法可对原数组进行增删改操作。
参数:Array.splice(index[,count[, item1[,item2...]]])
删除
let arr = [2,4,6,34,1,4,34,76,34,56,23,898,3]
arr.splice(1)
console.log(arr) // [2]
let tempArr = [2,4,6,34,1,4,34,76,34,56,23,898,3]
tempArr.splice(3, 2)
console.log(tempArr) //[2, 4, 6, 4, 34, 76, 34, 56, 23, 898, 3]
增加
let arr = [2,4,6,34,1,4,34,76,34,56,23,898,3]
arr.splice(1, 0, 'v')
console.log(arr) // [2, "v", 4, 6, 34, 1, 4, 34, 76, 34, 56, 23, 898, 3]
修改
先删再添加
let arr = [2,4,6,34,1,4,34,76,34,56,23,898,3]
arr.splice(1, 1, 'v')
console.log(arr) // [2, "v", 6, 34, 1, 4, 34, 76, 34, 56, 23, 898, 3]
二十二、Array.toString()
该方法返回数组中每个元素被逗号分割的字符串。
let arr = [1,2,3]
console.log(arr.toString()) // "1,2,3"
这里只是简单讲解toString的方法
问题:
- 对象Object的toString()和数组toString()方法的区别;
- 对象toString()方法可以检查对象类型,可以归类有几种检查类型的方法;
- toString()方法和valueOf()方法是如何被隐式调用的,在什么场景下会被隐式调用。