面向初学者的JavaScript Essentials（概念+代码）前端开发

JavaScript曾经是并将永远是开发任何Web应用程序前端的首选语言。 我们都知道。

无论您选择哪种框架（React或Angular {I prefer react though} ），您始终都需要了解一些JavaScript概念和方法来简化您的生活。

在这篇文章中，我将写有关

1. JavaScript数组和数组方法

2.承诺，异步功能和链接

3.休息和分散经营者

还有其他一些概念，例如Closures，generators，proxy和destructuring等……但是我个人认为，如果您掌握了以上3个概念，作为前端开发人员的工作就完成了40％（前提是您知道JavaScript和V8引擎的工作方式）作品）。

因此，不要浪费时间，让我们开始吧。

数组及其方法

数组对于任何程序员来说都不是奇怪的数据结构，但是它提供了诸如map() filter() reduce() ， sort()本机方法来对它们进行操作的事实使它变得有趣起来。

让我们借助一个编码示例来查看数组。

function square ( x ) { return x*x};
square( 9 )  // output 81 

// dynamic javascript function 
let square_of_number = function square ( x ) { return x*x};
square_of_number( 7 )  // output 49
 
//  another way of writing it using arrow functions ... 
let square = ( x )=> x*x
square( 5 )  // output 25

let greater = ( x,y ) => { if (x>y){ return console .log( ` ${x} is greater` );} return console .log( ` ${y} is greater` );}
greater( 5 , 7 ); // output 7 is greater

// arrays and array methods  ... 
const arr = [ 1 , 2 , 3 , 4 , 5 ];
const square = ( x )=> x*x; // function to find square 
const even = ( x )=> x% 2 == 0 ; // function to find number being even
const callback_function = ( accumulater,currentvalue )=> { return accumulater + currentvalue;}
const starting_value = 0 ;

// array methods 
arr.map(square)     // output's new array as [1,4,9,16,25]
arr.filter(even);  // output [false, true, false, true, false]
arr.reduce(callback_function,starting_value) // output 15

该代码几乎可以自我解释。 因此，我将跳过上述代码的解释部分。 但是，如果您仍然觉得有什么缺失或错误，请在Twitter上ping我。

承诺，异步功能和链接

我们向人们承诺要完成一项任务。 对 ！！ 在Javascript中也会发生同样的事情。 Javascript承诺成功完成/执行一个功能，但有时会成功，有时却不会。 它失败 ！！

因此，JavaScript中的Promise基本上是给定任务的对象，该任务采用1个回调函数（通常是异步函数，如fetch()或其他网络等）作为带有resolve和reject参数的参数。

链接用于利用此响应对象并在序列链中执行一次，这是从异步函数中获取的。

在代码中查看它可以更好地理解。

// creating a promise ... 
const callback_function = ( resolve,reject )=> { if (True){resolve( 'everything worked' );} else {reject( Error ( 'nothing worked' ));}};
const promise = new Promise (callback_function); 

// chaining method ...
callbackmethod_for_success = ( result )=> console .log(result);
callbackmethod_for_error = ( error )=> console .log(error);
promise.then(callbackmethod_for_success,callbackmethod_for_error);

// Remember fetch method for accessing the api's itself is a promise so u can write like ... 
const url = 'www.google.com/v1/some_api_call' ; // FYI .. this is not a real api ...  
fetch(url).then(callbackmethod_for_success,callback_method_for_error);

// or you can do something like -- 
fetch(url).then(callbackmethod_for_success).catch(callback_method_for_error)

// async function similar to above but in a different way .. 
async (url) => { try { const response = await fetch(url); console .log( await response.text());} catch (err){ console .log( 'fetch failed' , err);}};

如果您想从API获取数据，请随时查看我有关API的其他文章。

余数和价差运算符[3点（…）]

Rest参数将所有剩余元素收集到一个数组中。 而Spread运算符允许将可迭代对象 （ 数组 / 对象 / 字符串 ）扩展为单个argument/element 。

// rest operator 
const arr = [ 1 , 2 , 3 , 4 , 5 ];
const sum = ( ...args ) => { let total_sum= 0 ; for ( let arr_items of args){total_sum+=arr_items;} return total_sum;} 
sum(...arr) // output 15

// spread operater  
const extended_arr = [...arr, 6 , 7 , 8 , 9 , 10 ];
console .log(extended_arr); // output [1,2,3,4,5,6,7,8,9,10]

有趣的事实： JavaScript中的所有内容都是一个对象-即。 （数据类型，函数和类）以及将一个对象与另一个对象一起完成任务的方式使Javascript（作为一种语言）变得有趣而强大。

这个故事就是这样。

感谢您抽出宝贵的时间阅读。 我希望你喜欢它。

保持快乐并保持编码。

From: https://hackernoon.com/javascript-essentials-concepts-code-for-frontend-developers-5qv322a