typora-copy-images-to: img
一、Vue 快速入门
1.1、Vue的介绍
-
Vue是一套构建用户界面的渐进式前端框架。
“渐进式框架”简单的来说, 就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。Vue不强求你一次性接受并使用它的全部功能特性。
-
只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
MVC:
model, 模型层
view, 视图层
controller 控制层
-
通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。
-
特点
易用：在有HTML,CSS, JavaScript的基础上，快速上手。
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能：20kb运行大小、超快虚拟DOM、最省心的优化。
1.2、Vue的快速入门
- 开发步骤
- 下载和引入vue.js文件。
- 编写入门程序。
视图：负责页面渲染，主要由HTML+CSS构成。
脚本：负责业务数据模型（Model）以及数据的处理逻辑。
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>快速入门</title> </head> <!-- 1. 下载和引入vue.js文件。 2. 编写入门程序。 视图：负责页面渲染，主要由HTML+CSS构成。 脚本：负责业务数据模型（Model）以及数据的处理逻辑。 --> <body> <!-- 视图 --> <div id="div"> {{msg}} </div> </body> <script src="js/vue.js"></script> <script> /* 脚本 */ /* 1. 创建Vue的核心对象 a. new Vue(js对象) b. js对象 = {name : value,name : value} let jsObj = { name : "张三", age : 18, speak : function () { console.log(this.name); } } 2. vue对象的属性说明 a. el (element) : 选择器 指定视图区域 ,此区域下的所有表达式,事件等内容都会受到vue的控制 b. data : 数据 这里设置的数据是初始化数据, 可以被引用 这里的数据改变,引用的地方也会改变 3. 视图使用的一个表达式: 插值表达式 {{表达式}} 目前,表达式写的是data中的变量名,效果是引用此变量 */ let v = new Vue({ el:"#div", data:{ msg : "传智播客" } }) </script> </html>
1.3、Vue快速入门详解
-
Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。
let vm = new Vue({ 选项列表; }); -
选项列表
1. el选项：指定的vue控制区域。(根据选择器获取) 2. data选项：用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。 3. methods选项：用于定义方法。方法可以直接通过对象名调用，this代表当前Vue对象。 -
数据绑定
在视图部分获取脚本部分的数据: (插值表达式) {{变量名}}
1.4、Vue快速入门的升级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快速入门升级</title>
</head>
<body>
<!-- 视图 -->
<div id="div">
<div>姓名：{{name}}</div>
<div>班级：{{classRoom}}</div>
<button onclick="hi()">打招呼</button>
<button onclick="update()">修改班级</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
/*
* 脚本
* */
let vm = new Vue({
el:"#div",
data:{
name:"张三",
classRoom:"传智播客"
},
methods:{
method01:function () {
console.log(this.name + "在" + this.classRoom + "学习2")
},
method02(){
console.log(this.name + "在" + this.classRoom + "学习3")
}
}
})
function hi() {
// console.log(vm.name + "在" + vm.classRoom + "学习");
// vm.method01()
vm.method02()
}
function update() {
//data中的数据更新了,引用此数据的视图也会更新
vm.classRoom = "黑马程序员"
}
</script>
</html>
1.5、Vue小结
- Vue是一套构建用户界面的渐进式前端框架。
- Vue的程序包含视图和脚本两个核心部分。
- 脚本部分
- Vue核心对象。
- 选项列表
- el：接收获取的元素。
- data：保存数据。
- methods：定义方法。
- 视图部分
- 数据绑定：{{变量名}}
1.6、Vue相关api的自动提示
在idea中设置里面进行配置
@tap,@tap.stop,@tap.prevent,@tap.once,@click,@click.stop,@click.prevent,@click.once,@change,@change.lazy,@change.number,@change.trim,v-model,v-for,v-text,v-html,v-if,v-else-if,v-else,v-pre,v-once,v-bind,scoped
将上述内容放到如下idea的配置中：
二、Vue 常用指令
vue的常用指令都是作用在视图上面的，即标签上面的。
2.1、指令介绍
-
指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。
-
使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。
-
常用指令
2.2、文本插值
-
v-html：把文本解析为 HTML 代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本插值</title> </head> <body> <!-- v-html：把文本解析为 HTML 代码。 备注: 插值表达式,v-text指令 都不能解析html标签(纯文本) --> <div id="div"> <div>{{msg}}</div> <div v-html="msg"></div> <div v-text="msg"></div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ msg:"<h1>Hello Vue</h1>" } }); </script> </html>
2.3、绑定属性
-
v-bind：为 HTML 标签绑定属性值。
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绑定属性</title> <style> .my{ border: 1px solid red; } </style> </head> <body> <div id="div"> <!-- 插值表达式不能写在属性中!!! --> <a href="{{url}}">百度一下 </a> <br> <!-- v-bind：为 HTML 标签绑定属性值 v-bind:属性名="data变量" --> <a v-bind:href="url">百度一下</a> <br> <!-- v-bind 可以省略不写 --> <a :href="url">百度一下</a> <br> <!-- 也可以绑定其他属性 --> <div class="my">我是div</div> <div :class="cls">我是div</div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ url:"http://www.baidu.com", cls:"my" } }); </script> </html>
2.4、条件渲染
-
v-if：条件性的渲染某元素，判定为true时进行渲染,否则不进行渲染。
-
v-else：条件性的渲染。
-
v-else-if：条件性的渲染。
-
v-show：根据条件展示某元素，区别在于切换的是display属性的值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>条件渲染</title> </head> <body> <div id="div"> <!-- 判断num的值，对3取余 余数为0显示div1 余数为1显示div2 否则显示div3 --> <div v-if="num % 3 == 0">div1</div> <div v-else-if="num % 3 == 1">div2</div> <div v-else>div3</div> <div v-show="flag">div4</div> <!-- v-if v-show 他们俩虽然都是控制元素是否显示，但是底层的原理不一样 v-if 如果条件为false，页面中根本没有这个元素 v-show如果条件为false，页面中有这个元素只不过它的display属性值为none --> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ num:1, flag:false } }); </script> </html>
2.5、列表渲染
-
v-for：列表渲染，遍历容器的元素或者对象的属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表渲染</title> </head> <body> <div id="div"> <ul> <!-- v-for：列表渲染，遍历容器的元素或者对象的属性。 --> <!-- 1. 类似于增强for循环 a. 遍历数组 names:["张三","李四","王五"] element : 每次遍历出来的元素 names : 被遍历的数组 --> <li v-for="element in names"> {{element}} </li> <!-- b. 遍历对象 student:{ name:"张三", age:23 } --> <li v-for="element in student"> {{element}} </li> <!-- 2. 类似于普通for循环 (元素,索引) in 被遍历的数组 --> <li v-for="(element,index) in names"> 元素:{{element}},索引:{{index}} </li> <li v-for="(element,index) in student"> 元素:{{element}},索引:{{index}} </li> </ul> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ names:["张三","李四","王五"], student:{ name:"张三", age:23 } } }); </script> </html>
2.6、事件绑定
-
v-on：为 HTML 标签绑定事件。
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件绑定</title> </head> <body> <div id="div"> <div>{{name}}</div> <!-- v-on：为 HTML 标签绑定事件 1. 完整 v-on:事件名="函数调用" 2. 简略 @事件名="函数调用" --> <button onclick="change2()">以前_改变div的内容</button> <button v-on:click="change()">单击_改变div的内容</button> <button v-on:dblclick="change()">双击_改变div的内容</button> <button @click="change()">简写_改变div的内容</button> </div> </body> <script src="js/vue.js"></script> <script> let vm = new Vue({ el:"#div", data:{ name:"黑马程序员" }, methods:{ change() { this.name = "传智播客" } } }); function change2() { vm.change() } </script> </html>
2.7、表单绑定
-
表单绑定
v-model：在表单元素上创建双向数据绑定。 -
双向数据绑定
更新data数据，页面中的数据也会更新。(单向)
更新页面数据，data数据也会更新。 -
MVVM模型(Model,View,ViewModel)：是MVC模式的改进版
在前端页面中，JS对象表示Model，页面表示View，两者做到了最大限度的分离。
将Model和View关联起来的就是ViewModel，它是桥梁。
ViewModel负责把Model的数据同步到View显示出来，还负责把View修改的数据同步回Model。
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单绑定</title> </head> <body> <div id="div"> <form autocomplete="off"> <!-- 单向绑定 1. 数据模型改变 -> 视图会改变 2. 视图改变 不会造成 数据模型改变 --> 姓名_单向绑定：<input type="text" name="username" :value="username"> <br> <!-- 双向绑定 1. 数据模型改变 -> 视图会改变 2. 视图改变 -> 数据模型改变 --> 姓名_双向绑定：<input type="text" name="username" v-model="username"> <br> 年龄：<input type="number" name="age" v-model="age"> 性别:<input type="text" name="gender" v-model="gender"> </form> <span>{{age}}</span> <hr> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ username:"张三", age:23, gender:"男" } }); </script> </html>
2.8、小结
-
指令：是带有v-前缀的特殊属性，不同指令具有不同含义。
-
文本插值
v-html：把文本解析为HTML代码。 -
绑定属性
v-bind：为HTML标签绑定属性值。完整 v-bind:属性名=“data变量”
省略 :属性名=“data变量”
-
条件渲染
v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。
v-else-if：条件性的渲染。
v-show：根据条件展示某元素，区别在于切换的是display属性的值。 -
列表渲染
v-for：列表渲染，遍历容器的元素或者对象的属性。 -
事件绑定
v-on：为HTML标签绑定事件。完整 v-on:事件名=“vue对象中的函数调用”
省略 @事件名=“vue对象中的函数调用”
-
表单绑定
v-model：在表单元素上创建双向数据绑定。
三、Vue的生命周期
3.1 生命周期
3.2 生命周期的八个阶段
3.3 代码(了解)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生命周期</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
//创建Vue之前，el data message选项都是未定义
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //undefined
console.log("%c%s", "color:red", "message: " + this.message);//undefined
},
/*
created表示Vue已经创建完毕
data准备好了，视图还没有
这个生命周期一般适合于去服务器请求数据，设置到data中，让视图去引用
*/
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
//挂载之前已经将视图加载到vue中，但是数据还没有挂载到视图中
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red", "el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
//挂载之后将data中的数据显示到视图中
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
//更新前，只有更新的时候会执行，不更新不会执行
beforeUpdate: function() {
console.group('beforeUpdate 更新前状态===============》');
//使用js代码获取更新前的标签文本，还是旧文本
let dom = document.getElementById("app").innerHTML;
console.log(dom);
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
//更新之后
updated: function() {
console.group('updated 更新完成状态===============》');
//使用js代码获取更新后的标签文本，是新文本
let dom = document.getElementById("app").innerHTML;
console.log(dom);
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
//只有执行销毁方法时才会有销毁生命周期，销毁会将销毁前和后显示的内容全部销毁
//销毁前
beforeDestroy: function() {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
//销毁后
destroyed: function() {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
}
});
// 更新data中message数据值
vm.message = "hehe";
// 销毁Vue对象
//$destroy()表示销毁方法
// vm.$destroy();
// vm.message = "hehe";// 销毁后 Vue 实例会解绑所有内容,更新无效
</script>
</html>
3.4 运用场景
生命周期，掌握常用的 created方法！！！
- 此方法是 data初始化完成, 页面标签数据初始化之前执行的方法
- 通常在此方法中，我们会发起后台数据请求，在渲染页面标签数据之前，先获取后台数据，进行data 数据的模型赋值！
created生命周期应用场景：我们在该生命周期中可以进行准备数据即可，然后在后面的生命周期mounted挂载后会将之前准备好的数据自动挂载到视图中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生命周期</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<div v-for="name in list">
{{name}}
</div>
<hr>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
message:"好友列表",
list:[] //用户信息的集合
},
methods:{
queryUsers(){
//向后台发起查询，将查询数据放到data中list中
//模拟后台查询用户数据放到list中
this.list=["张三","李四","王五"];
console.log("哈哈")
}
},
// data初始化完成, 页面标签数据初始化之前执行的方法
// data初始化之后，但是视图还没有加载
//vue实例创建完成后要来执行的一个生命周期的方法
created(){
//一般我们在这个方法中去对数据进行初始化，比如调用queryUsers方法从后台查询初始数据对list变量赋值
this.queryUsers();
}
});
</script>
</html>
四、Vue异步请求【案例演示】
4.1 Vue中发送异步请求【axios发送】
-
在Vue中发送异步请求，本质上还是AJAX。我们可以使用axios这个插件来简化操作！
-
使用步骤
1.引入axios核心js文件。2.调用axios对象的方法来发起异步请求。
3.调用axios对象的方法来处理响应的数据。 -
axios常用方法
回调函数：回过头来调用的函数，回调函数都是我们负责书写，不负责调用，都是底层帮助我们调用。
-
代码实现
vue代码发送ajax请求
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>异步操作</title> <script src="js/vue.js"></script> <!-- TODO: 引入axios核心js文件 --> <script src="js/axios-0.18.0.js"></script> </head> <body> <!-- 视图 --> <div id="div"> {{name}} <button @click="send()">发起get请求</button> <br> <button @click="send2()">发起post请求</button> </div> </body> <script> new Vue({ el:"#div", data:{ name:"张三", age:18 }, methods:{ send(){ //TODO: 用axios发起异步请求 /* 1. get请求 1). get参数 : 是请求地址+请求参数 2). then参数: 响应成功的回调 -> 箭头函数(其实java中的lambda表达式) 3) catch参数: 响应失败的回调 */ axios.get("/testServlet?name="+this.name+"&age="+this.age) .then(resp=> {alert(resp.data) //响应体数据 }).catch(error => { alert(error) // 一般是tomcat发的,可以自己设置 }) }, send2(){ /* * 2. post请求 * */ axios.post("/TestServlet", "name=" + this.name + "&age=" + this.age).then(resp=>{ alert(resp.data) }).catch(error=>{ alert(error) }) } } }); </script> </html>TestServlet
@WebServlet("/testServlet") public class TestServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); String name = request.getParameter("name"); String age = request.getParameter("age"); // int i = 1/0; System.out.println(name + "," + age); response.getWriter().print("hello"); } }
4.2 Vue处理后端响应的数据【axios发送】
需求: 当访问页面加载好之后,从服务器上请求联系人数据,显示到网页上
vue代码发送ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异步请求案例</title>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<!--
案例: 当页面加载好之后,从服务器上请求联系人数据,显示到网页上
-->
<div id="div">
<!-- 数据显示在users里面 -->
<!--
v-for="user in users" 这里的users表示vue中data的users选项名，属于数组类型
user表示从json对象数组中取出每个user对象
-->
<div id="users" v-for="user in users">
id={{user.id}},name={{user.name}},password={{user.password}}
</div>
</div>
</body>
<script>
new Vue({
el:"#div",
data:{
users:[] //此数据要从服务器获取 [{"id":1,"name":"张三","password":"abc"},{},{}]
},
methods:{
findAllUsres(){
//TODO: 发起一个异步请求
axios.get("testServlet2").then(resp=>{
// console.log(typeof resp.data) // json对象(数组)
// console.log(resp.data);
this.users = resp.data
}).catch(error=>{
alert(error)
})
}
},
// data初始化,视图还没初始化
// 适合在这里发起请求,获取服务器数据
created(){ // 生命周期函数
this.findAllUsres();
}
});
</script>
</html>
testServlet2
@WebServlet("/testServlet2")
public class TestServlet2 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 获取请求
//2. 业务处理: 查询所有用户
User user1 = new User(1, "张三", "abc");
User user2 = new User(2, "李四", "def");
User user3 = new User(3, "王五", "ghi");
ArrayList<User> list = new ArrayList<>();
Collections.addAll(list,user1,user2,user3);
String json = new ObjectMapper().writeValueAsString(list);
response.setContentType("text/html;charset=utf-8");
response.getWriter().print(json);
}
}
User实体类
public class User implements Serializable {
private Integer id;
private String name;
private String password;
public User() {
}
public User(Integer id, String name, String password) {
this.id = id;
this.name = name;
this.password = password;
}
// 省略set/get方法
// 省略toString()
}
五、ES6新语法
1.介绍
我们之前在学习js的时候了解js包括三个内容：
1.ECMAScript 核心语法
2.BOM:浏览器对象模型
3.DOM:文档对象模型
我们之前学习的核心语法几乎都是es5之前的，现在我们在实际开发中对于es6的使用越来越多，所以我们接下来会学习一些关于es6的常用语法。
学习es6网址：
http://es6.ruanyifeng.com/
2.let定义变量
在es6前定义变量使用var,但是具有作用域问题，
所以从es6开始我们定义变量都使用let。let没有作用域问题。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
//es5
/* function test(bool) {
if(bool){
var a='Hello world!';
}
console.log("test方法内部执行，变量的值："+a);
}
//执行
test(true);*/
</script>
<script>
//es6
function test2(bool) {
//成员变量声明
// var a;
if(bool){
//赋值
// var a='Hello world!';//变量泄露
let a='Hello world!';//变量私有，类似于java的private效果
}
//看不到let定义在代码块里面的变量
console.log("test2方法内部执行，变量的值："+a);
}
//执行
test2(true);
</script>
</html>
3.const定义常量
常量是不能被改变的，相当于java中被final修饰的变量。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
//定义常量
const username='Rose';
//会报错：常量不能更换引用
// username='Jack';
console.log(username)
</script>
</html>
4.模板字符串
简化字符串的拼接
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
//es5
let username='Rose';
//变量需要拼接
console.log('姓名是：'+username);
//es6
//使用反引号(esc下面的按键)，可以直接打印变量的值，表达式类似于java的el表达式
//在反单引号中使用${变量名}获取值
//定义变量
let i = 10;
console.log(`姓名是：${username},年龄是:${i}`);
</script>
</html>
说明：${变量名}的写法必须是在反单引号中书写，不仅仅可以获取字符串变量，也可以获取其他类型的变量。
5. 函数的参数默认值(了解)
在之前我们调用js中的有参数的函数如果不传递数据，那么输出形参名是undefined。
从es6开始为了避免这种现象我们引入函数的参数默认值的新语法。
function(变量名=数值){ }
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
function show(username){//undifined
console.log(username);
}
//给函数的形参username的一个默认值 'Jack'，如果调用show1函数不传递值，那么使用默认值Jack
//如果传递值，那么传递的值就会覆盖默认值,Rose
function show1(username='Jack'){
console.log(username);
}
//传参后，使用传入的值
// show('Rose');
//没有传参（undifined），自动使用默认值
// show();
// show1();
show1('Rose');
</script>
</html>
6.箭头函数(掌握)
类似于java中的lambda写法，简化js中定义函数的。主要可以省略关键字function。
1.箭头函数：
es6定义函数：使用箭头函数。
let fn=(a,b)=>{
函数体中使用变量a和b
}
2.简化格式：
如果函数体只有一句话，可以省略：1）return 2）大括号 3）分号
es5：定义函数：
function fn(a,b){}
let fn = function(a,b){}
es6定义函数：使用箭头函数。
let fn=(a,b)=>{
函数体中使用变量a和b
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
//es5
/*let add=function(a,b){
return a+b;
};
console.log(add(100,200));*/
//es6
let add2=(a,b)=>{
return a+b;
};
console.log(add2(100,200));
//es6更简化写法
//如果函数只有一句话，可以省略大括号和return
let add3=(a,b)=>a+b;
console.log(add3(100,200));
</script>
</html>
7. 对象初始化简写
创建对象格式：
function people2 (name,age){
return {
//如果key的名字和变量参数名一致，则可以简化写
name,
age
}
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
//es5
function people (username,age){//username='Rose',age=18
return {
username:username,
age:age
}
}
//打印
console.log(people('Rose',18));
//es6
function people2 (username,age){
return {
//如果key的名字和变量参数名一致，则可以简化写
username,
age
}
}
//打印
console.log(people2('Jack',88));
</script>
</html>
8.解构
解构：就是简化遍历获取对象和数组的数据。
1.获取对象：
const people={username:'Rose',age:18};
const {username,age}=people;//要求等号左边大括号中的变量必须和等号右边对象中key一致
console.log(username + "," + age);
2.获取数组：
const color = ['red', 'blue'];
const [first,second]=color;//等号左边中括号中的变量随便定义
console.log(first);
console.log(second);
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
//目标：从json对象中取值
const people = {username: 'Rose', age: 18};
//es5
//好处，直观；缺点：如果你要取多个值就代码多了一些
/* let username=people.username;
let age = people.age;
console.log(username + ' --- ' + age);*/
//es6
//等号左边的大括号中的变量必须和等号右边对象中的key一致
//例如：等号左边的username，那么等号右边people中的key必须有username
// const {username,age}=people;
// const {age,username}=people;
const {age} = people;
// console.log(username + "," + age)
console.log(age);
//
//数组
const color = ['red', 'blue'];
//es5
// let first = color[0];
// console.log(first);//'red'
// //es6
//等号左边中括号中的变量随便定义
const [first,second]=color;
console.log(first);
console.log(second);
</script>
</html>
9. 延展操作符
作用：对原来的js对象和数组进行数据的扩展。（类似可变参数）
1.扩展js对象：
const peopleOld={username:'Rose',age:18};
const peopleNew={...peopleOld,address:'上海'};
2.扩展数组：
const colorOld=['red', 'yellow'];
const colorNew=[...colorOld,'blue'];
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
//目标：扩展对象的值
//原来的对象
const peopleOld={username:'Rose',age:18};
//需要重新生成一个对象，并基于之前的对象扩展
const peopleNew={...peopleOld,address:'上海'};
console.log(peopleOld);//{username: "Rose", age: 18}
console.log(peopleNew);//{username: "Rose", age: 18, address: "上海"}
//原来的数组
const colorOld=['red', 'yellow'];
//需要重新生成一个数组，并基于之前的数组扩展
const colorNew=[...colorOld,'blue','green'];
console.log(colorOld);//["red", "yellow"]
console.log(colorNew);// ["red", "yellow", "blue", "green"]
</script>
</html>
10.数组的扩展
map（）方法 映射类型
reduce(function(a,b),初始值（可选）) 方法 对数组元素进行指定操作，例如：运算
1)转换函数：
let arr = ['1','20','-5','3'];
//将数组中的每个数据进行转换
arr = arr.map(s => window.parseInt(s));
2.reduce(function(a,b),初始值（可选）) ：
//let arr = [1,20,-5,3]; 逐一处理
1）let x = arr.reduce((a, b) => a+b); //等价于 1+20+(-5)+3 x=19
2）let y =arr.reduce((a, b) => a+b, 1);//等价于 1+1+20-5+3 y= 20
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
/*
* 1. map() 方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个新数组中并返回该新数组。
举例：有一个字符串数组，希望转为int数组
* */
/* let arr = ['1', '20', '-5', '3'];
console.log(arr);
arr = arr.map(s => parseInt(s));
console.log(arr)*/
</script>
<script>
/*
* 2. reduce(function(a,b),初始值（可选）) ：
接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：
- 第一个参数是上一次reduce处理的结果
- 第二个参数是数组中要处理的下一个元素
reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。
如果是 第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数
* */
let arr = [1,20,-5,3];
// 没有初始值
/*
第一次：a等于1 b等于20，执行函数体a+b的结果21，将21作为reduce函数function(a,b)的第一个参数
第二次：a等于21 b等于-5，执行函数体a+b的结果16，将16作为reduce函数function(a,b)的第一个参数
第三次：a等于16 b等于3，执行函数体a+b的结果19，将19赋值给变量a
*/
let a = arr.reduce((a, b) => a+b) ;//等价于 1+20-5+3
// 设置初始值为1
let b =arr.reduce((a, b) => a+b, 1);//等价于 1+1+20-5+3
let c =arr.reduce((a, b) => a*b);//等价于1*20*-5*3
let d =arr.reduce((a,b) => a*b, 0);//等价于 0*1*20*-5*3
console.log(a,b,c,d);//19 20 -300 -0
</script>
</html>
1018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
