《数组对象》

69 阅读6分钟

《JS数组对象》:特殊的对象,对象中的一类。

定义:

  • let arr = [1,2,3,]
  • let arr = new Array(1,2,3,) //元素为1,2,3
  • let arr = new Arrat(3) //长度3

Js数组:

  1. 元素的数据类型可以不同
  2. 内存不一定是连续的
  3. 不能通过数字下标,而是通过字符串下标
  4. 意味数组可以有任何key
  5. 如:let arr = [1,2,3] // arr['xxx'] = 1

转化

  • let arr = '1,2,3'.split(',')
  • let arr = '123' . split('')
  • Array.from('123') // 有0,1,2,3下标和length属性会把对象变成数组

伪数组

  • 伪数组的原型中没有数组的原型,没有数组的共有属性

concat()

concat方法用于多个数组的合并。它将新数组的成员,添加到原数组成员的后部,然后返回一个新数组,原数组不变。

var arr = [1, 2, 3, 4]

var arr2 = arr.concat([5, 6, 7])

console.log(arr2) //[1,2,3,4,5,6,7]

console.log(arr) //[1,2,3,4]

slice() //切

slice()方法用于提取目标数组的一部分,返回一个新数组,原数组不变。 它的第一个参数为起始位置(从0开始,会包括在返回的新数组之中),第二个参数为终止位置(但该位置的元素本身不包括在内)。如果省略第二个参数,则一直返回到原数组的最后一个成员

var a = ['a', 'b', 'c'];

a.slice(0) // ["a", "b", "c"]

a.slice(1) // ["b", "c"]

a.slice(1, 2) // ["b"]

a.slice(2, 6) // ["c"]

a.slice() // ["a", "b", "c"]

如果第一个参数大于等于数组长度,或者第二个参数小于第一个参数,则返回空数组。

var a = ['a', 'b', 'c'];

a.slice(4) // []

a.slice(2, 1) // []

删除元素

shift()

shift()方法用于删除数组的第一个元素,并返回该元素。注意,该方法会改变原数组。

var arr = [1, 2, 3, 4]

arr.shift()

console.log(arr) //[2,3,4]

console.log(arr.shift()) //2

pop()

pop方法用于删除数组的最后一个元素,并返回该元素。注意,该方法会改变原数组。 对空数组使用pop方法,不会报错,而是返回undefined

arr.pop()
console.log(arr.pop()) //true
console.log(arr.pop()) //2

splice()

splice()方法用于删除原数组的一部分成员,并可以在删除的位置添加新的数组成员,返回值是被删除的元素。注意,该方法会改变原数组。

splice的第一个参数是删除的起始位置(从0开始),第二个参数是被删除的元素个数。如果后面还有更多的参数,则表示这些就是要被插入数组的新元素。

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2) // ["e", "f"]
a // ["a", "b", "c", "d"]

如果只是单纯地插入元素,splice方法的第二个参数可以设为0。

var a = [1, 1, 1];
a.splice(1, 0, 2) // []
a // [1, 2, 1, 1]

如果只提供第一个参数,等同于将原数组在指定位置拆分成两个数组。

var a = [1, 2, 3, 4];
a.splice(2) // [3, 4]
a // [1, 2]

查找元素

for循环

fot(let a = 0 ; a<arr.length; a++){
console.log(`${i}:${arr[i]}`)
}

forEach

arr.forEach(function(item,index){
console.log(`${index}:${item}`)
})

查找单个元素,跟对象一样

  • let arr = [1,2,3]
  • arr[0]= 1
  • 索引越界
    • arr[arr.length] === undefined
    • arr[-1] === undefined
  • 查看单个元素是否在数组里
    • arr.indexOf(item) //存在返回索引,不存在返回-1
  • 使用条件查找元素
    • arr.find(item => item%2 === 0)//找第一个偶数
  • 使用条件查找元素的索引
    • arr.findIndex(item => item%2 === 0) //找第一个偶数的索引

增加数组中的元素

unshift()方法用于在数组的第一个位置添加元素,并返回添加新元素后的数组长度。注意,该方法会改变原数组。

unshift(添加头部元素)

var a = ['a', 'b', 'c'];
a.unshift('x'); // 4
a // ['x', 'a', 'b', 'c']

push(添加末端元素)

push方法用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度。注意,该方法会改变原数组。

    var arr = []
    arr.push(1, 2)
    arr.push(true, {})
    console.log(arr.push())//4
    console.log(arr)//[1, 2, true, {…}]

splice

如果只是单纯地插入元素,splice方法的第二个参数可以设为0。

var a = [1, 1, 1];
a.splice(1, 0, 2) // []
a // [1, 2, 1, 1]

修改元素

  • 反转顺序

    • arr.reverse() // 修改原数组

join() split()相反转换

join

var arr = [1, 2, 3, 4]
console.log(arr.join('')) //1234
console.log(arr.join('|')) //1|2|3|4
console.log(arr.join()) //1,2,3,4

split

  • 字符串反转顺序
    • arr.split('').arr.reverse.join('')

自定义顺序 sort()

sort方法对数组成员进行排序,默认是按照字典顺序排序。排序后,原数组将被改变。

var arr = [2, 3, 4, 1, 6, 4]
var arr2 = arr.sort()
console.log(arr2) //[1,2,3,4,4,6]

如果想让sort方法按照自定义方式排序,可以传入一个函数作为参数。 排序看返回值

  • 1当返回值为负数时,那么前面的数放在最前面

  • 2为正数,那么后面的数在前

  • 3为0不动

    var arr = [2, 3, 4, 1, 6, 4]
    var arr2 = arr.sort((a, b) => b - a)
    console.log(arr2) //[6,4,4,3,2,1]
    

数组变换

map()

map方法将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回。原数组没有变化。

var arr = [2, 3, 4, 1, 6, 4]
var arr2 = arr.sort().map(n => n + 1)
console.log(arr2) //[2,3,4,5,5,6]
console.log(arr) //[1,2,3,4,4,6]

map方法接受一个函数作为参数。该函数调用时,map方法向它传入三个参数:当前成员、当前位置和数组本身。

var arr = [2, 3, 4, 1, 6, 4]
var arr2 = arr.map(function(item, index, arr) {
console.log(item, index, arr)
})
//2 0 (6)[2, 3, 4, 1, 6, 4]
//3 1 (6)[2, 3, 4, 1, 6, 4]
//4 2 (6)[2, 3, 4, 1, 6, 4]
//1 3 (6)[2, 3, 4, 1, 6, 4]
//6 4 (6)[2, 3, 4, 1, 6, 4]
//4 5 (6)[2, 3, 4, 1, 6, 4]

filter()

filter方法用于过滤数组成员,满足条件的成员组成一个新数组返回。 它的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

[1, 2, 3, 4, 5].filter(function (elem) {
  return (elem > 3);
})
// [4, 5]

等同于

1662641392(1).png


filter方法的参数函数可以接受三个参数:当前成员,当前位置和整个数组。

[1, 2, 3, 4, 5].filter(function (elem, index, arr) {
  return index % 2 === 0;
});
// [1, 3, 5]

等同于

1662641555(1).png


reduce

reduce()  方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

第一次执行回调函数时,不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。否则,数组索引为 0 的元素将被作为初始值 initialValue,迭代器将从第二个元素开始执行(索引为 1 而不是 0)。

求和

let arr = [1,2,3,4,5]
arr.reduce((x,y)=>{return x+y},0)
// 15

求平方

arr.reduce((x,y)=>{return x.concat(y*y)},[])

求偶数

1662641731(2).png