Javascript百炼成仙——笔记

1.20 作用域

作用域：查找某一个变量的范围

当发生作用域嵌套时，只能里面访问外面的，外面无法访问里面的。作用域嵌套一般针对全局作用域和函数作用域，或者是函数作用域和其他函数作用域。

函数向上寻找外部变量，当找到变量的声明就不会继续往上寻找。

1.21 参数传递

传参的过程相当于给预备变量赋值的过程，没有传参时，预备变量即是undefined。

所有参数会被装载到函数内部arguments里面。参数根据arguments数组进行赋值。

1.22 闭包

产生闭包的条件：

1、函数内部也有一个函数

2、函数内部的函数里面用到了外部函数的局部变量

3、外部函数把内部函数作为返回值return出去了

test（）（）；

第一个括号调用test函数，返回了一个内部函数，第二个括号调用返回的内部函数。

var inner=test（）；

inner（）；

正常情况，函数里面的局部变量会在调用函数结束后销毁；使用闭包，局部变量不随原函数销毁而销毁，而是继续存在。

利用闭包操作可以减少不必要的全局变量。手动赋null值可自动清除无用变量。

1.23 自执行函数

（定义一个匿名函数）（）；

定义之后立即执行，但只会执行一次。

一般可和闭包配合使用，直接得到闭包环境下的内部函数，外部函数只是为了产生闭包环境而临时定义的函数。

var inner=（

​ function（）{

​ var a=123;

​ return function (){

​ console.log(a);

}

}）（）；

inner();//123

1.24 “new” 一个函数

函数里this永远指向当前函数的调用者

对象模板，用函数设计一种对象的共同属性

构造函数首字母大写

函数使用new后会从内部产生新对象，函数内this指向该对象

将基本数据类型赋值给某一个变量，然后将此变量赋值给另一个变量，可看作复制，此时两个变量内存处在不同空间。而引用数据类型会指向同一块内存地址。

1.25 回调函数

函数可以作为另一个函数的参数

function eat（food，callback）{

​ callback（food）；

}

调用时临时编写新函数

eat（‘’肉“，function（food）{

​ alert（“开心地吃”+food）；

}）；

2.3 变量和简单数据类型

简单数据类型：字符串、数值型、布尔型、null、undefined

变量需要用var定义

通过+可以连接字符串

alert是弹窗函数

2.4/2.5 精度问题/化浮为整

0.1+0.2=0.3000000000004

split函数：将字符串通过某种规则和标记符号进行分隔，并返回一个数组

indexOf函数：在字符串中搜索特定字符串，返回检索到的下标，检索失败返回-1

function add（num1,num2){

​ //将数字转换为字符串

​ num1=num1.toString();

​ num2=num2.toString();

​ //判断是否有小数点

​ var a,b;

​ if(num1.indexOf(“.”)!==-1){

​ a=num1.split(".")[1].length;//获取小数点后位数

​ }else{

​ a=0;

​ }

​ if(num2.indexOf(“.”)!==-1){

​ b=num2.split(".")[1].length;//获取小数点后位数

​ }else{

​ b=0;

​ }

​ var max=a;

​ if(a<b){

​ max=b;

}

​ var beishu=1;

​ for(var i=0;i<max;i++){

​ beishu=beishu*10;

}

num1=num1*beishu;

num2=num2*beishu;

//bug：1.001*1000=1000.999999999999999

var sum=(num1+num2)/beishu;

}

replace函数：字符串替换，只能替换第一个匹配项

function add（num1,num2){

​ //将数字转换为字符串

​ num1=num1.toString();

​ num2=num2.toString();

​ var index1=num1.indexOf(“.”)；

​ var index2=num2.indexOf(“.”);

​ //获取小数点位置

​ //如果有小数点，获取小数点后位数

​ var ws1=0;

​ var ws2=0;

​ if(index1!=-1){

​ ws1=num1.split(".")[1].length;

​ }

​ if(index2!=-1){

​ ws2=num2.split(".")[1].length;

​ }

​ var bigger=(ws1>ws2)?ws1:ws2;

​ var smaller=(ws1<ws2)?ws1:ws2;

​ var zerosCount=bigger-smaller;

​ num1=num1.replace(".","");

​ num2=num2.replace(".","");

​ if(ws1==smaller){

​ for(var i=0;i<zeroCount;i++){

​ num1+="0";

​ }

​ }else{

​ for(var i=0;i<zeroCount;i++){

​ num2+="0";

​ }

​ }

​ var sum=parseInt(num1)+parseInt(num2);

​ var beishu=1;

​ for(var i=0;i<max;i++){

​ beishu=beishu*10;

}

sum=sum/beishu;

return sum;

//num1=num1*beishu;

//num2=num2*beishu;

//bug：1.001*1000=1000.999999999999999

//var sum=(num1+num2)/beishu;

}

3.3 jQuery选择器

$('#btn').click()不能放在对应标签上，

除非用 $(document).ready(function(){})监听

3.4 使用jQuery操作dom

var text=$('ul li:eq(1)').text();//后代选择器

var text=$('ul li').eq(1).text();

3.4.3 链式调用

var myFunction=function(){

​ return{

​ func01:function(){

​ console.log("1");

​ return this;

​ },

​ func02:function(){

​ console.log("2");

​ return this;

​ },

​ }

}

var obj=myFunction();

obj.func01().func02();//链式调用

3.4.4

