2.ES6-新特性
程序员文章站
2022-07-16 22:05:02
...
1、let声明变量
//1.var声明的是全局变量,let声明的是局部变量
<script>
//var 声明的变量往往会越域
//let 声明的变量有严格局部作用域
{
var a = 1;
let b = 2;
}
console.log(a);//1
console.log(b);//ReferenceError: b is not defined
</sciprt>
//2.var声明的变量名相同后一个会把前一个的值给覆盖,let不能声明多个相同的变量名。
<script>
//var 可以声明多次
//let 只能声明一次
var n = 1;
var n = 2;
let m = 3;
//let m = 4;
console.log(n);
console.log(m);
</script>
//3.var初始化的时候可以不赋值，let初始化必须赋值。通过1.3看来，可以把var看成Java的成员变量,let看成Java的局部变量。
<script>
//var会变量提升
//let不存在变量提升
console.log(x);//undefined
var x = 10;
console.log(y);//can't access lexical declaration 'y' before initialization
let y = 20;
</script>
2、const声明常量(只读变量)
//相当于Java里面的final
<script>
//let
//1.声明之后不允许改变
//2.一旦声明必须初始化，否则会报错。
const a = 10;
a = 20;
console.log(a);//Assignment to constant variable.
</sciprt>
3、解构表达式
数组解构
<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);
</script>
对象解构
<script>
const persion = {
name: "张三",
age: 20,
language: ['java','ASP.NET','PHP']
}
//以前写法
// const name = persion.name;
// const age = persion.age;
// const language = persion.language;
// console.log(name,age,language);
//现在写法
// const {name,age,language} = persion;
// console.log(name,age,language);
//把name获得的值赋值给abc
const {name:abc,age,language} = persion;
console.log(abc,age,language);
</script>
4、字符串扩展
API
<script>
const es = "hello.es";
console.log(es.startsWith("hello")); //以..为开头
console.log(es.endsWith("es"));//以.为结尾。
console.log(es.includes("h"));//包含,包括
</script>
字符串模板
<script>
//多行字符串
let ss = `
<font color='red'>helloworld</font>
`;
console.log(ss);
//字符串插入变量和表达式。变量名写在${}中，${}中可以放入JavaScript表达式。
const human = {
name : "李四",
age : 20
}
function fun(){
return "好好学习，天天向上";
}
let info = `我叫${human.name},我今年${human.age},我们的口号是${fun()}`;
console.log(info);
</script>
5、函数优化
函数参数的默认值
<script>
//直接给参数写上默认值，每传就会自动使用默认值
function add2(a,b=1){
return a + b;
}
console.log(add2(20));
</script>
不定参数
//相当于Java的新特性可变个数形参
<script>
function argument(...values){
console.log(values.length);
}
argument(5);
argument(1,2,3);
</script>
箭头函数
<script>
//以前声明一个方法
// var print = function(obj){
// console.log(obj);
// }
//现在声明一个方法
var print = obj => console.log(obj);
</script>
6、对象优化
ES6给Object扩展了许多新的方法，如:
-keys(obj): 获取对象的所有key形成的数组
-values(obj): 获取对象的所有value形参的数组
-entries(obj): 获取对象的所有ke和value形成的二维数组。格式:[k1,v1],[k2,v2]
-assign(dest,…src): 将多个src对象的值拷贝到dest中。(第一层为深拷贝，第二层为浅拷贝)
<script>
const persion = {
name: "jack",
age: '20',
language: ['java','c++','php']
}
console.log(Object.keys(persion));
console.log(Object.values(persion));
console.log(Object.entries(persion));
var source = {
boat: '轮船'
};
console.log(Object.assign(persion,source));
console.log(persion);
</script>
声明对象的简写方式
<script>
const name = "张三";
const age = 20;
//以前写法
const persion1 ={name: name,age: age};
console.log(persion1);
//现在写法
//注意这种写法的前提必须保证变量名一致。
const persion2 = {name,age};
console.log(persion2);
</script>
对象函数属性的简写
<script>
const persion={
name:'jack',
//以前
eat: function(food){
return console.log(this.name+"在吃"+food);
},
//现在
eat2(food){
return console.log(this.name+"在吃"+food);
}
}
persion.eat("苹果");
persion.eat2("草莓");
</script>
对象扩展运算符
<script>
//拷贝对象(深拷贝)
let p1 = {name:'jack',age:20};
let p2 = {...p1};
console.log(p2);
//合并对象
let p3 = {language: ['java','php']};
let p4 = {...p1,...p3};
console.log(p4);
</script>
7、数组新增的map和reduce方法
<script>
//map(): 接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回
let arr = ['1','20','7'];
arr = arr.map(item => item*2);
console.log(arr);
//reduce(): 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素。
//[2, 40, -10, 6]
//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>
8、Promise
在JavaScript的世界中，所有代码都是单线程执行的。由于这个"缺陷",导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现。一旦有一连串的ajax请求a,b,c,d…后面的请求依赖前面的请求结果，就需要层层嵌套。这种缩进和层层嵌套的方式，非常容易造成上下文代码混乱，我们不得不非常小心翼翼处理内层函数与外层函数的数据，一旦内层函数使用了上层函数的变量，这种混乱程度就会加剧…总之，这种层叠上下文的层层嵌套方式，着实增加了神经的紧张程度。
案例: 用户登录，并展示改用户的各科成绩。在页面发送两次请求
- 查询用户，查询成功说明可以登录
- 查询用户成功，查询科目
- 根据科目的查询结果，获取成绩
分析:此时后台应该提供三个接口，一个提供用户查询接口，一个提供科目的接口，一个提供各科成绩的接口，为了渲染方便，最好响应json数据，在这里就不编写后台接口了，而是提供三个json文件，直接提供json数据，模拟后台即可:
corse_score_10.json得分
{
"id": 100,
"score": 90
}
user.json 用户
{
"id": 1,
"name": "zhangsan",
"password": "123456"
}
user_corse_1.json 课程
{
"id": 10,
"name": "chinese"
}
promise.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<script>
// //1、查出当前用户信息
// //2、按照当前用户的id查出他的课程
// //3、按照当前课程id查出分数
// $.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);
// }
// });
// //1、Promise可以封装异步操作
// //resovle成功返回
// //reject失败返回
// let p = new Promise((resovle,reject) =>{
// //1.异步操作
// $.ajax({
// url: "mock/user.json",
// success: function(data){
// console.log("查询用户成功",data);
// resovle(data);
// },
// error:function(err){
// reject(error);
// }
// });
// });
//成功操作执行
// p.then((obj)=>{
// return new Promise((resovle,reject)=>{
// $.ajax({
// url: `mock/user_corse_${obj.id}.json`,
// success: function(data){
// console.log("查询用户课程成功",data);
// resovle(data)
// },
// error:function(err){
// reject(err);
// }
// });
// })
// }).then((data)=>{
// $.ajax({
// url: `mock/corse_score_${data.id}.json`,
// success: function(data){
// console.log("查询课程得分成功",data);
// },
// error:function(err){
// }
// });
// })
//简化
function get(url, data) { //自己定义一个方法整合一下
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: data,
success: function (data) {
resolve(data);
},
error: function (err) {
reject(err)
}
})
});
}
get("mock/user.json")
.then((data) => {
console.log("用户查询成功~~~:", data)
return get(`mock/user_corse_${data.id}.json`);
})
.then((data) => {
console.log("课程查询成功~~~:", data)
return get(`mock/corse_score_${data.id}.json`);
})
.then((data)=>{
console.log("课程成绩查询成功~~~:", data)
})
.catch((err)=>{ //失败的话catch
console.log("出现异常",err)
});
</script>
</body>
</html>
9、模块化
1、什么是模块化
模块化就是把代码进行拆分，方便重复利用。累成java中的导包: 要使用一个包，必须先导包。而JS中没有包的概念，换来的是模块。
模块功能主要由两个命令构成: export 和 import
- export 命令用于规定模块的对外接口
- import 命令用于导入其他模块提供的功能。
2、export
user.js
const util = {
sum(a,b){
return a + b;
}
}
function add(a,b){
return a + b;
}
export{name,age,add}
hello.js
//第一种方法
export const util = {
sum(a,b){
return a + b;
}
}
//{}批量导入
//export 不仅可以到处对象，一切JS变量都可以导出。比如: 基本类型变量、函数、数组、对象
//第二种方法
//export{util}
//第三种
//导出的时候没有名字，导入的时候就可以随便起名
export default{
sum(a,b){
return a + b;
}
}