JavaScript是一种复杂的语言。如果您是高级或初级JavaScript开发人员，了解其基本概念非常重要。本文介绍了对JavaScript至关重要的12个概念，但绝不是说JavaScript开发者只需要知道这些。1.变量赋值（valuevsreference）了解JavaScript如何给变量赋值可以帮助我们减少一些不必要的bug。如果您不了解这一点，则很容易编写无意中更改值的代码。JavaScript总是按值分配变量。这部分非常重要：当指定值是JavaScript的五种基本类型（即Boolean、null、undefined、String和Number）之一时，实际值被赋值。但是，当指定值为Array、Function或Object时，会将内存中对象的引用分配给变量。在以下代码片段中，var1用于为var2赋值。由于var1是原始类型（String），所以var2的值等于var1的String值，此时可以认为与var1完全不同。因此，重新分配var2对var1没有影响。接下来，与对象分配进行比较。如果您期望它表现得像原始类型赋值，它很可能会出错！如果您创建的函数无意中改变了对象，则可能会发生一些意外行为。2.闭包闭包是一种重要的JavaScript模式，它允许对变量进行私有访问。在此示例中，createGreeter返回一个可以访问参数问候语（在本例中为“Hello”）的匿名函数。在后续调用中，sayHello将可以访问此问候语！在更现实的场景中，您可以想象一个初始函数apiConnect(apiKey)，它使用API密钥返回一些方法。在这种情况下，apiKey只需要提供一次。3.解构JavaScript参数解构是一种常用的方法，可以从对象中提取所需的属性。如果要提取其他名称的属性，可以使用以下方法：解构通常用于直接提取传递给函数的参数。如果你熟悉React，你可能已经看到了：4.Spread操作ES6的一个常用特性是spread(...)操作符。在下面的示例中，Math.max不能应用于arr数组，因为它不将数组作为参数，但它可以传入单个元素作为参数。扩展运算符...可用于提取数组的各个元素。constarr=[4,6,-1,3,10,4];constmax=Math.max(...arr);console.log(max);//105。RemainingparametersRemainingparameter语法和扩展语法看起来一样，不同的是扩展语法是针对数组和对象的结构；而剩余参数与展开运算符相反，剩余参数将多个元素收集到一个数组中。functionmyFunc(...args){console.log(args[0]+args[1]);}myFunc(1,2,3,4);//3rest参数和arguments的区别：arguments是伪类arraycontaining所有实际参数和其余参数都是标准数组，可以与数组方法一起使用6.数组方法JavaScript数组方法通常可以提供令人难以置信的、优雅的方式来执行所需的数据转换。作为StackOverflow的贡献者，我经常看到有关如何以某种方式操作对象数组的问题，这通常也是数组方法的完美用例。(1)map、filter、reduceJavaScript数组方法map、filter、reduce容易混淆，但这些都是转换数组或返回聚合值的有用方法。map：返回一个数组，其中每个元素都已使用指定函数进行了转换。constarr=[1,2,3,4,5,6];constmapped=arr.map(el=>el+20);console.log(mapped);//[21,22,23,24,25,26]filter：返回一个数组，只有当指定的函数返回true时，相应的元素才会被包含到这个数组中。constarr=[1,2,3,4,5,6];constfiltered=arr.filter(el=>el===2||el===4);console.log(过滤);//[2,4]reduce:按照函数中指定的值累加constarr=[1,2,3,4,5,6];constrained=arr.reduce((total,current)=>total+current);console.log(reduced);//21(2)find,findIndex,indexOfffind:返回第一个符合指定条件的实例，如果找到则不会继续寻找其他匹配的实例。constarr=[1,2,3,4,5,6,7,8,9,10];constfound=arr.find(el=>el>5);console.log(found);//6再次注意，虽然5之后的元素都满足条件，但是只返回第一个匹配的元素。找到匹配项时通常会跳出for循环，这在这种情况下实际上非常有用。findIndex：这与find几乎相同，但它不是返回第一个匹配元素，而是返回第一个匹配元素的索引。constarr=['Nick','Frank','Joe','Frank'];constfoundIndex=arr.findIndex(el=>el==='Frank');console.log(foundIndex);//1indexOf:withfindIndex几乎相同，但它没有将函数作为参数，而是采用一个简单的值。当您需要更简单的逻辑并且不需要使用函数来检查是否存在匹配时，请使用此方法。constarr=['Nick','Frank','Joe','Frank'];constfoundIndex=arr.indexOf('Frank');console.log(foundIndex);//1(3)push,pop,shift,unshiftpush：这是一个比较简单的方法，在数组的末尾添加一个项目。它就地修改数组，函数本身返回添加到数组的项目。letarr=[1,2,3,4];constpushed=arr.push(5);console.log(arr);//[1,2,3,4,5]console.log(pushed);//5pop：这将从数组中删除最后一项。同样，它就地修改数组，函数本身返回从数组中删除的项目。letarr=[1,2,3,4];constpopped=arr.pop();console.log(arr);//[1,2,3]console.log(popped);//4shift:从数组删除第一项。同样，它就地修改数组。该函数本身返回从数组中删除的项目。letarr=[1,2,3,4];constshifted=arr.shift();console.log(arr);//[2,3,4]console.log(shifted);//1unshift：移位一或多个元素被添加到数组的开头。同样，它就地修改数组。与许多其他方法不同，函数本身返回数组的新长度。letarr=[1,2,3,4];constunshifted=arr.unshift(5,6,7);console.log(arr);//[5,6,7,1,2,3,4]控制台.log(unshifted);//7(4)splice,slice**splice:**通过删除或替换现有元素和/或添加新元素来改变数组的内容，该方法修改数组本身。下面代码示例的意思是：删除数组第1位置的0个元素，插入b。letarr=['a','c','d','e'];arr.splice(1,0,'b')slice：返回从指定起始位置到指定结束位置拷贝之前的数组浅切片。如果未指定结束位置，则返回数组的其余部分。重要的是，此方法不修改数组，而是返回所需的子集。letarr=['a','b','c','d','e'];constsliced=arr.slice(2,4);console.log(sliced);//['c','d']console.log(arr);//['a','b','c','d','e'](5)sort**sort:**根据提供的数组排序函数排序。此方法就地修改数组。如果函数返回负数或0，则保留顺序。如果返回正数，则交换元素顺序。letarr=[1,7,3,-1,5,7,2];constsorter=(firstEl,secondEl)=>firstEl-secondEl;arr.sort(sorter);console.log(arr);//[-1,1,2,3,5,7,7]7.生成器（generator）生成器是一种特殊的行为，其实是一种设计模式，我们遍历一个Group有序的值。想象一下，例如使用迭代器迭代数组[1,2,3,4,5]。第一次调用next()方法返回1，第二次调用next()方法返回2，依此类推。当数组中的所有值都返回完后，调用next()**方法会返回null或者false或者其他可能的值，表示已经遍历完数组中的所有元素。使用生成器生成无限值：8.恒等运算符（===）和等号运算符（==）大家一定知道JavaScript中的恒等运算符（===）和等号运算符（==）！==运算符在比较值之前进行类型转换，而===运算符在比较之前不进行任何类型转换。console.log(0=='0');//trueconsole.log(0==='0');//false9.对象比较我看到JavaScript新手犯的一个错误是直接比较对象。变量指向内存中对象的引用，而不是对象本身！实际比较它们的一种方法是将对象转换为JSON字符串。这有一个缺点：不能保证对象属性顺序！比较对象的一种更安全的方法是引入专门进行深度对象比较的库（例如lodash的isEqual）。下面的对象看似相等，但实际上指向不同的引用。constjoe1={name:'Joe'};constjoe2={name:'Joe'};console.log(joe1===joe2);//false相反，下面的计算结果为true，因为一个对象被设置为匹配另一个object是相等的，因此指向相同的引用（内存中只有一个对象）。constjoe1={name:'Joe'};constjoe2=joe1;console.log(joe1===joe2);//true相反，下面的计算结果为真，因为一个对象被设置为与另一个对象相等，因此指向相同引用（内存中只有一个对象）。constjoe1={name:'Joe'};constjoe2=joe1;console.log(joe1===joe2);//true10。回调很多人都被JavaScript回调吓倒了！它们非常简单，这是一个例子。console.log函数作为回调传递给myFunc。它在setTimeout完成时执行。functionmyFunc(text,callback){setTimeout(function(){callback(text);},2000);}myFunc('Helloworld!',console.log);//'Helloworld!'11.Promises一旦你理解了JavaScriptCallbacks，你很快就会发现自己陷入了“回调地狱”。这时候可以使用promise，将异步逻辑包装在promise中，成功时resolve或者失败时reject，使用then处理成功，使用catch处理异常。12、Async/Await在掌握了promise的用法之后，你可能还会喜欢asyncawait，它只是一种基于promise的“语法糖”。在下面的示例中，我们创建了一个异步函数并等待greeterpromise。
