Javascript知识点锦集
【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)
https://blog.csdn.net/m0_69908381/article/details/135165704
出自【进步*于辰的博客】
文章目录
1、其他知识点链接
7、关于 false
参考笔记一,P10.3;笔记二,P46.2。
- 0、false、undefined、null、
""
、''
、NaN 的 boolean 值都是 false,即0;其他为 true; []
、[null]
、[undefined]
都会隐式转换成''
,且无论[]
嵌套几层,都视为一层。与0
比较,都为 true,因为''
和0
的 boolean 值都是 false;
8、关于 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。
一个小技巧:
\color{orange}{一个小技巧:}
一个小技巧:
定义变量为 null,表示“空对象引用”。当需要将一个变量xx作为对象时,可如下:
var xx = null;// 初始化
......
xx = new Object;// 创建对象
......
if(xx == null)
......
xx = null;// 清除对象
通过比较变量xx是否为null
来判断对象是否创建成功。
9、关于js类、对象
参考笔记一,P12.2/9。
9.1 概述
在js中,类与对象的界限没有那么明确。一般大写开头的是类,小写的是对象。
内置类:
\color{green}{内置类:}
内置类:
Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误类。
错误类包括:Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。
其中,Global 和 Math 在脚本程序初始化时创建,无需实例化。
内置对象:
\color{purple}{内置对象:}
内置对象:
arguments,自动封装function
中所有实参,类型为Array
。
宿主对象:
\color{blue}{宿主对象:}
宿主对象:
“宿主对象”指由执行js脚本的环境提供的对象。
例如:将js脚本嵌入到html文件中,则宿主对象是浏览器对象,如:window、document、element、form 和 image。
9.2 对象使用示例
1、document。
// 创建标签
var script = document.createElement('script')// 引号内必须是标签名
// 创建文本节点(标签)
var text = document.createTextNode("console.log('这是一个js脚本')")
// 添加文本标签
script.appendChild(text)
// 添加标签
document.body.appendChild(script)
// 结果是在控制台打印“这是一个js脚本”
// createTextNode()与appendChild()的结果与innerHtml相同
script.innerHtml = '这是一个js脚本'
还有:
// 将新标签插入到<body>的第2个位置(作为第2个子标签)
document.body.insertBefore(script, 1)
// 删除<body>的第1个子标签
document.body.removeChild(0)
// 复制标签
var script2 = document.body.script.cloneNode()
// 若是(true),则表示可同时复制内容,但不能事件
// 替换标签
var div = document.createElement('div')
div.innerText = '这是一个div'
document.body.replaceNode(div, 1)
// 将刚刚创建的<script>替换成<div>
// 结果是页面显示“这是一个div”
10、关于 var 与 let
关于编译与解释,详述可查阅博文《Java知识点锦集》的第17项。
变量提升机制的一个小结:变量提升机制的本质就是声明与定义不同步的错觉。
参考笔记二,P43.3、P46.1。
10.1 var
在解释时,解释器先扫描所有js脚本,将所有声明(包括变量和函数)移动到作用域顶端,且函数优先级高于变量。
示例:
console.log(str)
console.log(append)
// console.log(append(str))// 报错
var str = '中'
var append = function(str) {
return str + '国'
}
console.log(str)
console.log(append(str))
经变量提升机制:
var append;
var str;
console.log(str)-----------------------A
console.log(append)--------------------B
// console.log(append(str))------------C
str = '中'
append = function(str) {
return str + '国'
}
console.log(str)// 打印:中
console.log(append(str))// 打印:中国
输出结果:
变量提升机制将str
与append()
的声明移动到作用域顶部,故 A 和 B 的打印结果都是undefined
。
由于函数的优先级高于变量,所以append()
先于str
声明。但毕竟只是声明而非定义,因此在执行 C 时,append
只是一个未知变量,还不是函数,故
解释
解释
解释报错。
为什么函数也会变量提升?
\color{grey}{为什么函数也会变量提升?}
为什么函数也会变量提升?
因为函数也是一种变量。(1)、js中有一种
内部对象
\color{green}{内部对象}
内部对象是Function
;(2)、从函数声明var xx = function()
可以看出。
10.2 let
let 与 var 具有相同的变量提升机制。不同的是,let 声明的变量在定义之前,存在 “暂时性死区” \color{red}{“暂时性死区”} “暂时性死区”,即在定义前访问或赋值会报错。
示例:
将上一个示例稍作修改,var → let。(let 与 var 的变量提升机制相同,故经变量提升机制修改后的脚本相同,看上面)
console.log(str)
console.log(append)
let str = '中'
let append = function(str) {
return str + '国'
}
console.log(str)
console.log(append(str))
输出结果:
意思是在初始化之前,不能访问。
初始化就是上述所说的定义。因此,从变量声明let append;
到变量定义append = function(str) {}
之间的代码区就是
“暂时性死区”
\color{red}{“暂时性死区”}
“暂时性死区”。
9.3 区别
- var 允许重复声明和定义,let 不允许;(重复声明和定义的本质其实变量提升后被覆盖)
- 作用域不同;(因为 let 存在“暂时性死区”)
- let 不允许重复声明和定义是包括 var 和 let。(变量名相同就是同一个变量)
11、为什么js语句不需要分号结尾?
推荐一篇博文《js语句末尾是否需要加分号?》(转发)。
参考笔记二,P43.4。
因为在解释时会自动在行尾添加分号,除非下一行以(、[、/、+、-
开头,且若下一行与下下一行仍能衔接,则继续拼接。
12、关于js内置函数
参考笔记一,P10.4、P11.3、P13.2;笔记三,P48.1/2。
12.1 通用函数
1、parseInt(str)
:将字符串中的数字部分转换成数字,以字符截止,可用于去除小数。若首字符不是数字,得NaN
。
2、Number(str)
:将字符串转换成数字,若字符串中包含非数字,得NaN
。
3、list.find(item => {})
:返回匹配的数组元素。
示例:
var platform = [{
id: 1,
name: 'C站'
}, {
id: 2,
name: 'B站'
}]
var result = platform.find(item => {// item 是数组元素,作为参数传入函数作为返回值
if(item.id == '1')
return true
})
console.log(result)// { id: 1, name: 'C站' }
var result = platform.find(item => {
if (item.id == 3)
return true
})
console.log(result)// undefined
var result = platform.find(item => {
if (item.id == '1')
return false
})
console.log(result)// undefined
var result = platform.find(item => {
if (item.id == 3)
return false
})
console.log(result)// undefined
四个示例中的if...
使用的是’==
‘(相等),而不是’===
'(全等)。当然,也可以使用===
,只是需要留意彼此类型(拿一个字符串去一组数字中查找,那肯定找不到,返回undefined
)。
注意:
\color{red}{注意:}
注意:这里的return
的作用是终止循环,其返回值用于判断匹配的元素是否作为检索结果的依据,并不是检索结果(result
)。
4、str.slice(i)
:截取字符串。
5、with()
:任何对变量或函数的引用都被认为是此对象的属性。
示例。
document.write(Math.sin())
// 等价于:
with(Math) {
document.write(sin())
}
12.2 document对象函数
1、innerHTML / innerText
:设置盒子内容,前者会识别内容中的标签。
示例。
// 显示文字“content”,盒子<content>因没有样式而无法看出
document.body.innerHTML = "<content>China</content>";
// 显示文字“<content>China</content>”
document.body.innerText = "<content>China</content>";
2、querySelector() / querySelectorAll()
:通过盒子名获取盒子。前者返回第一个,后者返回所有。
12.3 Global对象函数
encodeURI(url) / decodeURI(url)
:对URI进行编码或解码,作用对象:不属于URI的特殊字符,如:特殊符号、汉字。encodeURIComponent(url) / decodeURIComponent(url)
:对URI进行编码或解码,作用对象:任何非标准字符(即非字母)。
示例:
var url = 'https://blog.csdn.net/m0_69908381?type=blog&name=进步*于辰'
var enurl1 = encodeURI(url)
var enurl2 = encodeURIComponent(url)
console.log(enurl1)
console.log(enurl2)
var deurl1 = decodeURI(enurl1)
console.log(deurl1)
var deurl2 = decodeURIComponent(enurl2)
console.log(deurl2)
打印结果:
13、如何解决“跨域”问题?
参考笔记三,P47.1。
1、设置请求允许范围。
response.setHeader("Access-Control-Allow-Origin", "*")
response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8081/g1")
大致如此,因语言而异。
2、jsonp:见第二个知识点;
3、配置代理(后续补充);
14、关于js解构
推荐一篇博文《js中的解构》(转发)。
参考笔记二,P47.3。
小结:(以var [a, b] = [1, 2]
为例)
- 解构时格式必须相同;
- 当有重命名时,新变量才保留声明;
- 扩展运算符只能放在最后,如
var [a, ...b]
; - 变量个数与元素个数不必相同,取对应值,且可设置默认值;
- 解构对象时,若新变量已声明,则解构语句必须用
()
包裹,因为js规定括号才是一个语句块。
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
可用于“链接”。(这个词的意思忘了,大家自行揣摩哈。。。)
示例。
$("#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]);
})
}
})
16、关于下拉框
参考笔记一,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的数组
17、关于入口函数
参考笔记一,P13.1。
页面加载的顺序是自上而下,步骤是先将标签载入
D
O
M
树
\color{green}{DOM树}
DOM树,再加载内容。
示例。
<script>
var img = document.querySelector('img')
img.src = 'img/2.jfif'
</script>
<img src="" alt="">
在执行querySelector()
时,由于还未加载<img>
,故找不到,则img
为undefined
,img.src
报错。
解决办法:
1、js原生语法:window.onload = function() {}
。控制函数内代码在所有内容加载完成后执行。即:
<script>
window.onload = function() {
var img = document.querySelector('img')
img.src = 'img/2.jfif'
}
</script>
<img src="" alt="">
2、jq语法:$(document).ready(function() {})
。控制函数内代码在DOM树加载完成后执行。即:
<script>
$(document).ready(function() {
var img = document.querySelector('img')
img.src = 'img/2.jfif'
})
</script>
<img src="" alt="">
或简写:
<script>
$(function() {
var img = document.querySelector('img')
img.src = 'img/2.jfif'
})
</script>
<img src="" alt="">
后者较前者延迟少,前者较后者可靠性高,前者在一个页面中只能有一个,后者可多个。
至于可靠性,一般情况下两者差别不大(加载完DOM树与加载完内容的确差别不大)。不过,例如图片较大,需要较长时间加载,而js脚本中包含对图片像素层面的处理,这种情况下使用$(function() {})
就可能有问题。
18、关于js对象相关
参考笔记一,P13.3、P14.11。
18.1 创建对象
1、字面量。
var platform = {
id: 1,
name: 'csdn'
}
2、
var platform = new Object()
platform.id = 1
platform.name = 'csdn'
3、
var platform = function() {
this.id = 1
this.name = 'csdn'
}
var p1 = new platform()
4、
var platform = new Object()
var csdn = Object.create(platform)// 同时建立继承关系
18.2 建立继承关系
js不属于
“面向对象”
\color{green}{“面向对象”}
“面向对象”的编程语言,故没有明显的继承关系(extends
)。要实现“继承”,需要额外建立,js中的“父类”称之为
原型
\color{blue}{原型}
原型(prototype)。
示例。
let platform = function() {}
let CSDN = function() {}
// 实例化,可以不加 ()
var p1 = new platform()
var c1 = new CSDN()
Object.setPrototypeOf(c1, p1)// 建立继承关系
Object.getPrototypeOf(c1)// 获取原型,返回:platform {}
p1.isPrototypeOf(c1)// 判断继承关系,返回:true
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()
。(这是jq方法,前两种是js原生方法)
19.2 冒泡行为
推荐一篇博文《html消除冒泡,jquery阻止元素冒泡的两种方法》(转发)。
参考笔记一,P14.10。
“冒泡”行为指由于盒子嵌套关系中,当子盒子的事件执行完成后再触发父盒子事件的情况。阻止方法:
- 为子盒子事件函数添加
return;
; - 在子盒子事件的函数中调用
e.stopPropagation()
。
这两种方法都是通过jq实现,js原生方法暂且不讨论。
最后
我所知的编写js脚本比较好的方法:(1)F12控制台;(2)HTML文件;(3)vscode。第一种最便捷,但不方便编写多行js脚本,目前我用第三种。
本文持续更新中。。。
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!