JS 手写系列

[lencx]

Implementation of Native JavaScript Methods

⚠️ 注意：不符合以下格式的评论将会被删除

• 手写新（评论中不存在）的方法，建议新开评论，排版参考 forEach
  • 👉 方法名（必须）
  • 💠 语法（可须）
  • ⚠️ 注意（可选）
  • ✍️ 实现（必须）
  • 📌 测试（必须）
  • 🔗 参考链接（可选）
• 针对某个手写方法的讨论，建议使用回复评论的形式

---

查看源码 js-wheel

---

Standard

• Promise

Array

• forEach
• map
• filter
• reduce
• every
• some

Function

• call
• apply
• bind

Utils

• curry
• sleep

[lencx]

👉 forEach

forEach() 方法对数组的每个元素执行一次给定的函数

💠 语法

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

• callback - 为数组中每个元素执行的函数，接收一至三个参数
  • currentValue - 数组中正在处理的当前元素
  • index [可选] - 数组中正在处理的当前元素的索引
  • array [可选] - 调用 forEach() 方法的数组
• thisArg [可选] - 当执行回调函数 callback 时，用作 this 的值
• 返回值 - undefined

⚠️ 注意

除了抛出异常以外，没有办法中止或跳出 forEach() 循环

✍️ 实现

Array.prototype.myEach = function(callback) {
  for (var i = 0; i < this.length; i++) {
    callback(this[i], i, this);	
  }
}

📌 测试

var arr = ['js', 'css', 'html'];
arr.myEach(function(item) {
  console.log(item);
})

---

🔗 参考链接

• [MDN] NodeList.prototype.forEach()
• [MDN] Array.prototype.forEach()

[MarukoAnn]

Array.prototype.myForEach = function(fn, args)  {
   // 边界处理
   if(this === null && this === undefined && !Array.isArray(this)){
       throw new TypeError('type is error')
   }
    if(typeof fn !=='function'){
        throw new TypeError(fn + 'is not function')
     }
   for(let i = 0; i< this.length;i++){
       fn.call(args, this[i], i, this)
   }
}

[lencx]

@moonshinean 写箭头函数，this 的指向是有问题的

Array.prototype.myForEach = (fn, args) => {
   // 边界处理
   if(this === null && this === undefined && !Array.isArray(this)){
       throw new TypeError('type is error')
   }
    if(typeof fn !=='function'){
        throw new TypeError(fn + 'is not function')
     }
   for(let i = 0; i< this.length;i++){
       fn.call(args, this[i], i, this)
   }
}

[MarukoAnn]

@lencx 对哈 我改一下 改一下

[lencx]

👉 map

map() 方法创建一个新数组，其结果是该数组中的每个元素调用一次给定函数后的返回值

💠 语法

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

• callback - 生成新数组元素的函数，接收一至三个参数
  • currentValue - 数组中正在处理的当前元素
  • index [可选] - 数组中正在处理的当前元素的索引
  • array [可选] - 调用 map() 方法的数组
• thisArg [可选] - 当执行回调函数 callback 时，用作 this 的值
• 返回值 - 一个由原数组每个元素执行回调函数的结果组成的新数组

✍️ 实现

Array.prototype.myMap = function(callback) {
  arr = [];
  for (var i = 0; i < this.length; i++) {
    arr[i] = callback(this[i], i, this);
  }
  return arr;
}

📌 测试

var arr = [1, 2, 3];
var newVal = arr.myMap(i => Math.pow(i, 2));
console.log(newVal); // [1, 9, 16]

---

🔗 参考链接

• [MDN] Array.prototype.map()

[lencx]

👉 sleep

指定时间内函数暂停执行。 在 C 或 PHP 等编程语言中，可以调用 sleep(2) 使程序暂停 2 秒。 Java 有 Thread.sleep(2000)，Python 有 time.sleep(2)，Go 有 time.Sleep(2 * time.Second)。

JavaScript 没有原生的休眠功能，但由于引入了 promises（以及 ES2018 中的 async/await），我们可以用一种优雅地方式来实现此功能。

✍️ 实现

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

📌 测试

async function testSleep() {
  console.log('Taking a break...');
  await sleep(2000);
  console.log('Two seconds later, showing sleep in a loop...');

  // Sleep in loop
  for (let i = 0; i < 5; i++) {
    if (i === 3) await sleep(2000);
    console.log(i);
  }
}

testSleep();

---

🔗 参考链接

• What is the JavaScript version of sleep()?
• [C] sleep(3) - Linux man page
• [PHP] sleep
• [Java] Pausing Execution with Sleep
• [Python] time.sleep(secs)
• [Go] func Sleep

[lencx]

👉 filter

💠 语法

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

✍️ 实现

Array.prototype.myFilter = function(callback, context) {
  var arr = [];
  var idx = 0;
  for (var i = 0; i < this.length; i++) {
  	if (callback.call(context, this[i], i, this)) {
  	  arr[idx++] = this[i];
  	}
  }
  return arr;
}

📌 测试

var arr = [1, 2, 3, 4, 5];
var newVal = arr.myFilter(i => i > 3);
console.log(newVal); // [4, 5]

---

🔗 参考链接

• [MDN] Array.prototype.filter()

[lencx]

👉 curry

在计算机科学中，柯里化（英语：Currying），又译为卡瑞化或加里化，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。这个技术由克里斯托弗·斯特雷奇以逻辑学家哈斯凯尔·加里命名的，尽管它是 Moses Schönfinkel 和戈特洛布·弗雷格发明的。

柯里化是将一个接受多个参数的函数分解成一系列函数，每个函数只接受一个参数。 例如：将 f(a,b,c) 变换为 f(a)(b)(c) 。

✍️ 实现

function curry(func) {
  return function curried(...args) {
    // 如果参数的数量（args.length）大于或等于原函数中定义的参数数量（func.length），
    // 则直接使用 func.apply 将参数传递。
    if (args.length >= func.length) {
      return func.apply(this, args);
    }
    // 否则，我们只得到一部分参数，此时还未调用 func，
    // 则返回一个新的匿名函数，重新柯里化，提供之前的参数（args）和当前匿名函数参数（args2）。
    return function(...args2) {
      return curried.apply(this, args.concat(args2));
    };
  };
}

📌 测试

function sum(a, b, c) {
  return a + b + c;
}

const currySum = curry(sum);

currySum(1, 2, 3); // 6 - 未柯里
currySum(1)(2)(3); // 6 - 完全柯里
currySum(1)(2, 3); // 6 - 第一个参数柯里

---

🔗 参考链接

• [wiki] 柯里化
• What is 'Currying'?
• [javascript.info] currying