94 lines
3.2 KiB
HTML
94 lines
3.2 KiB
HTML
|
<!-- vue-1-3.html -->
|
|||
|
|
<!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>
|
|||
|
|
<script>
|
|||
|
|
if (true) {
|
|||
|
|
let myName = "储久良"; // let的作用域是代码块级
|
|||
|
|
var myAge = 57; // 在代码块中使用var定义的变量可以在代码块之外使用
|
|||
|
|
const PI = 3.14159; // const的作用域是代码块级
|
|||
|
|
console.log("PI=", PI); // 3.14159
|
|||
|
|
}
|
|||
|
|
console.log("年龄:" + myAge); // 57
|
|||
|
|
// console.log("PI="+PI); // 报错
|
|||
|
|
// console.log(myName + "欢迎您!"); //报错
|
|||
|
|
// const定义变量指向的那个内存地址不得改动。
|
|||
|
|
const numberArr = [1, 2, 3, 4, 5, 6, 7]; // 赋值
|
|||
|
|
numberArr.push(10, 20, 30); // 可以执行
|
|||
|
|
console.log(numberArr); // 输出所有元素
|
|||
|
|
// numberArr = [15, 2, 3, 4, 5, 6, 7]; // 报错，不能重新赋值
|
|||
|
|
console.log(numberArr);
|
|||
|
|
// //let不存在变量提升
|
|||
|
|
// console.log(a); //报错
|
|||
|
|
// let a = "apple";
|
|||
|
|
|
|||
|
|
console.log(b); //undefined，是一个值
|
|||
|
|
var b = "banana";
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
// console.log(x);
|
|||
|
|
// console.log(y);
|
|||
|
|
// var 与function 预解析的区别
|
|||
|
|
console.log(number);//这里可以以后定义先调用，提升
|
|||
|
|
var number = 2022;
|
|||
|
|
console.log(number);
|
|||
|
|
func(1000, 2000);//函数允许后定义先调用
|
|||
|
|
function func(n1, n2) {
|
|||
|
|
var total = n1 + n2;
|
|||
|
|
console.log(total);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let [x, y, ...z] = ["z","a","b","c"];//..是运算符，意思为后续直到Z
|
|||
|
|
console.log(x);
|
|||
|
|
console.log(y);
|
|||
|
|
console.log(z);
|
|||
|
|
// var sum = (num1, num2) => { //箭头函数，与其对应
|
|||
|
|
// return num1 + num2;
|
|||
|
|
// };
|
|||
|
|
var sum = (num1,num2) =>num1+num2
|
|||
|
|
// var sum = function (num1, num2) {
|
|||
|
|
// return num1 + num2;
|
|||
|
|
// };
|
|||
|
|
console.log(sum(100, 200));
|
|||
|
|
var f = (id, name) => ({ id: id, name: name });//返回对象的时候要用小括号括起来
|
|||
|
|
console.log("f", f(10, "AAAA"));
|
|||
|
|
|
|||
|
|
//拷贝对象（深拷贝）
|
|||
|
|
let p1 = { name: "qiyue", age: 23 };
|
|||
|
|
let obj = { ...p1 };
|
|||
|
|
console.log(obj); //{name: "qiyue", age: 23}之后修改也无联系
|
|||
|
|
obj.name="ddd"
|
|||
|
|
console.log(obj)
|
|||
|
|
console.log(p1)
|
|||
|
|
//拷贝对象（浅拷贝）之后修改同步更新，依旧有联系，引用更新，相当于别名，一个东西
|
|||
|
|
let pp = p1
|
|||
|
|
pp.name = "ddd"
|
|||
|
|
console.log(pp)
|
|||
|
|
console.log(p1)
|
|||
|
|
|
|||
|
|
//合并对象
|
|||
|
|
let age1 = { age: 24 };
|
|||
|
|
let name1 = { name: "qiyue" };
|
|||
|
|
let p2 = {};
|
|||
|
|
p2 = { ...age1, ...name1 };
|
|||
|
|
console.log(p2); //{age: 24, name: "qiyue"}
|
|||
|
|
//如果p2中原本有name,age属性会被覆盖
|
|||
|
|
|
|||
|
|
let string1 = `Hey,
|
|||
|
|
can you stop angry now?`;//模板字符串1.可换行2.可在字符串里面加入变量
|
|||
|
|
console.log(string1);
|
|||
|
|
function fun() {
|
|||
|
|
return "Chu Jiu Liang!";
|
|||
|
|
}
|
|||
|
|
let string2 = `Welcom to ${fun()}`;
|
|||
|
|
console.log(string2); // Welcom to Chu Jiu Liang!
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|