javascript函数闭包-程序员必须掌握的12个JavaScript技能！

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

出品| CSDN（ID：CSDNNews）

以下为译文：

JavaScript 是一种复杂的编程语言。 无论您的开发水平如何，了解 JavaScript 的基本概念都很重要。

本文将与大家分享12个实用的JavaScript技巧。 以后我会继续在 Github 的 JS Tips & Tidbits 仓库（）中更新这个概念列表。

参考变量的值和形式参数

理解JavaScript的形参原理是正确编码的基础。 否则，在编码过程中很容易无意中篡改该值。

JavaScript 通常按值参数化变量。 但需要注意的一点是：JavaScript 基本数据类型（Boolean、null、undefined、string 和 number）的形式参数是复制参数，而链表、函数或对象的形式参数是引用参数。

举个反例。 以下代码将 var1 分配给 var2。 因为 var1 是基本数据类型（字符串），所以 var2 等于 var1 的字符串值，或者 var2 等于 var1。 因此，重新参数化 var2 不会影响 var1。

<code class="hljs javascript" style="margin-right: 2px;margin-left: 2px;line-height: 18px;font-size: 14px;letter-spacing: 0px;font-family: Consolas, Inconsolata, Courier, monospace;border-radius: 0px;color: rgb(169, 183, 198);background: rgb(40, 43, 46);padding: 0.5em;display: block !important;word-wrap: normal !important;word-break: normal !important;overflow: auto !important;">let var1 = 'My string';
let var2 = var1;
var2 = 'My new string';
console.log(var1);
// 'My string'
console.log(var2);
// 'My new string'

让我们比较一下给定对象参数。

let var1 = { name: 'Jim' }
let var2 = var1;
var2.name = 'John';
console.log(var1);
// { name: 'John' }
console.log(var2);
// { name: 'John' }

如果还是原来的参数，那就有问题了。 如果您创建了一个篡改该值的函数，情况会更糟。

关闭

闭包是一种重要的 JavaScript 模式javascript函数闭包，用于提供对变量的私有访问。 在以下示例中，createGreeter 函数返回一个可以访问问候语值“Hello”的匿名函数。 随后对 sayHello 变量的每次引用都将访问问候语值。

function createGreeter(greeting) {
  return function(name) {
    console.log(greeting + ', ' + name);
  }
}
const sayHello = createGreeter('Hello');
sayHello('Joe');
// Hello, Joe

在更现实的情况下，假设初始函数 apiConnect(apiKey) 返回一些引用 API 密钥的技巧。 在这些情况下，初始函数的内部参数 apiKey 只需要参数化一次，以后不需要再次参数化。

function apiConnect(apiKey) {
  function get(route) {
    return fetch(`${route}?key=${apiKey}`);
  }
  function post(route, params) {
    return fetch(route, {
      method: 'POST',
      body: JSON.stringify(params),
        headers: {
          'Authorization': `Bearer ${apiKey}`
        }
      })
  }
  return { get, post }
}
const api = apiConnect('my-secret-key');
// No need to include the apiKey anymore
api.get('http://www.example.com/get-endpoint');
api.post('http://www.example.com/post-endpoint', { name: 'Joe' });

解构

不要忘记了解 JavaScript 参数的解释。 这是简洁地提取对象属性的通用方法。

const obj = {
  name: 'Joe',
  food: 'cake'
}
const { name, food } = obj;
console.log(name, food);
// 'Joe' 'cake'

要提取具有不同名称的属性，您可以使用以下格式指定它们。

const obj = {
  name: 'Joe',
  food: 'cake'
}
const { name: myName, food: myFood } = obj;
console.log(myName, myFood);
// 'Joe' 'cake'

在下面的示例中，解构只是将 person 对象参数传递给介绍函数。 换句话说，解构（通常）允许直接提取参数并将它们传递给函数。 如果您熟悉 React，您可能以前见过它的用法。

const person = {
  name: 'Eddie',
  age: 24
}
function introduce({ name, age }) {
  console.log(`I'm ${name} and I'm ${age} years old!`);
}
console.log(introduce(person));
// "I'm Eddie and I'm 24 years old!"

展开句型

