JavaScript 是一种复杂的语言。如果是你是高级或者初级 JavaScript 开发人员，了解它的基本概念非常重要。本文介绍 JavaScript 至关重要的12个概念，但绝对不是说 JavaScript 开发人员只需要知道这些就可以了。
1.变量赋值 (值 vs 引用）
理解 JavaScript 如何给变量赋值可以帮助我们减少一些不必要的 bug。如果你不理解这一点，可能很容易地编写被无意中更改值的代码。
JavaScript 总是按照值来给变量赋值。 这一部分非常重要：当指定的值是 JavaScript 的五种基本类型之一（即 Boolean，null，undefined，String 和 Number）时，将分配实际值。 但是，当指定的值是 Array，Function或Object时，将分配对内存中对象的引用给变量。
在以下代码段中，使用 var1 对 var2 进行赋值。 由于var1是基本类型（String），因此 var2 的值等于 var1 的 String 值，并且可以认为此时与var1完全不同。 因此，重新赋值var2对var1没有影响。
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' }
如果你期望它会像原始类型赋值那样，很可能会出问题！如果你创建了一个无意中会改变对象的函数，就会出现一些非预期的行为。
2.闭包
闭包是一个重要的JavaScript模式，可以私有访问变量。在本例中，createGreeter返回一个匿名函数，这个函数可以访问参数 greeting（在这里是“Hello”）。在后续的调用中，sayHello 将有权访问这个 greeting！
function createGreeter(greeting) { return function(name) { console.log(greeting + ', ' + name); } } const sayHello = createGreeter('Hello'); sayHello('Joe'); // Hello, Joe
在更真实的场景中，你可以设想一个初始函数apiConnect(apiKey)，它返回一些使用API key的方法。在这种情况下，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' });
3.解构
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'
解构经常也用于直接用于提取传给函数的参数。如果你熟悉 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!"
4. 展开运算
ES6的一个常用之一的特性就是展开(...)运算符了,在下面的例子中，Math.max 不能应用于 arr 数组，因为它不将数组作为参数，但它可以将各个元素作为参数传入。展开运算符...可用于提取数组的各个元素。
const arr = [4, 6, -1, 3, 10, 4]; const max = Math.max(...arr); console.log(max); // 10
5. 剩余参数
剩余参数语法和展开语法看起来的一样的，不同的是展开语法是为了结构数组和对象；而剩余参数和展开运算符是相反的，剩余参数收集多个元素合成一个数组。
function myFunc(...args) { console.log(args[0] + args[1]); } myFunc(1, 2, 3, 4); // 3
rest parameters 和 arguments 的区别
arguments 是伪数组，包含所有的实参
剩余参数 是标准的数组，可以使用数组的方法
6. 数组方法
JavaScript 数组方法通常可以提供令人难以置信的、优雅的方法来执行所需的数据转换。作为StackOverflow 的贡献者，我经常看到关于如何以某种方式操纵对象数组的问题，这往往也是数组方法的完美用例。
map、filter、reduce
JavaScript 数组方法map、filter和reduce容易混淆，这些都是转换数组或返回聚合值的有用方法。
map：返回一个数组，其中每个元素都使用指定函数进行过转换。
const arr = [1, 2, 3, 4, 5, 6]; const mapped = arr.map(el => el + 20); console.log(mapped); // [21, 22, 23, 24, 25, 26]
filter：返回一个数组，只有当指定函数返回 true 时，相应的元素才会被包含在这个数组中。
const arr = [1, 2, 3, 4, 5, 6]; const filtered = arr.filter(el => el === 2 || el === 4); console.log(filtered); // [2, 4]
reduce:按函数中指定的值累加
const arr = [1, 2, 3, 4, 5, 6]; const reduced = arr.reduce((total, current) => total + current); console.log(reduced); // 21
find, findIndex, indexOf
find：返回与指定条件匹配的第一个实例，如果查到不会继续查找其他匹配的实例。
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const found = arr.find(el => el > 5); console.log(found); // 6