js数组方法(管饱)

  • 2020 年 11 月 15 日
  • 筆記

有一些数组方法是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"]

VirMach 便宜 VPS

QNews

QNews