老师帮忙看下我这注释的有问题没
来源：5-1 课程总结
母鸡阿
2021-03-05 17:41:53
<!DOCTYPE html>
<html>
<head>
<title>数组的解构赋值</title>
</head>
<body>
<script>
//1.认识解构赋值
/*const arr = [1,2,3];
const a = arr[0];
const b = arr[1];
const c = arr[2];
console.log(a,b,c);
const [a,b,c] = [1,2,3];
console.log(a,b,c);//1 2 3 */
//2.数组结构赋值的原理
//2.1模式（结构）要匹配
//[] = [1,2,3];
//2.2索引值相同的完成赋值
//const [a,b,c] = [1,2,3];
//console.log(a,b,c);
//2.3练习
//不取的，可以用逗号跳过
/*const [a,[,,b],c] = [1,[2,4,5],3];
console.log(a,b,c);//取出1 5 3 */
//3.数组解构赋值的默认值
//3.1默认值的基本用法
/*const [a,b] = [];
//相当于
const [a,b] = [undefined,undefined];
console.log(a,b);//undefined undefined
const [a=1,b=2] = [];
console.log(a,b);//1 2 */
//3.2默认值的生效条件
//只有当一个数组成员严格等于（===）undefined时,对应的默认值才会生效
/*
const [a =1,b = 2] = [3,0];//a = 1, b = 0
const [a =1,b = 2] = [3,null];//a = 1, b = null
const [a =1,b = 2] = [3];//a = 1, b = 2
*/
//3.3默认表达式
//如果默认值是表达式,默认表达式是惰性求值的
const func = () => {
console.log('我被执行了');
return 2;
};
const [x = func()] = [1]; //x=1
///默认值是表达式,用到才执行,没用到就不执行
const [x = func()] = []; //x=2
//4.数组解构赋值的应用
//4.1类数组：arguments
function func(){
console.log(arguments);//用来存放调用函数时传的参数的类数组
console.log(arguments.push);//类数组没用数组的方法、值为undefined
const [a,b] = arguments;
console.log(a,b);//1 2
}
func(1,2);
//类数组--NodeList
/*
html结构
<p>123</p> <p>567</p> <p>89</p>
*/
console.log(document.querySelectorAll('p'));//[p,p,p]
const [p1,p2,p3] = document.querySelectorAll('p');
console.log(p1,p2,p3);
//p1 -> <p>123</p>,p2-><p>567</p>,p3-><p>89</p>
//4.2函数参数的解构赋值
const array = [1,1];
//箭头函数写法
const func = arr => arr[0] + arr[1];
//解构赋值写法
const add = ([x =0,y =0]) => x + y;
//相当于 [x,y] = [1,1]
console.log(add(array));//2
console.log(add([]));//0
//4.3交换变量的值
let x = 1;
let y = 2;
let temp = x;
x = y;
y = temp;
console.log(x,y);//2 1
const [x,y] = [y,x];
//相当于 const [x,y] = [2,1];
console.log(x,y);//2 1
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>对象的解构赋值</title>
</head>
<body>
<script>
//1.模式（结构）匹配
//{} = {}
//2.属性名相同的完成赋值
/*const {age,username} = {username:'zs',age:28};
console.log(age,username);//28 "zs"
//完整写法
const {age:age1,username:us1} = {username:'zs',age:28};
console.log(age1,us1);//28 "zs" */
//3.对象解构赋值的注意事项
//3.1默认值的生效条件
//对象的属性值严格等于undefined时,对应的默认值才会生效
const {age = 0,username = 'xm'} = {username:'zs'};
console.log(age,username);//0 "zs"
//3.2如果默认值是表达式,默认表达式是符合要求时才会执行的
//3.3将一个已经声明的变量用于解构赋值
//如果将一个已经声明的变量用于对象的解构赋值,整个赋值需在圆括号中进行
let {x} = {x:1};
console.log(x);//1
//在括号中进行---不加括号系统会将{y}的花括号当作是块级作用域
let y = 2;
({y} = {y : 3});
console.log(y);//3
//已经声明的变量用于数组的解构赋值就不用加圆括号,因为系统可辨认出
[y] = [5];
console.log(y);//5
//4.对象解构赋值的应用
//4.1函数参数的解构赋值
//箭头函数的写法
const func = (user) => console.log(user.name,user.age);
func({age:18,name:'zd'});//zd 18
//参数改写成对象解构赋值的形式
/*=> const func2 = ({age=0,username='ls'}) => console.log(username,age);
相当于将{username:'wangwu',age:25}赋值给{age,username}
即{age,username} = {username:'wangwu',age:25}
func2({username:'wangwu',age:25});*/
//改写别名-完整写法
const func2 = ({age:age_,username:name_}) => console.log(name_,age_);
func2({username:'wangwu',age:25});//wangwu 25
//4.2复杂的嵌套
const obj = {
x:1,
y:[2,3,4],
z:{
a:5,
b:6
}
};
//取值
const {
y,
y:y1,
y:[,yy],
z,
z:{b},
z:{a:a1}
} = obj;
console.log(y,y1,yy)//[2,3,4] [2,3,4] 3
console.log(z,b,a1)//{a:5,b:6} 6 5
</script>
</body>
</html>
1回答
-
同学你好，代码注释是正确的，没有问题，继续加油，祝学习愉快！
0
相似问题