$ ("<li id=\"a5\">新的</li>").appendTo($('ul'));

$('ul').append($ ("<li id=\"a5\">新的</li>"));

html方法：替换目标元素里面所有html

3.4.5 删除和隐藏节点

remove方法：删除页面上的元素

hide方法：隐藏元素，设置display：none

show方法：显示元素，设置display：block（行内元素设置为inline）

3.4.6 jQuery操作属性

attr方法：获取元素属性/设置元素属性。第一个参数是属性名称，第二个参数是新的值。设置多个属性，参数采用键值对形式。

remove方法：删除元素的属性。

3.4.7 内容操作

html、text方法：不传入参数就获取元素内部的html或文本，传入参数则是替换

text会过滤元素内的html标签

给元素加上value属性，可用val方法获取input元素、下拉框、多选框、单选按钮的值

3.4.8 遍历和寻找节点

children方法：获取子元素（无法继续向下查找）

parent方法：获取父节点

prev、next方法：获取兄弟节点

siblings方法：获取所有兄弟元素

4.4 vue 简单数据绑定

v-model：表单组件的双向绑定

v-text：绑定文本数据

{{message}}

4.51 v-on

v-on：行为=“处理函数名” ：事件绑定

简写 @行为

4.5.2 事件冒泡

.stop:阻止事件冒泡 @click.stop=" 子处理函数"，不触发父元素的@click

.prevent：阻止提交，只对form、a有效 阻止form、a标签默认刷新操作

.capture：优先触发 添加在优先触发的事件上

.self：当单击元素本身（非子元素部分），只允许元素自身触发，子元素无法触发。

.once：只触发一次

4.6 条件语句

v-if

v-else

v-else-if

4.9 组件开发

props属性：当前组件可接收的属性

this.$emit('函数名') 子组件调用父组件的方法

4.11 监听属性

属性可以是data中的变量，也可以是props中定义的数据

4.12 过滤器

在vue对象中加入filters过滤器，定义过滤函数

过滤器被挂在$options.filters

filters：{

​ dataFormat：function（val）{

​ return val；//数据格式化处理

​ }

}

使用：{{ today | dataFormat}}

样式过滤器：

filters：{

​ boxStyle：function（val）{

​ return “<span>……</span>”；//格式化处理

​ }

}

使用：<span v-html="$options.filters.boxStyle($options.filters.dataformat(today))"></span>

<span v-html="$options.filters.dataformat(today)"></span>

全局过滤器：Vue.filter(过滤器名字，函数体)

6.1 es6 变量定义

let定义变量，实现块级作用域，内部变量不影响全局

const声明只读常量

6.2 解构赋值

获取对象中的方法以及赋值给对应变量的过程一次性完成

let {eat,sleep}=Person;

let {eat,sleep,name="123"}=Person;//设置默认值

6.3 字符串

ps：字符串允许被当作数组一样使用，可以用下标获取字符串中某个位置的字符

for（let s of str){}；//使用in，则获取每个字符对应的下标；

允许字符串通过for循环遍历

模板字符串：允许用反引号简化字符串定义

let name='zhang'

let sayHi=‘hello，${name}!’

新增api：

padStart（生成字符串的长度，用来补全的字符串默认空格）返回新的字符串，用参数字符串从左补全字符串

padEnd（生成字符串的长度，用来补全的字符串默认空格）返回新的字符串，用参数字符串从右补全字符串

6.4 Proxy代理

Proxy全局对象

Proxy（target，handler）构造函数，target是被代理的对象，handler是声明了各类代理操作的对象，最终返回一个代理对象

Proxy可以拦截get、set对象属性等操作

obj.age="28";//希望获取number，却赋值了string。

给obj生成一个代理，不直接暴露obj，代理对象会对数据进行校验。

6.5 数组

Array.of方法：将参数中的所有值作为元素而形成数组

Array.from方法：将类数组对象或可迭代对象转化为数据，第二个参数是map回调函数，对每个元素进行处理

类数组对象：一种可以遍历的对象，只要对象有length，且有0、1、2、3这样的属性。

新的数组方法：

find：查找元素，返回第一个元素

findIndex：查找元素索引，返回第一个索引

fill：将一定范围索引的数组元素内容填充为单个指定的值

copyWithin：将一定范围索引的数组元素修改为此数组另一指定范围索引的元素

entries：遍历

keys：遍历键名

values：遍历键值

let newListData=[...listData]；//快速复制数组

6.6 函数

箭头函数

（参数）=>{}

参数=>{}

_=>{}

（）=>{}

如果函数体仅仅是一个简单的return语句，那么大括号和return关键字都可以省略

箭头函数里的this对象是定义函数的对象（window），而不是使用函数时的对象。

如果用function定义函数，里面的this会在使用时动态绑定，指向使用函数的对象。

箭头函数里的this指向外面最近的大括号处在的环境，遇到箭头函数继续向上找

6.7 对象

let obj={

​ name：name

}

简写：

let obj={name}

当对象的属性名称是变量

let obj={

​ [keys]："1234"

}

6.8 promise、async

new Promise（（resolve，reject）=>{异步操作}.then(()=>{}).catch(()=>{})）

Promise对象的两个函数钩子：resolve、reject

异步操作resolve后触发then方法，如果是reject则触发catch方法

async是es7提供的关键字，async函数执行时，遇到await会暂停执行，等到触发的异步操作完成后，才会恢复函数执行