JavaScriptの知識まとめ

どちらの演算子も、オペランドが等しい場合は true を返し、それ以外の場合は false を返します

相違点。 :

var data; $.ajax({ ... success: function(data) { data = data } }) console.log(data)

// 只有一个callback的时候 function fn(callback) { setTimeout(function(){ callback && callback() }, 1000) } fn(function(){ console.log(1) }) // 一旦我们多几个呢？ function fn(a){ // 传入a 返回a1 function fn1(a1){ function fn2(a2){ function fn3(a3){ console.log(a3) .... } } } } // 当项目一复杂，这滋味。。。

let promise = new Promise( (resolve, reject) => { setTimeout(function(){ resolve(1) }, 1000) }) promise.then( res => { console.log(res)// 一秒之后打印1 })

const fn = a => { return Promise.resolve(a) } const fn1 = a => { return Promise.resolve(a) } const fn2 = a => { // return Promise.resolve(a) return new Promise( (resolve, reject) => { setTimeout(function(){ resolve(a) },1000) }) } const fn3 = a => { // return Promise.resolve(a) return new Promise( (resolve, reject) => { setTimeout(function(){ resolve(a) },1000) }) } fn(123) .then(fn1) .then(fn2) .then(fn3) .then( res => { console.log(res) // => 123 })

const promise = new Promise( (resolve, reject) => { setTimeout(function(){ resolve(222) }, 1000) }) console.log(111) promise.then( res => { console.log(res) }) console.log(333)

const fn = () => { return new Promise( (resolve, reject) => { setTimeout(function(){ resolve(222) }, 1000) }) } (async function(){ console.log(111) let data = await fn() console.log(data) console.log(333) })() // 是不是返回 111 => 222 => 333 了呢 // 我们来试下返回别的东西， 不返回 promise const fn = () => { return new Promise( (resolve, reject) => { setTimeout(function(){ resolve(222) }, 1000) }) } (async function(){ console.log(111) let data = await fn() console.log(data) console.log(333) })() // 打印结果： 111 => null => 333 => 222 // 当我们不是在await 关键字后面返回的不是 promise 对象时， 它就不会在原地等待 promise执行完再执行， 而是向正常的JS一样执行，把异步任务跳过去

const fn = () => { let promise = new Promise( (resolve, reject) => { setTimeout(function(){ resolve(222) }, 1000) }) } // 这样是不行的，会报错，因为的await关键字的父函数不是 async 函数 const grand = async () => { return function parent() { let data = await fn() } } // 这样才行，因为await 的父函数 是一个 async 函数 const grand = () => { return async function parent() { let data = await fn() } }

//求和 function add (a, b, c) { return a + b + c } add(1,2,3)

function add (a, b) { return function (c) { return a + b + c } } var sum = add(1, 2) sum(3) sum(4)

var name = "小红" var obj = { name: '小明', fn: function(){ console.log('我是'+this.name) } } setTimeout(obj.fn, 1000) // => 我是小红 // 我们可以用bind方法打印出 "我是小明" setTimeout(obj.fn.bind(obj), 1000) // => 我是小明 // 这个地方就不能用 call 或 apply 了, 不然我们把函数刚一方去就执行了 // 注意: bind()函数是在 ECMA-262 第五版才被加入 // 所以 你想兼容低版本的话 ,得需要自己实现 bind 函数 Function.prototype.bind = function (oThis) { if (typeof this !== "function") { throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable"); } var aArgs = Array.prototype.slice.call(arguments, 1), fToBind = this, fNOP = function () {}, fBound = function () { return fToBind.apply( this instanceof fNOP && oThis ? this : oThis || window, aArgs.concat(Array.prototype.slice.call(arguments)) ); }; fNOP.prototype = this.prototype; fBound.prototype = new fNOP(); return fBound; };

6. callback 、 promise 、 async/await

这三个东西牵涉到的可能就是我们最常见到的 “同步”、“异步”、“任务队列”、“事件循环” 这几个概念了

• 
  

• 例:

  var data; $.ajax({ ... success: function(data) { data = data } }) console.log(data)

  ログイン後にコピー

  ログイン後にコピー

  当我们从服务器获取到数据的时候,为什么打印出来的是undefined ?
  解决这个问题之前我们先来了解javascript的运行环境

  JavaScript是单线程语言，JS中所有的任务可以分为两种：同步任务和异步任务。

• 同步任务:
  意思是我必须做完第一件事,才能做第二件事,按照顺序一件一件往下执行（在主线程上）

• 异步任务:
  假如我第一件事需要花费 10s, 但是我第二件事急着要做, 于是我们就把第一件事告诉主线程，然后主线程暂停先放到某个地方, 等把第二件事完成之后,再去那个地方执行第一件事，第一件事也就可以理解为异步任务

• 任务队列（task queue）:
  任务队列是干嘛的呢; 上面我们说了异步任务的情况, 我们把第一件放到某个地方, 那某个地方是什么地方呢,就是 “任务队列” 这个东西。里面乘放的是所有异步任务。

• Event Loop(事件循环)
  当主线程上面所有同步任务执行完之后，主线程就会向任务队列中读取异步任务（队列方法：先进先出）
  而且是一直重复向任务队列中，即使没有任务。它也会一直去轮询。
  只不过在任务列表里面没有任务的时候， 主线程只需要稍微过一遍就行， 一旦遇到任务队列里面有任务的时候，就会去执行它
  也就是说在我们打开网页的时候，JS引擎会一直执行事件循环，直到网页关闭

  如图所示
  

  由此，上面为什么会产生 undefined的原因了， 因为ajax 是异步任务，而我们console.log(data)是同步任务,所以先执行的同步任务，才会去执行 ajax

  说了这么多，我们来看下 为什么我们很需要 从callback=>promise=>async/await

  因为很多时候我们需要把一个异步任务的返回值，传递给下一个函数，而且有时候是连续的n个

1. callback

   // 只有一个callback的时候 function fn(callback) { setTimeout(function(){ callback && callback() }, 1000) } fn(function(){ console.log(1) }) // 一旦我们多几个呢？ function fn(a){ // 传入a 返回a1 function fn1(a1){ function fn2(a2){ function fn3(a3){ console.log(a3) .... } } } } // 当项目一复杂，这滋味。。。

   ログイン後にコピー

   ログイン後にコピー

2. Promise

• 什么是promise?
  Promise是异步编程的一种解决方案，同时也是ES6的内置对象，它有三种状态:

• Promise方法

• 基本用法

  let promise = new Promise( (resolve, reject) => { setTimeout(function(){ resolve(1) }, 1000) }) promise.then( res => { console.log(res)// 一秒之后打印1 })

  ログイン後にコピー

  ログイン後にコピー

• 我们把上面的回调地狱转换下

  const fn = a => { return Promise.resolve(a) } const fn1 = a => { return Promise.resolve(a) } const fn2 = a => { // return Promise.resolve(a) return new Promise( (resolve, reject) => { setTimeout(function(){ resolve(a) },1000) }) } const fn3 = a => { // return Promise.resolve(a) return new Promise( (resolve, reject) => { setTimeout(function(){ resolve(a) },1000) }) } fn(123) .then(fn1) .then(fn2) .then(fn3) .then( res => { console.log(res) // => 123 })

  ログイン後にコピー

  ログイン後にコピー

  这样就简单明了多了， 我们就不需要一层一层嵌套callback了,可以通过链式调用来解决callback的问题

  然而，仅仅这样还是觉得不够好
  因为这种面条式调用还是让人很不爽，而且 then 方法里面虽然是按先后顺序来的，但是其本身还是异步的
  看下面这段代码

  const promise = new Promise( (resolve, reject) => { setTimeout(function(){ resolve(222) }, 1000) }) console.log(111) promise.then( res => { console.log(res) }) console.log(333)

  ログイン後にコピー

  ログイン後にコピー

  打印结果依然还是 111 => 333 => 222, 并不是我们想象的 111 => 222 => 333
  依然不适合单线程的思维模式。所以下一个解决方案 又出现了

1. Promise.prototype.then() 接收两个函数，一个是处理成功后的函数，一个是处理错误结果的函数。可以进行链式调用

2. Promise.prototype.catch() 捕获异步操作时出现的异常, 一般我们用来代替.then方法的第二个参数

3. Promise.resolve() 接受一个参数值，可以是普通的值， 会返回到对应的Promise的then方法上

4. Promise.reject() 接受一个参数值，可以是普通的值， 会返回到对应的Promise的catch方法上或着then方法的第二个参数上

5. Promise.all() 接收一个参数，它必须是可以迭代的，比如数组。通常用来处理一些并发的异步操作。成功调用后返回一个数组，数组的值是有序的，即按照传入参数的数组的值操作后返回的结果

6. Promise.race() 接收一个可以迭代的参数，比如数组。但是只要其中有一个执行了，就算执行完了，不管是成功还是失败。

7. pending: 进行中

8. resolved: 已完成

9. rejected：已失败

3. async/await
   这是ES7的语法，当然，在现在这种工程化的时代，基本babel编译之后也都是能在项目中引用的

• 基本用法跟规则
  async 表示这是一个async函数，
  await只能用在这个函数里面。后面应该跟着是 Promise 对象， 不跟的话也没关系， 但是await就不会在这里等待了
  await 表示在这里等待promise返回结果

  例：

  const fn = () => { return new Promise( (resolve, reject) => { setTimeout(function(){ resolve(222) }, 1000) }) } (async function(){ console.log(111) let data = await fn() console.log(data) console.log(333) })() // 是不是返回 111 => 222 => 333 了呢 // 我们来试下返回别的东西， 不返回 promise const fn = () => { return new Promise( (resolve, reject) => { setTimeout(function(){ resolve(222) }, 1000) }) } (async function(){ console.log(111) let data = await fn() console.log(data) console.log(333) })() // 打印结果： 111 => null => 333 => 222 // 当我们不是在await 关键字后面返回的不是 promise 对象时， 它就不会在原地等待 promise执行完再执行， 而是向正常的JS一样执行，把异步任务跳过去

  ログイン後にコピー

  ログイン後にコピー

• await关键字必须包裹在async函数里面，而且async函数必须是它的父函数

  const fn = () => { let promise = new Promise( (resolve, reject) => { setTimeout(function(){ resolve(222) }, 1000) }) } // 这样是不行的，会报错，因为的await关键字的父函数不是 async 函数 const grand = async () => { return function parent() { let data = await fn() } } // 这样才行，因为await 的父函数 是一个 async 函数 const grand = () => { return async function parent() { let data = await fn() } }

  ログイン後にコピー

  ログイン後にコピー

7. 柯里化 与 反柯里化

• 柯里化
  函数柯里化就是对高阶函数的降阶处理。
  柯里化简单的说,就是把 n 个参数的函数,变成只接受一个参数的 n 个函数
  function(arg1,arg2)变成function(arg1)(arg2)
function(arg1,arg2,arg3)变成function(arg1)(arg2)(arg3)
function(arg1,arg2,arg3,arg4)变成function(arg1)(arg2)(arg3)(arg4)

• 柯里化有什么作用

• 例:

  //求和 function add (a, b, c) { return a + b + c } add(1,2,3)

  ログイン後にコピー

  ログイン後にコピー

  如果我只改变 c 的值,在求和
  add(1,2,4)是不是得多出重新计算 a + b 的部分
  我们是不是可以提前返回a+b的值， 然后只传入 c 的值进行计算就行了
  修改一下方法

  function add (a, b) { return function (c) { return a + b + c } } var sum = add(1, 2) sum(3) sum(4)

  ログイン後にコピー

  ログイン後にコピー

  在此基础上我们在做下修改

  function add (a) { return function (b) { return function (c) { return a + b + c } } }

  ログイン後にコピー

  这样我们是不是可以随时复用某个参数，并且控制在某个阶段提前返回

  还有一个经典的例子

  var addEvent = function(el, type, fn, capture) { if (window.addEventListener) { el.addEventListener(type, function(e) { fn.call(el, e); }, capture); } else if (window.attachEvent) { el.attachEvent("on" + type, function(e) { fn.call(el, e); }); } };

  ログイン後にコピー

  我们每次调用事件时，都需要判断兼容问题， 但我们运用柯里化的方式就只要判断一次就行了

  var addEvent = (function(){ if (window.addEventListener) { return function(el, sType, fn, capture) { el.addEventListener(sType, function(e) { fn.call(el, e); }, (capture)); }; } else if (window.attachEvent) { return function(el, sType, fn, capture) { el.attachEvent("on" + sType, function(e) { fn.call(el, e); }); }; } })();

  ログイン後にコピー

  还有一个作用就是延迟计算

  小明每天都会花一部分钱吃饭
  小明想知道它5天之后总共会花费多少钱

  var total = 0 var fn = function(num) { total += num } fn(50) fn(70) fn(60) fn(100) fn(80)

  ログイン後にコピー

  这样我们便能算出它总共花了都少钱

  但是小明又突然想知道 如果他每天花费的的钱翻一倍 会产生多少钱
  于是我们是不是得改下 上面的 函数

  var fn = function(num) { total += num*2 } fn(50) fn(70) fn(60) fn(100) fn(80)

  ログイン後にコピー

  那我们是不是有什么办法，先把这些数 存起来，到最后在进行计算
  我们接着来封装

  var curry = function(fn) { var args = [] return function() { if (arguments.length === 0) { return fn.apply(null, args) }else{ args = args.concat([].slice.call(arguments)) return curry.call(null, fn, args) } } } var curryFn = function() { var args = [].slice.call(arguments), total = 0 for (var i = 0; i < args.length; i++) { total += args[i] } return total } var fn = curry(curryFn) fn(50) fn(70) fn(60) fn(100) fn(80) fn() //不传参数的时候进行计算

  ログイン後にコピー

  这样我们只有最后的时候才进行计算。
  而且只需要修改 curryFn 里面的计算方法就行

  我们整理下上面的方法封装完整的柯里化函数

  var curry = function (fn, length) { length = length || fn.length; var sub_curry = function (f) { var args = [].slice.call(arguments, 1); return function () { return f.apply(null, args.concat([].slice.call(arguments))) } } return function () { var args = [].slice.call(arguments); if (length > args.length) { var newArgs = [fn].concat(args); return curry(sub_curry.apply(null,newArgs), length - args.length) }else{ fn.apply(null,arguments) } } }

  ログイン後にコピー

  // 1. var fn = curry( function(a,b,c){ console.log(a, b, c) }) fn('a')('b')('c') // 2. fn1 = curry(function(){ console.log(arguments) }, 3) fn1('a')('b')('c')

  ログイン後にコピー

1. 参数复用；

2. 提前返回；

3. 延迟计算/运行

• 反柯里化
  反柯里化的作用在与扩大函数的适用性，使本来作为特定对象所拥有的功能的函数可以被任意对象所用.

  被任意对象使用？ 是不是想到了用call, apply 设置this指向

• 通过 call/apply 被任意对象所用

  var obj = { a: 1, fn: function (b) { return this.a + b } } obj.fn(2) // 3 var obj1 = {a:4} obj.fn.call(obj1, 2) // 6

  ログイン後にコピー

• 反柯里化版本

  var uncurrying= function (fn) { return function () { var context=[].shift.call(arguments); return fn.apply(context,arguments); } } // const uncurrying = fn => (...args) => Function.prototype.call.apply(fn,args) // 简洁版 var f = function (b) { return this.a + b } var uncurry = uncurrying(f) var obj = {a:1}, obj1 = {a:4} uncurry(obj, 2) // 3 uncurry(obj1, 2) // 3

  ログイン後にコピー

相信大家已经看出区别了,这丫的就相当于一个外部的call方法

总结

上面很多只是自己的部分理解，不一定准确。如果有不同理解，谢谢指出。

相关推荐：

最全JavaScript知识点总结

一些容易犯错的JavaScript知识点整理

JavaScript知识点系统总结

以上がJavaScriptの知識まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。