第六章 :JavaEE项目之“谷粒商城” ----前端基础(ES6)
目录
一、let声明变量
//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 = 1
var m = 2
let n = 3
let n = 4
console.log(m) //2
console.log(n) //Identifier 'n' has already been declared
//var 会变量提升
//let 不存在变量提升
console.log(x); //undefined
var x = 10;
console.log(y); //ReferenceError: y is not defined
let y = 20;
二、const声明常量(只读变量)
//1.声明之后不允许改变
//2.一旦声明之后必须初始化,否则会报错
const a = 1; //1.let.html:39 Uncaught TypeError: Assignment to constant variable.
a = 3;
三、解构表达式
1.数组结构
//1.数组解构
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); //1,2,3
2.对象解构
//2.对象解构
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
// // 传统方式获取值
// const name = person.name;
// const age = person.age;
// const language = person.language;
//解构表达式方式获取值
//const {name,age,language} = person;
//console.log(name,age,language);
//拓展
const {name:abc,age,language} = person;
console.log(abc,age,language);
四、字符串扩展
1.几个新的API
ES6为字符串扩展了几个新的API
- includes(): 返回布尔值,表示是否找到了参数字符串
- startsWith(): 返回布尔值,表示参数字符串是否在原字符串的头部
- endsWith(): 返回布尔值,表示参数字符串是否在原字符串的尾部
//1.字符串扩展
let str = "hello.vue";
console.log(str.includes("e"));//true
console.log(str.startsWith("hello"));//true
console.log(str.endsWith("vue"));//true
console.log(str.includes("hello"));//true
2.字符串模板
模板字符串相当于加强版的字符串,用反引号 ` ,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式
//2.字符串模板
//(1)多行字符串
let ss = `<div>
<span>hello word</span>
</div>; `
console.log(ss);
//(2).字符串插入变量和表达式。变量名写在${}中,
//${}中可以放如JavaScript表达式
let name = "张三";
let age = 18;
let info = `我是${name},今年${age}岁了`;
console.log(info);
//(3).字符串中调用函数
function fun(){
return "这是一个函数"
}
let sss = `hahahahahaha,${fun()}`;
console.log(sss);
五、函数优化
1.函数参数默认值
//1.函数参数默认值
//在ES6以前,我们无法给一个函数参数设置默认值,只能采用变通写法
function add(a,b){
//判断b是否为空,为空就给默认值1
b = b || 1;
return a + b;
}
//传一个参数
console.log(add(10));//11
//现在可以这样写: 直接给参数写上默认值,没传就会自动使用默认值
function add2(a,b=1){
return a + b;
}
console.log(add2(20));//21
2.不定参数
//2.不定参数
function fun (...values){
console.log(values.length)
}
fun(1,2) //2
fun(1,2,3,4) //4
3.箭头函数
ES6中定义函数的简写方式
- 一个参数时:
//3.箭头函数
//一个参数时
//以前声明一个方法
// var print = function(obj){
// console.log(obj);
// }
//新方法
var print = obj => console.log(obj);
print("hello");
//------传统方式定义方法求两数之和---------------------
var sum = function(a,b){
return a + b;
}
//箭头函数写法
var sum2 = (a,b) =>a + b;
console.log(sum2(11,12));
//------传统方式定义方法求三数之和---------------------
var sum3 = function(a,b){
c = a + b;
return a + c;
}
//箭头函数的写法
var sum4 = (a,b) => {
c = a + b;
return a + c;
}
console.log(sum4(10,20));
4.箭头函数结合解构表达式
需求:声明一个对象,hello方法需要对象的个别属性
//需求:声明一个对象,hello方法需要对象的个别属性
const person = {
name:"tom",
age: 16,
language: ['java','js','css']
}
function hello(person){
console.log("hello," + person.name)
}
//箭头函数+解构表达式
var hello2 = ({name}) => console.log("hello," + name);
hello2(person);
六、对象优化
1.新增的API
ES6给Object拓展了许多新的方法,如:
- keys(obj): 获取对象所有的key形成的数组
- values(obj): 获取对象的所有value形成的数组
- entries(obj): 获取对象的所有key和value形成的数组.格式:
[[k1,v1],[k2,v2],...]
- assign(dest,…src): 将多个src对象的值拷贝到dest中。第一层为深拷贝,第二层为浅拷贝
//keys,values,entries..
const person = {
name: "jack",
age: 21,
language: ['java','js','css']
}
console.log(Object.keys(person));
console.log(Object.values(person));
console.log(Object.entries(person));
//assign 方法的第一个参数时目标对象,后面的参数都是源对象
const target = {a:1}
const source1 = {b:2}
const source2 = {c:3}
Object.assign(target,source1,source2);
console.log(target)//{a:1,b:2,c:3}
2.声明对象的简写
//2.声明对象的简写
const age = 23;
const name = "张三";
//传统
const person1 = {age:age,name:name};
console.log(person1);
//ES6 如果对象的属性名与属性值一样,可以简写
const person2 = {age,name};
console.log(person2);
3.对象的函数属性简写
//3.对象的函数属性简写
let person3 = {
name: "jack",
//以前
eat: function(food){
console.log(this.name + "在吃" + food);
},
//箭头函数版,这里拿不到this
eat2: food => console.log(person.name + "在吃" + food),
//简写版
eat3(food){
console.log(this.name + "在吃" + food)
}
}
person3.eat("香蕉")
person3.eat2("香蕉")
person3.eat3("香蕉")
4.对象拓展运算符
用于取出参数对象所有可能遍历属性然后拷贝到当前对象
//4.对象拓展运算符(...)
//用于取出参数对象所有可能遍历属性然后拷贝到当前对象
//*1* 拷贝对象(深拷贝)
let person4 = {name: "Amy",age: 15}
let someone = {...person4}
console.log(someone)//{name: "Amy", age: 15}
//*2* 合并对象--如果对象属性有值,后面的值会覆盖之前的值
let age1 = {age:15}
let name1 = {name: "Amy"}
let perosn5 = {name: "张三"}
let person5 = {...age1,...name1}
console.log(person5)//{age: 15, name: "Amy"}
七、map和reduce
1.map():
//map():接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回
let arr = ['1','20','-5','3'];
//正常
// arr = arr.map((item)=>{
// return item*2;
// })
//简写
arr = arr.map(item=>item*2);
console.log(arr);
2.reduce():
语法:
arr.reduce(callback,[initialValue])
reduce为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被复制的元素,接受四个参数:初始值(或上一次毁掉函数的返回值)、当前元素值、当前索引、调用reduce的数组
callback(执行数组中每个值的函数的,包括四个参数)
1.previousValue(上一次调用回调返回的值,或是提供的初始值(initialValue))
2.currentValue(数组中当前被处理的元素)
3.index(当前元元素在数组中的索引)
4.array(调用reduce的数组)
initialValue(作为第一次调用callback的第一个参数)
//reduce():为数组中的每一个元素一次执行回调函数,不包括数组中被删除或从未被复制的元素
//arr.reduce(callback,[initialValue])
/**
* callback(执行数组中每个值的函数的,包括四个参数)
1.previousValue(上一次调用回调返回的值,或是提供的初始值(initialValue))
2.currentValue(数组中当前被处理的元素)
3.index(当前元元素在数组中的索引)
4.array(调用reduce的数组)
initialValue(作为第一次调用callback的第一个参数)
*
*/
let result = arr.reduce((a,b)=>{
console.log("上一次处理后:" + a );
console.log("当前正在处理:" + b );
return a + b;
});
console.log(result);
八、Promise
1.Promise语法
1.概述:Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象,可以获取异步操作的消息
2.目的: 避免回调地狱的问题、Promise对象提供了简洁的API,使得控制异步操作更加容易
3.Promise有三种状态:pendding //正在请求,rejected //失败,resolved //成功
基础用法:new Promise(function(resolve,reject){ })
4.resolved,rejected函数:在异步事件状态pendding->resolved回调成功时,通过调用resolved函数返回结果;当异步操作失败时,回调用rejected函数显示错误信息
实例:传统多重嵌套方式,很乱很麻烦
//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);
}
})
2.处理异步结果
//--------Promise可以封装异步操作---------------------------------------------------------
let p = new Promise((resolve,reject)=>{
//1.异步操作
$.ajax({
url:"mock/user.json",
success:function(data){
console.log("查询用户成功:",data);
resolve(data);
},
error:function(err){
reject(err);
}
});
})
p.then((obj) => {
return new Promise((resolve,reject)=>{
$.ajax({
url:`mock/user_corse_${obj.id}.json`,
success:function(data){
console.log("查询用户课程成功:",data);
resolve(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){
}
});
})
});
3.Promise改造以前的嵌套方式
//--------Promise可以封装异步操作---------------------------------------------------------
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)=>{
console.log("出现异常:",err)
});
九、模块化
1.什么是模块化
模块化就是把代码进行拆分,方便重复利用。类似java中的导包,要是用一个包,必须先导包。而JS中没有包的概念,换来的是模块。
模块的功能主要由两个命令构成
- export 命令用于规定模块的对外接口
- import 命令用于导入其他模块提供的功能
2.export&import
//*****************hello.js****************************
//1.第一种导出方式
const util = {
sum(a,b){
return a + b;
}
}
export{util}
//-----------------------------------------------------
//2.第二种导出方式
// export const util = {
// sum(a,b){
// return a + b;
// }
// }
//-----------------------------------------------------
//3.第三种导出方式
export default {
sum(a,b){
return a + b;
}
}
//*****************user.js****************************
var name = "jack"
var age = 21
function add(a,b){
return a + b;
}
export{name,age,add}
//*****************main.js****************************
import util from "./hello.js"
import {name,age,add} from "./user"
util.sum(1,2);
console.log(name);
add(1,3);