JavaScript数组的原型方法

array.png

上章节讲完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()

该方法用于\color{red}{拷贝部分数组元素}到该数组的指定位置
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()

该方法\color{red}{指定某个值}来填充到该数组的指定位置

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()

该方法检测数组\color{red}{所有元素}是否通过测试,如有一个不通过则返回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()方法意思相反,如果\color{red}{一个元素或者多个元素}通过测试则返回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对象,前者返回的是组数的索引,后者返回的是数组的值,为了方便记忆,此处和\color{red}{Object.keys(arr)和Object.values(arr)}对比进行讲解。

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()

该方法主要对原数组进行反序,改变\color{red}{原数组}

十九、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)

可以看出该方法会改变\color{red}{原数组}

二十一、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()方法是如何被隐式调用的,在什么场景下会被隐式调用。

请移步对象toString和valueOf方法的详解

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容