关于js的一些被忽视但也很重要的知识点
以为懂了,实际没懂。对新知识保持好奇心很有必要,但对原有知识也要更深入了解其细节。温故知新,“新”,应该是自己不懂的,亦或是遗忘了的,亦或是......
问题1:
Object.prototype.toString.call([])
的结果是"[object Array]"
,为什么和[].toString()
的结果""
不一致?按理说,结果应该是一样的。
先来说说Object.prototype.toString.call([])
,这个技巧常用来区分某个变量值是Object
、Array
哪一种数据类型(因为此时 typeof 排不上用场了)。
typeof []; // "object"
typeof {}; // "object"
Object.prototype.toString.call([]); // "[object Array]"
Object.prototype.toString.call({}); // "[object Object]"
结果不一致的原因,查阅了 MDN ,是这么描述的:
- 每个对象都有一个 toString() 方法,当该对象被表示为一个文本值时,或者一个对象以预期的字符串方式引用时自动调用。默认情况下,toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖,toString() 返回 "[object type]",其中 type 是对象的类型。
- Array对象覆盖了Object的 toString 方法。对于数组对象,toString 方法连接数组并返回一个字符串,其中包含用逗号分隔的每个数组元素。
扩展:
- 还有什么方法能区分
Object
、Array
?答案:ES5提供的Array.isArray()
。
Array.isArray([]); // true
Array.isArray({}); // false
如何记忆
Object.prototype.toString.call()
和Object.prototype.toString.apply()
这两个的第二个参数,总是记不清,哪个该传数组?答案:
apply
是以字母a
开头的,联想到array
,就知道它该传递数组作为参数了,是不是很容易就记住了。ps:关于记忆知识的小窍门,欢迎留言,看看谁的小窍门更容易让人记住~~。
问题来源:同事提问。交流也是学习的一种途径。
问题2:
请准确说出以下表达式的结果及数据类型。
'1,2,3,4'.split();
'112211331144'.split('11', 2);
答案:
'1,2,3,4'.split(); // ["1,2,3,4"]
'112211331144'.split('11', 2); // ["", "22"]
关键点:
- 语法:
str.split([separator[, limit]])
- 返回值是一个字符串数组 arr。
- 参数值均为可选
- separator:分隔符,若不传,返回
[原始字符串]
。之前一直以为默认 逗号 分隔呢,不记得是在哪记忆的了。感觉像小 海伦凯勒“看了”或“听了”很多书,怀疑自己的思想或想法是不是从其他地方学来的。 - limit:限制返回值 arr 个数,若不传,默认没有限制,即返回所有值;若 limit < arr.length,则 arr.length = limit;若 limit > arr.length,则结果如同没传。
- separator:分隔符,若不传,返回
可参考:MDN 上关于 String.prototype.split 的描述
问题来源:看文档。
问题3:
请准确说出以下表达式的结果及数据类型。
var str = 'aabbccdd';
str.substring(4,0);
str.substring(4,NaN);
str.substring(-4,10);
答案:
str.substring(4,0); // "aabb" 等同于 str.substring(0,4)
str.substring(4,NaN); // "aabb" 等同于 str.substring(4,0)
str.substring(-4,10); // "aabbccdd" 等同于 str.substring(0)
关键点:
- 语法:
str.substring([indexStart[,indexEnd]])
- 参数均可不传
- indexStart,不传为 0;
- indexEnd,不传为 str.length;
- 任一参数,小于 0 或 为 NaN, 则视为 0
- 任一参数,大于 str.length, 则视为 str.length
- indexStart > indexEnd,结果如同参数调换的结果。
可参考:MDN 上关于 String.prototype.substring 的描述
问题来源:看文档。
问题4:
- a 标签的 href 和 onclick 属性同时存在时哪个先触发?
- 对于
<a href="#">点击</a>
点击了有什么表现? - a标签下的
href="javascript:void(0)"
起到了什么作用? - a标签属性
rel='nofollow'
有什么作用?
答案(自己写demo可验证):
- a 标签的 href 会先触发。
<a href="#">点击</a>
,点击了href="#top"
或者href="#"
链接会返回到页面顶部(h5新特性)。- 备注:若页面中有标签且id值为top,点击
href="#top"
的 a 标签,不会返回到页面顶部,而是返回到 id 值为 top 的地方(锚点的特性)。
- 备注:若页面中有标签且id值为top,点击
- 表现形式,具有 a 标签的链接样式,但不具备 a 标签的链接跳转功能或刷新页面。建议用 button 替换此类伪链接。若要执行实际,建议添加点击事件触发。
void 表达式
返回undefined
,通常用来创建正确的undefined
,因为undefined
可被赋值修改。- 当点击一个
javascript: URI
时,会执行 URI 中的代码,返回值替换页面内容,除非返回值为 undefined。 - 可测试一下代码查看
<a href="javascript:0">整个页面会被替换成一个字符 0 (ie9改变,chrome不变)</a>
<a href="javascript:void(document.body.style.backgroundColor='skyblue')">页面背景为蓝色,内容不变(返回值为 undefined)</a>
<a href="javascript:jsfn()">调用jsfn,(ie9内容改变,chrome内容不变,背景色改变)</a>
<script>
function jsfn() {
document.body.style.backgroundColor='orangered';
return 11
}
</script>
- rel 属性值:
- 'nofollow':和 SEO 有关,爬虫遇到链接,默认爬取链接内容,加了该属性值就不爬取该链接的内容。
- 'prefetch'、'preload':和资源加载有关,prefetch 空闲加载,repload 立即加载。
- 'noopener'、'noreferrer':和安全有关,控制跳转到其他页面发送的安全信息,比如http头、页面名字等。
可参考:
问题来源:代码中经常写,但不理解。理解不理解的代码也是一种学习途径,就好比弄懂不知道的英文单词一样。
备注:这些点看似很小,可能平常根本不关注,但遇到了,就是一个坑。懂原理能少走一些弯路。后续遇到了再补充。
关于js的一些被忽视但也很重要的知识点的更多相关文章
- 关于 Node.js 的认证方面的教程(很可能)是有误的
原文地址:Your Node.js authentication tutorial is (probably) wrong 我搜索了大量关于 Node.js/Express.js 认证的教程.所有这些 ...
- js中容易被忽视的事件问题总结
一:跨平台事件 什么叫跨平台事件?即在不同的浏览器上执行同一事件,所使用的方法不同. 什么是EventUtil对象?有什么作用?即将所有与事件相关的函数,融合在一起的一个容器,方便管理事件对象,它没有 ...
- 分享10个Js的小型库,效果真的很棒
1.$fx()简介:$fx()是一个轻量级的动画库,一些复杂的动画,可以由多个简单的动画效果进行组合,但是提供的是混淆压缩过的代码,对于研究动画源码的朋友可能特别不爽API:http://fx.ine ...
- 每天一个JS 小demo之商品下架特效制作,主要知识点:定时器,倒计时,抖动特效。PS:由于不方便上传文件夹,只能上传效果图,图片等素材需自寻哟。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js 扒一扒这些题目都考了哪些知识点
1.空数组是true还是false 题目: <script> var tmp = 'a'; if([]==false) tmp+='b'; if(![]) tmp +='c'; alert ...
- jquery.cookie.js操作cookie实现“记住密码”,很简单很强大
//初始化页面时验证是否记住了密码 $(document).ready(function() { if ($.cookie("rmbUser") == "true&quo ...
- 玩转【Mock.js】,前端也能跑的很溜
现在开发已经是前后端分离了,前端和后端可以同时进行开发,互不影响,但是有些时候后端开发的接口慢于前端,导致前端需要等待后端的接口完成才能完成前后端对接,为了解决这个痛点,出现了模拟接口数据的方案,目前 ...
- Firefox 插件 JSview是一套比较实用的JS,CSS文件查看工具,很方便,很快捷地查看页面引用了哪些文件,作为Web前端开发者是一套必备的插件,由于Firefox升级过快,插件很快不兼容了,这里对插件做了一些调整,可以兼容最新Firefox浏览器(目前FireFox 21)
JSView Firefox Plugins Download 点击下载
- JS自定义对象,正则表达式,JQuery中的一些知识点
一:自定义对象 1.基本概念:①对象:包含一系列无序属性和方法的集合.②键值对:对象中的数据是以键值对的形式存在的,以键取值.③属性:描述对象特征的一系列变量.[对象中的变量]④方法:描述对象行为的一 ...
随机推荐
- 云享专家倪升武:微服务架构盛行的时代,你需要了解点 Spring Boot
[摘要] 微服务架构的本质在于分布式.去中心化. 随着互联网的高速发展,庞大的用户群体和快速的需求变化已经成为了传统架构的痛点. 在这种情况下,如何从系统架构的角度出发,构建出灵活.易扩展的系统来快速 ...
- 转:FileSync plugin for Eclipse 安装注意事项 Eclipse文件同步插件
习惯了使用MyEclipse,各种插件不用自己安装,觉得开发起来很方便,现在大家都用Eclipse了,还有不用Eclipse用更高级的,IT当然开发大型项目没人用UltraEdit吧,虽然是一个不错的 ...
- windows下RocketMQ下载安装教程
一.下载(原文链接:http://www.studyshare.cn/software/details/1183/0 ) 1.官网下载:下载地址 2.百度网盘下载:下载地址 提取码:0g5a ja ...
- HDU5343 MZL's Circle Zhou(SAM+记忆化搜索)
Problem Description MZL's Circle Zhou is good at solving some counting problems. One day, he comes u ...
- HDU1847 Good Luck In CET4 Everybody
大学英语四级考试就要来临了,你是不是在紧张的复习?也许紧张得连短学期的ACM都没工夫练习了,反正我知道的Kiki和Cici都是如此.当然,作为在考场浸润了十几载的当代大学生,Kiki和Cici更懂得考 ...
- Orleans的深入
1.序列化 序列化配置有几个坑这里我写出来 2.负载均衡 3.定时器与提醒 4.服务启动执行代码 5.监控 序列化 新建实体类 引用的包 Microsoft.Orleans.Core V2.12 M ...
- linux—chmod
chmod -options -c 只输出被改变的文件信息 -f , --silent, --quite 当chmod不能改变文件模式时,不通知用户 -R 递归 ...
- selenium处理常见自动化场景
目录 定位一组对象 层级定位 定位frame中的对象 alert/confirm/prompt处理 下拉框处理 调用javascript 多窗口处理 处理验证码 处理cookie 定位一组对象 web ...
- Vue-兄弟组件传值
学习博客:https://www.jianshu.com/p/b10b3ac3729a
- 一 UI基本的用法
1. UIView的基本用法 //打印屏幕的宽和高 CGRect screenBounds = [[UIScreen mainScreen] bounds]; NSLog(@"%f, %f& ...