文档教程【免费下载链接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!项目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs点击查看免费下载本仓库learnxinyminutes-docs以代码即文档的形式收录了大量编程语言速成教程其中 it/javascript.md 是意大利语版 JavaScript 指南与英文原版 javascript.md 及中文版 zh-cn/javascript.md 内容对齐。本文将以此意大利语文档为核心骨架逐节讲解 JavaScript 的语言核心数值与运算符、变量与数组、控制结构、函数与闭包、对象与原型链并补充 ES6 的let、const与箭头函数同时结合仓库的文档规范README.md、CONTRIBUTING.md 与 lint/frontmatter.py说明该教程的组织方式。读完本文你将掌握 JavaScript 从零到原型链继承的完整知识脉络并能直接运行文档中的全部示例代码验证结论。文档背景为什么 JavaScript 值得一篇完整的速成指南it/javascript.md 开篇交代了 JavaScript 的历史定位它由 Netscape 的 Brendan Eich 于 1995 年创造最初只是面向网站的更简单脚本语言用于补充 Java 在复杂 Web 应用中的角色但由于与网页的紧密集成和浏览器内置支持它最终在 Web 前端领域远比 Java 常见。文档同时强调 JavaScript 并不局限于浏览器Node.js 为 Google Chrome 的 V8 引擎提供了独立运行时使 JavaScript 得以走向服务端并日益流行。JavaScript 采用 C 风格语法因此熟悉 C 或 Java 的开发者对其基本语法不会陌生——但需要注意尽管名字相似JavaScript 的对象模型与 Java 存在本质差异没有类蓝图实例化只有原型这也是本文第五节要重点展开的内容。从仓库的文档组织看每篇教程都遵循统一的 YAML front matter 规范contributors 与 translators 字段lint/frontmatter.py 中的validate_yaml_keys会校验这些键的类型与结构确保每篇文档可被 README.md 所描述的多语言贡献流程稳定维护。它/javascript.md 的 front matter 即记录了英文原作者 Leigh Brenecki、Ariel Krakowski 与意大利语译者 vinniec正是这套协作规范的实例。1. 数值、字符串与运算符单一数值类型与算术运算JavaScript 只有一种数值类型64 位 IEEE 754 双精度浮点数double。double 拥有 52 位尾数足以精确存储大约 9×10¹⁵ 以内的整数。文档用一组可直接运行的字面量示例说明基础算术3; // 3 1.5; // 1.5 1 1; // 2 0.1 0.2; // 0.30000000000000004浮点精度问题 8 - 1; // 7 10 * 2; // 20 35 / 5; // 7 5 / 2; // 2.5支持小数除法 10 % 2; // 0 30 % 4; // 2 18.5 % 7; // 4.5模运算也支持浮点值得注意的两个细节0.1 0.2不等于0.3这是 IEEE 754 双精度表示的固有精度损失是任何浮点语言的共性18.5 % 7说明取模同样作用于浮点数。位运算也完全可用——执行位运算时浮点数会被转换为最多 32 位的有符号整数1 2; // 4运算优先级由括号强制指定(1 3) * 2; // 8。三个特殊值与布尔类型存在三个非真实数字的特殊值Infinity; // 例如 1/0 的结果 -Infinity; // 例如 -1/0 的结果 NaN; // 例如 0/0 的结果意为 Not a Number布尔类型只有true与false。字符串可以用单引号或双引号创建abc与Hello, world等价。相等性、比较与类型转换陷阱否定用!严格相等用严格不等用!!true; // false 1 1; // true 2 1; // false 1 ! 1; // false 2 ! 1; // true 1 10; // true 2 2; // true字符串用拼接并且拼接时会发生隐式类型转换Hello world!; // Hello world! 1, 2, 3; // 1, 2, 3数字被转为字符串 Hello [world, !]; // Hello world,! a b; // true字符串按字典序比较使用双等号会进行隐式类型转换type coercion而不做转换5 5; // true null undefined; // true 5 5; // false null undefined; // false隐式转换还会引发一些奇怪行为例如13 !0; // 14!0 为 true被转换为 1 13 !0; // 13true字符串拼接优先true 被转为字符串文档强调false、null、undefined、NaN、0和是假值falsy其余一切均为真值truthy。特别注意0是假值而0是真值尽管0 0成立。字符串常用操作This is a string.charAt(0); // T Hello world.substring(0, 5); // Hello Hello.length; // 5length 是属性不是方法不要加括号此外还有null用于表示有意的空值与undefined表示值当前不存在尽管undefined本身也是一个值两个特殊值。2. 变量、数组与对象var 声明与函数作用域变量用var关键字声明JavaScript 是动态类型语言无需指定类型赋值用单个var someVar 5;如果省略var关键字不会报错someOtherVar 10;但变量会被创建在全局作用域而不是你定义它的那个作用域——这是文档特别提醒的陷阱。未赋值的变量默认为undefinedvar someThirdVar;多条声明可用逗号分隔var someFourthVar 2, someFifthVar 4;数学运算有便捷写法someVar 5; // 等价于 someVar someVar 5 someVar * 10; someVar; // 加 1 someVar--; // 减 1数组有序、可变、任意类型数组是任意类型值的有序列表下标从 0 开始var myArray [Hello, 45, true]; myArray[1]; // 45 myArray.push(World); myArray.length; // 4 myArray[3] Hello; // 在指定下标处新增/修改数组支持从首尾增删元素myArray.unshift(3); // 在头部添加 someVar myArray.shift(); // 移除头部元素并返回 myArray.push(3); // 在尾部添加 someVar myArray.pop(); // 移除尾部元素并返回还有join、slice、splice三个常用方法var myArray0 [32, false, js, 12, 56, 90]; myArray0.join(;); // 32;false;js;12;56;90 myArray0.slice(1, 4); // [false,js,12]含 1 不含 4 myArray0.splice(2, 4, hi, wr, ld); // [js,12,56,90]从下标 2 删除 4 个并插入 3 个字符串 // 执行后 myArray0 [32,false,hi,wr,ld]注意splice会修改原数组并返回被删除的子数组而slice不修改原数组。对象无序键值对集合JavaScript 对象等价于其他语言中的字典或映射键值对的无序集合。键是字符串但只要是合法的 JavaScript 标识符就不必加引号值可以是任意类型var myObj {myKey: myValue, my other key: 4}; myObj[my other key]; // 4下标语法适合含空格等非常规键名 myObj.myKey; // myValue点语法仅限合法标识符对象是可变的可修改值、可新增键myObj.myThirdKey true; myObj.myFourthKey; // undefined访问未设置的键返回 undefined3. 逻辑与流程控制结构条件与循环if/else if/else与 C、Java 一致while循环同理甚至可直接写出死循环while (true){}。do-while保证循环体至少执行一次var input; do { input getInput(); } while (!isValid(input));for循环三要素与 C/Java 相同初始化、继续条件、迭代步进for (var i 0; i 5; i){ // 会执行 5 次 }带标签的循环可以一次性跳出外层循环与 Java 的带标签 break 类似outer: for (var i 0; i 10; i) { for (var j 0; j 10; j) { if (i 5 j 5) { break outer; // 跳出 outer 外层循环而非仅内层 } } }for/in 与 for/of 的差异for/in遍历对象自身的可枚举属性文档示例中遍历person的三个键拼出Paul Ken 18 。for/of则遍历可迭代对象iterable包括内置的 String、Array以及类数组的 arguments、NodeList、TypedArray、Map、Set 与用户自定义可迭代对象var myPets ; var pets [cat, dog, hamster, hedgehog]; for (var pet of pets){ myPets pet ; } // myPets cat dog hamster hedgehog 逻辑运算符与短路求值是逻辑与、||是逻辑或。二者都会短路short circuit这一特性常被用来设置默认值var name otherName || default;switch 语句switch使用做严格相等判断每个case之后必须写break否则命中分支之后的 case 也会被继续执行fall-throughgrade B; switch (grade) { case A: console.log(Great job); break; case B: console.log(OK job); break; case C: console.log(You can do better); break; default: console.log(Oy vey); break; }4. 函数、作用域与闭包函数声明与自动分号插入陷阱函数用function关键字声明function myFunction(thing){ return thing.toUpperCase(); } myFunction(foo); // FOO文档特别警告一个由自动分号插入automatic semicolon insertion, ASI引发的经典陷阱return关键字与返回值必须位于同一行否则会在return后自动插入分号导致永远返回undefined。使用 Allman大括号另起一行风格时务必小心function myFunction(){ return // - 这里会被自动插入分号 {thisIsAn: object literal}; } myFunction(); // undefined函数是一等公民JavaScript 函数是一等对象first class objects可以被重新赋值给不同变量名、作为参数传给其他函数——例如作为事件处理器传给setTimeout注意setTimeout/setInterval并非语言本身的一部分而是浏览器与 Node.js 提供的宿主 APIsetTimeout(myFunction, 5000); // 5 秒后调用一次 setInterval(myFunction, 5000); // 每 5 秒调用一次 setTimeout(function(){ // 匿名函数直接作为参数 }, 5000);函数作用域与 IIFEJavaScript 是函数作用域函数有自己的作用域但普通代码块没有if (true){ var i 5; } i; // 5 —— 在块级作用域语言中这里应为 undefined但 JS 不是这一特性催生了立即执行匿名函数IIFE, immediately-invoked function expression这一经典模式用于防止临时变量泄漏到全局作用域(function(){ var temporary 5; // 浏览器中全局对象恒为 window非浏览器环境如 Node.js下名字可能不同 window.permanent 10; })(); temporary; // 抛出 ReferenceError permanent; // 10闭包JavaScript 最强大的特性之一如果函数定义在另一个函数内部内层函数可以访问外层函数的所有变量即使外层函数已经退出function sayHelloInFiveSeconds(name){ var prompt Hello, name !; function inner(){ alert(prompt); } setTimeout(inner, 5000); // setTimeout 是异步的sayHelloInFiveSeconds 会立即返回 // 稍后 setTimeout 才调用 inner但由于 inner 闭包了 // sayHelloInFiveSeconds调用时仍能访问 prompt 变量。 } sayHelloInFiveSeconds(Adam); // 5 秒后弹出 Hello, Adam!5. 深入对象、构造函数与原型链this 的绑定规则对象可以包含函数对象方法被调用时可通过this访问所属对象。关键是this的取值取决于函数如何被调用而非在哪里定义myObj { myString: Hello world!, myFunc: function(){ return this.myString; } }; myObj.myFunc(); // Hello world! var myFunc myObj.myFunc; myFunc(); // undefined脱离对象上下文调用this 不再指向 myObj反过来函数也可以在定义之后被挂到对象上并通过this访问它var myOtherFunc function(){ return this.myString.toUpperCase(); }; myObj.myOtherFunc myOtherFunc; myObj.myOtherFunc(); // HELLO WORLD!call、apply 与 bindcall和apply可在调用时显式指定执行上下文this。二者几乎相同区别仅在于参数传递方式call逐个传参apply传参数数组var anotherFunc function(s){ return this.myString s; }; anotherFunc.call(myObj, And Hello Moon!); // Hello World! And Hello Moon! anotherFunc.apply(myObj, [ And Hello Sun!]); // Hello World! And Hello Sun!apply在需要把数组展开传给接受序列参数的函数时尤其有用Math.min(42, 6, 27); // 6 Math.min([42, 6, 27]); // NaN直接传数组会失败 Math.min.apply(Math, [42, 6, 27]); // 6call/apply是一次性的若要长期固定上下文使用bind。bind还可用于部分应用柯里化var boundFunc anotherFunc.bind(myObj); boundFunc( And Hello Saturn!); // Hello World! And Hello Saturn! var product function(a, b){ return a * b; }; var doubler product.bind(this, 2); doubler(8); // 16构造函数与 new用new关键字调用函数时会创建一个新对象并通过this提供给该函数为此设计的函数称为构造函数constructorvar MyConstructor function(){ this.myNumber 5; }; myNewObj new MyConstructor(); // {myNumber: 5} myNewObj.myNumber; // 5原型实例化与继承的统一概念与多数面向对象语言不同JavaScript 没有从类蓝图创建实例的概念而是把实例化与继承合并为一个概念原型prototype。每个对象都有一个原型当访问对象上不存在的属性时解释器会去查它的原型。一些实现允许通过魔法属性__proto__访问原型。它便于解释原型机制但不属于标准文档随后会给出标准的原型用法var myObj { myString: Hello world! }; var myPrototype { meaningOfLife: 42, myFunc: function(){ return this.myString.toLowerCase(); } }; myObj.__proto__ myPrototype; myObj.meaningOfLife; // 42属性在原型上找到 myObj.myFunc(); // hello world!方法同样沿原型链找到如果属性不在原型上会继续查找原型的原型依此类推原型链myPrototype.__proto__ { myBoolean: true }; myObj.myBoolean; // true原型机制不涉及复制每个对象保存的是对原型的引用。因此修改原型会立即反映到所有继承它的对象上myPrototype.meaningOfLife 43; myObj.meaningOfLife; // 43for/in遍历对象属性时会沿原型链一路向上直到null原型for (var x in myObj){ console.log(myObj[x]); } // 输出 // Hello world! // 43 // [Function: myFunc] // true若只想考虑对象自身的属性而非原型链上的用hasOwnProperty()过滤for (var x in myObj){ if (myObj.hasOwnProperty(x)){ console.log(myObj[x]); } } // 仅输出Hello world!标准方式创建指定原型的对象__proto__非标准也没有标准方法能修改既有对象的原型。但有两种方式可创建具有指定原型的新对象。方式一Object.create较新的 JS 特性并非所有实现都可用var myObj Object.create(myPrototype); myObj.meaningOfLife; // 43方式二借助构造函数到处可用。构造函数有一个prototype属性——注意这不是构造函数函数本身的原型而是用new通过该构造函数创建的新对象被赋予的原型MyConstructor.prototype { myNumber: 5, getMyNumber: function(){ return this.myNumber; } }; var myNewObj2 new MyConstructor(); myNewObj2.getMyNumber(); // 5 myNewObj2.myNumber 6; myNewObj2.getMyNumber(); // 6包装对象与 polyfill内置类型如字符串、数字也有对应构造函数可创建包装对象var myNumber 12; var myNumberObj new Number(12); myNumber myNumberObj; // true typeof myNumber; // number typeof myNumberObj; // object myNumber myNumberObj; // false严格相等不成立 if (0){ /* 不会执行0 是假值 */ } if (new Number(0)){ /* 会执行包装数字是对象对象恒为真值 */ }不过包装对象与常规内置类型共享同一个原型因此可以给内置类型增加功能例如给字符串加方法String.prototype.firstCharacter function(){ return this.charAt(0); }; abc.firstCharacter(); // a这一特性常被用于polyfill在旧版 JavaScript 子集中实现较新的特性使其能运行在旧浏览器等老旧环境里。文档给出的经典例子是为Object.create编写 polyfill仅在不存在时才覆盖if (Object.create undefined){ // 若已存在则不覆盖 Object.create function(proto){ // 创建一个带正确原型的临时构造函数 var Constructor function(){}; Constructor.prototype proto; // 用它创建具有恰当原型的新对象 return new Constructor(); }; }6. ES6 补充let、const 与箭头函数let 与 const词法作用域变量let允许在词法作用域块级中定义变量与var的函数作用域形成对比let name Billy; name William; // let 变量可以重新赋值const同样定义词法作用域变量但赋值后不可重新赋值const pi 3.14; pi 4.13; // 不允许箭头函数lambda 语法ES6 为函数引入新语法——箭头函数可像const/let变量一样在词法作用域中定义const isEven (number) { return number % 2 0; }; isEven(7); // false传统写法等价形式为function isEven(number) { return number % 2 0; }文档特意加了引号强调等价二字因为箭头函数是表达式赋值不能在定义之前调用。以下用法是非法示例add(1, 8); // 报错add 尚未定义 const add (firstNumber, secondNumber) { return firstNumber secondNumber; };7. 文档结构与深入学习指引本指南的结构遵循 learnxinyminutes-docs 仓库的代码即文档范式全部示例以带注释的可运行代码块呈现每个区块用//分隔线标注主题编号1 数值/字符串/运算符、2 变量/数组/对象、3 逻辑与控制、4 函数/作用域/闭包、5 对象/构造/原型、6 ES6 补充。读者可以直接把代码块复制到浏览器控制台或 Node.js 中逐行验证这正是 README.md 描述的以有效、带注释的代码呈现并随行解释的教学理念。文档末尾的延伸阅读指引同样值得参考Mozilla Developer Network (MDN)关于 JavaScript 在浏览器中使用方式的权威文档且本身是 wiki可边学边参与贡献MDN 的 A re-introduction to JavaScript以更详细的方式覆盖本文大部分概念本指南有意只讲语言本身若想了解如何在网页中使用 JavaScript应从Document Object ModelDOM学起JavaScript Garden深入剖析语言中所有反直觉之处的指南JavaScript: The Definitive Guide经典参考书Eloquent JavaScriptMarijn Haverbeke 著附终端练习的优秀 JS 书籍/电子书javascript.info现代 JS 教程覆盖核心语言与浏览器基础及进阶主题。这些资源对应的英文原版链接均收录于 javascript.md 末尾的 Further Reading 一节意大利语版则收录于 it/javascript.md 的 Approfondimenti 一节两处相互印证。小结通过 it/javascript.md 这份意大利语速成指南可以系统掌握 JavaScript 的核心全貌单一的 IEEE 754 双精度数值类型及其精度陷阱、/与隐式类型转换的区别、假值规则、var的函数作用域与块级作用域的缺失、for/in与for/of的差异、一等函数与闭包、this的调用时绑定、call/apply/bind的上下文控制、以原型链为核心的继承模型、包装对象与 polyfill 手法以及 ES6 的let/const/箭头函数。理解原型链这一节尤为关键——它正是 JavaScript 与 Java 等传统 OOP 语言最根本的分水岭。配合 zh-cn/javascript.md中文版与 javascript.md英文版对照阅读再借助 lint/frontmatter.py 维护的 front matter 规范理解文档协作方式即可在几分钟内完成从语法到对象模型的完整入门。赞分享文档教程【免费下载链接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!项目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs点击查看免费下载相关推荐learnxinyminutes-docs 西班牙语版 JavaScript 入门指南从基础语法到原型链的完整实战解析learnxinyminutes docs 西班牙语版 JavaScript 入门指南从基础语法到原型链的完整实战解析 本指南以 learnxinyminut文档教程JavaScript 快速入门完全指南基于 learnxinyminutes-docs 丹麦语教程的语法、作用域、原型链与 ES6 深度解析JavaScript 快速入门完全指南基于 learnxinyminutes docs 丹麦语教程的语法、作用域、原型链与 ES6 深度解析 本指南以 lea文档教程基于 learnxinyminutes-docs 的 Swift 语言快速教程从基础语法到实战代码的完整指南基于 learnxinyminutes docs 的 Swift 语言快速教程从基础语法到实战代码的完整指南 本指南以 learnxinyminutes do文档教程上一篇Windmill CLIwmill实战指南安装配置、工作区管理、脚本运行与全量同步下一篇IoT-For-Beginners 第 3 课用传感器与执行器构建一个会感知光线的智能夜灯创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考