JS数组
数组是一个特殊的对象
创建数组
let arr = [1,2,3,4]
let arr = new Array(1,2,3)
// 转化为数组
let str = '1,2,3,4';
str.split(',')
str.split('');
// Array.from 变数组的条件 1必须要有0,1,2等数字的字符串下标 2 必须有length的属性
Array.from{0:'a',1:'b',2:'c',length:3}
伪数组的原型链中没有数组的原型
// 这样获取的数组就是伪数组 不能使用push 等属性
let divList = document.querySelectorAll('div')
注意new
和undefined
创建的数组是有区别的
var a = new Array(3);
var b = [undefined, undefined, undefined];
0 in a // false
0 in b // true
合并数组(contact)
将2个数组合并为一个新的数组 原来的不变
let arr = [1,2,3]
let arr2 = [4,5,6]
arr.concat(arr2)
// 返回: [1, 2, 3, 4, 5, 6]
截取数组(slice)
截取数组 获得一个新的数组 原数组不变
let arr3 = [1, 2, 3, 4, 5, 6]
arr3.slice(2)
// 返回: [3, 4, 5, 6]
let arr4 = arr3.slice(0)
// 复制一个数组
删
以下删除方法有问题 :
let arr = [1, 2, 3, 4, 5, 6]
delete arr[0]
arr
// 返回: [空, 2, 3, 4, 5, 6] 保留长度
let arr = [1, 2, 3, 4, 5, 6]
arr.length = 5
arr
// 返回 [1, 2, 3, 4, 5]
删除方法:
shift 删除头部元素
let arr = [1, 2, 3, 4, 5]
arr.shift(1)
// 返回: [2, 3, 4, 5]
pop 删除尾部元素
let arr = [1, 2, 3, 4, 5]
arr.pop(1)
// 返回: [1,2, 3, 4]
splice 删除中间元素
let arr = [1, 2, 3, 4, 5, 6]
arr.splice(1,2) // 开始位置 截取长度
// 返回: [1, 4, 5, 6]
arr.splice(1,2,22,33) // 修改中间元素 删除后 重新添加
// 返回: [1, 22, 33, 4, 5, 6]
查
// 遍历数组的属性名 和 属性值
let arr = [1, 2, 3, 4, 5, 6]
for(let i = 0; i< arr.length; i++){
console.log(`${i} : ${arr[i]}`)
}
// 返回:
// 0 : 1
// 1 : 2
// 2 : 3
// 3 : 4
// 4 : 5
// 5 : 6
foreach 遍历
let arr = [1, 2, 3, 4, 5, 6]
arr.forEach(function(xxx,yyy){ //参数名字随便 第一个参数是值 第二个是属性名
console.log(`${yyy} : ${xxx}`)
})
用for循环
1: 可以使用 break 和continue 自定义循环
2: for循环是一个块级作用域
而 foreach
1:只能一头走到尾
2:是一个函数作用域
查看单个属性
let arr = [1, 2, 3, 4, 5, 6]
arr.indexOf(055)
// 返回: -1 不存在 1 存在在数组
使用条件查看元素
arr.find((x)=>x%2 ===0) // 返回第一个偶数
arr.findIndex((x)=>x%2 ===0) // 返回第一个偶数的索引
增
在尾部添加 arr.push
let arr = [1, 2, 3, 4, 5, 6]
arr.push(66,77,88)
arr
// 返回:[1, 2, 3, 4, 5, 6, 66, 77, 88]
在头部添加 arr.unshift
arr.unshift(22,55,66)
arr
// 返回:[22, 55, 66, 1, 2, 3, 4, 5, 6, 66, 77, 88]
在中间添加 arr.splice
arr.splice(2,0,'x','y')
arr
// 返回: [22, 55, "x", "y", 66, 1, 2, 3, 4, 5, 6, 66, 77, 88]
反转数组 arr.reverse()
let arr = [1, 2, 3, 4, 5, 6]
arr.reverse()
// 返回: [6, 5, 4, 3, 2, 1]
反转字符串
var a = 'abcde'
a.split('').reverse().join('')
// 返回: "edcba"
排序 sort()
let arr = [1, 2, 3, 4, 5, 6]
// 升序
arr.sort(function (a, b) {
if (a > b) {
return 1
} else if (a === b) {
return 0
} else {
return -1
}
})
// 简写
arr.sort((a, b) =>{
return a-b
})
// 降序
arr.sort(function (a, b) {
if (a > b) {
return -1
} else if (a === b) {
return 0
} else {
return 1
}
})
// 简写
arr.sort((a, b) =>{
return b-a
})
数组变换
map
n 变 n
let arr = [1, 2, 3, 4, 5, 6]
arr.map(item => item *item)
// 返回 : [1, 4, 9, 16, 25, 36]
filter
n 变少
let arr = [1, 2, 3, 4, 5, 6]
arr.filter(item => item %2 ===0 ? true : false) // 返回偶数
// 返回 : [2, 4, 6]
reduce
n 变 1
arr.reduce((sum, item) => {
return sum + item
}, 0) // 算总和
// 返回 : 21
// 只要偶数
arr.reduce((a1, a2) => {
if (a2 % 2 === 1) {
return a1
} else {
return a1.concat(a2)
}
}, [])
// 返回 :[2, 4, 6]
对象转数组
方法一:Array.from()
var a = {
0: '你好',
1: '不好',
'length': 2
}
var c = Array.from(a);
console.log(c);
小贴士:
- object中必须有length属性,返回的数组长度取决于length长度
- key 值必须是数值
方法二: Object.values() 获取键值
var a = {
0: '你好',
1: '不好'
}
var c = Object.values(a)
console.log(c);
小贴士:
- 与第一种不同的是不需要length属性,返回一个对象所有可枚举属性值
方法三: Object.keys() 获取键名
var a = {
0: '你好',
1: '不好'
}
var c = Object.keys(a)
console.log(c);
方法四:Object.entries()
var a = {
0: '你好',
1: '不好',
}
var c = Object.entries(a)
console.log(c);
//
返回一个给定对象自身可枚举属性的键值对数组
数组转对象
var list = {};
var arr = ["123", "456", "789"];
for (var key in arr) {
list[key] = arr[key];
}
console.log(list);