javascript
闭包(closures)
当某个函数需要调用另一个函数内部变量的时候,你就需要用到闭包。比如最经典的点击每个li显示其index。阮大神说,闭包最简单的理解就是:定义在一个函数内部的函数(戳这里)。
1 | // =>3 |
call和apply
call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,即为了改变函数体内部 this 的指向。call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。当你的参数是明确知道数量时,用 call,而不确定的时候,用 apply,然后把参数 push 进数组传递进去。
1 | obj.myFunc(); |
对象(object)
js里面所有东西都是对象。把new命令引入了Javascript,用来从原型对象生成一个实例对象。更好的理解对象可以参考阮大神的这篇。
1 | // 1,Dog是一个构造函数,表示狗对象的原型。 |
原型和原型链
1,每个对象有个prototype属性,指向自己的原型对象,原型对象有个constructor属性指向它的构造函数。
js链式作用域
1,js中当遇到对变量名或者函数名的使用时,会首先在当前作用域查找变量或者函数,如果没有找到,就会到其上层作用域中寻找,并以此类推。
2,js中上层对象中的变量和函数对其子对象都是可见的。
1 | var x = 1; |
继承
1 | function Animal() {} |
判断Javascript对象是否为空
1 | var a = {}; |
Array
slice()
:把数组中一部分的浅复制存入一个新的数组对象中,并返回这个新数组,不改变原数组。(包含begin,不包含end)
1 | var a = [1,2,3,4]; |
fill()
:将一个数组中指定区间的所有元素的值, 都替换成或者说填充成为某个固定的值。(具体要填充的元素区间是 [start, end) , 一个半开半闭区间)
1 | var a = [1,2,3,4]; |
join()
:将数组中的所有元素连接成一个字符串。
1 | var a = [1,2,3,4]; |
concat()
:将传入的数组或非数组值与原数组合并,组成一个新的数组并返回。
1 | var a = ['a','b']; |
forEach()
:让数组的每一项都执行一次给定的函数。
1 | var a = [1,2,3]; |
indexOf()
:返回给定元素能找在数组中找到的第一个索引值,否则返回-1
1 | var a = [1,2,3]; |
String
split()
:把字符串分割成子字符串数组。
1 | var a = 'hello'; |
charAt()
charAt()
:返回字符串中指定位置的字符
1 | var a = 'hello world'; |
indexof()
indexof()
:与数组类似
match()
match()
:当字符串匹配到正则表达式时,返回一个包含匹配结果的数组,如果没有匹配项,则返回 null
1 | var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; |
substring()
substring(indexStart,indexEnd)
:返回字符串中从指定位置开始到指定长度的子字符串,[indexStart,indexEnd)
1 | var a = 'abcdefg'; |
slice()
slice()
:类似数组
js异步编程
1,callback回调函数
1 | fs.readFile('test.txt', (err, data) => { |
2,Promise对象
用来传递异步操作的消息,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。把你的异步操作用Promise对象包装一下,这样就规范化了异步的处理流程,然后通过 then 和 catch 来分别注册成功回调函数和失败回调函数。
对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败), 只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
状态一旦改变,再改变就不起作用了。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected。
Promise 无法取消,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出的错误的不会向上传递。
1 | // Promise对象是一个构造函数,用来生成Promise实例。 |
3,Generator + yield
整个 Generator 函数就是一个封装的异步任务,或者说是异步任务的容器。异步操作需要暂停的地方,都用 yield 语句注明。返回一个 Promise 对象yield命令是异步两个阶段的分界线,协程遇到 yield 命令就暂停,等到执行权返回,再从暂停的地方继续往后执行。
4,async + await
async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句。
es6/7
1,let声明的变量只在代码块内有效,块级作用域,for循环的计数器就适合let,let声明变量没有变量提升,不允许重复声明。
2,::this.fn => this.fn.bind(this)
1 | // 属性方法的简写 |
3,Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。
1 | var target = { a: 1 }; |
4,数据结构Set类似于数组,但是成员的值都是唯一的,没有重复的值。是一组key的集合,但不存储value
1 | var set = new Set([1, 2, 3, 4, 4]); |
5,Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应。
6,对于数组来说,for…in循环读取键名,for…of循环读取键值。for…in循环主要是为遍历对象而设计的,不适用于遍历数组。对于普通的对象,for…of结构不能直接使用,会报错。
1 | var arr = ['a', 'b', 'c', 'd']; |
7,遍历器(Iterator),Array、Map和Set都属于iterable类型。具有iterable类型的集合可以通过新的for … of循环来遍历。
8,箭头函数体内的 this 对象,就是定义时所在的对象,而不是使用时所在的对象, 原因是箭头函数没有自己的 this。
9,类(Class),继承
1 |
|
10,模块
es6之前,服务器端Node.js 使用CommonJS, 浏览器端主要使用AMD, AMD最流行的实现是RequireJS.
es6模块是动态引用,遇到模块加载命令import时,不会去执行模块,只是生成一个指向被加载模块的引用,需要开发者自己保证,真正取值的时候能够取到值。
react
1,ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。
2,React.createClass 方法就用于生成一个组件类。组件类的第一个字母必须大写,组件类只能包含一个顶层标签。
3,组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求。
4,DOM diff:所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上。
redux
reducer
把一个component想干的事情弄成action,dispatcher会为不同的action调用不用的store中的reducer,store真正管理着component的状态。
npm scripts
1 | "scripts": { |
JSON
JSON.parse() 方法可以将一个 JSON 字符串解析成为一个 JavaScript 值。
1 | // 单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常 |
JSON.stringify() 方法可以将任意的 JavaScript 值序列化成 JSON 字符串。
1 | var a = {a:1,b:2}; |
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
1 | eval("x=10;y=20;console.log(x*y)"); // 200 |
选择器优先级
!important > 内联样式 > ID 选择器 > 伪类(:hover li:nth-child) > 属性选择器([type=”radio”]) > 类选择器 > 元素(类型)选择器(p) > 通用选择器
js 数据类型
基本类型:String、Number、Boolean
引用类型:Object、Array
特殊类型:Null、Undefined
事件捕获,事件冒泡,事件委托
一个元素1中又嵌套了另一个元素2,并且两者都有一个onClick事件处理函数(event handler),如果用户单击元素2,则元素1和元素2的单击事件都会被触发。
当你使用捕获型事件时,元素1的事件处理函数首先被触发,元素2的事件处理函数最后被触发。
当你使用冒泡型事件时,元素2 的处理函数首先被触发,元素1其次。
W3C 模型,首是进入捕获阶段,直到达到目标元素,再进入冒泡阶段。
addEventListener():捕获阶段绑定函数:true,在冒泡阶段绑定函数:false
在支持w3c dom(文档对象模型) 的浏览器中,默认被视为在绑定于冒泡阶段
1 | // doSomething1 doSomething2 |
事件委托
当鼠标点击某一li时,alert输出该li的内容。
1 | <ul id="list"> |
1 | window.onload=function(){ |
angular
AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变,AngularJS会立即刷新反映在视图界面中。
ng-app指令标记了AngularJS脚本的作用域。
1 |
|