扩展句型是一个比较难理解的 JavaScript 概念，但是比较容易理解，称为扩展运算符。 在下面的例子中，Math.max方法不会对链表arr进行操作，因为Math.max方法的参数只能是单个元素，不能是字段。 扩展运算符从链表中提取单个元素。

const arr = [4, 6, -1, 3, 10, 4];
const max = Math.max(...arr);
console.log(max);
// 10

剩余句型

我们来谈谈 JavaScript 的其余句型。 其余的句子模式可用于通过函数将任意数量的参数收集到字段中。

function myFunc(...args) {
  console.log(args[0] + args[1]);
}
myFunc(1, 2, 3, 4);
// 3

阵列模式

JavaScript 数组可以执行神奇而优雅的数据转换。 作为 StackOverflow 贡献者，我经常听到有关如何以某种方式操作数组对象的问题。 这通常是链表方法的最佳用例。

我将在这里使用类似的表达式（其中一些已被合并）来描述链接列表的许多不同方法。 下面列出的方法并不全面：您还可以参考MDN（我最喜欢的JavaScript参考：#）来回顾和练习所有方法。

映射、过滤、减少

JavaScript 的map、filter 和reduce 数组方法很容易混淆。 这些技术用于转换链接列表或返回值集合。

const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);
console.log(mapped);
// [21, 22, 23, 24, 25, 26]

const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);
console.log(filtered);
// [2, 4]

const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);
console.log(reduced);
// 21

查找、查找索引、索引

JavaScript 的 find、findIndex 和 indexOf 数组方法通常是合并的。 用法如下。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el => el > 5);
console.log(found);
// 6

再次注意（在上面的反例中）虽然5之后的所有值都符合条件，但只返回第一个匹配的元素。 这在 for 循环中特别有用javascript函数闭包，当条件匹配然后循环被中断时！

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.findIndex(el => el === 'Frank');
console.log(foundIndex);
// 1

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.indexOf('Frank');
console.log(foundIndex);
// 1

推入、弹出、移位、取消移位

有许多很棒的链表方法可用于在目标链表中添加或删除元素。

let arr = [1, 2, 3, 4];
const pushed = arr.push(5);
console.log(arr);
// [1, 2, 3, 4, 5]
console.log(pushed);
// 5

let arr = [1, 2, 3, 4];
const popped = arr.pop();
console.log(arr);
// [1, 2, 3]
console.log(popped);
// 4

let arr = [1, 2, 3, 4];
const shifted = arr.shift();
console.log(arr);
// [2, 3, 4]
console.log(shifted);
// 1

let arr = [1, 2, 3, 4];
const unshifted = arr.unshift(5, 6, 7);
console.log(arr);
// [5, 6, 7, 1, 2, 3, 4]
console.log(unshifted);
// 7

拼接、切片

这两种方法都会更改链表的子集或返回链表的子集。

下面示例代码的分析是：从第1个数组元素开始，删除其后的0个元素，同时插入b值。

let arr = ['a', 'c', 'd', 'e'];
arr.splice(1, 0, 'b')

let arr = ['a', 'b', 'c', 'd', 'e'];
const sliced = arr.slice(2, 4);
console.log(sliced);
// ['c', 'd']
console.log(arr);
// ['a', 'b', 'c', 'd', 'e']

种类

let arr = [1, 7, 3, -1, 5, 7, 2];
const sorter = (firstEl, secondEl) => firstEl - secondEl;
arr.sort(sorter);
console.log(arr);
// [-1, 1, 2, 3, 5, 7, 7]

嘿嘿，以上方法你都掌握了吗？ 也许我们都没有。 事实上，我在写这篇文章的过程中不得不经常查阅MDN文档，这很正常。 只要知道有哪些链表方法，就可以达到95%的效率。

发电机功能

不要害怕使用 * 函数。 Generator 函数指定下一次调用 next() 生成的值。 当与有限数量的生成值或无限循环一起使用时，next() 最终将返回一个未定义的值。

function* greeter() {
  yield 'Hi';
  yield 'How are you?';
  yield 'Bye';
}
const greet = greeter();
console.log(greet.next().value);
// 'Hi'
console.log(greet.next().value);
// 'How are you?'
console.log(greet.next().value);
// 'Bye'
console.log(greet.next().value);
// undefined

