欢迎光临
我的个人博客网站

js数组方法(管饱)

有一些数组方法是ECMAScript新增的,一定要注意浏览器的兼容!!

Array对象属性:

属性 说明

constructor

返回对创建此对象的函数引用
length 返回集合内的元素的所有长度
prototype 向对象添加属性和方法

 

constructor

const arr = [1, 2, 4, 5, 6, 9, 15] console.log(arr.constructor)  //输出为  ƒ Array() { [native code] }

length

const arr = [1, 2, 4] console.log(arr.length)  //输出为  3

 

下文的箭头函数的解释为:x => x*1  ==  function(x){return x*1}

如果是有多个参数则:(x,y) => x*y  ==  function(x,y){return x*y}  。我这只是为了简写,并不代表适用。

 

Array对象方法:

方法 说明
shift() 删除第一个元素,并返回结果。
unshift() 插入元素至第一个元素前面,括号内放入要插入的元素。
splice()

向数组内添加新元素。第一个参数定义添加新元素的位置,以拼接的

方式,第二个参数是定义应删除多少个元素

slice()

找出数组内的指定元素。第一个参数定义删除元素的位置,第二个

参数是结束位置。

pop() 删除数组内的最后一个元素,并返回结果。
push() 在数组内的末尾添加一个或多个元素,并返回结果。
reverse() 反转数组内的元素顺序,并返回结果。
toString() 把数组转换为字符串并返回结果。注意:S为大写。
concat()

合并(连接)数组创建一个新数组,也可以将括号内的值作为参数合并

至当前数组。

sort() 对数组内的元素进行排序。 (排序的依照我还搞不清楚….)
valueOf() 返回数组对象的原始值。
join()  把数组内的元素拼成字符串,再以指定的分隔符进行分隔。
isArray() 判断对象是否是一个数组。
includes() 判断数组内是否包含指定的值,可添加多个。
lastIndexOf() 返回指定的元素最后出现的位置。
find()

返回数组内通过条件的第一个元素。注意:用函数判断、如果没有符合条

件的元素则返回undefined。

indexOf() 返回指定元素在数组内的位置。
copyWithin() 指定元素位置拷贝到另一个位置。注意:后面的元素会被位移出数组,慎用!

shift()

const myArray = [3, 1, 5, 2, 6] console.log(myArray.shift())  //输出为 3

unshift()

const myArray = [3, 1, 5, 2, 6] console.log(myArray.unshift(1,3,2323))  //输出为 [1, 3, 2323, 3, 1, 5, 2, 6]

splice()

const myArray = [3, 1, 5, 2, 6] console.log(myArray.splice(1,1,'浮云共我归'))  //输出为  [3, "浮云共我归", 5, 2, 6]

slice()

const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(arr2.slice(2, 4))  //输出为  (2) [3, 4]

pop()

const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(arr2.pop())  //输出为  9

push()

const arr2 = [1, 2, 3, 4] console.log(arr2.push('233','333')) console.log(arr2)  //输出为  6  、  (6) [1, 2, 3, 4, "233", "333"]

toString()

const myArray = [3, 1, 5, 2, 6] console.log(myArray.toString())  //输出为  3,1,5,2,6

concat()

const myArray = [3, 1, 5, 2, 6] const MyArray = [66,77] const result = myArray.concat(MyArray) console.log(result.concat('add'))  //输出为  [3, 1, 5, 2, 6, 66, 77, "add"]

sort()

const arr2 = [6, 2, '云', 1, 4, 'a'] const result = arr2.sort((x, y) => {     if (x > y) {         return 1     }     if (x < y) {         return -1     }     return 0 }) console.log(result)  //输出为  (6) [1, 2, 4, 6, "a", "云"]

valueOf()

const arr2 = [6, 2, '云', 1] console.log(arr2.valueOf())              // 输出为  (4) [6, 2, "云", 1]

join()  (结合split()方法会有意想不到的结果,而且我发现)

const arr2 = ['浮','云','共','我','归']
console.log(arr2.join(
'🍀')) // 输出为 浮🍀云🍀共🍀我🍀归
//用上这行arr2.join('🍀').split('🍀') 又变回原样了
//split()里不加值 输出: ["浮🍀云🍀共🍀我🍀归"]

isArray()

const myArray = [3, 1, 5, 2, 6] console.log(Array.isArray(myArray))  //输出为  true

includes()

const arr2 = ['浮','云','共','我','归'] console.log(arr2.includes('云','浮'))              // 输出为  true

lastIndexOf()

const arr2 = ['浮','云','共','我','归'] arr2.shift() onsole.log(arr2.lastIndexOf('云'))              // 输出为  0

find()

