【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)
https://developer.aliyun.com/article/1635954
出自【进步*于辰的博客】纯文字阐述,内容比较干。并且,由于考虑到时间长了恐有所遗漏,便即兴记录,并没有对内容进行筛选、排序。因此,大家在阅读时可以直接Ctrl + F进行检索。
1、细节锦集
==
表示“相等”,不考虑数据类型,如:1 == '1'
为 true;而===
表示“全等”,如:1 === '1'
为 false;- js中使用驼峰命名的原因:会将短横线(
-
)视为负号,故无连接作用; - js 中的
function
中能被访问的有:参数、局部变量、嵌套function
、全局变量、外部function
的变量或其嵌套function
; - 原始数据类型:String、number、boolean、null、undefined、symbol。前5种是基本数据类型,
symbol
表示唯一的值; - Java数组长度不可变,而js中
Array
会自动扩展,即不存在溢出。定义var arr = new Array(3)
,此时arr
长度为 3;执行arr[8] = xx
,则arr
长度变为 9。输出arr[5]
为undefined
(声明但为定义); - js中
return
后可以有语句(同级别),只是不会执行(即不进行解释,即便代码有误也不报错); $("xx").children()
用于获取xx
盒子的所有子盒子(js格式是xx.childNodes
),$("xx").parentNode()
用于获取父盒子;函数形参可设置默认值,当实参为
undefined
时,相当于未指定实参。并且,实参可以是a = 1
的格式,但没有对应关系。2、关于 false
参考笔记一,P10.3;笔记二,P46.2。
0、false、undefined、null、
""
、''
、NaN 的 boolean 值都是 false,即0
;其他为 true;[]
、[null]
、[undefined]
都会隐式转换成''
,且无论[]
嵌套几层,都视为一层。与0
比较,都为 true,因为''
和0
的 boolean 值都是 false;3、null 与 undefined
参考笔记一,P10.9;笔记二,P43.1。
定义:
undefined
:全局变量、属性;null
:字面量,不会被隐式赋值给对象,表示尚未创建的对象。
区别:
- undefined 派生于 null,都表示“无效的值”,故相等。但属于不同的原始数据类型,故不全等;
- null 与 number 作算术运算,会将 null 视为
0
;而 undefined 与 number 作算术运算,得NaN
; typeof null
为 Object,typeof undefined
为 undefined。
注意:
- 若变量已声明而未定义,则为 undefined。故若想变量为 null,必须定义为 null;
- 当
function()
无返回值时,强行调用获取返回值,得 undefined。
一个小技巧:
定义变量为 null,表示“空对象引用”。当需要将一个变量xx作为对象时,可如下:
var xx = null;// 初始化
......
xx = new Object;// 创建对象
......
if(xx == null)
......
xx = null;// 清除对象
通过比较变量xx是否为null
来判断对象是否创建成功。
4、特殊指令
typeof a
:返回变量类型。同type(a)
;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]知识点》。
本文持续更新中。。。