资讯专栏INFORMATION COLUMN

JavaScript 小知识点

马永翠 / 740人阅读

摘要:比如,构造函数返回的数组都是空位。方法方法方法方法方法方法方法方法对空位的处理则是明确将空位转为。在这些情况下,迭代器关闭。

原型链相关

最详尽的 JS 原型与原型链终极详解

isNaN()Number.isNaN() 的区别 isNaN()

是 ES1 规范;

是全局方法;

如果参数不是一个 Number 类型,会先尝试将参数转化为数值,然后对转换后的结果进行是否是 NaN 的判断;

Number.isNaN()

是 ES6(ES2015) 规范;

是 Number 对象的静态方法;

只有参数为 NaN 是才会返回 true

JavaScript 中的错误类型

SyntaxError 解析代码时发生的语法错误;

ReferenceError 对象是引用一个不存在的变量时发生的错误;

RangeError 对象是一个值超出有效范围时发生的错误;

一个数组长度为负数;

Number 对象的方法参数超出范围;

函数堆栈超过最大值;

TypeError 对象是变量或参数不是预期类型时发生的错误;

比如:对字符串、布尔值、数值等原始类型的值使用 new 命令;

URIError 对象是 URI 相关函数的参数不正确时抛出的错误;

主要涉及 encodeURI()decodeURI()encodeURIComponent()decodeURIComponent()escape()unescape()

EvalError eval 函数没有正确执行时抛出的错误;已经不再使用;

Error

自定义错误

可以创建自定义错误类,让其集成 Error

参考链接

错误处理机制

encodeURIencodeURIComponent 的区别 encodeURI
encodeURI("http://example.com/test space")
// http://example.com/test%20space
// 对整个 URL 进行编码,而 URL 的特定标识符不会被转码
encodeURIComponent
encodeURIComponent("http://example.com/test space")
// http%3A%2F%2Fexample.com%2Ftest%20space
// 对URL中的参数进行编码,因为参数也是一个URL,如果不编码会影响整个URL的跳转
参考链接

百分号编码 Percent-encoding

