为了保证可读性，本文采用直译而不是直译。

第1章：JS 简介

什么是JavaScript？

JS 是一种网络脚本语言。 JS 诞生于1995 年，由Brendan Eich 创建，旨在为网页添加交互性。互联网仍处于起步阶段，我们今天看到的大多数精美网页都只是一个梦想。

在项目经理的敦促下，布伦丹只有10 天的时间来创建一种可以在浏览器中运行的动态、灵活的语言。他创建了JavaScript，一种有点奇怪的编程语言，引用了Java、C 和Scheme。 JS 的名声一直不好，因为它从一开始就有很多怪癖。但尽管如此，它还是在名人堂中占有一席之地，并延续至今。

如今，称为SPA（单页应用程序）的整个应用程序越来越多地用JS 编写。随着使用量的增加，JS生态系统也经历了寒武纪大爆发。如今，大多数用于JS 开发的Web 工具和库都是用JS 编写的。 JS也用于前端以外的领域。您可以使用Node.js 创建服务器端应用程序、IoT 应用程序、工业设备等。但最重要的是，单页应用程序是JS 最突出的用途之一。

在单页面应用程序中，JS 处理所有事情，从而无需刷新页面即可获得流畅的UI。从用户的角度来看，这是对传统Web 应用程序的巨大改进。然而， JS 对大多数移动设备来说是一个沉重的负担，必须非常小心地设计和构建。

为什么要学习JavaScript？

今天学习JS并不意味着对变量和函数有肤浅的了解。 还有很多其他的。 JS 开发人员了解闭包、新功能、原型系统和更新的功能。 JS每年都越来越流行，其功能也在逐渐完善。现在几乎所有前端开发工作都需要JS 知识。招聘人员并不是在寻找会使用JQ 的人（jQuery 似乎正在慢慢过时）。

在大多数情况下，您还需要学习TypeScript、JS，重点是类型。前端开发人员必须了解JS 的工作原理，并能够编写惯用且结构良好的JS 代码。 JS 正在迅速流行，即使您不喜欢这门语言，此时忽略它可能会对您的职业生涯产生不利影响。

第1章：JS 基础

JS目前有七种基本类型：

StringNumberBooleanNullUnknownObjectSymbol (ES6) 除了Object这种复杂数据类型外，其他六种都是JS中的基本数据类型。每个JS 类型都有一个可以在代码中使用的相应表示形式（例如字符串：）。

var string='你好，约翰';

数字：

变量年龄=33；

说起来，JS还有算术运算。

运算符名称+ 加法++ 增量* 乘法** 指数- 减法- 减法/除法% 移除和除法

在JS中，可以使用var关键字在变量中存储值。这是声明变量的最兼容的方式。

vargreet='Hello'; varyear=89; var not=false; 因为ES6有两个选项：let和const。较旧的浏览器可能不支持这些新关键字，如果您不使用“转置器”，则可能会导致错误。对于较新的浏览器，我们建议使用let 和const。有两个主要优点。

let 和const 都有自己的块作用域。 const 不能被重新分配或重新声明。 块作用域意味着用let 或const 声明的变量不会与封闭块中声明的相同变量名重叠。例如：

