Article directory
1. Destructuring assignment
<script>
//快速的从对象和数组中获取里面的成员
var arr = ['yi','er','san']
let [x,y,z] = arr
console.log(x,y,z);
//多维度数组
var arr2 = [1,2,[3,4,[5]]]
console.log(arr2[2][2][0]);
//第三案列
var obj = {
name: 'yu',
age: '100',
location: 'nanjing'
}
let {
name,age,location:mylocation} = obj
document.write(name)
document.write(age)
document.write(mylocation)
</script>
//复杂案列
var obj2 = {
name: 'yu',
age: '100',
location: {
city: 'nanjing',
province: 'jiangsu'
},
hoddy:[111,222,333]
}
var {
name,
age,
location: {
city,
province
},
hoddy:[m,n,k]
}= obj2
console.log(name,age,province,city,m,n,k)
2. Object abbreviation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="myusername">
<input type="text" id="mypassword">
<button id="mybtn">login</button>
<script>
mybtn.onclick = function () {
let username = myusername.value
let password = mypassword.value
console.log(username,password)
//对象简写2
var obj = {
username,
password
}
console.log("发给后端的结构",obj)
//对象简写3
var obj = {
a:1,
getName(){
console.log(this.a)
}
}
obj.getName()
// var obj = {
// a:1,
// getName:function(){
// console.log(this.a)
// }
// }
}
</script>
</body>
</html>
Third, the expansion operator
<script>
//第一种
//...展开数组
var a = [1,2,3]
var b = [4,5,6]
// console.log(a.concat(b))
var c = [...a,...b]
console.log(c)
</script>
<script>
//...复制
var a = [1,2,3]
var b = [...a]
b[0] = 'yu'
console.log(a,b)
</script>
<script>
//...参数-实参-形参
// var test = function(a,b,...arr){
// console.log(arr)
// }
// test(1,2,3,4,5)
var arr = [1,2,3]
var test = function(a,b,c){
console.log(a,b,c)
}
test(...arr)
// var arr = [1,2,3,4,5,6]
// var res = Math.max(...arr)
// console.log(res)
</script>
<script>
//...伪数组转换
function test(){
var arr = [...arguments]
console.log(arr)
}
test(1,2,3,4)
</script>
<script>
//...对象
var obj1 = {
name: 'yu',
age:100
}
var obj2 = {
name: 'ttt',
location:'nanjing'
}
var obj = {
...obj1,
...obj2
}
console.log(obj)
</script>
Modular
