1.html
<html>
<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
<script src="mock/main.js" type="module"></script>
<script>
var let1 = () => {
{
let le = 1;
var va = 2;
}
console.log(va);//正常输出
console.log(le);// ReferenceError: le is not defined
}
var let2 = () => {
var a = 12;
var a = 34;
console.log(a)//34
let b = 212;
// let b = 434;//Identifier 'b' has already been declared
}
var let3 = () => {
console.log(x);//undefined
var x = 123;
console.log(y);// Cannot access 'y' before initialization
let y = 223;
}
var let4 = () => {
var arr = [9, 4, 6];
for (let each of arr) {
console.log(each)
}
}
var const1 = () => {
const a = 1;
a = 2;
console.log(a)//Assignment to constant variable
}
var destructuring1 = () => {
var arr = [2, 5, 6];
var [a, b, c] = arr;
console.log(a, b, c);
}
var destructuring2 = () => {
const obj = {
name: "亚瑟",
age: 19,
parents: ['张飞', '娜娜']
};
var { name: alias, age, parents } = obj;
console.log(alias, age, parents);
}
var str1 = () => {
var str = "hello,mm";
console.log(str.startsWith("he"));
console.log(str.endsWith("mm"));
console.log(str.includes(","));
};
var str2_func = "666";
var str2 = () => {
let name = '张飞';
let age = 12;
var str = `
<div>
hello,${name},今年${age * 2}岁,${str2_func}
</div>`;
console.log(str)
}
function func1(a, b = 2) {
console.log(a + b);
}
var func2 = (...args) => {
console.log(args.length)
console.log(args);
}
var obj1 = () => {
const obj = {
name: "亚瑟",
age: 19,
parents: ['张飞', '娜娜']
};
console.log(Object.keys(obj));//['name', 'age', 'parents']
console.log(Object.values(obj));//['亚瑟', 19, Array(2)]
console.log(Object.entries(obj));// [Array(2), Array(2), Array(2)]
}
var obj2 = () => {
var obj1 = { name: '老张' }
var obj2 = { age: '18' }
var obj3 = { gender: '女' }
Object.assign(obj1, obj2, obj3);
console.log(obj1);
console.log(obj2);
}
var obj3 = () => {
var name = '开放关键词';
var age = 12;
var obj = { name, age };
console.log(obj);
}
var obj4 = () => {
const obj = {
name: "亚瑟",
age: 19,
parents: ['张飞', '娜娜'],
//原来的对象函数
getAge: function () {
console.log(this.name + '年龄' + this.age);
},
//箭头函数不能使用 this
getAge2: () => console.log(this.name + '年龄' + this.age),
//简写对象函数
getAge3() {
console.log(this.name + '年龄' + this.age)
}
};
obj.getAge()
obj.getAge2()
obj.getAge3()
}
var obj5 = () => {
const obj = {
name: "亚瑟",
age: 19,
parents: ['张飞', '娜娜']
};
const objj = {
gender: '男'
}
//对象深拷贝
var obj2 = { ...obj };
console.log(obj2)
//对象合并为新对象
var obj3 = { ...obj, ...objj };
console.log(obj3);
}
var map1 = () => {
var arr = [1, 2, 3];
//将每个元素X2，返回
// arr = arr.map((a) => { return a * 2 });
arr = arr.map(a => a * 2);
console.log(arr)
}
var reduce1 = () => {
var arr = [1, 2, 3];
//将每个元素X2，再相加
arr = arr.map(a => a * 2).reduce((a, b) => a + b);
console.log(arr)
}
var getUserCourse10 = `{"id":100,"score":90}`;
var ajax1 = () => {
$.ajax({
url: "mock/user.json",
success(data) {
//打印user
console.log(data);
var id = data.id;
$.ajax({
url: `mock/user_course_${id}.json`,
success(data) {
//打印course
console.log(data);
var id = data.id;
$.ajax({
url: `mock/course_score_${id}.json`,
success(data) {
//打印score
console.log(data);
}
})
}
})
}
});
}
var getPromise = (url, dd) => {
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: dd,
success(data) {
resolve(data);
},
error(data) {
reject(data);
}
})
})
}
//使用Promise对象封装ajax ，解决嵌套过多
var promise1 = () => {
var url1 = `mock/user.json`;
getPromise(url1).then(data => {
console.log(data);
return getPromise(`mock/user_course_${data.id}.json`);
}).then((data) => {
console.log(data);
return getPromise(`mock/course_score_${data.id}.json`);
}).then(
data => console.log(data)
).catch(err => {
consle.log(err);
})
}
</script>
<script>
//一、let
//1.let比var作用域更明确
// let1();
//2.let只能声明一次，var可也以多次声明
// let2();
//3.var 会存在变量提升，let不会
// let3();
//4. let of 遍历 数组
// let4();
//二、const 常量
//1.声明后不允许修改
// const1();
//三、结构表达式
//1.数组解构
// destructuring1();
//2.对象解构
// destructuring2();
//四、字符串
//1.新增API: includes startswith endswith
// str1();
//2、字符串模板
// str2();
//五、函数优化
//1.参数默认值 只能优先赋值给后面的参数
// func1(9);
//2.不定参数
// func2(1,2,3)
//3.箭头函数
//六、对象优化
//1.取对象的键值
// obj1();
//2.对象合并
// obj2();
//3.声明对象简写
// obj3();
//4.对象方法简写
// obj4();
//5.对象拓展运算符
// obj5();
//七、数组Map Reduce
// map1();
// reduce1();
//八、Promise
//1.原写法，多层嵌套
// ajax1()
//2.promise写法
// promise1();
//九、模块化
</script>
</html>
2.mock数据 mock文件夹下
(1)user.json
{"id":1,"name":"zhang"}
(2)user_course_1.json
{"id":10,"course":"语文"}
(3)course_score_10.json
{"id":100,"score":100}
3.模块化
util.js
//util 对象中封装一些方法
const utils={
sum(a,b){
return a+b;
}
}
//可导处一切js变量、常量
export {utils}
(2) main.js
//导入模块
import { utils } from "./util.js";
console.log(utils.sum(1,2))