JavaScript小知识点

• JavaScript执行分三步：语法分析、预编译、解释执行

• window.name是一个神奇的内置属性，她可以用于跨域，无论你给她赋予什么值，都会变成字符串，所以不要用使用var name来声明一个变量。

• var x = 1; var y = x++ + ++x + x++ * ++x + ++x; 1 + 3 + 3 * 5 + 6 = 25;

• 1 / 0 = Infinity; 0 / 0 = NaN; typeof(a(未定义)); undefined

• undefined，null，0，false，NaN，""，转换为Boolean值均为false，其余皆为false

• 稀松数组一定要尽可能的避免，例如var arr = new Arrary(100)，里面未赋值的项全是empty

• for循环停止于条件判断语句为false时，所以for(，undefined/null/0/false/NaN/""，)都会让for循环停止

• 浏览器里的控制台就是在body底部加了个script标签，方便开发人员使用调试

• typeof 返回值有六个 number string boolean object function undefined，返回值本身是string

• typeof Infinity; number; typeof 1/0; NaN typeof的运算优先级高于/运算符优先级

• null，undefined不大于不小于也不等于0，但是null == undefined

• === !== 没有隐式类型转换，两边必须完全相同，长得一样，类型也要相同，如果是对象，则比较地址

• 函数名.name一般都会返回自身的函数名，唯一特例 var sum = function test() {}; console.log(sum.name); test

• isFinite用于判断一个数据是否是有限的，注意，isFinite(NaN)返回结果为false，NaN被当做无限处理

• JavaScript中的幂运算，8的n次方8**n，负数求幂加括号，(-8) ** 2

• JavaScript中求余时结果的正负与被除数相同，无关除数的正负。-9 % 5; -4 9 % -5; 4

• console.log(console.log('chloe')); chloe undefined

• 使用obj.name的形式访问对象的属性会被系统隐式转换为obj["name"]这种形式

• in可用于判断对象是否含有指定属性(包含原型链上的)，例如"name" in obj; true;

• Object.prototype.toString.call([]); "[object Array]"可用于判断数组和对象

• 运算符,，返回最后一个值，let i = (1, 2, 3); i === 3;，let f = (function a() {}, function b() {return 2;})(); typeof(f); Number

• function chloe() {console.log(arguments.callee === chloe);}; chloe(); true arguments.callee 返回函数体 常用于立即执行函数，ES5严格模式无法使用

• 函数名.caller，返回该函数执行时所在的函数的函数体，全局下执行返回null，ES5严格模式无法使用

• <script defer></script> 异步加载，仅适用于IE，在整个DOM文档解析完毕之后执行

• <script async></script> 异步加载，W3C标准，适用于各种浏览器(IE9以前除外)，加载完立即执行，只可引入外部脚本src

• const script = document.createElement('script'); script.src = 'index.js';执行到这句代码时就开始异步加载该js文件; document.body.appendChild(script); 执行到这句时开始执行该js文件，script.onload = function (){} 该脚本加载完毕时执行的函数，IE不可用，IE类似方法script.onreadystatechange = function () {if(script.readystate == 'complete' || script.readystate == 'loaded') {}}

• Chrome(webkit，目前为blink，由Google和Opera开发)，Firefox(gecko)，Opera(presto，目前为blink)，safari(webkit)，IE(trident)

• Ojbect.is() 与 === 几乎相同，区别在于 Object.is(+0, -0); false; Object.is(NaN, NaN); true;

浏览器线程

• JS 引擎线程：执行执行栈最顶部的代码

• GUI(Graphical User Interface) 线程：渲染页面，她和 JS 引擎线程是互斥的

• 事件监听线程：监听事件

• 定时触发器线程：setTimeout / setInterval

• http 请求线程：网络通信

原始值

• 基本数据类型(原始值)null，undefined，boolean，number，string，symbol(ES6新增)

• 存放于栈stack中，变量拿到的是值，原始值改变会重新申请一块栈内存

• var a = 1; var b = a; a = 2; console.log(a, b); 2 1

引用值

• 引用值 array，object，function，date，RegExp...

• 存放于堆heap中，栈中存放的是值所在的堆的地址，变量拿到的是的地址

• var a = [1, 2]; var b = a; a.push(3); console.log(a, b); [1, 2, 3] [1, 2, 3]

变量声明提升

• var带有变量声明(e.g var a;)提升效果，全局作用域里使用var声明的变量还会被绑定到全局对象上

• JavaScript中的变量声明提升仅限于变量所在的这一片作用域，也就是说变量声明提升会在局部作用域或全局作用域的顶端

• 无论是在全局还是局部作用域中，若是不使用var，而是直接x = 1，则x没有变量提升效果，只能在这句代码执行后才能通过变量名x访问，并且会在执行到这句时将x绑定到全局对象上

函数整体提升

• test(); function test() { console.log('haha') }; 在函数声明之前就可以使用函数，若是在全局声明，还会被绑定到全局对象上window.test

• 但是函数表达式则没有函数提升效果，例如var sum = function (a, b) {return a + b;}，在这句代码执行前，sum只是undefined

arguments

