[JS]细节与使用经验

简介: 本文总结了 JavaScript 中的一些重要细节,包括相等与全等的区别、驼峰命名的原因、函数作用域、数据类型、数组特性、特殊指令和语句、事件处理等。文章还特别介绍了如何阻止默认行为和冒泡行为,并提供了相关示例。适合初学者和进阶开发者参考。

【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)
https://developer.aliyun.com/article/1635954
出自【进步*于辰的博客

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

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()用于获取父盒子;
  8. 函数形参可设置默认值,当实参为undefined时,相当于未指定实参。并且,实参可以是a = 1的格式,但没有对应关系。

    2、关于 false

    参考笔记一,P10.3;笔记二,P46.2。

  9. 0、false、undefined、null、""''、NaN 的 boolean 值都是 false,即0;其他为 true;

  10. [][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:删除对象objname属性;

    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(() -> {})的参数是回调函数,不是迭代,故通过breakreturn无法终止循环,解决方案有两个:(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]知识点》。

本文持续更新中。。。

相关文章
|
6月前
|
JavaScript 前端开发
如何用JS实现团队功能
如何用JS实现团队功能
47 0
|
5月前
|
JSON JavaScript 前端开发
更好的 JS 代码该怎么编写 一文讲明白
Javascript 是浏览器可以理解的语言,它用于加载动态内容而无需刷新页面。今天列举一些用用更少的代码又更具可读性方式来编写 JS
44 3
|
5月前
|
存储 JavaScript 前端开发
带你论证JS基础的一段代码
在学习乏味难啃的理论基础知识时,我觉得应该创造自己的想象力,多去实践多去思考为什么会有这样的结果呢?
27 2
|
6月前
|
存储 前端开发 JavaScript
【面试题】前端 js那些需要注意的小细节
【面试题】前端 js那些需要注意的小细节
|
自然语言处理 JavaScript 前端开发
js难点(初学者)
js难点(初学者)
67 0
|
前端开发 JavaScript API
一篇文章掌握Next.js的核心要点
一篇文章掌握Next.js的核心要点
1534 0
一篇文章掌握Next.js的核心要点
|
JavaScript
js基础笔记学习295核心函数1
js基础笔记学习295核心函数1
63 0
js基础笔记学习295核心函数1
|
JavaScript
js基础笔记学习297核心函数3
js基础笔记学习297核心函数3
48 0
js基础笔记学习297核心函数3
|
JavaScript
js基础笔记学习296核心函数2
js基础笔记学习296核心函数2
78 0
js基础笔记学习296核心函数2
|
移动开发 前端开发 JavaScript
原生 JS 手写一个优雅的图片预览功能,带你吃透背后原理
本文将用一个极简的例子详细讲解如何用原生JS一步步实现完整的图片预览和查看功能,无任何第三方依赖,兼容PC与H5,实现了触屏双指缩放等,干货满满。
原生 JS 手写一个优雅的图片预览功能,带你吃透背后原理