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环境中是做了优化的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,864评论 6 494
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,175评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,401评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,170评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,276评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,364评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,401评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,179评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,604评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,902评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,070评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,751评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,380评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,077评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,312评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,924评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,957评论 2 351

推荐阅读更多精彩内容