运算符
扩展运算符
扩展运算符是三个点(...),和rest参数的逆运算一样,将一个数组转为用逗号分隔的参数序列。
<script>
// ... 扩展运算符能将 数组 转换为逗号分隔的 参数序列
const boys = ['张三','李四','王五']
// 声明一个函数
function people(){
console.log(arguments);
}
people(...boys)//['张三','李四','王五']
</script>
数组合并操作如下:
<script>
// 数组的合并
const number = [1,2,3]
const str = ['a','b','c']
const con = [...number,...str]
console.log(con); //[1,2,3,'a','b','c']
</script>
数组克隆操作如下:
<script>
// 数组的克隆
const a = [1,2,3]
const b = [...a]
console.log(a); //[1,2,3]
</script>
将伪数组转为真正的数组操作如下:
<body>
<div></div>
<div></div>
<div></div>
<script>
// 将伪数组转为真正的数组
const divs = document.querySelectorAll('div')
const divArr = [...divs]
console.log(divArr); //[div,div,div]
</script>
</body>
逻辑赋值运算符
逻辑赋值运算符,将逻辑运算符与赋值运算符进行结合,先进行逻辑运算,然后根据运算结果再视情况进行赋值运算:
<script>
var x = 1
var y = 2
// 或赋值运算符
console.log((x ||= y) === (x || (x = y)));//true
// 与赋值运算符
console.log((x &&= y) === (x && (x = y)));//true
// Null 赋值运算符
console.log((x ??= y) === (x ?? (x = y)));//true
</script>
数组扩展方法
Array.from()
用于将两类对象转换为数组:类似数组对象的和可遍历对象。
<script>
// 类似数组对象,本质特征只有一点,必须有length属性
let array = {
'0':'a',
'1':'b',
'2':'c',
length:3 // 长度必须要写的
}
let arr2 = Array.from(array)
console.log(arr2);//['a', 'b', 'c']
console.log(Array.from({ length: 3 }))
// [ undefined, undefined, undefined ]
</script>
如果参数是一个真正的数组,返回的是一样的数组。
<script>
console.log(Array.from([1,2,3]));//[1,2,3]
</script>
如果参数是一个字符串,则会将字符串转换为数组。
<script>
let str = 'hello'
console.log(Array.from(str));//['h', 'e', 'l', 'l', 'o']
</script>
Array.of()
用于将一组值转换为数组。
<script>
console.log(Array.of(1,2,3,4,5,6));//[1, 2, 3, 4, 5, 6]
console.log(Array.of(1));//[1]
console.log(Array.of(2).length);//1
// 如果没有参数,就返回一个空数组。
console.log(Array.of());//[]
</script>
fill()
数组fill()方法,将给定值将数组内容全部覆盖或者局部覆盖。
<script>
var arr = ['a','b','c']
// 将数组内容全部覆盖。
console.log(arr.fill(2));//[2, 2, 2]
var arr1 = ['a','b','c','d']
// 将数组内容局部覆盖,参数2是起始位置,参数3是终止位置,即将数组下标为1的数替换为2
console.log(arr1.fill(8,1,2));//['a', 8, 'c', 'd']
</script>