跳到主要内容

JS数组 Array

参考文档:MDN

JS没有真正数组,数组实际上是一种特殊的对象

创建数组的方法:

let arr = [1,2,3];        // let arr = new Array([1,2,3)
let arr = new Array(2)

**伪数组:**是在原型链中没有数组的原型,也就是没有数组共用的属性的「数组」

let divlist = Document.querySelectorAll('div')

合并数组

Array.prototype.concat() MDN

用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

对应字符串,同样拥有String.prototype.concat()的方法合并新字符串。

let a = [1,2,3]
let b = [2,4,6]
let ab = a.concat(b) // (6) [1, 2, 3, 2, 4, 6]

slice 截取数组

Array.prototype.slice()

语法:arr.slice( [begin [, end]] )

返回新的数组对象,由 begin 和 end 决定的原数组的浅拷贝,原始数组不会被改变。

let a = [1,2,3,4,5,6,7,8,9,10]
let b = a.slice(5,10) // (5) [6, 7, 8, 9, 10]

删除数组

对象的增删改查同样可以运用在数组上,同时也会引发一些错误。修改后**「数组的长度“length不会改变」**

三种删除数组元素的方法

Array.prototype.shift()

从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

let a = [1,2,3,4,5,6,7,8,9,10]
a.shift() // 不接受参数,直接删除引索为0的数值

Array.prototype.pop()

从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

let a = [1,2,3,4,5,6,7,8,9,10]
a.pop() // 不接受参数,直接删除引索为

Array.prototype.splice()

删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

此方法同样可以修改数组的值

语法array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

let a = [1,2,3,4,5,6,7,8,9,10]    //
a.splice(5,1,666) // 从引索为 5 的数值开始,删除 1 个数值,插入 666

// 输出结果:(10) [1, 2, 3, 4, 5, 666, 7, 8, 9, 10]

添加数组

尾部添加元素

Array.push( item1 [,item2] )

头部添加元素

Array.unshift( item1 [,item2] )

运行splice插入元素

Array.splise( index , 0 , 'x') 	// 在index位置插入‘x',0

查看数组

IndexOf()

返回可以在数组中找到给定元素的第一个索引;如果不存在,则返回-1。

var array = [2, 9, 9];
array.indexOf(9); // 1
array.indexOf(7); // -1

find()

返回提供的数组中满足提供的测试功能的第一个元素的值。

let classScore = [
{name: 'aziz', score: 100},
{name: '吴彦祖', score: 96},
{name: '学霸', score: 99}
];

classScore.find( ({ name }) => name === 'aziz' );
// {name: "aziz", score: 100}

findIndex()

返回满足提供的测试功能的数组中第一个元素的索引 . 否则,它返回 -1

let classScore = [
{name: 'aziz', score: 100},
{name: '吴彦祖', score: 96},
{name: '学霸', score: 99}
];

classScore.findIndex( ({ name }) => name === 'aziz' );
// 0

转化数组

String.prototype.split()

let string = 'abc';
string.split('') // (3) ["1", "2", "3"]
string.split(',') // ["123"]

Array.from()

Array.from(string)    // (3) ["1", "2", "3"]

// 可以对数组进行map方法运算
Array.from([1, 2, 3], x => x + x) // (3) [2, 4, 6]

遍历数组

查看数字(字符串)的属性名和值

let a = [1,2,3,4,5,6,7,8,9,10];
for(let i =0;i < a.length;i++){
console.log(`${i}:${[i]}`)
}

forEach

Array.prototype.forEach()

语法:arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

let a = [1,2,3,4,5,6,7,8,9,10];
a.forEach(a => console.log(a));

顺序修改

反转顺序函数

Array.prototype.reverse()

用于修改数组顺序,字符串需要 → 转数组 → 转换 → 合并

let s = 'abcde'
s.split('').reverse().join('') //不改变原有值

自定义顺序

Array.prototype.sort MDN

对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的

var numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b); // a-b为默认顺序,b-a相当于“从大到小”
// (5) [1, 2, 3, 4, 5]