这是一个无限值生成器函数：

function* idCreator() {
  let i = 0;
  while (true)
    yield i++;
}
const ids = idCreator();
console.log(ids.next().value);
// 0
console.log(ids.next().value);
// 1
console.log(ids.next().value);
// 2
// etc...

恒等运算符和相等运算符

请务必了解 JavaScript 中恒等运算符和相等运算符的区别！ 相等运算符允许在比较值之前进行类型转换，而恒等运算符不允许类型转换。

console.log(0 == '0');
// true
console.log(0 === '0');
// false

比较对象

JavaScript 新手常犯的错误之一是直接比较对象。 该变量指向显存中的引用对象，而不是对象本身！ 实际比较它们的一种方法是将对象转换为 JSON 字符串。 这种方法有一个缺点：无法保证对象属性的顺序！ 比较对象的更安全方法是使用专为深度对象比较而设计的库（例如 lodash 库的 isEqual 方法）。

下面的两个对象看似相等，但实际上它们指向不同的引用对象。

const joe1 = { name: 'Joe' };
const joe2 = { name: 'Joe' };
console.log(joe1 === joe2);
// false

相反，下面的求值返回 true，因为当一个对象参数传递给另一个对象时，它们的指针是相同的（内存中只有一个对象）。

const joe1 = { name: 'Joe' };
const joe2 = joe1;
console.log(joe1 === joe2);
// true

请回顾一下上面的第一个概念：值变量和引用变量的形参，这将有助于更系统地理解将一个指向显存的对象变量的形参传递给另一个变量的结果。

打回来

太多人被 JavaScript 回调函数困住了。 回调函数非常简单。 举下面的反例。 将 console.log 作为回调函数传递给 myFunc 函数，该函数在计时器 setTimeout 完成时执行。 这就是回调函数的全部内容！

function myFunc(text, callback) {
  setTimeout(function() {
    callback(text);
  }, 2000);
}
myFunc('Hello world!', console.log);
// 'Hello world!'

承诺

一旦理解了 JavaScript 的回调函数，您很快就会发现自己陷入了嵌套的“回调地狱”。 这就是 Promise 的用途。 将异步逻辑封装在Promise中。 如果异步操作成功执行，则会运行resolve回调函数。 否则，将运行拒绝回调函数。 如果 Promise 运行成功，就会进入 then 回调函数，如果失败，就会进入 catch 回调。

const myPromise = new Promise(function(res, rej) {
  setTimeout(function(){
    if (Math.random() < 0.9) {
      return res('Hooray!');
    }
    return rej('Oh no!');
  }, 1000);
});
myPromise
  .then(function(data) {
    console.log('Success: ' + data);
   })
   .catch(function(err) {
    console.log('Error: ' + err);
   });

// If Math.random() returns less than 0.9 the following is logged:
// "Success: Hooray!"
// If Math.random() returns 0.9 or greater the following is logged:
// "Error: On no!"

异步等待

一旦掌握了 JavaScript Promises 的窍门，您可能会喜欢 async wait，它是基于 Promises 的“语法糖”。 在下面的反例中，我们创建一个异步函数 myFunc 并等待函数中执行greeter Promise。

const greeter = new Promise((res, rej) => {
  setTimeout(() => res('Hello world!'), 2000);
})
async function myFunc() {
  const greeting = await greeter;
  console.log(greeting);
}
myFunc();
// 'Hello world!'

综上所述

如果你曾经完全不知道以上12个概念，那么你的JavaScript知识已经有所下降了！ 如果您知道所有这些，那么希望这是一个巩固和提升您的知识的机会。

原来的：

本文为CSDN翻译。 如需转载，请注明出处。

热门文章推荐

print_r('点个好看吧！');
var_dump('点个好看吧！');
NSLog(@"点个好看吧！");
System.out.println("点个好看吧！");
console.log("点个好看吧！");
print("点个好看吧！");
printf("点个好看吧！n");
cout << "点个好看吧！" << endl;
Console.WriteLine("点个好看吧！");
fmt.Println("点个好看吧！");
Response.Write("点个好看吧！");
alert("点个好看吧！")
echo "点个好看吧！"