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：绑定文本数据

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 “……”；//格式化处理

}

使用：

全局过滤器：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会暂停执行，等到触发的异步操作完成后，才会恢复函数执行

Javascript百炼成仙——笔记相关推荐

JavaScript百炼成仙读书笔记
JavaScript百炼成仙作者:剽悍一小兔没事儿的时候多读书还是蛮好的,这本书给我的感觉就像是真的在看修仙人士不断修炼去打怪升级一样,以不一样的视角重新温习了一遍前端的知识,和以往所读的其他书籍 ...
《JavaScript百炼成仙》，简单但是挺有效的
编程之修,重在积累,而非资质.资质虽然重要,可是后天的努力更不可少. <JavaScript百炼成仙>是一本以玄幻小说的形式,来讲述JavaScript的知识. 此篇仅仅是我快速阅读< ...
JavaScript基础笔记集合（转）
JavaScript基础笔记集合 JavaScript基础笔记集合 js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译 js存放的位置 html脚本必须放在< ...
Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
JavaScript学习笔记（五）
JavaScript学习笔记(五) ①Array类本地对象 ②Date类 ①Global对象对象的类型内置对象 ②Math对象宿主对象今天继续学习JS中的对象,昨天内置对象Global对 ...
JavaScript学习笔记（备忘录）
JavaScript学习笔记(备忘录) ===运算符判断数值和类型是否相等.如: console.log('s'==='s') //输出trueconsole.log('1'===1) //输出fa ...
Java程序猿的JavaScript学习笔记（10—— jQuery-在“类”层面扩展）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
JavaScript学习笔记（十）——学习心得与经验小结
JavaScript学习笔记(十)--学习心得与经验小结目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/mixer/archi ...

Javascript百炼成仙——笔记

Javascript百炼成仙——笔记相关推荐

最新文章

热门文章