ES6语法
一、let
<!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>
// {
// //var 声明的变量往往会跨域
// //let 声明的变量有严格局部作用域
// var a = 1;
// let b = 2;
// }
// console.log(a); //1
// console.log(b); //Uncaught ReferenceError: b is not defined
// //var 可以声明多次
// //let 只能声明一次
// var m = 3;
// var m = 4;
// let n = 5;
// // let n=5;
// console.log(m); //3
// console.log(n); //Identifier 'n' has already been declared
// //var 会变量提升
// //let 不存在变量提升
// console.log(x); //undefined
// var x = 10;
// console.log(y); //Cannot access 'y' before initialization
// let y = 20;
// // const 用于定义常量
// //1、声明之后不允许改变。
// //2、一旦声明必须初始化，否则会报错
// const a = 1;
// a = 3; //Assignment to constant variable.
</script>
</body>
</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>
// //数组结构
// let arr =[1,2,3];
// // let a = arr[0];
// // let b = arr[1];
// // let c = arr[2];
// //快速复制
// let [a,b,c] = arr;
// console.log(a,b,c);
// //对象结构
// const person = {
// name: "jack",
// age: 21,
// language: ['java','js','css']
// }
// // const name = person.name;
// // const age = person.age;
// // const language = person.language;
// //新语法
// const {name:abc, age, language} = person;
// console.log(abc,age,language);
// //字符串扩展
// let str ="hello.vue";
// console.log(str.startsWith("hello"));
// console.log(str.endsWith(".vue"));
// console.log(str.includes("e"));
// console.log(str.includes("hello"));
// //字符串模板
// let ss =
// `
// <div>
// <span>Hello World</span>
// </div>
// `;
// console.log(ss);
//字符串插入变量和表达式。变量名写在${}中，在${}中可以放入JavaScript表达式。注意符号是·不是单引号
function fun(){
return "这是一个函数";
}
let abc = "zhangsan";
let age = 20;
let info = `我是${abc},今年${age+10}岁了，我想说:${fun()}`;
console.log(abc,age,info);
</script>
</body>
</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>
// //在SE6，我们无法给一个函数参数设置默认值，只能采用变通写法；
// function add(a, b){
// //判断是否为空，为空就给默认值1
// b = b || 1;
// return a + b;
// }
// console.log(add(10));
// //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
// function add2(a, b = 1){
// return a + b;
// }
// console.log(add2(10));
// //不定参数
// function fun(... values){
// console.log(values.length);
// }
// console.log(fun("1111","22",33));
// //箭头函数
// // var print = function (obj){
// // console.log(obj);
// // }
// // console.log(print("Hello"));
// //现在写法，一个参数
// var print = obj => console.log(obj);
// print("China")
// //多个参数
// var sum = function(a, b){
// return a + b;
// }
// console.log(sum(1,9));
// var sum2 = (a, b) => a+b;
// console.log(sum2(1,9));
// //以前写法
// var sum3 = function(a, b){
// c = a +b; //多了一步操作
// return a + c;
// }
// console.log(sum3(1,9));
// //新写法
// var sum4 = (a, b) =>{
// c = a + b;
// return a + c;
// }
// console.log(sum4(1,9));
//实战：箭头函数结合解构表达式
const person = {
name: "jack",
age: 20,
language: ['java','js','css']
};
function hello(person){
console.log("你好："+person.name);
}
hello(person);
var hello2 = (person)=>console.log("你好哟："+person.name);
hello2(person);
//箭头函数+解构表达式
var hello3 = ({name})=>console.log("你好哟："+ name);
hello3(person);
</script>
</body>
</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>
// const person = {
// name: "jack",
// age : 20,
// fun : ['jva','css','html']
// };
// console.log(Object.keys(person));
// console.log(Object.values(person));
// console.log(Object.entries(person));
// const a ={aa: 1};
// const b ={bb: 2};
// const c ={cc: 3};
// console.log(Object.assign(a,b,c));
// //声明对象简写
// const name ="zhangsan";
// const age =10;
// const person = {name, age};
// console.log(person);
// //对象大的函数属性简写
// let person = {
// name: "jack",
// //以前
// eat: function(food){
// console.log(this.name+ "在吃"+ food);
// },
// //箭头函数this不能使用
// eat2: food => {
// console.log(this.name+ "在吃"+ food);
// },
// eat3: food => {
// console.log(person.name+ "在吃"+ food);
// },
// eat4(food){
// console.log(person.name+ "在吃"+ food);
// }
// }
// person.eat("香蕉");
// person.eat2("苹果");
// person.eat3("草莓");
// person.eat3("芒果");
//对象拓展运算符
//1、拷贝对象(深拷贝)
let p1 = {name: "zhangsan", age: 19};
let p2 = {... p1};
console.log(p2)
//2、合并对象
const a ={name: "lisi"}
const b = {age: 20};
//后面的name会覆盖之前的name
let person = {name: "wangwu"};
person = {...a, ... b};
console.log(person);
</script>
</body>
</html>
五、map和reduce
<!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>
//数组中新增了map和reduce方法。
//map():接收一个函数，将原数组中的所有袁术用这个函数处理后放入新数组返回。
let arr = ['1','2','-3','4'];
// arr = arr.map((item)=>{
// return item * 2;
// });
arr = arr.map(item => item*2);
console.log(arr);
//reduce()为数组中的每一个袁术一次执行回调函数，不包括数组中被删除或从未被赋值的元素。\
//arr.reduce(callback,[initialValue])
/**
* 1、previousValue(上一次调用回调返回的值，或者是提供的初始值(initialValue))
* 2、currentValue（数组中当前被处理的元素）
* 3、index（当前元素在数组中的索引）
* 4、array（调用reduce的数组）
**/
let result = arr.reduce((a,b )=>{
console.log("上一次处理后："+a);
console.log("当前正在处理："+b);
return a+b;
},100);
console.log(result);
</script>
</body>
</html>
六、promise
<!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>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<!--
案例：用户登录，并展示该用户的各科成绩。在页面发送两次请求：
1. 查询用户，查询成功说明可以登录
2. 查询用户成功，查询科目
3. 根据科目的查询结果，获取去成绩
分析：此时后台应该提供三个接口，一个提供用户查询接口，一个提供科目的接口，一个提
供各科成绩的接口，为了渲染方便，最好响应json 数据。在这里就不编写后台接口了，而
是提供三个json 文件，直接提供json 数据，模拟后台接口：
-->
<script>
//原始写法
// $.ajax({
// url: "mock/user.json",
// success(data) {
// console.log("查询用户：", data);
// $.ajax({
// url: `mock/user_corse_${data.id}.json`,
// success(data) {
// console.log("查询到课程：", data);
// $.ajax({
// url: `mock/corse_score_${data.id}.json`,
// success(data) {
// console.log("查询到分数：", data);
// },
// error(error) {
// console.log("出现异常了：" + error);
// }
// });
// },
// error(error) {
// console.log("出现异常了：" + error);
// }
// });
// },
// error(error) {
// console.log("出现异常了：" + error);
// }
// });
//promise写法
// const promise = new Promise(function (resolve, reject) {
// // 执行异步操作
// if (/* 异步操作成功*/) {
// resolve(value);// 调用resolve，代表Promise 将返回成功的结果
// } else {
// reject(error);// 调用reject，代表Promise 会返回失败结果
// }
// });
// const promise = new Promise((resolve, reject) => {
// // 执行异步操作
// if (/* 异步操作成功*/) {
// resolve(value);// 调用resolve，代表Promise 将返回成功的结果
// } else {
// reject(error);// 调用reject，代表Promise 会返回失败结果
// }
// });
// promise.then(function (value) {
// // 异步执行成功后的回调
// }).catch(function (error) {
// // 异步执行失败后的回调
// })
// new Promise((resolve, reject) => {
// $.ajax({
// url: "mock/user.json",
// success(data) {
// console.log("查询用户：", data);
// resolve(data.id);
// },
// error(error) {
// console.log("出现异常了：" + error);
// }
// });
// }).then((userId) => {
// return new Promise((resolve, reject) => {
// $.ajax({
// url: `mock/user_corse_${userId}.json`,
// success(data) {
// console.log("查询到课程：", data);
// resolve(data.id);
// },
// error(error) {
// console.log("出现异常了：" + error);
// }
// });
// });
// }).then((corseId) => {
// console.log(corseId);
// $.ajax({
// url: `mock/corse_score_${corseId}.json`,
// success(data) {
// console.log("查询到分数：", data);
// },
// error(error) {
// console.log("出现异常了：" + error);
// }
// });
// });
// promise优化处理后写法
let get = function (url, data) { // 实际开发中会单独放到common.js 中
return new Promise((resolve, reject) => {
$.ajax({
url: url,
type: "GET",
data: data,
success(result) {
resolve(result);
},
error(error) {
reject(error);
}
});
})
}
// 使用封装的get 方法，实现查询分数
get("mock/user.json").then((result) => {
console.log("查询用户~~：", result);
return get(`mock/user_corse_${result.id}.json`);
}).then((result) => {
console.log("查询到课程~~：", result);
return get(`mock/corse_score_${result.id}.json`)
}).then((result) => {
console.log("查询到分数~~：", result);
}).catch(() => {
console.log("出现异常了~~：" + error);
});
</script>
</body>
</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>
<!--
模块化就是把代码进行拆分，方便重复利用。类似java 中的导包：要使用一个包，必须先
导包。而JS 中没有包的概念，换来的是模块。
模块功能主要由两个命令构成：`export`和`import`。
`export`命令用于规定模块的对外接口。
`import`命令用于导入其他模块提供的功能。
-->
</body>
</html>
评论 (0)