let name='前端小智';{ let name='王大爷' console.log(name); //'王大爷'}console.log(name);虽然它们看起来是重复的，但实际上它们是各自作用域内的两个不同变量。 const 具有相同的行为。

const name='前端小智';{ const name='王大爷' console.log(name); //'王大爷'}console.log(name); 行为与let和const不同。

var name='Frontend 小智';{ var name='王大爷' console.log(name); //'王大爷'}console.log(name);Frontend 但在同一范围内重新分配const 或不能重新声明。如果我尝试重新声明const，我会收到消息“SyntaxError: 标识符已被声明”。将值重新分配给相同的const 会导致“TypeError: 分配给常量变量”错误。

const name='前端小智'; const name='Wang Daye'; //SyntaxError: 标识符'name' 已经被声明下面的代码也会抛出错误：

const name='前端小智'; name='王大野'; //TypeError: 给常量赋值但是，这并不意味着“cons不能被重新赋值或重新声明”。是不变的。

我是一名从事开发多年的老Web前端程序员，目前正在辞掉工作，参加自己定制的Web前端课程。今年年初，我们花了一个月的时间整理了2019 年最佳Web 前端学习技巧列表。整理了各种框架，提供给所有前端小伙伴。如果您想获取这些，请关注我的今日头条账号并私信我。背景：前端，免费提供。

这是初学者遇到的问题。事实上，稍微复杂一点的JS数据结构比如数组、对象，即使被赋值为const，它们的值或属性值也可以改变。这些复杂对象的内存地址可以改变。

const person={ name: '前端小智',age: 21}; person.name='王大爷'; console.log(person); //{name: '王大爷',age: 21} const 不能在对象中使用这意味着数组是：

const list=[1, 1, 3, 2, 5];list.shift();console.log(list); //[1, 3, 2, 5] 同样，不是不可变的。当有人说“const 是不可变的”时，向他们展示这些例子。在这里我们回到基础。除了自变量之外，您还可以使用文字声明数组。

var array=['你好', 89, false, true];

可以使用从零开始的索引来访问数组元素。

var array=['Hello', 89, false, true]; var first=array[0]; //'Hello' 几乎每个JS 实体都带有一些称为方法的函数。举两个例子：数组有不同的处理自身的方式。

var array=['你好', 89, false, true]; console.log(array); //[ 89, false, true, 99 ];

var string='John';console.log(string.toUpperCase()); //JOHN 您将在第5 章中看到这些方法的来源，但这里有一个提示： 这些位于Array.prototype 中并被定义为字符串。原型。除了方法之外，还有几个属性可用于提取有关字符串长度的信息。

var string='John';console.log(string.length); //4 或数组长度：

var array=['Hello', 89, false, true];array.push(99);array.shift();console.log(array.length); //4因为这些属性被称为有点特殊。吸气剂/吸气剂。您可以将特定的字符串想象为一个附加有许多方法和属性的对象。当访问数组的长度时，只需调用相应的getter即可。使用setter 函数设置行为：

var array={ value: ['Hello', 89, false, true], push: function(element) { //}, shift: function() { //}, get length() { //获取长度} , 设置length(newLen) { //设置长度}};//Getter callvar len=array.length//Setter callarray.length=50; 现在我们已经奠定了基础，让我们仔细看看该对象。最重要的JS 类型之一。

站在拍摄对象的肩膀上

对象是JS 中最重要的类型，因此几乎所有其他实体都可以从它们派生。例如，函数和数组都是特殊对象。 JS 中的对象是键值对的容器，如下例（字面形式）所示：

var obj={ name: 'John',age: 33}; 还有另一种创建对象的方法，但这种方法很少见，而且性能较差，所以避免使用这种形式。

var obj=new Object({ name: 'John',age: 33}); 正如您所看到的，对象是保存值的便捷方法，稍后可以通过访问相应的属性来检索这些值。

var obj={ name: '前端小智',age: 26};console.log(obj.name); //'前端小智'还可以添加、删除和修改新属性。

var obj={ name: '前端小智',age: 26}; obj.address='王大爷'; 在这个例子中，对象的key也可以是字符串。 使用方括号表示法访问属性。

var obj={ name: '前端小智',age: 26, 'complex key': 'stuff'};console.log(obj['complex key']) //'stuff' 不过点表示法更常见目标。除非你的key是一个复杂的字符串，否则你应该选择传统的属性访问。

var obj={ name: 'Frontendiaozhi',age: 26};console.log(obj.name); //'FrontendXiaozhi' 这是你需要了解的所有基础知识，但在第5 章中，我们将看到对象非常强大，甚至可以做更多的事情。接下来我们看一下JS函数。

5 个不同的JS 函数

几乎每种编程语言都有函数，JS也不例外。函数是可重用的代码。考虑下面的例子

函数hello(message) { console.log(message);}hello('你好');

function sum(a, b) { return a + b;}var sum=sum(2, 6);第一个函数输出一个字符串，第二个函数从外部返回值。如您所见，该函数可以接受函数“签名”中列出的参数。

//a和b是函数签名中的参数function sum(a, b) { return a + b;} 调用函数时可以传递值。

//a 和b 是函数签名的参数function sum(a, b) { return a + b;}//2 和6 是用function 关键字声明的函数JS var sum=sum(2, 6);是参数。函数是常规函数，而不是没有函数体的函数。

命名函数匿名函数对象方法对象方法缩写(ES 6) IIFE（立即执行函数） 命名函数是最传统的函数类型。

function sum(a, b) { return a + b;} 另一方面，匿名函数没有名称，可以分配给变量以供以后使用。

var sum=function(a, b) { return a + b;}; 或用作其他函数的回调。

var button=document.createElement('button');button.addEventListener('click', function(event) { //do things}); 函数也可以存在于对象中，这将被称为对象的方法。

var widget={ showModal: function() { //do things }};widget.showModal(); 默认情况下，常规函数也会获得this 关键字，但这可以根据函数的调用方式给出不同的含义。第6 章详细介绍了这个主题。这里我们有一个简单的规则：在对象内执行的任何函数都将有一个指向包含对象的指针。

var widget={ html: 'div/div', showModal: function() { console.log(this.html) }};widget.showModal(); //在ES6 中也可以使用对象方法缩写：

var widget={ showModal() { //对象方法简写}}; 最后，IIFE（立即执行函数）：

var IIFE=(function() { //IIFE 中发生的事情保留在IIFE 中})(); 语法可能看起来有点奇怪，但IIFE 非常强大，我将在第4 章中解释。除了常规函数之外，ES6 中还添加了箭头函数。箭头函数不使用function 关键字，但具有类似的格式。

命名箭头函数匿名箭头函数对象方法IIFE 箭头函数箭头函数很有用，但我们建议您不要过度使用它们。这是一个命名的箭头函数。如果没有参数，可以省略return语句并使用括号。

const arrow=()=console.log('愚蠢的我');

如果您需要在箭头函数中计算某些内容或调用其他函数，可以用大括号将主体括起来。

const arrow=()={ const a=callMe(); const b=callYou(); return a + b;}; 大括号也是定义对象的字面形式，但它们可以做类似的事情没有。

const arrow=()={ a : 'hello', b: 'world'}; 这是无效语法。您可以使用括号从箭头函数返回对象。

const arrow=()=({ a: 'hello', b: 'world'});console.log(arrow());//{ a: 'hello', b: 'world' } 或使用return 语句。

const arrow=()={ return { a: 'hello', b: 'world' };}; 就像常规的匿名函数一样，也有匿名箭头函数。这里一个作为回调传递给另一个函数

const arr=[1, 2, 3];const res=arr.map(element=element + 1);console.log(res); //将[2, 3, 4] 元素作为参数。数组元素返回元素+1。正如您所看到的，如果箭头函数只有一个参数，则无需用括号将其括起来。

const fun=singleParameter=singleParameter + 1;

但是，如果需要更多参数，则需要括号。

const fun=(a, b)=a + b + 1;

尽管箭头函数可能显示为对象方法，但它们的行为与常规函数不同。 this 关键字在上一段中介绍过，它是对正在执行该函数的对象的引用。当作为对象方法调用时，常规函数指向宿主对象。

var widget={ html: 'div/div', showModal: function() { console.log(this.html) }};widget.showModal(); //'div/div' 指的是箭头函数。完成不同的事情：

var widget={ html: 'div/div', showModal: ()=console.log(this.html)};widget.showModal(); //undefined 因此，箭头函数不太适合作为对象方法，有一些。功能。对于一些有趣的用例，本手册解释了为什么以及何时有效地使用它们。最后我们看一下IIFE箭头函数。

(()={ console.log('aa');})(); 语法令人困惑。现在让我们进入下一章。

传递参数

ECMAScript 中的所有函数参数都是按值传递的。换句话说，将值从函数外部复制到函数内的参数与将值从一个变量复制到另一个变量相同。传输基本类型的值与复制基本类型变量相同，传输引用类型的值与复制引用类型变量相同。许多开发人员此时可能会感到困惑，因为有两种访问变量的方式：按值和按引用，而参数只能按值传递。

当您将基本类型传递给参数时，传递的值将复制到局部变量（即命名参数，或者在ECMAScript 术语中，参数对象中的元素）。当您将引用类型的值传递给参数时，内存中值的地址将复制到局部变量，因此对此局部变量的更改会反映在函数外部。请参阅下面的示例。

function addTen() { num +=10; return num} var result=addTen(count); //这里有30 个函数。是参数号，参数实际上是函数的局部变量。调用该函数时，将变量count作为参数传递给该函数，该变量的值为20。因此，值20 被复制到参数num 以便在addTen() 中使用。在函数内部，参数num的值增加了10，但这个变化并不影响函数外部的count变量。参数的值也更改为30 以反映函数的更改。当然，要解释按值传递参数，使用数字等基本类型的值会更容易理解，但是当使用对象时，问题就不那么容易理解了。我们再举一个例子。

function setName (obj) { obj.name='前端小智';}var person=new Object();setName(person);alert(person.name) //'前端小智' 将上面的代码保存到变量中人。该变量被传递给setName() 函数，然后复制到obj。在此函数中，obj 和person 引用同一个对象。所以如果在函数内部给obj 添加一个name 属性，它也会反映函数外部的person，因为在堆内存中person 指向的对象只有一个，而且是一个全局对象。

许多开发人员错误地认为在局部作用域中修改的对象会反映在全局作用域中，这意味着参数是通过引用传递的。为了证明对象是按值传递的，我们再看一下下面修改后的例子。

function setName(obj) { obj.name='前端小智'; obj=new Object(); obj.name='王大爷'}var person=new Object();setName(person);alert(person.name ) //“前端小智”示例与前面的示例唯一的区别是在setName() 函数中添加了两行代码。一行代码重新定义了obj的对象，另一行代码定义了object的对象。 name 属性具有不同的值。将person 传递给setName() 将其name 属性设置为“Frontend Xiaozhi”。然后将一个新对象分配给变量obj，并将其名称属性设置为“王大野”。

如果通过引用传递person，person会自动变为指向一个name属性为“王大爷”的新对象。然而，原来的参考文献保持不变。事实上，当obj 在函数内被重写时，这个变量引用就变成了本地对象。该本地对象在函数执行后立即被销毁。

总结

JS 有七个称为类型的基本构建块，其中六个也称为基本数据类型。对象本身就是一种类型，并且是语言中最重要的实体。对象是键值对的容器，可以包含几乎任何其他JS 类型，包括函数。

与大多数其他编程语言一样，JS 也有字符串、数字、函数、布尔值以及一些称为Null 和Unknown 的特殊类型。 JS 中有两种类型的函数：箭头函数和常规函数。每种都有其独特的用途，所以请根据场景正确使用。

思考

JS 中有多少种基本类型？什么是常规箭头函数？作为对象方法运行时可以访问哪些特殊关键字？ 中的变量无法实时知道代码部署后可能存在哪些错误，并且稍后要解决这些错误，调试日志是不可能的。这就是为什么我们推荐Fundebug，一个有用的错误监控工具。

原文：https://github.com/valentinogagliardi/Little-JavaScript-Book/blob/v1.0.0/manuscript/chapter1.md

https://github.com/valentinogagliardi/Little-JavaScript-Book/blob/v1.0.0/manuscript/chapter2.md

作者：瓦伦蒂诺·加利亚尔迪

译者：前端小智

来源：github

版权声明：本文转载于网络，版权归作者所有。如有侵权，请联系本站编辑删除。