[JavaScript]细节与使用经验

【版权声明】未经博主同意，谢绝转载！（请尊重原创，博主保留追究权）
https://www.cnblogs.com/cnb-yuchen/p/18031957
出自【进步*于辰的博客】

纯文字阐述，内容比较干。并且，由于考虑到时间长了恐有所遗漏，便即兴记录，并没有对内容进行筛选、排序。因此，大家在阅读时可以直接Ctrl + F进行检索。

目录

• 1、细节锦集
• 2、关于 false
• 3、null 与 undefined
• 4、特殊指令
• 5、特殊语句
  • 5.1 with()
• 6、获取下拉框属性
• 7、如何终止 forEach？
• 15、循环·中的事件问题
• 19、阻止特殊行为
  • 19.1 默认行为
  • 19.2 冒泡行为
• 最后

1、细节锦集

1. ==表示“相等”，不考虑数据类型，如：1 == '1'为 true；而===表示“全等”，如：1 === '1'为 false；
2. js中使用驼峰命名的原因：会将短横线（-）视为负号，故无连接作用；
3. js 中的function中能被访问的有：参数、局部变量、嵌套function、全局变量、外部function的变量或其嵌套function；
4. 原始数据类型：String、number、boolean、null、undefined、symbol。前5种是基本数据类型，symbol表示唯一的值；
5. Java数组长度不可变，而js中Array会自动扩展，即不存在溢出。定义var arr = new Array(3)，此时arr长度为 3；执行arr[8] = xx，则arr长度变为 9。输出arr[5]为undefined（声明但为定义）；
6. js中return后可以有语句（同级别），只是不会执行（即不进行解释，即便代码有误也不报错）；
7. $("xx").children()用于获取xx盒子的所有子盒子（js格式是xx.childNodes），$("xx").parentNode()用于获取父盒子；

2、关于 false

参考笔记一，P10.3；笔记二，P46.2。

1. 0、false、undefined、null、""、''、NaN 的 boolean 值都是 false，即0；其他为 true；
2. []、[null]、[undefined]都会隐式转换成''，且无论[]嵌套几层，都视为一层。与0比较，都为 true，因为''和0的 boolean 值都是 false；

3、null 与 undefined

参考笔记一，P10.9；笔记二，P43.1。

定义：

1. undefined：全局变量、属性；
2. null：字面量，不会被隐式赋值给对象，表示尚未创建的对象。

区别：

1. undefined 派生于 null，都表示“无效的值”，故相等。但属于不同的原始数据类型，故不全等；
2. null 与 number 作算术运算，会将 null 视为0；而 undefined 与 number 作算术运算，得NaN；
3. typeof null为 Object，typeof undefined为 undefined。

注意：

1. 若变量已声明而未定义，则为 undefined。故若想变量为 null，必须定义为 null；
2. 当function()无返回值时，强行调用获取返回值，得 undefined。

一个小技巧：
定义变量为 null，表示“空对象引用”。当需要将一个变量xx作为对象时，可如下：

var xx = null;// 初始化
......
xx = new Object;// 创建对象
......
if(xx == null)
......
xx = null;// 清除对象

通过比较变量xx是否为null来判断对象是否创建成功。

4、特殊指令

1. typeof a：返回变量类型。同type(a)；
2. delete obj.name：删除对象obj的name属性；

5、特殊语句

摘要	参数说明	返回值类型/返回值	说明
with()			任何对变量或函数的引用都被认为是此对象的属性

5.1 with()

示例。

document.write(Math.sin())
// 等价于：
with(Math) {
	document.write(sin())
}

6、获取下拉框属性

参考笔记一，P12.1。

示例。

<select name="platform">
	<option value="p1">CSDN</option>
	<option value="p2">bilibili</option>
</select>

获取。

var sel = $("select[name=platform]")
var seli = sel.attr('selectedIndex')// 选中项的索引
var options = sel.attr('options')// 所有option的数组

7、如何终止 forEach？

推荐一篇博文《面试官：你可以终止 forEach 吗？》（转发）。
参考笔记三，P12.4。

读后小结：

由于arr.forEach(() -> {})的参数是回调函数，不是迭代，故通过break或return无法终止循环，解决方案有两个：(1)抛出异常：throw new Error()；(2)使用其他循环方法，如：加强for。

如果你不了解加强for，可查阅博文《[JavaScript]知识点》中的【数组相关函数】一栏。

15、循环·中的事件问题

参考笔记一，P10.11/12。

1：若事件在循环中，由于for一直执行，而事件在触发时才执行，故直接控制arr[i]无效（arr是盒子数组），需使用this。

示例。

// 当时此循环用于设置一批<img>的src
$("#section3 .nav img").each(function(i,e){
	$(this).attr("src",arr2[i]);// arr记录着图片的路径
})

2：使用arr[i].index可设置盒子数组元素的索引（数组元素只是对应索引i，本身无索引），index可用于“链接”。（PS：这个词的意思忘了，大家自行揣摩）

示例。

$("#section3 .nav img").each(function(i,e){
	$(this).attr('index', i)
	// 为前5张图添加点击事件，点击时修改路径
	if($(this).attr('index') < 5) {// 需要使用index进行判断，而不能是 i < 5
		$("#section3 .nav img").eq(i).click(function(){\
			$(this).attr("src",arr2[i]);
		})
	}
})

19、阻止特殊行为

19.1 默认行为

推荐一篇博文《默认行为及阻止》（转发）。
参考笔记三，P48.4。

“默认行为”指标签自带的事件，如：<a>点击，<input>输入。阻止方法：

• 方法一：使用标签调用addEventListener('xx', e => {})。其中，xx是行为标识，如：click点击、contextmenu页面右键菜单、keydown键盘输入、submit提交；再调用e.preventDefault()。（注：在IE8之后版本有效）
• 方法二：window.event.returnValue = false（固定写法）。
• 方法三：为标签添加相应事件，定义函数的返回值为false或调用e.preventDefault()。

第3种是JQ方法，前两种是JS原生方法。

19.2 冒泡行为

推荐一篇博文《html消除冒泡,jquery阻止元素冒泡的两种方法》（转发）。
参考笔记一，P14.10。

“冒泡”行为指由于盒子存在嵌套关系，当子盒子的事件执行完成后再触发父盒子事件的情况。阻止方法：

• 方法一：为子盒子事件函数添加return;。
• 方法二：在子盒子事件的函数中调用e.stopPropagation()。

这两种方法都是通过JQ实现，JS原生方法暂且不讨论。

最后

本文中的例子是为了方便大家理解和阐述知识点而简单举出的，旨在阐明知识点，并不一定有实用性，仅是抛砖引玉。

如果大家想要了解一些JS知识点，可查阅博文《[javascript]知识点》。

本文持续更新中。。。