[escape,encodeURI,encodeURIComponent有什么区别?

](https://www.zhihu.com/questio...

Array.from / 扩展运算符 ... / rest 参数 ... 概念定义

ES6 中的三个点 ... 有两个名字:rest 参数 / 扩展运算符

当用在函数定义时的形参前面是,称为 rest 参数。当函数调用时,用于接收不确定数量的参数;

当与结构赋值组合使用时,称为 rest 参数,用于接收剩余的值,存储在数组中;

当用在字符串或数组前面时,称为扩展运算符,将数组或字符串进行拆解;

Array.from

Array.fromArray 对象的一个静态方法。可以通过一下方式来创建数组对象:

伪数组对象(拥有一个 length 属性和若干索引属性的任意对象);

可迭代对象;

Array.from 还有一个可选参数 mapFn,可以在最后生成的数组上再执行一次 map 方法后再返回;也就是说 Array.from(obj, mapFn, thisArg) 相当于 Array.from(obj).map(mapFn, thisArg)

扩展运算符 ...

扩展运算符是一个运算符,和 Array.from 最大的区别在于其只能从可迭代对象中进行解构;

JavaScript 的迭代方法 forEach()

让数组中每一项做一些事,不能被 break;

返回值:undefined

map()

让数组对每一项进行某种计算后产生一个新数组;

返回值:一个新数组;

filter()

筛选出数组中符合条件的项,组成新数组;

返回值:一个新数组;

reduce()

对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值;

返回值:函数累计处理的结果;

every()

检测数组中的每一项是否都符合条件;

返回值:布尔值;

some()

检测数组中是否有任意项符合条件;

返回值:布尔值;

对数组空位的处理

数组的空位指,数组的某一个位置没有任何值。比如,Array构造函数返回的数组都是空位。

ES5 对空位的处理

forEach(), filter(), reduce(), every()some()都会跳过空位。

map()会跳过空位,但会保留这个值

join()toString()会将空位视为undefined,而undefinednull会被处理成空字符串。

// forEach方法
[,"a"].forEach((x,i) => console.log(i)); // 1

// filter方法
["a",,"b"].filter(x => true) // ["a","b"]

// every方法
[,"a"].every(x => x==="a") // true

// reduce方法
[1,,2].reduce((x,y) => return x+y) // 3

// some方法
[,"a"].some(x => x !== "a") // false

// map方法
[,"a"].map(x => 1) // [,1]

// join方法
[,"a",undefined,null].join("#") // "#a##"

// toString方法
[,"a",undefined,null].toString() // ",a,,"

ES6 对空位的处理

ES6 则是明确将空位转为undefined

Array.from 方法会将数组的空位,转为 undefined,也就是说,这个方法不会忽略空位;

扩展预算符 ... 也会将空位转为 undefined

Array.from(["a",,"b"]);
// ["a", undefined, "b"]

[...["a",,"b"]]
// ["a", undefined, "b"]

copyWithin() 会连空位一起拷贝;

[,"a",,"b"].copyWithin(2,0)
// [,"a",,"a"]

fill() 将会视空位为正常的数组位置;

new Array(3).fill("a");
// ["a", "a", "a"]

for...of 循环也会遍历空位;

let arr = [, ,];
for (let i of arr) {
  console.log(1);
}
// 1
// 1

上面代码中,数组arr有两个空位,for...of并没有忽略它们。如果改成map方法遍历,空位是会跳过的。
但是,for...in 是会直接跳过空位,不会进行遍历的,需要特别留意;

entries()keys()values()find()findIndex()会将空位处理成undefined

// entries()
[...[,"a"].entries()] // [[0,undefined], [1,"a"]]

// keys()
[...[,"a"].keys()] // [0,1]

// values()
[...[,"a"].values()] // [undefined,"a"]

// find()
[,"a"].find(x => true) // undefined

// findIndex()
[,"a"].findIndex(x => true) // 0
参考链接

数组的扩展

javaScript 循环语句的对比 for for...in

会跳过空值;

将会遍历对象自身的所有可枚举属性以及对象从其构造函数原型中继承的属性;

for...in 语句以原始插入顺序迭代对象的可枚举属性,不能依赖于迭代的表面有序性;

for...in 不应该用于迭代 Array,一是其顺序不确定,二是其会迭代所有对象和对象构造函数原型链里的可迭代属性;

for...of

不会跳过空值;

在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句,这里特别留意,Object 不是一个可迭代对象;

对于for...of的循环,可以由break, continue, throwreturn终止。在这些情况下,迭代器关闭。

for...of 语句遍历可迭代对象定义要迭代的数据;

ES6 中的 Class 一个问题,为何 SubClass.__proto__ === SuperClass

可能的回答:__proto__ 属性与 ES6 classes 的继承

再一个问题,ES6 中的 Class到底更接近之前的 Object 还是 Fcnction

经过测试,确定是 Function

super的一些小知识点

根据调用位置的不同,super 关键字的含义不同;

在子类的构造函数中使用 super()super代表了父类的构造函数,此时,父类构造函数中的 this 指向的是子类;

在子类的实例方法中使用 supersuper指向父类的 prototype 对象,调用父类方法时,调用的是父类的原型链上的方法;此时,该方法中的 this 指向的是子类的实例;

在子类的静态方法中使用 supersuper指向父类 ,调用父类方法时,调用的是父类的静态方法;此时,该方法中的 this 指向的是子类;

原生构造函数的继承

对原生构造函数使用 apply 不会更改其 this,也就是说,原生构造函数的 this 无法绑定,从而导致拿不到内部属性;

究其原因,是因为 ES5 中的构造函数是先新建子类的实例对象 this,再将父类的属性添加到子类上,由于父类的内部属性无法获取,导致无法继承原生的构造函数;

ES6 允许继承原生构造函数定义子类,ES6 是先新建父类的实例对象 this,然后再用子类的构造函数修饰 this,使得父类的所有行为都可以继承;

注意:继承 Object 的子类,会有一个行为差异;ES6 改变了 Object 构造函数的行为,一旦发现 Object 方法不是通过 new Object() 这种形式调用,ES6 规定 Object 构造函数忽略参数;

修饰器

呃,待续。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95357.html

相关文章

  • 如何正确学习JavaScript

    摘要:然而,虽然先生对无所不知,被誉为世界的爱因斯坦,但他的语言精粹并不适合初学者学习。即便如此,在后面我还是会建议把当做补充的学习资源。但目前为止,依然是学习编程的好帮手。周正则表达式,对象,事件,阅读权威指南第,,,章。 既然你找到这篇文章来,说明你是真心想学好JavaScript的。你没有想错,当今如果要开发现代网站或web应用(包括互联网创业),都要学会JavaScript。而面对泛...

    canger 评论0 收藏0
  • 前端知识--TypeSript和JavaScript到底是什么关系?

    摘要:想学好前端,真的要主动,然后对所有的英文文档耐心一点。在年月日,国际组织发布了的第六版,该版本正式名称为,但通常被称为或者。自此,每年发布一次新标准。但保留了用于依赖注入的构造函数参数类型。必须在构造函数中声明属性,而不是在类的代码体中。 从 TypeScript 到 ES6 到 ES5 在我初学前端的很长一段时间,不愿意碰git,不愿意碰框架,总是嫌麻烦,连ES6也没有怎么去弄明白...

    sixleaves 评论0 收藏0
  • 前端基础入门

    摘要:手把手教你做个人火的时候,随便一个都能赚的盆满钵满,但是,个人没有服务端,没有美工,似乎就不能开发了,真的是这样的吗秘密花园经典的中文手册。涵盖前端知识体系知识结构图书推荐以及入门视频教程,全的简直不要不要的了。 JavaScript 实现点击按钮复制指定区域文本 html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能,不需要依赖 flash。...

    shinezejian 评论0 收藏0
  • 关於Javascript基本类型和引用类型知识

    摘要:变量有两种不同的数据类型基本类型,引用类型。知识一基本类型值就是简单的数据段引用类型值保存的是对象的引用,不是实际的对象。 ECMAScirpt 变量有两种不同的数据类型:基本类型,引用类型。 基本的数据类型有:undefined,boolean,number,string,null. 基本类型的访问是按值访问的,就是说你可以操作保存在变量中的实际的值。JavaScript中除了上面的...

    iKcamp 评论0 收藏0
  • JavaScript 模式》识点抄本(下)

    摘要:缺点不符合开闭原则,如果要改东西很麻烦,继承重写都不合适。预防低水平人员带来的风险。开闭原则,高拓展性。这里的订阅者称为观察者,而被观察者称为发布者,当一个事件发生,发布者会发布通知所有订阅者,并常常以事件对象形式传递消息。 介绍 最近开始给自己每周订个学习任务,学习结果反馈为一篇文章的输出,做好学习记录。 这一周(02.25-03.03)我定的目标是《JavaScript 模式》...

    xiguadada 评论0 收藏0
  • 前端资源系列(4)-前端学习资源分享&前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<