1,JS的解构赋值是ES6新增的一种赋值方法,一般分为对象解构与数组解构两种形式;
对象解构赋值:
let obj = {
x: 'Json',
y: 25,
}
let {x, y} = person
console.log(x,y)// Json 25
var o = {p: 42, q: true}
var {p: foo, q: bar} = o// 将o的p值赋给变量foo,将o的q值赋值给变量bar。
var {p: foo, q: bar} = o等价于({p: foo, q: bar} = o)
数组结构赋值:
let [x, y] = ['a', 'b', 'c']
console.log(x,y)// a b
注意点:
1,解构赋值等号两边结构需要一样,所有变量才能正常解析赋值;
2,若左边结构少于右边,左边按结构赋值,右边多余不管;
3,若右边结构少于左边,左边结构将不赋值,为undefined,若左边给默认值将为默认值,如 let {x,y = 3} = {1}x = 1, y = 3
4,凡是有默认值,若正常赋值,默认值会被覆盖;
4,不能将数组解构赋值给对象的解构赋值;如:const {x, y} = ['a', 'b'];x,y值将为undefined.
我帮你重写了一下,可以取到值<script language="javascript">
function benchi(){
var xinming=document.test.mingzi.value
alert(xinming)
}
</script>
<body bgcolor="lightlue">
<p>
<font color ="blue" size="20">
<i><b><u>表单标记</i></u></b>
</font>
<hr width="100%" size="5" noshade>
<form name="test">
<pre>
<p>
姓名:<input type="text" name="mingzi" value="请输入姓名"
size="25" maxlength="30">
密码:<input type="password" name="passwd" size="15" maxlength="20">
<br>
联系电话:<input type="text" name="phone" size="25" maxlength="30"><br><br>
<b>性别:</b>
<input type="radio" name="sex" value="benchi" checked>奔驰<input type="submit" value="查看" onClick="benchi()">
</form>
简单理解:解构赋值的意思是对应的位置,对应的 key 自动赋值。使用 () 还是 {},要看你定义的函数的参数是什么样的,具体看下面的例子。
第一种:当函数的参数是一个对象时,需要使用 {}。这样在函数里面能通过参数的相同的 key 获取到参数对象里的 key对应的值。
function demo({name, age}) { console.log(`姓名:${name}`) console.log(`年龄:${age}`)
}
demo({ name: '张三', age: 24})
第二种:当函数里的参数是多个时,这个时候用 ()。其实,这个不是结构赋值,真的只是 ES5 里的形参而已,只不过你的代码里用到了 ES6 中的参数默认值设置而已。
function demo(name = "张三", age = 30) { console.log("姓名:" + name) console.log("nianl:" + age)
}
demo()