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)返回结果为falseNaN被当做无限处理

  • JavaScript中的幂运算,8n次方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,返回该函数执行时所在的函数的函数体,全局下执行返回nullES5严格模式无法使用

  • <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
  • letconst 定义变量的作用域都是离变量最近的那个块{}或全局内

  • 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,argumentschloe无关,因为只是作为参数传入,并未在函数体内

深度克隆
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]',然后再按照比较规则来。

  • nullundefined分别为0NaN

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

  • 若是两端类型不同,nullundefined相等,但是同其他原始类型相比,则不相等。

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

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

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

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

严格相等以及严格不相等
  • 要求两端的数据要完全相同,也就是数据值和数据类型都相同

  • 更为符合正常认知

  • nullundefined不相等

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

  • Infinity-Infinity都只和自身相等

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

  • 执行环境位于执行栈中

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

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

尾递归和尾调用
  • 参考

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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容