js常见知识点整理总结

时间: 2018-10-06阅读: 246标签: js知识

1. 两个函数是否等价

function fun1() {
    return {
        bar: 'hello'
    }
}
function fun2() {
    return
    {
        bar: 'hello'
    }
}

答案: 不等价 !! 注意,第二个函数返回的是undefined

console.log(fun1()); //{bar:'hello'}
console.log(fun2()); // undefined

这也是为什么函数返回对象时,或写大括号时,把 { 写在一边,因为第二个函数js会默认return后面返回的东西(是空),等价于

return undefined
{xxx}
// 后面是 写了也白写


2.NaN是什么?它是什么类型?如何检测一个变量是否是NaN?

答案:NaN即Not A Number,但实际上它是Number类型typeof NaN将会返回Number。

NaN === NaN // false

自己都不等于自己,所以不能使用 === 进行判断, 可以使用isNaN方法进行判断

isNaN(bar);
Object.is(bar,NaN); // ES6方法


3. 作用域相关问题

以下程序的输出是什么?

(function () {
var a = b = e;
})()
console.log("a defined?" + (typeof a !== 'undefined'));
console.log("b defined?" + (typeof b !== 'undefined'));

理解这道题的核心在于如何理解var a = b = 3这句话,实际上这句话等价于

var a;
b = 3;

这样子,实际上,b是声明了全局变量中(编译器在预编译帮你声明了,然而在严格模式下是不行的)a 是局部变量,所以在函数之外是没有定义的。


4.js小数计算不准确的bug

一下代码返回值是什么?

console.log(0.1 + 0.2);
console.log(0.1 + 0.2 == 0.3 );
//0.30000000000000004
// false

解决办法

parseFloat((0.1 + 0.2).toFixed(10));


5.算法/思路相关

1)讨论实现判断变量是否是证书的函数isInter(x)的实现

在ES6中,是有现成的方法Number.isInterger可以使用的。如果自己实现,思路是什么呢?

// 1. 异域计算
function isInter(x) {
    return x ^ 0 === x
}
// 2. 取整
return Math.round(x) === x // 同样可以使用 floor ceil
// 取余
return (typeof x === 'number') && (x % 1 == 0)

2)写一个sum方法,可以实现一下两种调用方式

console.log(sum(2,3)); // 5
console.log(sum(2)(3)) // 5

实现方式

// 方式一
var sum = function (x,y) {
    if (y === undefined) {
        return function(y) {
            return x + y;
        }
    } else {
        return x + y;
    }
}
// 方式二
var sum = function(x) {
    if (arguments.length == 1) {
        return function (y) {
            return x + y;
        }
    } else {
        return arguments[0] + arguments[1]
    }
}


6. 类型强制转换

1) string 强制转换为数字

可以使用 *1 来转换为数字(实际上是调用.valueof方法)然后使用Number.isNaN来判断是否为NaN

'32' * 1 // 32
'ds' * 1 // NaN
null * 1 // 0
undefined * 1 // NaN
1 * {valueof: () => '3'} // 3

常用: 也可使用 + 来转换字符串为数字

+ '123' // 123
+ 'ds' // NaN
+ '' // 0
+ null // 0
+ undefined // NaN
+ {valueof: () => '3'} // 3

2) object强制转换为string

可以使用 字符串 + object 的方式来转换对象为字符串(实际上是调用.toString() 方法)

'the Math object' + Math // "the Math object[object Math]"
'the json object' + JSON // "the json object[object Json]"

当然也可以覆盖对象的 toString 和 valueof 方法来自定义对象的类型转换

2  * { valueOf: ()=>'3' }    // 6
'J' + { toString: ()=>'S' }   // "JS"

《Effective JavaScript》P11:当+用在连接字符串时,当一个对象既有toString方法又有valueOf方法时候,JS通过盲目使用valueOf方法来解决这种含糊。
对象通过valueOf方法强制转换为数字,通过toString方法强制转换为字符串

'' + {toString:()=>'S',valueOf:()=>'J'}                // J

3) 使用Boolean 过滤数组中的所有假值

我们知道js中有一些假值: false,null,0,"",undefined,NaN,怎样将数组中的假值快速过滤呢, 可以使用Boolean构造函数来进行一次转换

const compact =  arr => arr.filter(Boolean)
compact([0,1,false,2,"",3,"a","e" * 23,NaN,'s',34])

4) 双位运算符~~

可以使用双位运算符来替代 Math.floor() 。双位运算符的优势在于它执行相同的操作运行速度更快

Math.floor(4.9) === 4 // true
// 简写为 :
~~4.9 === 4 //true

不过要注意,对正数来说 ~~ 运算结果与 Math.floor() 运算结果相同,而对于负数来说不相同

~~4.5 // 4
Math.floor(4.5) //4
~~-4.5 // -4
Math.floor(-4.5) // -5

5) 取整 | 0

对一个数字 |0可以取整,负数也同样适用, num | 0

1.3 | 0 // 1
-1.9 | 0 // -1

6) 判断奇偶 & 1

对一个数字 & 1 可以判断奇偶数,负数也同样适用, num & 1

const num = 3
!!(num & 1) // true 
!!(num & 2) //true

true 奇数
false 偶数


7. 惰性载入函数

