零碎问题收集

Clloz · · 28次浏览 ·

前言

有时候在看书或者查资料的时候会遇到一些小知识点或者小问题,不能写成文章或者还不了解的问题,又害怕忘记,用这篇文章做收集。

JavaScript 相关

小知识

  1. JS 中的语句和表达式,表达式是一组代码的集合,返回一个值。而语句则是组成我们程序的单元,每个语句通过一个或多个关键词完成指定的任务。单个语句可以跨多行。如果每个语句用分号隔开,那么多个语句可以在一行中出现。表达式类型如下:
    • 算数: 得出一个数字, 例如 3.14159. (通常使用 arithmetic operators.)
    • 字符串: 得出一个字符串, 例如, "Fred""234". (通常使用 string operators.)
    • 逻辑值: 得出 true 或者 false. (经常涉及到 logical operators.)
    • 基本表达式: javascript 中基本的关键字和一般表达式。
    • 左值表达式: 分配给左值。
  2. 字面量:用一个固定的值表示,比如 {}, '123', [1,2,3]等,字面量只能作为右值。

  3. 标识符:代码中用来标识变量、函数、函数的参数、或属性的字符序列,在 JavaScript 中,标识符只能包含字母或数字或下划线(_)或美元符号($),且不能以数字开头。标识符与字符串不同之处在于字符串是数据,而标识符是代码的一部分。在 JavaScript 中,无法将标识符转换为字符串,但有时可以将字符串解析为标识符。标识符中的字母也可以包含扩展的 ASCIIUnicode 字母字符(如 À 和 Æ),但不推荐这样做。

  4. HTML5(包括4) 大小写不敏感,CSS 大小写不敏感,JavaScript 大小写敏感。不过 HTML 还是建议小写,因为更严格的 XHTML 标准是要求小写的。

  5. setTimeout 的第一个参数可以是 function 函数,也可以是一个字符串语句,是用字符串语句时,这里的 this 还是指向当前所在执行环境的 this,但如果是 function,需要注意的是所有函数直接调用,内部的 this 在非严格模式下都是指向全局对象的。字符串语句的模式不推荐,有安全风险,可以使用 bind 或者箭头函数。

  6. 立即执行函数表达式 IIFE (immediately invoked function expression) 的原理就是利用运算符让函数声明被引擎识别为函数表达式从而能够立即进行调用,function 这个关键字即可以当作语句,也可以当作表达式,为了避免解析上的歧义,JavaScript 引擎规定,如果function关键字出现在行首,一律解释成语句。通常我们使用的形式有 (function () {})()!function () {}()。但其实还有很多种运算符都能打到同样的效果。不过一般来说还是使用括号,关于性能可以看这篇文章,感兴趣也可以自己去 jsperf 测试一下。

    var i = function(){ /* code */ }();        // undefined
    1 && function(){ /* code */ }();        // true
    1, function(){ /* code */ }();        // undefined
    !function(){ /* code */ }()        // true
    +function(){ /* code */ }()        // NaN
    -function(){ /* code */ }()        // NaN
    ~function(){ /* code */ }()        // -1
    void function(){ /* code */ }()        // undefined
    new function(){ /* code */ }()        // Object
    delete function(){ /* code */ }()        // true
    (function(){ /* code */ })()        // undefined
    (function(){ /* code */ }())        // undefined
    
    // 这种形式要加分号,否则第二行会被引擎解释为第一行的参数
    (function(){ /* code */ }())
    (function(){ /* code */ }())
    
    (function(){ return function(a) {console.log(a)} }())
    (function(){ return 'test iife' }()) //test iife
    
  7. 闭包:函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起构成闭包(closure)。也就是说,闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中,每当函数被创建,就会在函数生成时生成闭包。即每一个函数会主动维护在其内部使用的外部的变量。

  8. 在JavaScript的世界里,有两个词经常被提到,shim和polyfill.它们指的都是什么,又有什么区别?一个shim是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现一个polyfill就是一个用在浏览器API上的shim.我们通常的做法是先检查当前浏览器是否支持某个API,如果不支持的话就加载对应的polyfill.然后新旧浏览器就都可以使用这个API了.

  9. 赋值表达式返回的是右值,return a = b 返回的值是 b 不是 a

  10. 大括号在行首会被引擎理解为一个代码块,所以在使用对象解构赋值的时候如果行首是大括号可以用一个圆括号包在外围来执行。使用圆括号需要注意的点就是上一行个的代码要加上分号,否则可能引发错误。

  11. map可以理解为映射

  12. 指定的属性在指定的对象或其原型链中,则 in 运算符返回 true

  13. 原始类型在调用对应包装类型方法的时候是用一个临时变量来存放包装对象的,使用过后立即销毁。需要注意的是,这种创建临时对象的行为是引擎的处理,不会改变我们定义的原始类型变量(他们不会变为 Object)。只有我们用 new 手动创建的基本包装类型才会执行 typeof 的时候返回 object,手动创建还会引起其他的错误,尽量避免使用。

    //一段JS代码
    var name = "clloz";
    var  firstChar = name.charAt(0);
    console.log(firstChar); //c
    
    // JS引擎的处理过程
    var name = "clloz";
    var temp = new String(name);
    var firstChar = temp.charAt(0);
    temp = null;
    console.log(firstChar); //c
    
    //另一端JS代码
    var name = "clloz";
    name.last = "Zhang";
    console.log(name.last) //undefined
    
    //JS引擎的处理过程
    var name = "clloz";
    var temp = new String(name);
    temp.last = "Zhang";
    temp = null; //这个临时对象立刻被销毁
    
    var temp = new String(name);
    console.log(temp.last); //undefined 再次创造一个临时对象,但这个对象和上一个是没有关系的,自然也没有last属性
    temp = null;
    
    
  14. 所谓的一等公民就是:一等公民可以作为函数参数,可以作为函数返回值,也可以赋值给变量。出自Programming Language Pragmatics:In general, a value in a programming language is said to have first-class status if it can be passed as a parameter, returned from a subroutine, or assigned into a variable.在 JS 中,几乎所有可以使用其他引用值得地方我们都可以使用函数。

  15. 访问器属性只需要 gettersetter 中的一个,不能一个都没有。如果你试图创建一个同时具有数据特征和访问其特征的属性,会报错。访问器属性也可以用字面量形式在对象中定义,但是这只能发生在对象创建的时候,如果要为已经存在的对象添加访问器属性,只能通过 Object.definePropertyObject.defineProperties 方法。在严格模式下访问未定义属性会报错。

  16. Object.defineProperty 方法定义的数据属性和访问器属性,特性默认值都是 falseundefined(布尔型的为 false,其他为 undefined),一个属性一旦被设置为不可配置就不能再变为可配置了。在严格模式对一个不可配置属性执行 delete 操作将会报错,在非严格模式下返回 false 且操作不生效。通过字面量定义的数据属性的特征值都是 true

  17. left-hand-side expression 左手表达式并不一定要出现赋值符号,比如 ++--,他们在执行的过程中实际是有赋值行为的,这也就是为什么 ++a++ 报错的原因。所以区分左手还是右手关键是看有没有赋值行为发生(赋值行为不一定需要赋值操作符,可以有其他形式),LHS 可以理解为 找到要赋值的目标,而 RHS 可以理解为 找到某个已经被赋值的结果

  18. console.timeconsole.timeEnd 的使用

  19. JavaScript 中的标识符第一个字符必须是一个字母、下划线(_)或一个美元符号($);其他字符可以是字母、下划线、美元符号或数字。标识符中的字母也可以包含扩展的 ASCIIUnicode 字母字符(如 ÀÆ),但我们不推荐这样做。

  20. 标准中的词汇翻译

    • Assert:断言,对算法中的某种情况进行判断(比如判断 xxx 是否为 Object
    • filed:字段
    • explicit:显式的
    • implicit:隐式的
    • clarify:阐明
    • notaion:符号
    • convention:约定,惯例
    • lexical:词法
    • syntax:语法,句法(关注句子的组成部分的任务和句子结构)
    • grammar:文法(syntax是grammar的子集)
    • context:上下文
    • Context-Free Grammars:上下文无关文法
    • production:产生式
    • nonterminal:非终结符
    • terminal:终结符
    • specified:指定的
    • goal symbol:目标符
    • ambiguity:歧义
    • parameterized:参数化
    • shorthand:缩写
    • subscript:下标
    • annotation:注释
    • suffix:后缀
    • alternative:可选值(多个值里的情况)
    • prefix:前缀
    • intrinsic:内置的
    • Conceptually:概念上来说
    • a set of:一套,一组
  21. JavaScript 中字符串最大长度限制为 2^{53}-1,这个长度是受下标限制,下标的最大值就是 JS 中能表示的最大安全整数。实际引擎是不可能允许分配那么大的字符串的,电脑也没有这么大的存储。V8heap 上限只有 2GB 不到,允许分配的单个字符串大小上限更只有大约是 512MB 不到。JS字符串是 UTF16 编码保存,所以也就是 2.68 亿个字符(按基础平面中的两字节计算)。

  22. 基本包装类型作为函数直接调用的作用是对参数进行强制类型转换,Object 作为函数直接调用相当于对参数进行装箱操作,具体内容参考标准,装箱机制会频繁产生临时对象,对性能有有要求的场景应避免使用。除了直接用 new 调用基本包装类型的构造函数来进行装箱操作之外,还有其他的方法可以达到装箱效果。

    var symbolObject = Object("a"); 
    console.log(typeof symbolObject); //object 
    console.log(symbolObject instanceof Symbol); //true 
    console.log(symbolObject.constructor == Symbol); //true
    
    var a = '123'
    console.log(typeof a) //string
    var t = (function () {return this}).call(a)
    console.log(typeof t) //object
    
  23. JavaScript 标准中,规定了 ToPrimitive 函数,它是对象类型到基本类型的转换(即,拆箱转换)。拆箱转换会尝试调用 valueOftoString 来获得拆箱后的基本类型。如果 valueOf 和 toString 都不存在,或者没有返回基本类型,则会产生类型错误 TypeErrorString 的拆箱转换会优先调用 toString。在 ES6 之后,还允许对象通过显式指定 @@toPrimitive Symbol 来覆盖原有的行为。
    //覆盖对象的valueOf和toString方法
    var o = {
        valueOf : () => {console.log("valueOf"); return {}},
        toString : () => {console.log("toString"); return {}}
    }
    
    o * 2
    // valueOf
    // toString
    // TypeError
    
    //ES6 Symbol.toPrimitive
    var o = {
        valueOf : () => {console.log("valueOf"); return {}},
        toString : () => {console.log("toString"); return {}}
    }
    
    o[Symbol.toPrimitive] = () => {console.log("toPrimitive"); return "hello"}
    
    
    console.log(o + "")
    // toPrimitive
    // hello
    
  24. defineProperty 可以创建函数属性。
    var o = {
        a: 10,
        fun: function test() {
            console.log(123);
        }
    }
    Object.defineProperty(o, 't', {
        value: function clloz() {
            console.log(456)
        },
        enumrable: true,
        configurable: true
    })
    o.t()
    console.log(Object.getOwnPropertyDescriptor(o, 't'))
    
  25. Object.create() 可以创建原型为 null 的对象,但是新创建的对象没有 [[prototype]] 属性,以新对象作为 prototype 的函数其构造的实例也没有 [[prototype]] 属性,处于这条原型链上的所有对象都没有 [[prototype]] 属性,不知道这样处理的实际意义是什么。
    function a() {}
    a.prototype = Object.create(null)
    console.log(a.prototype.__proto__) //undefined
    let at = new a
    console.log(at.__proto__) //undefined
    
    function b() {}
    b.prototype = Object.create(a.prototype)
    console.log(b.prototype.__proto__) //undefined
    let bt = new b
    console.log(bt.__proto__) //undefined
    
  26. Object.prototype.toString 访问的是对象的 [[class]] 属性。ES5 之后可以用 Symbol.toStringTag 属性的值覆盖默认结果。
    var o = new Object;
    var n = new Number;
    var s = new String;
    var b = new Boolean;
    var d = new Date;
    var arg = function(){ return arguments }();
    var r = new RegExp;
    var f = new Function;
    var arr = new Array;
    var e = new Error;
    console.log([o, n, s, b, d, arg, r, f, arr, e].map(v => Object.prototype.toString.call(v))); 
    [
        '[object Object]',
        '[object Number]',
        '[object String]',
        '[object Boolean]',
        '[object Date]',
        '[object Arguments]',
        '[object RegExp]',
        '[object Function]',
        '[object Array]',
        '[object Error]'
    ]
    
  27. ES6 新特性,方括号 [] 不仅可以用在属性访问时的表达式,在属性定义时也可以使用(不可以用括号代替)。

  28. 浏览器目标就是从 url 请求到最后渲染出 bitmap,然后交给显卡渲染出最后我们人眼能识别的光信号。

  29. new Array(length) 创建的确定长度的数组无法用 map 进行每一项的初始化。此时将返回一个 length 的值等于 arrayLength 的数组对象(言外之意就是该数组此时并没有包含任何实际的元素,不能理所当然地认为它包含 arrayLength 个值为 undefined 的元素)。

  30. 数组的 fill 方法如果传递的参数是对象,填充的将是对象的引用。

  31. 没有引用外部变量的函数可以被系统优化为非闭包函数。

  32. iframrealm 和当前页面是不同的,所以我们对 ifram 里面的对象执行 object instanceof Object 返回的 false

  33. TypeError: Converting circular structure to JSON 循环引用报错,用 JSON.stringify 方法将对象转字符串,如果对象中有循环引用将报错。

    let a = {
        children: {}
    }
    a.children.parent = a;
    JSON.stringify(a); //Uncaught TypeError: Converting circular structure to JSON
    

问题

  1. 函数柯里化的作用和场景

  2. 原型链中最让人不解的地方就是 Function 是自己的构造函数,也就是 Function.prototype === Function.__proto__ 返回 true,正是这个实例和构造函数为同一对象让 Object instanceof FunctionFunction instanceof Object 都返回 true。我的猜想是:并不是 Function 自己构造了自己,实例和构造函数在引擎中是同一个对象,只不过为了保持每个对象的 instance --> [[prototype]] --> constructor 这个模型。每个函数都是 Function 的实例,所有的内置引用类型的构造函数都是 Function 的实例,所以 Function 就是顶部的构造函数,他不再被其他函数构造,给了它一个 [[prototype]] 属性只是为了保持那个模型。

  3. 类型化数组 类数组对象,填充数组的是这个对象的引用。

  4. 函数柯里化

  5. es6 绑定函数 bind 创建 mdn-bind

  6. JS 性能测试 benchmark.jsjsperf

  7. lodash

  8. map 的概念,在其他语言和 JS 中的区别,map 的应用

  9. 通过访问器属性实现双向数据绑定 JavaScript对象的数据属性与访问器属性

  10. Function.name 细节

  11. ES6 子类有没有自己的 this

  12. throwError 对象

  13. 为什么 arguments.callee 严格模式下不可用 mdn

  14. 在浏览器开发者工具里面执行 Array.prototype.push(123) 后点击页面和敲键盘都会报错

  15. 严格模式的细节

  16. JavaScriptCoreV8 的区别

  17. devtools 的使用教程 chrome://flag

  18. glob patterns 的细节,命令行通配符教程

  19. 自动化测试,jest等

  20. webassembly了解

  21. 编程范式

  22. 理解 RegExp.1-9

  23. csrfxssiframe ,前端安全的三个模块

  24. javascript 的混淆和压缩,构建工具

CSS 相关

小知识

问题

HTML相关

小知识

  1. Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具,能够实现 HTMLCSS 的快速编写。emmet 语法

  2. espresso 的使用

问题

其他

小知识

  1. Nginx可以在前面做一个反向代理和缓存服务器,提供静态文件的服务,后台有多个nodejs服务,提供系统的可用性

  2. git config --global core.editor emacs/vim 修改 git 默认编辑器。

  3. mac 自带 apache 关闭命令 sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist,在启动命令 sudo launchctl load -w /System/Library/LaunchDaemons/org.apache.httpd.plist,配置文件 /etc/apache2/httpd.conf,网站根目录 /Library/WebServer/Documents,查看httpd 的一些配置参数 httpd -V。根据目前的测试,apachectl 命令无法控制系统自带的 apachewhichwhere 命令也找不到。根据从网络上搜索到的一些资料,现在的 mac 系统(具体版本位置,我的是最新版本的 10.15)中内置的 apache 自动启动并且无法删除,端口默认为 80,并且配置文件和根目录下的 index.html 都是只读的,不太清楚这样设定的原因是什么。参考文章看解决mac系统下自带apache开启关闭问题

  4. macnginx 启动命令 nginx,关闭命令 nginx -s stop

  5. macOS Catalina 预装了 Ruby (2.6.3)PHP (7.3.9)Perl (5.18.4)Python (2.7.16),对环境的改造可以看这篇文章在 macOS Catalina 10.15 搭建 PHP 开发环境

  6. mac 系统里面没有 systemctlservice 这两个管理服务的命令,有一个类似的 launchctl 的命令来管理服务。

  7. 在使用 brew services 命令的时候如果提示 services 未找到,并且 brew update 以后还是没用,可以试一试 brew update-reset 命令。

  8. 面向对象只是一种编程思想,说某种语言是面向对象语言是不合适的,只能说实现面向对象更容易。

  9. 编程语言的分类不是非此即彼的,很多时候是我中有你,你中有我,特别是用在工程上的语言,都是吸纳了各种思想。能分类的不是语言,而是编程思想。

  10. 图灵完备的理解 什么是图灵完备

  11. 所谓 就是没有明显分割单位的事物,唯一能够确定的就是先后顺序,比如水流,字节流。

  12. HTTP 报文首部的所有换行都是 CRLFDosWindows 采用 CR/LF 表示下一行,而 UNIX/Linux 采用换行符LF表示下一行,MAC OS 则采用回车符 CR 表示下一行

  13. automator 创建一个新建文件的 application 并放到 findertoolbar 上。参考[之乎回答](为什么 macOS 在 Finder 里不可以新建文本文件? – fantouch的回答 – 知乎 https://www.zhihu.com/question/20883777/answer/81780928 “之乎回答”),图标自己找。

  14. maclaunchpad 出现重复图标的时候可以先把对应的软件删除到 Trash,然后删除 launchpad 中多余的图标,在将软件从 Trash 中还原即可。

  15. 要查看 Chrome Extension 的网络请求,需要进入 extensionbackground page,进入方法就是到 chrome://extensions 页面找到对应的插件,点击 background page 链接。

  16. 3C是对电脑(Computer)及其周边、通讯(Communications,多半是手机)和消费电子(Consumer-Electronics)三种家用电器产品的代称。

  17. IC 是指集成电路integrated circuit,或称微电路(microcircuit)、微芯片(microchip)、芯片(chip)在电子学中是一种将电路(主要包括半导体设备,也包括被动组件等)集中制造在半导体晶圆表面上的小型化方式。

  18. 什么是.NET

  19. extension 不仅表示扩展(插件),也表示文件扩展名(后缀名)

问题

  1. 大型网站是如何架构的,多个系统是如何协同工作的,项目如何部署,web 服务器如何配置使用。

  2. docker 的原理和使用,docker入门教程

  3. 反向代理是否能用 443 端口转发两个端口,只用一个 ssl 证书就保证两个端口的访问都是 https

  4. 如何快速部署服务器环境,如何复制当前服务器环境,docker

  5. 编程语言的分类,乔姆斯基范式,bnf产生式

  6. hash 算法

  7. 高级长期威胁(英语:advanced persistent threat,缩写:APT

  8. vscodeprettiereslinttslint 的配置。

  9. wordpress 的前后端分离,wordpress的前后端分离

  10. 编译原理-程序设计语言及其文法【笔记】


Clloz

人生をやり直す

发表评论

电子邮件地址不会被公开。 必填项已用*标注

我不是机器人*

 

EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00