• 与形参产生映射关系，注意是映射，并不是指向同一个值，产生了映射关系后无论谁改变另一个都会跟着变

• arguments的长度根据函数执行时小括号里的实参个数，并产生映射，未传递实参的形参不会产生映射，即使在函数内部赋值给形参也不行

function test(a, b, c) {
    b = 3;
    c = 2;
    console.log(arguments[0], arguments[1], arguments[2]);
}

test(1, 2); 1 3 undefined

var let const

• let 和 const 定义变量的作用域都是离变量最近的那个块{}或全局内

• var 定义变量的作用域是离变量最近的那个函数或全局内

function demo() {
  if (1) {
    var a = 0;
    let b = 1;
  }
  console.log(a); 0
  console.log(b); b is not defined
}

demo();

箭头函数

• 只可作为普通函数使用，无法new，也没有原型

• 函数体内部的argument，this由箭头函数在定义时最接近她的非箭头函数的argument，this所决定

• 若找不到，则this指向window，且没有argument

• 可作为函数参数传入function chloe(() => {}) {}，这时箭头函数的this，arguments与chloe无关，因为只是作为参数传入，并未在函数体内

深度克隆

function deepClone(target, origin) {
    target = target || {};
    const toStr = Object.prototype.toString,
        arrStr = "[object Array]";

    for (let prop in origin) {
        if (origin.hasOwnProperty[prop]) {
            if (origin[prop] !== null && typeof origin[prop] === "object") {
                target[prop] = toStr.call(origin[prop]) === arrStr ? [] : {};
                deepClone(target[prop], origin[prop]);
            } else {
                target[prop] = origin[prop];
            }
        }
    }
    return target;
}

立即执行函数(IIFE)

• 某些函数我们只需要他执行一次，不希望他一直占用着空间，这种情况下我们可以使用立即执行函数

• 立即执行函数与普通函数的唯一区别就是执行完毕后立即被销毁

• 给函数体加个括号就成为了表达式且不会污染全局，例如(function () {})，但是无法在外部引用

• 只有表达式能够被执行符号()执行，且被执行符号执行的函数会在执行后立即销毁

• 例如var test = function () {}(); console.log(test); undefined; + / - / ! / && / || function test() {}(); console.log(test); undefined;

• 立即执行函数的两种常用写法(function () {})()，或者将()写到里面(function () {}()) W3C建议使用这种方式

• 并可以接收返回值，例如var a = (funtion () { return 10; }())

• function (a, b, c, d) {} (1, 2, 3, 4); 不会报错，(1, 2, 3, 4)被当做一个整体

算术运算

• JavaScript的数字运算是不准确的。

• JavaScript计算时，会将十进制数转换成二进制，再进行计算，但有些小数转换成二进制的时候，出现了无限循环，由于位数有限，所以就出现了截取，所以就导致了结果再转化成十进制后结果的不精确，所以就出现了0.1 + 0.2 != 0.3

• 除数为0，如果被除数是正数，结果为Infinity，如果被除数是负数，结果为-Infinity，如果被除数是0，结果为NaN

大小比较

• 两个字符串比较大小，比较的是字符串的字符编码。即使是纯数字字符串也要按照这个规则。

• 如果其中一个不是字符串，且两个都是原始类型，则将他们转换为数字进行比较。

• ' 1 ' = 1，' 1 2 ' = NaN，' ' = 0，' dfs ' = NaN。

• NaN与任何数字比较结果都是false。

• Infinity比任何数字都大，-Infinity比任何数字都要小。

• 对象在比较時，会被转换为字符串'[object Ojbect]'，然后再按照比较规则来。

• null和undefined分别为0和NaN。

相等以及不相等比较

• 若是两端类型相同，则直接比较数据本身是否相同，都是对象则比较的是地址。

• 若是两端类型不同，null和undefined相等，但是同其他原始类型相比，则不相等。

• 其他原始类型比较時，先转换为数字再进行比较。

• NaN与任何数字比较，都是false，包括自身。

• Infinity和-Infinity都只和自身相等。

• 对象比较時，要先转换为原始类型也就是'[object Ojbect]'，再进行比较。

严格相等以及严格不相等

• 要求两端的数据要完全相同，也就是数据值和数据类型都相同

• 更为符合正常认知

• null和undefined不相等

• NaN与任何数字做相等比较，都是false，包括自身

• Infinity和-Infinity都只和自身相等

执行栈

• 任何代码的执行都需要执行环境来为其提供支持

• 执行环境位于执行栈中

• 每个函数的调用，都会创建一个新的执行环境，函数执行结束后，则会销毁执行环境

• 执行栈是由固定大小的，过多的执行环境会导致栈溢出而报错

尾递归和尾调用

• 参考

• 如果一个函数的最后一句代码是调用函数，则称为尾调用

• 如果尾调用调用的是函数自身，则称为尾递归

• 一些语言或执行环境会对这两种情况进行优化，在执行最后一句调用函数時，会直接销毁当前函数的执行环境，减少了执行栈的占用

• 但浏览器执行环境中并没有对尾调用进行优化，包括V8引擎，但是NodeJS环境中是做了优化的