在某个场景下我们的函数中有判断语句,这个判断依据在整个项目运行期间一般不会变化,所以判断分支在整个项目运行期间只会运行某个特定分支,那么就可以考虑惰性载入函数

// 为采用惰性载入函数前
function foo(){
    if (a !== b) {
        console.log('aaa')
    } else {
        console.log('bbb')
    }
}
// 采用惰性载入函数后
function foo () {
    if (a !== b) {
        foo = function () {
            console.log('aaa')
        }
    } else {
        foo = function () {
            console.log('bbb')
        }
    }
    return foo();
}

那么第一次运行之后就会覆写这个方法,下一次运行的时候就不会执行判断了。当然现在只有一个判断,如果判断很多,分支比较复杂,那么节约的资源还是可观的。


8. 一次性函数

与上面的惰性载入函数同理,可以在函数体里覆写当前函数,那么可以创建一个一次性的函数,重新赋值之前的代码相当于只运行了一次,适用于运行一些只需要执行一次的初始化代码

var sca = function () {
    console.log('msg') // 只执行一次的代码
    sca = function () {
        console.log('foo')
    }
}
sca() // msg
sca() // foo
sca() // foo


9.代码复用-表单验证

优化前

function validate(values){
    if (!values.first) {
        return false;
    } 
    if (!values.last) {
        return false;
    } 
    return true;
}
console.log(validate({first: 'firstname',last: 'lastname'}));

上面的函数完美的完成验证工作。但是当有很多表单,则需要应用验证,此时会有不同的字段和规则。如果构建一个在运行时配置的通用验证函数,会是一个好选择。

const schema = {
    first: {
        required: true
    },
    last: {
        required: true
    }
}
const validate = (schema,values) => {
    for(field in schema) {
        if (schema[field].required) {
            if (!values[field]) {
                return false;
            }
        }
    }
    return true;
}
console.log(validate(schema,{first:'firstname'})) //false
console.log(validate(schema,{first:'firstname',last:'lastname'})) // true


10. 精确到指定位数的小数

将数字四舍五入到指定的小数位数。使用Math.round() 和模板字面量将数字四舍五入到指定的小数位数。省略第二个参数 decimals,数字将被四舍五入到一个整数

const round = (n,decimals=0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`)
round(1.345, 2)                 // 1.35
round(1.345, 1)                 // 1.3



前端与编译原理——用JS写一个JS解释器

说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念。作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于“抽象语法树(AST)”。但这仅仅是个开头而已。编译原理的使用,甚至能让我们利用JS直接写一个能运行JS代码的解释器。

js dom是什么?_JS中的DOM知识概览

JS中的DOM知识概览:文档对象模型,是针对 HTML 和 XML 文档的一个 API (应用程序编程接口), 描绘了一个层次化的节点树。 web 浏览器浏览一个页面的时候,DOM 就在幕后把你编辑的网页文档转换成一个文档对象。

理解 JavaScript 执行栈

所有的 JS 代码在运行时都是在执行上下文中进行的。执行上下文是一个抽象的概念,JS 中有三种执行上下文:全局执行上下文,函数执行上下文,Eval 执行上下文。通常,我们的代码中都不止一个上下文,那这些上下文的执行顺序应该是怎样的?

一眼看穿JS变量,作用域和内存问题

这篇文章将梳理下环境,作用域链,变量对象和活动对象,以及内存管理问题。基本类型和引用类型的值,我们都知道JS中的数据类型有两大类,基本数据类型和引用数据类型,下面从三个方面来解剖他们

js基础_如何理解作用域和作用域链?

作用域外,无法引用作用域内的变量;离开作用域后,作用域的变量的内存空间会被清除,比如执行完函数或者关闭浏览器,作用域与执行上下文是完全不同的两个概念。我曾经也混淆过他们,但是一定要仔细区分。JavaScript代码的整个执行过程,分为两个阶段,代码编译阶段与代码执行阶段。

Js中的命名空间(namespace)

全局变量应该由有系统范围相关性的对象们保留,并且它们的命名应该避免含糊并尽量减少命名冲突的风险。在实践中,这意味着你应该避免创建全局对象,除非它们是绝对必须的。 所以你对此是怎么做的?传统方法告诉我们,最好的消除全局策略是创建少数作为潜在模块和子系统的实际命名空间的全局对象。

js 实现栈和队列

js实现栈或者队列有两种方式: 1.数组:数组本身提供栈方法(push,pop),队列方法(push,shift)。 2.链表:构造链表结构,说白了就是链表的插入(尾插),移除(栈:末尾节点移除,队列:头结点移除)

javascript的Object. hasOwnProperty方法

hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中(非继承属性)是否具有指定的属性,如果 object 具有带指定名称的属性,则 hasOwnProperty 方法返回 true,否则返回 false。

JavaScript中的魔幻代理Proxy

什么是 JavaScript 代理?通过 Proxy 我们可以拦截并改变一个对象的几乎所有的根本操作,包括但不限于属性查找、赋值、枚举、函数调用等等。利用 Proxy,我们可以拦截并不存在的属性的读取

适配器在JavaScript中的体现

适配器设计模式在JavaScript中非常有用,在处理跨浏览器兼容问题、整合多个第三方SDK的调用,都可以看到它的身影。适配器模式是一种软件设计模式,允许从另一个接口使用现有类的接口。它通常用于使现有的类与其他类一起工作,而无需修改其源代码。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告合作文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