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方法的详解

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,014评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,796评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,484评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,830评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,946评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,114评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,182评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,927评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,369评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,533评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,166评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2 351

推荐阅读更多精彩内容