教程【免费下载链接】javascript-in-one-picLearn javascript in one picture.项目地址https://gitcode.com/gh_mirrors/ja/javascript-in-one-pic点击查看免费下载本指南围绕开源仓库 javascript-in-one-pic 的核心产物——一张汇总 JavaScript 语法与核心概念的脑图Mind map展开系统介绍该项目的设计思路、仓库文件资源与完整的知识结构。读完本文你可以快速建立对 JavaScript 的整体认知、按图定位具体语法细节并把脑图内容直接用作日常开发时的语法速查手册。javascript-in-one-pic 项目核心产物JavaScript 语法知识脑图总览项目定位用一张图承载整个 JavaScript 语法体系从个人笔记到开源语法手册按项目 READMEREADME.md与中文版README-zh.md的说明该项目最初是作者为个人使用而记录的 JavaScript 语法与基本概念笔记同时兼作教学课程大纲。在整理过程中作者发现用脑图Mind map来总结一门编程语言的效果出乎意料地好这种树状结构看起来就像一本 JavaScript 手册的目录从细节上被逐层扩充既能从宏观上把握语言全貌又能非常快速地定位到某个实用的语法细节。因此项目的核心交付物只有一张图——js in one pic.png——它把 JavaScript 的标识符规则、数据类型、运算符、作用域、引用类型与流程控制等主干知识组织成一张可读的总览图。适合谁使用README-zh 对目标读者给出了清晰的分层建议完全没有编程经验的新手不适合在无人指导的情况下独自学习拥有其他编程语言经验的 JavaScript 新手可以把脑图作为学习提纲使用有经验的 JavaScript 开发人员更适合把它当作语法手册随时查阅。作者还建议将导出的 PDF 打印出来贴在电脑旁边作为常驻的参考材料。工具链与文件格式从 README 的 About this project 一节可以确认项目使用的工具链与交付格式脑图使用MindnodemacOS 思维导图工具绘制同时导出PDF、PNG、OPML三种格式提供*.mm文件可用开源脑图软件FreeMind继续编辑项目整体完成后计划再发布 SVG 格式README 以 issues #9 跟踪该事项README 的 Online version 一节还提供了在线脑图入口Online Mindmap并列出待办项 Syntax highlight。仓库资源一览五种格式各取所需仓库根目录下与知识内容直接相关的文件如下均可按需选用文件格式用途js in one pic.pngPNG 位图一张总览图直接查看、分享js in one pic.pdfPDF打印输出贴在电脑旁当手册js in one pic.mmFreeMind 工程用 FreeMind 打开即可继续编辑js in one pic.opmlOPML大纲标准格式可导入大多数主流脑图/大纲工具js in one pic.mindnodeMindnode 源工程保留原始的绘制工程含 contents.xml、viewState.plist 等其中 js in one pic.mm 与 js in one pic.opml 是纯文本的结构化源文件内容与 PNG 中的脑图一一对应本文后续的脑图内容详解即以其为准逐条展开。此外仓库还提供 5 种语言的 READMEREADME.md、README-zh.md、README-zh_TW.md、README-pt_BR.md、README-es_MX.md。颜色标记脑图里的三色信号灯README 用三个徽章规定了脑图配色的语义这在阅读和继续编辑脑图时非常关键不推荐使用not recommended#7E1600 深红重要important#4E8D20 绿注意warning#DE2B00 橙红从 js in one pic.mm 的源码FreeMind XML 的COLOR属性可以印证这些颜色确实被落实到具体知识点上例如a 123; // global未用var声明、直接赋值的全局变量以#800000深红色标注属于不推荐类写法js in one pic.mmObject (basic) 与 Object (OOP) 两个主干节点以及 root of everything 以#008000/#057F00绿色标注为重要内容js in one pic.mm、js in one pic.mm数组的shift/unshift/sort/reverse/splice下方注释 // will change the array 以#FF0000红色标注为警告提示这些方法会原地修改原数组js in one pic.mm。另外脑图中还预留了一个空的 Tips 分支js in one pic.mm从结构看是用于日后补充易错提示的预留位置。脑图内容详解按主干逐层展开脑图共分六大主干Identifier标识符、Comments注释、Data type数据类型、Operators运算符、Scope作用域、Reference type引用类型以及一个相对独立的 Flow control流程控制分支。以下按 js in one pic.mm 的实际内容逐一展开并补充必要的原理说明。Identifier 标识符标识符分支js in one pic.mm覆盖以下规则大小写敏感a ! A开头字符必须以字母、下划线_或美元符号$开头其中字母既包括 ASCII 字母也包括 Unicode 字母关键字key wordsbreak; case; catch; continue; default; delete; do; else; finally; for; function; if; in; instanceof; new; return; switch; this; throw; try; typeof; var; void; while; with保留字Reserved words分两种场景非严格模式下class; const; enum; export; extends; import; super;use strict严格模式下额外保留implements; interface; let; package; private; protected; public; static; yield;变量声明var a; // local局部变量 a 123; // global未声明即赋值成为全局变量其中直接赋值而不加var的写法在脑图中被标记为不推荐深红色因为它会在全局作用域上隐式创建变量容易造成命名冲突与难以追踪的 bug。Comments 注释注释分支js in one pic.mm只列出两种基础写法// single line 单行注释 /* multi-line comments */ 多行注释Data type 数据类型数据类型是脑图中最庞大的分支之一js in one pic.mm包含六类基础类型与函数类型。Number数字typeof返回number常见取值0、1.2、045八进制、0x56十六进制、0.314e2科学计数法、NaN类型转换Number()系列parseInt(2.7, 10); // 2 parseInt(10, 2); // 2按二进制解析 parseFloat(2.5); // 2.5 isNaN(parseFloat(a)); // true支持运算符 - * / %以及比较运算符, , , , !, 。String字符串typeof返回string取值可用双引号Hello或单引号World转换String()/toString()var a 8; a.toString(2); // 1000转为二进制字符串**不可变immutable**特性var a ABC; a[0]; // A a[0] D; a; // ABC赋值不生效字符串不可变 var a abc; a a d; a; // abcd重新赋值得到新字符串运算符用于拼接以及比较运算符, , , , !, 。Boolean布尔值typeof返回boolean取值只有true/falseBoolean()转换规则脑图按输入类型分组给出numberBoolean(0); // false、Boolean(NaN); // false、Boolean(!0); // truestringBoolean(); // false、Boolean(*); // trueobjectBoolean(null); // false、Boolean({}); // trueundefinedBoolean(undefined); // false归纳起来即0、NaN、空字符串、null、undefined 在布尔上下文中均为 falsy其余值包括空对象{}为 truthy。Undefined未定义typeof返回undefined唯一取值就是undefinedundefined≠ 未声明Not defined这是脑图特意强调的易错点undefined undefined; // true var a; a undefined; // true已声明但未赋值 console.log(d); // Errord 从未声明直接报 ReferenceErrorObject基础与 Nulltypeof返回object字面量创建var p { name: Ad, age: 24 }; var q {}; q.name Bob; q.age 24; console.log(q.name); // Bob console.log(q[age]); // 24既支持点号也支持方括号访问构造函数创建var p new Object(); p.sayHi function(){ console.log(Hi!); } p.sayHi(); // Hi!Null属于类基本类型typeof null同样返回object历史遗留行为null undefined; // true宽松相等成立因为null被视为未定义对象。Function基础typeof返回function三种创建方式var a function(arg1, arg2){ // 函数表达式 //func body; } function a(arg1, arg2){ // 函数声明 //func body; } (function(arg1, arg2){ // 立即执行函数表达式IIFE //func body; })函数内部inside function参数按顺序传入var f function(x, y){ console.log(x: x , y: y); }; var x x, y y; f(x, y); // x: x, y: y f(y, x); // x: y, y: x缺省参数为undefinedvar f function(x){ console.log(x); }; f(); // undefined内置arguments对象按索引保存所有实参var f function(){ console.log(arguments); }; f(3, 2, 1); // { 0: 3, 1: 2, 2: 1 }return用于返回结果脑图单列 return 节点提示其作用。Operators 运算符运算符分支js in one pic.mm重点讲解类型转换与比较语义。算术与强制类型转换casting - * / %四个基础运算符中脑图重点演示了与-在混合类型下的转换优先级的转换优先级string number boolean只要有一端是字符串就偏向拼接1 2; // 12 3 4; // 34 5 false;// 5false 6 true; // 7-的转换优先级number string boolean-没有拼接语义两端都向数字转换1 - 2; // -1 3 - 4; // -1 5 - false;// 5 6 - true; // 5自增自减与赋值a、a--、a1、a-1被归为一组提醒这些运算符既有返回值又会改变变量本身。比较运算关系比较, , , 宽松相等, !——只比较值only value比较前会做类型转换严格相等, !——同时比较值与类型both value type类型转换视角a b本质上等价于a - b 0即先按数字规则转换再比较。逻辑运算!true; // false true false; // false false || true; // trueScope 作用域作用域分支js in one pic.mm是脑图中理论密度最高的一块包含执行上下文、作用域链与闭包三个子主题脑图以 ASCII 示意图辅助说明。Execution context 执行上下文脑图用下面的示意图说明全局对象 执行上下文的关系在 Node.js 中全局对象是global在浏览器中则是window每个执行上下文内部都有一个 Variable Object变量对象存放该上下文中的变量、数据、函数与对象。------------- ----------------------- |Node ------ |Execution Context | ------------- | ----------------------- |global { | -- |[Variable Object] { | | | | | | |}; | | | variables | ------------- | | | | | data | | | | | | functions | ------------- | | | |Browser ----- | objects | ------------- | | |window { | | ... | | | | | |}; | |}; | ------------- -----------------------每次调用函数都会创建新的执行上下文并压入 Context Stack上下文栈当前执行上下文中的this指向拥有该函数的对象。示意图如下----------------------------------- |function b() // create new context ----- ----------------------------------- | |Variable Object { | | --------------- | arguments ...; | | | | | | | | | | | | | | |}; | | | | |Scope chain | | | . | | ------------------------------- | | | . | | |global | | | | . | | | --- f no; | | | | | | | | | | | | | | | --- function a() | | | | | | | --- f ye | | | --------------- | | | | | - |function b | | | --- function b() | | --------------- | | --- | | |function a | | | | | | --------------- | | --- | | |global context | | | | | --------------- | ------------------------------- | Context Stack |this {Object owns b}; | -----------------------------------Scope chain 作用域链脑图用如下结构说明作用域链的形态全局作用域在最外层函数作用域逐层嵌套每个函数都有一个指向其外层 Variable Object 的引用从而形成一条链。变量查找时沿这条链由内向外进行。-------------------------------------------- |Scope Chain | -------------------------------------------- -global [Variable Object] | | | | | - var x; | | | | | | --------------- | | | | | - function a() [Variable Object] | | | | | | | | | | | | -- var x; | | | | | | | | | | | | | -- function b() [Variable Object] | | | | | | --------------- | | | | | - function c() [Variable Object] | | | | | | | | | | | | -- var x; | | | | | | | | | | | | | -- function d() [Variable Object] | | | | | v | --------------------------------------------Closure 闭包闭包子主题给出的是闭包 函数 其作用域链的示意内部函数inc引用了外层执行上下文中的变量x即使外层函数执行完毕inc通过作用域链依然能访问并修改x。脑图同时给出inc1、inc2两次调用inc()的示例暗示每次调用都会各自捕获独立的x从结构可以推断这正是闭包实现私有状态的机制。------------------- ----------------- |Execution context | ---[Scope chain] | ------------------- | ----------------- | var x 100; | | |[Function inc] | | | var inc1 inc(); -- | | | | var inc2 inc(); -- | - x; | | | | | | | | | inc1(); | | - [Function] | | | inc1(); | | | | | inc2(); | | - x; | | | inc1(); | | | | | inc2(); | ----------------- -- x; | | | -------------------Reference type 引用类型引用类型分支js in one pic.mm涵盖 Function、Array 与面向对象OOP的 Object。Function一等公民typeof返回function属性f.length;形参个数函数作为值传递callback 回调var api function(){ return { name: rainy, age: 24 }; }; var handler function(d){ console.log(Name: d.name, Age: d.age); }; var request function(api, callback){ callback(api()); }; request(api, handler); // Name: rainy, Age: 24方法 apply / call / bind// func.apply(thisObj, [arg1, arg2, ...]); // func.call(thisObj, arg1, arg2, ...); // func.bind(thisObj, arg1, arg2, ...); // 关于 thisObj参见 Scope 分支 var sayHi function(name){ console.log(Hello, name !); }; sayHi.call(this, rainy); // Hello, rainy! sayHi.apply(this, [rainy]); // Hello, rainy! sayHi.bind(this, rainy)(); // Hello, rainy!三者的共同点是指定函数体内的this区别在于call逐个传参、apply以数组传参、bind返回一个已绑定this与参数的新函数而不会立即执行。Array数组typeof返回object数组本质是对象两种创建方式等价var a [1, 2, 3, [4, true]]; var a new Array(1, 2, 3, [4, true]);属性a.length; // 4常用方法脑图逐一给出a[0] 1; // true下标访问 a[3][1] true; // true二维数组访问 a.slice(0, 2); // [1, 2]切片不修改原数组 a.indexOf(1); // 0查找元素下标 a.push({}); // 返回新的 a.length入栈Mod 修改原数组 a.pop(); // 返回被弹出的元素Mod 修改原数组 a.join(-); // ?自测题拼接所有元素为字符串 a.toString() a.join(,); // true var s a,b,c,d; s.split(,); // [a, b, c, d]字符串分割成数组 a.concat([a, b]); // 返回新数组原数组不变 —— 与 push()原地修改对比map / reduce脑图标注了回调函数签名// arr.map(callback, thisObj) /* callback function(element, index, arr){ * return element to the same pos of (returned)arr; * }; */ [55, 44, 33, 22, 11].map(function(e, i, arr){ return e/(arr.length-i); }); // [ 11, 11, 11, 11, 11 ] // arr.reduce(callback, init) /* callback function(prev, curr, index, arr){ * curr 依次遍历 arr 的后续元素 * prev 缓存上一次的返回值初始值为 init未传 init 时取 arr[0]。 * }; */ [55, 44, 33, 22, 11].reduce(function(p, c, i, arr){ return p c/(arr.length-i); }, 55); // 约 84.88注原图注释写作 0实际累加结果约为 84.88上述map示例中每个元素被除以该元素距离末尾的元素个数 1恰好得到五个 11reduce示例则演示了带初始值55的累加过程。filter / some / every脑图列出但未展开代码属于同类高阶迭代方法shift / unshift / sort / reverse / splice以红色警告标注// will change the array提示这五个方法都会原地修改原数组遍历iteration的两种写法for(var i 0; i a.length; i){ console.log(a[i]); } a.forEach(function(ele){ console.log(ele); });ObjectOOP构造函数、原型链与继承脑图以 root of everything绿色重要标记定位 Object随后展开三个子主题构造函数Constructorfunction Person(name){ this.name name; this.sayHi function(){ console.log(Hi this.name !); }; }; var p1 new Person(Ad); var p2 new Person(Bob); p1.name // Ad p2.sayHi(); // Hi Bob! p1.constructor Person // true p1 instanceof Person // true p1.sayHi p2.sayHi // false每个实例各自拥有独立的 sayHi 函数原型链prototype chainfunction Person(){}; Person.prototype.name Person; var p1 new Person(); var p2 new Person(); p2.name rainy; console.log(p1.name); // Person来自原型 console.log(p2.name); // rainy实例自有属性覆盖原型属性归属判断与遍历保护p1 instanceof Person // true p1.age 24; p1.hasOwnProperty(name); // falsename 来自原型不是实例自有属性 Person.hasOwnProperty(name); // true p1.hasOwnProperty(age); // true实例自有属性 name in p1 // truein 会沿原型链查找 age in Person // falsePerson 函数本身没有 age原型属性共享的经典陷阱红色警告部分// All properties on the prototype are shared among instances Person.prototype.friends [Ad, Bob]; p1.friends.pop(); // Bobp1 修改了共享数组 console.log(p2.friends); // [Ad]p2 看到的数组也被改掉了 // 推荐做法结合构造函数与原型 function Person(){ this.friends [Ad, Bob]; // 引用类型属性放构造函数每个实例独立一份 }; Person.prototype.name Person; // 方法/值类型属性放原型共享**继承Inheritance**的两种方式原型链继承function Father(){}; Father.prototype.familyName Good; function Child(){}; Child.prototype new Father(); // 让子类原型指向父类实例 var c new Child(); console.log(c.familyName); // Good借用构造函数constructor stealingfunction Father(){ this.familyName Good; }; function Child(){ Father.call(this); // 在子类实例上调用父类构造函数 }; var c new Child(); console.log(c.familyName); // Good两种方式的差异在于原型链继承共享父类原型上的方法而借用构造函数继承能让每个子类实例获得独立的父类实例属性配合apply/call使用参见 Reference type - Function 分支。Flow control 流程控制流程控制分支js in one pic.mm覆盖五类语句if / 三元if(cond){ state1; }else if(cond2){ state2; }else{ state3; } false ? a : b // 条件为 false 时取 bswitchswitch (day) { case MON: break; case TUE: break; case WEN: break; default: }whiledo { state1; } while(cond) // 先执行一次再判断 while(cond){ state1; } break; continue; // 跳出循环 / 跳过本次迭代forfor(var i 0; i len; i){ state1; } for(var k in Obj){ // if Obj.hasOwnProperty(k){ console.log(Obj[ k ] Obj[k]); // } }其中for...in的示例特意注释了hasOwnProperty过滤这正是为了避开原型链上可枚举属性与上一节原型链警告相呼应。try / catch / finallyvar a {}; try{ a.f(); // 调用不存在的方法 }catch(e){ console.log(e instanceof TypeError); // true (function(){ console.log(a.f()); // a.f() })(); }finally{ console.log(always); // always无论是否抛错都会执行 }项目进度与 TODOREADME 的 TODO 清单用复选框明确标注了脑图的内容覆盖情况可归纳如下主题状态Function基础函数内部 arguments、return已完成Function作为值传递callback 回调已完成Function方法 apply / call / bind已完成Array方法 map / reduce已完成ObjectOOP构造函数、属性已完成ObjectOOP继承已完成Scope 作用域已完成Function闭包已完成Flow controltry / catch已完成Operators位运算bitwise待完成ES6待完成此外在线版本的 Syntax highlight语法高亮也处于待办状态。也就是说当前脑图覆盖的是 ES5 时代 JavaScript 的核心语法骨架位运算与 ES6 特性尚未纳入。相关项目与参考资料相关项目仓库维护者以同样的一张图形式准备了 Python3 in one picGo 语言版本Go in one pic在 README 中标明准备中。参考资料详见 README.md 的 References 小节《Professional JavaScript for Web Developers》JavaScript 高级程序设计、JavaScript Garden、MDN JavaScript 文档以及作者撰写的图解 Javascript 上下文与作用域博文。脑图中 Scope 分支的 ASCII 示意图即源自后者这一点从脑图文件中的署名与链接可以印证。开源协议项目基于 MIT 协议开源许可与免责条款见 LICENSE。这意味着你可以自由地查看、打印、分发这张脑图也可以基于*.mm/.opml源文件继续扩展内容如完成位运算与 ES6 分支只需保留相应的版权声明。赞分享教程【免费下载链接】javascript-in-one-picLearn javascript in one picture.项目地址https://gitcode.com/gh_mirrors/ja/javascript-in-one-pic点击查看免费下载相关推荐deit3_small_patch16_224.fb_in1k实战如何用PyTorch快速实现图像分类deit3_small_patch16_224.fb_in1k实战如何用PyTorch快速实现图像分类 想要快速上手图像分类任务吗 今天我将为你介绍一款为什么选择Buttercoin开源比特币交易所的核心优势解析为什么选择Buttercoin开源比特币交易所的核心优势解析 Buttercoin是一款开源比特币交易所软件旨在通过社区驱动的方式提供安全、透明的比特币交易打造多进度条应用BProgress 1.1新特性深度探索打造多进度条应用BProgress 1.1新特性深度探索 BProgress 是一款轻量级、可定制的进度条工具旨在提升用户体验。作为NProgress的现代创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