对象排序

⚠️注意:会改变原有数组

let classScore = [
{name:'aziz',score:78},
{name:'胖虎', score:59},
{name:'学霸',score:100}
]

classScore.sort((a,b) => b.score - a.score)

数组变换

对数组进行”运算“

Array.prototype.map()

map (对每一个数值进行操作)

let square = [1,2,3,4,5,6]
square.map( item => item*item )
// (6) [1, 4, 9, 16, 25, 36]

let abs = [1,2,3,4,5,6]
abs.map(item => item*item)
// (6) [1, 4, 9, 16, 25, 36]

对数组进行”筛选“

Array.prototype.filter()

let a = [1,2,3,4,5,6,7,8,9,10]
a.filter(a=> a%2===0)
// (5) [2, 4, 6, 8, 10]

对数组进行函数”运算“

Array.prototype.reduce()

属于高级用法,基本可以实现大多数的数组运算。

有点类似for...if循环,也可以结合if使用。

arr.reduce(callback( accumulator, currentValue)[ initialValue ])
-------------- 相当于 --------------
arr.reduce( 累积器, 数组正在处理的元素 )[ 默认参数])

实现数组值的相乘、相加

let a = [1,2,3,4,5,6,7,8,9,10];
a.reduce((acc,cur)=>{return acc*cur},1) // 3628800
a.reduce((acc,cur)=>{return acc+cur},0) // 55

要注意,如果默认值为 0 ,则已 0 作为原始值计算

a.reduce((acc,cur)=>{return acc*cur},0)    // 0

高级用法,可以使用数组来统计名字,输出结果成为一个对象

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']

let countedNames = names.reduce(function (allNames, name) {
if (name in allNames) {
allNames[name]++
}
else {
allNames[name] = 1
}
return allNames
}, {})
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

end.

map

let arr = [0,1,2,2,3,3,3,4,4,4,4,6]
let arr2 = arr.map((i)=>{
return {0:'周日',1:'周一',2:'周二',3:'周三',4:'周四',5:'周五',6:'周六'}[i]
})
console.log(arr2) // ['周日', '周一', '周二', '周二', '周三', '周三', '周三', '周三', '周四', '周四', '周四', '周四' ]


let arr3 = [0,1,2,2,3,3,3,4,4,4,4,6]
let arr4 = arr.map( a => {
if (a===0){return a="周日";}
if(a===1){return a="周一";}
if(a===2){return a="周二";}
if(a===3){return a="周三";}
if(a===4){return a="周四";}
if(a===5){return a="周五";}
if(a===6){return a="周六";}
else return a
})
console.log(arr4)

数组去重方法

map 与 filter 运用

function unique(arr) {
let res = new Map();
let result = arr.filter((a) => !res.has(a) && res.set(a, 'only'));
return console.log(result)
}
unique(array)

数组indexOf

function unique(array) {
let arr = [];
for (i = 0; i < array.length; i++) {
if (arr.indexOf(array[i]) === -1) {
arr.push(array[i])
}
}
console.log(arr)
}
unique(array)

for循环

function unique(array){
for(let i=0;i< array.length;i++){
for(let j = i + 1; j<array.length;j++){
if(array[i] === array[j]){
array.splice(j,1)
j -= 1
}
}
}
console.log(array)
}
unique(array)

Set 方式

array = [1,5,2,3,4,2,3,1,3,4]
console.log(Array.from(new Set(array)))
console.log([...new Set(array)]) //第二种方式

Set为内置对象,由于该函数是对象值的集合,具有唯一性。使用在数组去除返回为 set 对象,需要对结果转换为数组

map | filter

function unique(arr) {
let res = new Map();
let result = arr.filter((a) => !res.has(a) && res.set(a, 'only'));
return console.log(result)
}
unique(array)

map 与 weakMap 使用大致相同,主要区别在于

  1. Map对象的键可以是任何类型,但WeakMap对象中的键只能是对象引用
  2. WeakMap不能包含无引用的对象,否则会被自动清除出集合(垃圾回收机制)。