javascript百炼成仙
第一章 javascript基础
javascript是大小写敏感的
直接量
常见的直接量有数字,小数,字符串等,并且直接量无法持久存在(像C语言中的给变量赋值的常量)
字符串必须用引号(单引号,双引号)引起来
数据类型
变量声明: 定义一个变量指向一个直接量
Javascript中,数据分为两类:原生数据类型(primitive type)和对象数据类型(object type)
原生数据类型: 数字,字符串,布尔值,还有两个特殊的类型null和undefined
null: 表示数据为空
undefined: 定义了一个变量但是没有赋值,该变量会指向undefined
对象是存放数据的容器, 函数是应用程序处理某一个系列逻辑的一个过程
null是一个特殊的关键字,表示没有值;null也是一个原始值. undefined是一个顶级属性,它代表某一个变量未定义。同样,undefined也是一个原始值。
对象数据类型
类似c语言里的结构体
对象数据类型是一种复合型的数据类型,它可以把多个数据放到一起,里面的每一个数据都可以看作是一个单元,它们都有自己的名字和值。
# 创建一个对象,对象中的内容以键值对的形式存在
var container = {};
# 通过某个变量的值访问对象的属性
var container = {
caoyao : "解毒草",
feijian: "乌木剑"
}
var prop = "caoyao"
console.log(container[prop])
循环遍历
单步调试时,执行到for语句时,由于for语句里有定义循环变量的过程,会在for语句执行两步
遍历对象
判断数据类型, 使用关键字typeof
var yeXiaoFan = {
name : "叶小凡",
age : 16,
eat : function() {
console.log("KFC");
}
}
# 遍历出对象的属性
for(var p in yeXiaoFan){
console.log(p)
}
# 获取对象属性的值
for(var p in yeXiaoFan){
console.log(yeXiaoFan[p])
}
Javascript运算符
加减乘除, 取余, 自增自减运算符
javascript运算从左到右
Javascript数组
这里的数组类似python里的列表或集合
# 定义数组
# 第一种
var arr = ["first", "second", "third"];
# 第二种,使用构造函数创建数组对象
var a = new Array();
# 第三种
var a = new Array(8);
# 数组内容为[<8 empty items> ]
# 第四种
var a = new Array("first", "second", "third");
数组只有一个属性,length,表示数组所占内存空间的数目
数组方法
插入: push
删除: pop,splice
splice(数组下标, 删除或替换元素个数[, 插入元素 [, 插入元素]])
javascript编译原理
javascript代码在运行前有一个编译过程
编译过程有三个步骤:
- 分词: 把语句分解成各个部分
- 解析: 对代码块进行解析,得到抽象语法树(AST)
- 代码生成: 将AST转换为可执行的代码
JavaScript代码是没有办法直接运行的,要想运行JavaScript代码,就需要通过JavaScript编译器对其进行编译,只有编译之后的代码才可以被识别,然后通过JavaScript引擎执行代码逻辑
函数
函数定义
# 第一种方法:会提前加载,调用函数位置任意
function myFunction(){
document.write("This is My First Function!<br>");
}
# 第二种方法:不会提前加载,调用函数时必须放在函数定义后面
var a = function(){
document.write("This is My First Function!<br>");
}
作用域
- 全局作用域
- 函数作用域
像控制流,if判断,for循环等大括号里的代码不是作用域
javascript的函数可以嵌套定义
判断变量是否被定义: 在分词或者说词法阶段, JavaScript引擎会把所有变量提取出来,判断当前作用域有没有定义,观察父作用域有没有定义, 如果有父作用域继续查看
参数传递
- 传递的实参个数少于定义的形参数量
从左到右将传递的值分配给形参, 没有分配到的形参就是undefined.
不同类型数据运算的结果是NaN
- 传递的实参个数比定义的形参数量多
默认会将后面多余的值丢弃.如果想要使用多余的值,可以通过函数的参数接收数组arguments
闭包
没有函数名的函数称为匿名函数
闭包的条件:
- 在函数内部嵌套定义了一个函数
- 函数里面的函数用到了外部函数的局部变量
- 外部函数把内部函数作为返回值return出去
闭包的意义: 闭包可以使外部函数的局部变量不随着函数调用的结束而销毁, 相当于全局作用域定义的变量.就不用为了某个功能,定义一个全局变量,可以考虑使用闭包.
抹除变量: 在某一个特定的时刻手动将那个变量赋值为null就行了。JavaScript会自动扫描函数中值为null的变量,一旦找到就会自动清除这些无用的变量
自执行函数
自执行函数: 定义后立即执行的函数, 它一般是没有名字的. 因为自执行函数没有名字, 只会执行一次.
# 自执行函数格式,看起来就是调用函数的形式只不过这个函数刚定义
(
function(){
console.log(123);
}
)();
可以将闭包的外部函数定义为自执行函数, 赋值给一个变量, 该变量就获取到了闭包环境下的内部函数.
"NEW"一个函数
this永远指向当前函数的调用者
# 在全局作用域里面定义的任何东西,不管是一个变量还是一个函数,其实都是属于window对象的
# 调用hello函数
window.hello()
window["hello"]()
function hello(){
console.log(this);
}
# 函数内部产生了一个新的对象,并且this指向了这个对象
# 这里的函数也叫做构造函数
new hello();
基本数据类型之外,其他都属于引用数据类型. 用c语言知识理解就是,就是除了基本数据类型,其他全是指针
回调函数
把一个函数的定义当作参数传递给另一个函数
第二章 基础考核
精度问题
小数加减运算会丢失精度
0.1+0.2=0.3000000***4
解决方法: 1. 将所有小数获取到小数点后位数后, 同时乘以10的n次方, 将所有小数变为整数, 获取到结果后再除就行 2. 写个算法,实现字符串的四则运算
# 数字转字符串
num = num.toString();
小数乘除运算会丢失精度
1.001*1000= 1000.9999999999999
# 字符串转整数
var num = parseInt(num);
第三章 jQuery和DOM
HTML
超链接: 给a标签设置一个target属性。如果target="_blank",则表示命令浏览器打开一个新的页面,在新的页面上跳转。如果不写target属性,则默认是从当前页面进行跳转。
表单元素
标签: form
jQuery简介
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。
jQuery封装了JavaScript常用的功能代码,提供了简便的JavaScript API,优化了HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE
6.0+、FF1.5+、Safari2.0+、Opera 9.0+等。
Javascript可以识别的东西–DOM元素
Ajax是异步的JavaScript和ML的简称,利用它可以开发出非常灵敏、无刷新的网页,特别是在开发服务器端网页时,比如PHP网站,需要往返地与服务器通信,如果不使用Ajax,则每次更新数据时不得不重新刷新网页,而在使用Ajax后,可以对页面进行局部刷新,提供动态的效果。
jQuery选择器
CSS选择器: ,ID选择器是唯一的,就是不同元素之间ID属性的值不能相同。
jQuery操作DOM
链式调用
# 使函数能够调用另一个函数
var myFunction = function(){
return {
func0: function(){
console.log("func0");
return this;
},
func1: function(){
console.log("func1");
return this;
}
}
}
myFunction().func0().func1();
创建新的元素
jQuery的工厂函数$(): 当向这个函数传入一段HTML代码时,jQuery会自动解析这一段HTML,然后创建对应的DOM节点,最后将这个DOM节点的jQuery对象返回出去。
# 创建元素
# 注意: 同一个字符串中的单双引号问题
var newLi = $("<li id='a5'>新的法宝</li>");
or
var newLi = $("<li id=\"a5\">新的法宝</li>");
# 添加元素到HTML
//添加法宝到ul中
var newLi = $("<li id=\"a5\">新的法宝</li> ");
newLi.appendTo( $('ul') );
or
$('ul').append($("<li id= \"a5\">新的法宝</li> "));
# 替换HTML中的元素
$('ul').html($("<li id= \"a5\">新的法宝</li> "));
删除和隐藏节点
- remove方法: 删除节点
- hide方法: 隐藏节点
# 移除id为a1的元素
<script>
$(document).ready(function(){
$('#a1').remove();
});
</script>
# 隐藏id为a1的元素
<script>
$(document).ready(function(){
$('#a1').hide();
});
</script>
# 重新显示a1节点
$('#a1').show();
jQuery操作属性
# 获取元素属性
var id = $('#a1').attr('id');
# 修改元素属性
$('#a1').attr('id','a2');
alert($('#a2').attr('id'));
# 添加多个元素属性
$('#a1').attr({'name':'spanDom','title':'我是ID为a1的元素'});
# 移除元素属性
$('# a1').removeAttr('name');
内容操作
html方法和text方法都有两种使用方式:1.不传入参数,获取元素内部的html代码或者文本内容2.传入参数,替换内容。
- html方法: 把HTML代码的字符串动态地插入目标元素内部,所以页面上的DOM结构中会真的
新增这些HTML代码,哪怕之前它们还只是字符串。 - text方法: 设置和获取元素的文本内容的,也就是说,即便你在里面写上html标签,它也会被当成文本处理。
- val方法:操作元素的值,传入参数,就是重新给这个元素赋值,不传参数的话,就是获取这个值的元素
带标签的html代码,然后用text方法获取元素的文本内容,又会怎样呢: text方法会过滤掉元素内容里面的html标签,打印出来的只有文本内容
遍历和寻找节点
- children方法: 获取某个元素的下一代子元素,但不包括孙子辈的元素。该方法只沿着DOM树向下遍历单一层级。
- parent方法
- prev方法: 前一个兄弟节点
- next方法:后一个兄弟节点
- siblings方法: 获取所有的兄弟节点
第四章 vue的妙处
数据绑定
# html中引入vue
<script type= "text/javascript" src= "js/vue.min.js"> </script>
vue框架的含义最基本的就是定义了vue对象,可以基于这个模板新建对象
Vue使用方法的第一步是获取Vue的库,这个库可以从网上下载到本地,也可以直接用网上的在线链接,一般建议将其下载下来。
<script src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js">
</script>
查看引入的vue是否引入成功: 按F12键打开“调试”窗口,单击Network标签下面的js查看运行结果是否有vue.mine.js
# v-model=“message”代表input输入框绑定了数据message
<input type= "text" v-model= "message">
表单元素数据绑定步骤:
绑定页面表单显示数据和vue里的data属性中定义的变量
- 编写html, 创建页面
- 引入vue, 并创建vue对象,规定了vue作用的范围,并在vue对象中定义数据变量
- 通过添加页面元素属性绑定vue中定义的数据变量
示例页面元素绑定vue中的变量: 在input元素上设置一个叫作v-model的属性,v-model的属性值需要与data里面对应的数据变量一致
<input v-model= "username" type= text name= user size= 16 />
<input v- model= "password" type= password name= pwd size=16 />
经过上述的绑定过程, 在输入框修改值, vue中的变量会变化; vue中定义的变量初始值变化, 输入框显示的值也会变化
非表单元素数据绑定:
与表单元素不同,不能使用v-model属性进行绑定
- v-text属性
- 双大括号
如果想要显示HTML代码,则可以用v-html标签
创建vue对象
new Vue({})表示创建一个Vue对象,这是必须写的,目的是让这个页面的元素交给Vue统一管理
# 创建vue对象时,传入的参数是json对象
# el类似选择器,这里是标签选择器, 如果是id选择,需要加'#'
new Vue({
el: 'table',
data: {
username: 'jack',
password: '88888888'
}
})
这行代码的含义是告诉Vue我现在要对这个页面上的一个叫作table的标签进行全面管控了。从此,该页面的第1个table标签(其实只有一个)就会被纳入Vue的管理之下了。而里面的data属性,它的值又是一个json对象,设置了2个键值对,分别为username和password,并且给出了默认值。这就是告诉Vue,在table里面,我声明了2个数据变量,分别为username和password。
事件绑定
事件监听
表单组件的一些事件:
- 焦点事件: 鼠标点击输入框
- 输入框值变化事件: 输入框输入
- 失去焦点事件: 鼠标指针离开输入框点击其他部分
传统的一种事件监听方式: onclick属性
在Vue中,则可以使用v-on:事件名称的方法进行事件绑定。
# 当选中某一个输入框的时候,就给这个输入框添加一个外边距margin
<input v-on:focus="handleFocus" :style="userNameStyle" v-model="username" type=text name= user size=16 />
# handleFocus是一个函数的名字,在Vue中,所有的处理函数都需要
在methods属性里面设置
methods:{
handleFocus: function(){
this.userNameStyle={
margin: '16px'
};
}
}
# userNameStyle需要在vue对象中的data中定义
# 增加失去焦点,去掉边框的事件
<input v-on:focus="handleFocus" v-on:blur="handleBlur" :style="userNameStyle" v-model="username" type=text name= user size=16 />
handleBlur: function(){
this.userNameStyle={};
}
Vue还提供了一种简便的事件监听写法,就是用“@”。比如,我们需要绑定一个单击事件,可以写v-on:click,还可以简写成@click。这两种事件绑定的方式是等效的。
:style的写法是Vue属性绑定
事件冒泡
事件冒泡: 父子组件都定义了事件, 在触发子组件的事件后, 默认会继续触发父组件的事件
这种默认行为可以通过事件修饰符改变, 事件冒泡也是一种事件修饰符
# .stop事件修饰符停止事件冒泡
<input type= submit value= '登录' @click.stop="btnClick">
事件修饰符:
- .prevent :阻止提交。我们知道,form表单组件和a链接组件都会导致页面刷新和跳转。如果不希望页面刷新,则可以加上.prevent以阻止这种默认的刷新操作。注意:.prevent只对form和a标签有效。
- .capture:优先触发,比如,如果不阻止冒泡,而在父组件上添加这个修饰符,则会优先触发父组件事件,然后触发子组件的事件,这就是一个优先级的调整
- .self:仅单击元素本身时,只允许元素自己触发,子元素无法触发。在父组件上添加这个修饰符,当单击父组件的部分(不单击子组件)时,就会只触发外层事件,不会触发子组件的事件 - 默认行为
- .once:只触发一次事件
条件语句
# isLogging为false时, 按钮显示登录, 点击按钮触发事件
<input v-if="!isLogging" type=submit value="登录" @click="btnclick" />
# 事件函数修改isLoggin的值, 点击按钮按钮变成登录中...
<input v-else type=submit value="登录中..." />
# 一般在事件函数中还会有一个事件完成的函数, 表示事件完成开发者编写事件完成要做的事
判断this是哪个对象即判断函数的调用者是谁: 由函数在哪里定义决定, 一般由默认使用的函数都是在window对象中定义的,因此这些函数里使用this时, this就是window
由于不同函数的调用者可能不同, 需要获取正确调用者的技巧:
- 在可以获得正确调用者的地方用一个对象接收调用者, that=this, 并在相同作用域内使用that
- 在之前定义定义想要使用对象如var vue=new vue({…}), 然后直接用vue.xxx获取或修改属性或方法
循环语句
# select的属性role对应编号, vue中定以role就是默认的选项编号
# option的value就是用来选中的
<select v-model="role">
<option v-for ="role, index in roleList" value =" role.value" >
{{index+1}}.{{role.label}}
</option>
</select>
<option v-for ="role in roleList" value ="role.value" >
{{role.label}}
</option>
属性绑定
# 让属性可以使用vue中定义的变量
<option v-for ="role, index in roleList" v-bind:value =" role.value" >
{{index+1}}.{{role.label}}
</option>
<option v-for ="role, index in roleList" :value =" role.value" >
{{index+1}}.{{role.label}}
</option>
组件开发
写在Vue的components属性里面。components属性是和data与methods平级的,代表当前Vue对象的局部组件
自定义组件
# 定义一个局部组件
componets:{
'coolBtn': {
template:"<input value='按钮名称' type='button' style=\"background: deepskyblue; color: #fff; border: none; padding: 2px 10px; border-radius: 6px; margin: 2px 6px; \">"
}
}
# 使用新组件
# 对于驼峰式的命名的组件,在调用时需要格外注意在每次要
换成大写字母的地方都需要额外添加一个半字线(-),然后大写字母
还是转变成小写字母,
<cool-btn> </cool-btn>
自定义组件可接收属性
# 给组件定义可以接收的属性, 如name
componets:{
'coolBtn': {
props: ['name'],
template:"<input :value='name' type='button' style=\"background: deepskyblue; color: #fff; border: none; padding: 2px 10px; border-radius: 6px; margin: 2px 6px; \">"
}
}
# 给自定义组件传属性
<cool-btn name= "登录"> </cool-btn>
value是普通的属性,:value是受到Vue支配的属性
组件添加属性时, 这个属性在组件中有定义, 因此可以用vue属性; 在页面中想要有vue属性, 表示想要绑定在vue对象定义的变量
# 绑定登录变量
<cool-btn :name= "登录"> </cool-btn>
# 传入字符串'登录'
<cool-btn :name= "'登录'"> </cool-btn>
自定义组件事件
methods:{
login:function(){
alert("登录成功!");
}
}
# 触发该组件绑定的btn-click事件所对应的来自于父组件的方法
componets:{
'coolBtn': {
props: ['name'],
template:"<input :value='name' @click='defaultClick' type='button' style=\"background: deepskyblue; color: #fff; border: none; padding: 2px 10px; border-radius: 6px; margin: 2px 6px; \">",
methods:{
defaultClick:function(){
this.$emit('btn-click')
}
}
}
}
# 添加组件可触发事件的处理函数为login
<cool-btn :name="'登录'" @btn-click="login"> </cool-btn>
btn-click是子组件约定的,只要触发btn-click事件,子组件就会相应地触发内部的defaultClick。
添加属性样式
<script>
.primary {background: #409eff;}
.danger {background: #f56c6c;}
.success {background: #67c23a;}
.warning {background: #e6a23c;}
</script>
new Vue({
methods:{
login:function(){
alert("登录成功!");
}
}
})
# 触发该组件绑定的btn-click事件所对应的来自于父组件的方法
componets:{
'coolBtn': {
props: ['name', 'type'],
template:"<input :value='name' :class='type' @click='defaultClick' type='button' style=\"background: deepskyblue; color: #fff; border: none; padding: 2px 10px; border-radius: 6px; margin: 2px 6px; \">",
methods:{
defaultClick:function(){
this.$emit('btn-click')
}
},
create:function(){
if(!this.type){
this.type='primary'
}
}
}
}
# 添加组件可触发事件的处理函数为login
<cool-btn :name="'登录'" :type="'success'" @btn-click="login"> </cool-btn>
这个组件因为是在当前页面的Vue对象里面定义的,所以只有在这个页面才能使用。
全局组件
就是将组件的代码写到一个js文件中, 想要用时先引用js文件就可以用了
Vue.componet(
'coolBtn', {
props: ['name', 'type'],
template:"<input :value='name' :class='type' @click='defaultClick' type='button' style=\"background: deepskyblue; color: #fff; border: none; padding: 2px 10px; border-radius: 6px; margin: 2px 6px; \">",
methods:{
defaultClick:function(){
this.$emit('btn-click')
}
},
create:function(){
if(!this.type){
this.type='primary'
}
}
}
);
新建一个coolBtn.js,然后把这些代码复制进去
# 使用前引用Vue库文件,然后引用组件文件
<script type= "text/javascript" src= "js/coolBtn.js" > </script>
计算属性
# 与methods,data平级
new Vue({
computed:{
payment:function(){
var today = new Date();
//1.先获取今天的日期
var month = today.getMonth()+1;
var day = today.getDate();
//2.计算返利金额
var rebate = 0;
if(month == 11 && day == 11)
{
if(this.price >= 400){
rebate = 150;
}
else if(this.price >= 200){
rebate = 50;
}
}
// 3.计算折后金额
return this.price * this.discount - rebate;
}
}
})
# 调用计算属性
<span style= "color: # F00;">成交价: {{payment}}元</span>
监听属性
# 与methods,data平级
# 监听属性值, 设置不同的状态
new Vue({
watch: {
progressNum: function(val){
if(this.progressNum >= 100){
this.progressNum = 100;
this.msg = '完成';
return;
}
var background = 'red';
if(this.progressNum >= 80){
background = 'green';
this.msg = '差一点点'
}
else if(this.progressNum >= 50){
background = 'orange';
this.msg = '有改善咯'
}
}
this.spanStyle = {
width: this.progressNum+'px',
background:background
}
}
})
过滤器
显示指定内容
# vue代码
filters: {
dateFormat: function(val){
return val.getFullYear() + '-' + (varl.getMonth()+1) + '-' + val.getDate();
}
},
# html代码
# 使用过滤器
<div id="app">
今天是:{{today | dateFormat}}
</div>
指定样式显示
filters: {
boxStyle: function(val){
return "<span style='display:inline-block;padding:6px 10px; background:pink'>" + val + "</span>"
}
}
# html代码
# 使用过滤器, v-html可以解析html
<div id="app">
<span v-html= "today|dateFormat| boxStyle"> </span>
</div>
# 但Vue从2.0版本开始就不再支持在v-html中使用过滤器了,但可以把过滤器当成一个普通方法进行调用。
<span v - html ="$options.filters.boxStyle($options. filters.dateFormat(today))"></span>
所有过滤器都会被挂在$options.filters对象上
直接用双大括号也可以使用过滤器.
全局过滤器类似之前的全局组件, 使用Vue.filter()传入定义的过滤器和对应方法就行.
第五章 Vue-cli项目
首先需要安装Node.js
npm发布模块
npm仓库中存储js代码, 像之前编写的组件就可以放进npm仓库中
- name是模块的名字,就叫它yeXiaoFan。
- version是版本号,默认是1.0.0,随着模块的日益精细化和完善,还可以升级版本号。
- description代表模块的描述
- main代表模块的启动文件,一些复杂的模块可能会使用到一些其他资源,但是模块的启动文件,或者说入口只能有一个
- scripts字段定义脚本命令
# 生成打包配置文件
npm init
exports对象:导出函数,把hello这个函数作为导出模块的一部分exports.hello=hello。
运行package.json中的脚本
# package.json定义脚本
"scripts" : { "dev": "node yeXiaoFan" }
# 执行脚本
npm run dev
node.js运行js文件可以直接
node xxx.js
发布模块
# 1. 添加在官网注册的用户
npm adduser
# 2. 发布到官网
npm publish
npm安装模块
# 安装模块
npm install yexiaofan
安装模块后,会在目录下生成node_modules目录和package-lock.json文件
在当前目录下创建main.js作为项目的入口文件.
# 导入模块
var yexiaofan = require("yexiaofan");
yexiaofan.hello();
由于浏览器中的库函数即alert直接用node运行时没有定义, 上面的代码运行错误.
Vue-cli搭建项目
Vue-cli就是进行Vue组件化开发的一个脚手架。脚手架可以帮你生成一个项目模板,在什么文件夹里面放什么资源都是定义好的。
# 全局安装vue-cli
cnpm install -g @vue/cli@3.0.1
# vue-cli的原型工具
cnpm install -g @vue/cli-service-global@3.0.1
# vue-cli创建项目, 会自动创建项目模板
vue create vue-project
项目模板介绍:
- public里面有两个文件,一个是favicon.ico,这是项目的图标。另一个是index.html,这是项目的初始页面。这个页面有一个根节点,是一个div,id为app。Public文件夹是默认生成的,这个文件夹主要用来放置一些公共资源
- src: ,assets文件夹:用Vue脚手架生成的项目;components文件夹:存放项目中的一些公共组件,以方便具体的页面调用。HelloWorld.vue文件: 示例公共组件文件; App.vue: 示例项目代码; main.js:项目的入口文件,import导入vue和App.vue组件,在代码的最后,创建了全局的Vue对象,渲染的目标是‘#app’,也就是刚才看到index.html里面的那个div
vue文件就是一种容纳了js、css和html的文件格式 : 其中template标签是组件的页面代码,script就是写JavaScript代码的地方,最后是style标签,很明显,这里是写CSS代码的地方。
箭头函数就是普通函数的一种简便写法吧,h是render函数接收的参数,h本身是一个回调函数
第六章 ES6语法
变量定义
- let定义变量, 在原来作用域的基础上实现了块级作用域
- const修饰只读变量
const NAME1 = '张三';
变量的解构赋值
解构赋值的作用是把获取对象中的方法以及赋值给对应变量的过程一次性做完。
let Person={
eat: function|(){
console.1og(“我在吃饭 1“);
}
sleep: function(){
console.1og(“我在睡觉 10“)
}
}
let {eat,sleep} = Person;
# 由于Person没有name属性, 打印出undefined
let {eat,sleep,name} = Person;
console.log(name);
# 设定name的默认值
let {eat,sleep,name = "一个神秘的杠精"} = Person;
console.log(name);
还可以用于定义函数的形参给定默认值, 及时不传参数也形参也会有值
字符串升级
字符串可迭代
let str="我爱你中国!";
for(let s of str){
console.log(s);
}
这里用的是of,而不是in。如果用in,则获取的是每个字符对应的下标
字符串加强
定义多行字符串,以及在字符串中加入变量和表达式
let name="张三";
let sayHi='你好啊,${name}
一起来happy啊!'
console.log(sayHi);
字符串处理函数
- padStart:返回新的字符串,表示用参数字符串从头部(左侧)补全原字符串
- padEnd:返回新的字符串,表示用参数字符串从尾部(右侧)补全原字符串
上面方法需传递两个参数: 第一个参数是指定生成的字符串的最小长度,第二个参数是用来补全的字符串。如果没有指定第二个参数,则默认用空格填充。
porxy处理
在支持Proxy的浏览器环境中,Proxy是一个全局对象,它可以被直接使用。
Proxy(target,handler)是一个构造函数,target是被代理的对象,handlder是声明了各类代理操作的对象,最终返回一个代理对象。
let obj={
name:'keke’,
age: 28
}
let objProxy= new Proxy(obj,{
set(target, key, value){
1f(key=='age'&& typeof value!="number'){
throw new Error(`Invalid attempt to set${key} to"
S{value}": not number!`);
}
return target[key]= value;
},
get(target, key, receiver){
return target[key];
}
})
objProxy.age="28"
console.log(obj)
这里的代理类似系统调用, 对输入进行校验并抛出异常
强化后的数组
构建新数组
- 类数组对象:一种可以遍历的对象,只要对象有length属性,而且有诸如0、1、2、3这样的属性
- Array.of方法: 将参数中的所有值作为元素而形成数组,参数值可以是不同类型,如果参数为空时,则返回空数组
- Array.from:将类数组对象或可迭代对象转化为数组
from方法还可以接收第二个参数,就是一个map回调函数,用于对每个元素进行处理,放入数组的是处理后的元素
let listData={
O:'keke',
1:'jerry',
length: 2
}
# 将每个元素加上'---'
listData= Array.from(listData, function(item){
return item+'---'';
});
console.log(listData)
快速复制数组
# 以用“...”的方式快速复制一个数组
let newListData = [...listData];
强化后的函数
箭头函数
格式:
函数名: (参数列表) => {}- 没有函数名----
(参数列表) => {} - 参数只有一个----
参数=>{} - 没有参数------
函数名:_=>{}
# (name)为参数表列
# 箭头指向函数体
let sayhi=(name)=>{
console.1og("你好,${name}!")
}
sayhi(“小可爱)
# 没有参数用_替代
let person={
getName:_=>{
return"keke";
}
}
console.log(person.getName())
箭头函数体中的this对象是定义函数时的对象,而不是使用函数时的对象。
# 返回undefined
let person={
name:'Tony’,
getName:_=>{
return this.name;
}
}
Tips:只要使用了箭头函数,就不要管这个函数本身了,在外面寻找最近的大括号,然后看这个大括号处在怎样的环境中,this就指向它!
如果函数体仅仅是一个简单的return语句,那么函数体的大括号和return关键字都可以省略。
# 箭头函数用this
let person={
name:'Tony’,
getName:_=>{
return this.name;
},
sayHi(){
setTimeout:_=>{
console.1og("你好啊, ${this.name}");
}
}
}
不一样的对象
- 定义与对象属性相同的值
let obj={
name:name
}
console.log(obj)
# 新的写法
let obj = {name}
- 对象属性值为已定义变量的值
# 错误写法
let key="name';
let obj= {
key:"一位神秘的杠精"
}
# 用“.”或者用“[]”获取对象的属性
let key="name';
let obj= {
[key]:"一位神秘的杠精"
}
promise对象和async函数
异步编程: 有些指令在某些事件触发时才执行
promise对象
let gift= null;
new Promise((resolve, reject)=>{
setTimeout(_=>{
gift=“一台小小螺旋机“
resolve(gift)
}, 2000);
}).then(gift=>{
console.log('我收到了礼物:'+gift)
})
promise对象在创建的时候分别接收了2个内部的函数钩子:resolve(已完成)和reject(已拒绝),如果是完成,则触发后面的then方法;如果是拒绝,则触发catch方法。
promise对象就是一种承诺,在必要的时候,它会告知外部本次异步操作已经完成或者拒绝
async函数
let getGiftAsync==5
return new Promise((resolve, reject)=>{
setTimeout(=>{
if(Math.random()<0.2){
let gift=“一台小小螺旋机“
resolve(gift)
}else{
let gift=null
reject(gift)
}
},2000);
})
}
async function executeAsyncFunc(){
let gift= await getGiftAsync();
console.log(gift)
}
executeAsyncFunc();
只有加上了async关键字的函数,内部才可以使用await关键字。async是ES7才提供的与异步操作有关的关键字,async函数执行时,如果遇到await就会先暂停执行,等到触发的异步操作完成后,才会恢复async函数的执行并返回解析值。
扫一扫
3929
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