const myArray = [3, 1, 5, 2, 6] const result = myArray.find(x => x > 5) console.log(result)  //输出为  6

indexOf()

const myArray = [3, 1, 5, 2, 6] console.log(myArray.indexOf(6))  //输出为  4

 copyWithin()

const myArray = [1, 2,'云', 3, 4, 5]              const result = myArray.copyWithin(2,0) console.log(result) //输出为  (6) [1, 2, 1, 2, "云", 3]

 

Array对象-高阶函数

方法 说明
filter()  过滤

过滤未达成指定条件的元素,并返回结果。注意:不会对空元素进

行检测,不会改变原数组

reduce()   累加

此方法接收一个函数作为累加器,数组中的每个元素从左到右相

加,最终计算为一个值。可用于函数的compose。

注意:对空数组不会执行回调函数。  reduceRight()从右往左累加

map()   映射 返回一个新数组,数组中的元素为调用函数后处理的值。

 

filter()

// 过滤偶数 const arr = [1, 2, 4, 5, 6, 9, 15] myarr = arr.filter((x) => x % 2 !== 0) console.log(myarr)

reduce()

//将元素累加至最终全部相加的值,输出结果为42 const Nums = [1, 5, 1, 5, 10, 20] const total = Nums.reduce((preValue, n) => { return preValue + n }, 0) //后面0表示初始值,正数则在结果值上加,负数反之

map() 这个方法的用法也很多)

const myArray = [1, 2, 3, 4, 5] console.log(myArray.map((function(x) {     return x + 1 })))  // 输出为  (5) [2, 3, 4, 5, 6]

 

数组遍历方法

 

方法 说明
forEach 调用数组的每个元素,将元素传递给回调函数。
for in

遍历出数组内的元素索引值。   keys()方法也

和这个差不多

for of 遍历出数组内的元素。

 

 

forEach

const myArray = [1, 2,'云', 3, 4, 5]  //element是当前元素,index是元素索引,array是当前元素所属的数组对象 myArray.forEach(function(element, index,array) {     console.log(element,index,array) })              /* 输出为:1 0 (6) [1, 2, "云", 3, 4, 5]          2 1 (6) [1, 2, "云", 3, 4, 5]          云 2 (6) [1, 2, "云", 3, 4, 5]          3 3 (6) [1, 2, "云", 3, 4, 5]          4 (6) [1, 2, "云", 3, 4, 5]          5 5 (6) [1, 2, "云", 3, 4, 5] */      

for of

const myArray = [1, 2,'云', 3, 4, 5]              for(result of myArray){     console.log(result) } //输出为  1 2 云 3 4 5

for in

const myArray = [1, 2,'云', 3, 4, 5]              for(result in myArray){     console.log(result) } //输出为  0 1 2 3 4 5

 

数组的一些常用方法

去重

const myArray = [3, 1, 5, 1, 6] const result = Array.from(new Set(myArray)) console.log(result)  //输出为  [3,1,5,6]

字符串转数组  (数组转字符串可用toString()的方法)

const myArray = '浮云共我归' const result = Array.from(myArray) console.log(result)  //输出为  ["浮,云,共,我,归"]  //如果去掉from  输出为  ["浮云共我归"]

将首字母变为大写,其余小写

const arr = ['adam', 'LISA', 'barT'] const arr2= ['Adam', 'Lisa', 'Bart']  function result(arr) {   return arr.map(function(x) {     x = x.toLowerCase() //toUpperCase()将元素转化为大写,substring()提取指定下标里的元素后面的字符     x = x[0].toUpperCase() + x.substring(1)     return x }) } console.log(result(arr).toString() === arr2.toString())  //输出为  true   转换小写的方法是 toLowperCase()

用map创建键值对集合  &&  元素乘与自身

const arr1 = new Map([     ['lai', 199],     ['quan', 'map'],     ['feng', 10] ]) console.log(arr1) //输出为  Map(3) {"lai" => 199, "quan" => "map", "feng" => 10}              const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9] const result = arr2.map(x => x * x) console.log(result) //输出为  (9) [1, 4, 9, 16, 25, 36, 49, 64, 81]

 找出数组内最大的数字   

const myArray = [1, 2, 3, 4, 5]  const result = Math.max(...myArray) console.log(result) //输出为  5
//最小值的话换成min即可

去除数组内的空格    缺点是数组内不能包含数字

const myArray = ['a', ' ', null, '', undefined, 'b', 'c','   '] const result = myArray.filter((z) => z && z.trim()) console.log(result)  //输出为  (3) ["a", "b", "c"]

赞(0) 打赏
未经允许不得转载:张拓的天空 » js数组方法(管饱)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