Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:解构很强大, 有用, 以后尽可能得去用它
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>let</title>
</head>
<body>
<ul>
<li>itme1</li>
<li>itme2</li>
<li>itme3</li>
<li>itme4</li>
<li>itme5</li>
</ul>
<script>
// 1. let 声明变量
let num;
// 1.1 禁止重复声明
// let num;
num = 100;
console.log(num);
let count = 1;
console.log(count);
// console.log(username);
// 1.2 不存在变量声明提升
let username = "TomTom";
function fn() {
// console.log(username);
let username = "jack";
}
console.log(fn());
// 1.3 支持块作用域
if (true) {
let price = 99;
}
// console.log(price);
let lis = document.querySelectorAll("li");
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", function () {
console.log("点击了第 ", i, " 个");
});
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>const</title>
</head>
<body>
<script>
// const 声明只读变量: 常量
// 1. const常量, 在一个脚本的生命周期内,禁止更新,所以在声明时必须初始化
const NATION = "CHINA";
// 2. 不允许重复声明
// const NATION = "USA";
// 3. 支持块作用域
if (true) {
const EMAIL = "admin@qq.com";
console.log(EMAIL);
}
// console.log(EMAIL);
// let 与 const 相同之处
// 1. 禁止重复声明
// 2. 支持块作用域
// 不同之外,let允许更新, 而const禁止更新
//一种风格就是全部都用const,除非这个数据后期会有改变
// 可能会更新的或常用的都使用let,除非不会或不太可能被修改的才用const
// 有一些数据类型强烈推荐使用const
// 对象或数组
const arr = [10, 30, 50];
console.log(arr);
arr[1] = 90;
console.log(arr);
// arr = ["a", "b"];
const obj = { x: "red", y: "blue" };
console.log(obj);
obj.x = "green";
console.log(obj);
// obj = {};
const body = document.body;
body.style.backgroundColor = "yellow";
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>var/let/const在全局作用域绑定上的区别</title>
</head>
<body>
<script>
// var 全局
var email = "tony@123.com";
console.log(email);
console.log(window.email);
var email = "jack@qq.com";
console.log(window.email);
// 污染全局环境
(function () {
var role = "custom";
})();
console.log(window.role);
// 在当前全局环境中创建一个命名空间
// var ns = Object.create(null);
// 如果在函数对象上添加就是静态成员
var ns = function () {};
ns.id = 10;
ns.username = "TomTom LogL";
ns.email = "TomTom@123.com";
console.log(window.ns.id, window.ns.username, window.ns.email);
// -------------------------------------------------------
// let
let colors = ["red", "green", "blue"];
const BRAND = "HUAWEI";
console.log(colors, BRAND);
// let /const声明的变量、常量不会成为全局对象window的属性
console.log(window.colors, window.BRAND);
// var name = "hello world";
let name = "ok......";
// let ,const声明的变量只会出现在词法作用域/块作用/静态作用域
// 在全局环境下,var, let,const行为类似
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>解构</title>
</head>
<body>
<script>
// 解构主要是针对对象和数组
// 解构的目的: 将集合数据按规则打散到一些独立的变量中
const product = {
name: "电脑",
price: 5800,
};
// 1. 传统
let name = product.name;
let price = product.price;
console.log("%s : %c %d", name, "color:red", price);
// 2. 对象解构
const user = {
username: "TomTom",
email: "TomTom@123.com",
};
// 解构语法: 解构变量声明 = 要被解构的数据
let { username, email } = { username: "TomTom", email: "TomTom@123.com" };
console.log(username, email);
// 1. 对象的属性名必须与左边解析变量声明模板中的变量同名
// 2. 解构变量必须初始化
// let { x, y }
// 3. 可以将左侧的变量声明看来右侧的赋值模板
// 3. 解构表达式: 用来更新变量
let a = 10;
let b = 20;
console.log(a, b);
// a = 150;
// b = 250;
// console.log(a, b);
// 1. 场景1
({ a, b } = { a: 150, b: 250 });
console.log(a, b);
// 2. 场景2
function out({ a: x, b: y }) {
console.log(x, y);
x = 1;
y = 2;
console.log(x, y);
}
out({ a: 88, b: 99 });
// 4. 解构声明中设置默认值
let stu = {
stuName: "TomTom LogL",
gender: "male",
};
let { stuName, gender = "female", age = 18 } = stu;
console.log(stuName, gender, age);
// 5. 解构声明中使用变量别名
const book = {
name: "ES6开发指南",
price: 109,
};
let { name: bookName, price: bookPrice } = book;
console.log(bookName, bookPrice);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>嵌套对象解构</title>
</head>
<body>
<script>
// 对象的属性值也可以是对象或其它复杂类型
const stu = {
name: "TomTom",
course: {
php: {
level: "basis",
grade: 80,
},
front: {
level: "advance",
grade: 70,
},
},
};
// course->php
let {
course: { php },
} = stu;
console.log(php);
let {
course: {
php: { level },
},
} = stu;
console.log(level);
let {
course: {
front: { level: frontLevel },
},
} = stu;
console.log(frontLevel);
// 多次解构
let {
course,
course: { php: phpinfo },
course: {
php: { level: levelinfo },
},
} = stu;
// let { course } = stu;
// let {
// course: { php: phpinfo },
// } = stu;
// let {
// course: {
// php: { level: levelinfo },
// },
// } = stu;
console.log(course, php, level);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>数组解构</title>
</head>
<body>
<script>
let user = [1, "admin", "123@123.com"];
// 1. 数组解构声明
let [id, name, email] = user;
console.log(id, name, email);
let [, username, ,] = user;
console.log(username);
// 2. 数组解构表达式: 更新数组元素
let lesson = "es6";
let grade = 60;
console.log(lesson, grade);
[lesson, grade] = ["php", 90];
console.log(lesson, grade);
// 3. 使用默认值
let [brand, model, color = "black"] = ["小米", "p40", "red"];
console.log(brand, model, color);
// 4. 在函数参数中也可以使用数组解构
function add([x, y = 90]) {
return x + y;
}
console.log(add([45, 55]));
console.log(add([20]));
// 5. 数组嵌套解构
let [a1, a2, [a3, a4], a5] = [10, 20, [30, 40], 50];
console.log(a1, a2, a3, a4, a5);
</script>
</body>
</html>
下面内容结合网上内容应用了下
(https://www.runoob.com/w3cnote/deconstruction-assignment.html)
在解构中,有下面两部分参与:
解构的源,解构赋值表达式的右边部分。
解构的目标,解构赋值表达式的左边部分。
基本型
let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3
可嵌套
let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3
可忽略
let [a, , b] = [1, 2, 3];
// a = 1
// b = 3
不完全解构
let [a = 1, b] = []; // a = 1, b = undefined
剩余运算符
let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]
字符串等
let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'
解构默认值
let [a = 2] = [undefined]; // a = 2
对象的解构有很多类似的地方