Js易错点

WLQH

已于 2023-11-06 18:46:29 修改

阅读量60

点赞数

文章标签： javascript 开发语言

于 2023-10-18 22:21:11 首次发布

本文链接：https://blog.csdn.net/m0_73118788/article/details/133916128

版权

1. onload = () => {}加载函数的覆盖

理论：
案例相关代码：onload = () => {}
中文：加载函数
描述：在页面的DOM/图片/视频等全部元素加载完毕后执行，多个加载函数会发生覆盖
注意：“多个加载函数会发生覆盖”，“全部元素加载完毕后执行”
我的感悟：跟栈似的，如果JS写多个加载函数，写在最后的那个会执行，其他都无效
实验代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button type="button" id="btn">点我测试打印语句</button>
    <button type="button" id="open-btn">点我打开新页面</button>
    <button type="button" id="jump-btn">点我跳转新页面</button>
    <button type="button" id="close-btn">点我跳转新页面</button>
  
</body>
<script>
    onload = () => {
    // 抓取DOM元素
    let btn = document.querySelector('#btn');
    // 挂载点击事件
    btn.onclick = () => {
        // 打印内容在浏览器 F12 可查，多值输出使用逗号分隔即可
        console.log('hello', 'world');
        // 打印浏览器信息
        console.log(navigator.userAgent);   
    }   
};
onload = () => {
    // 抓取DOM元素并挂载点击事件
    document.querySelector('#open-btn').onclick = () => {
        console.log("ABC");
        alert("???")
        // 打开一个空白窗口，_blank表示在新页面打开，返回新页面
        let newWindow = open('about:blank', '_blank');
        // 在新页面上编写 `<h1>HelloWorld</h1>` 内容
        newWindow.document.write('<h1>HelloWorld</h1>');
    }

    // 抓取DOM元素并挂载点击事件: 跳入百度页面
    document.querySelector('#jump-btn').onclick = () => location.href = 'https://www.baidu.com';

    // 抓取DOM元素并挂载点击事件: 关闭当前页面
    document.querySelector('#close-btn').onclick = () => close();
};
</script>
</html>

2. 函数方法

function test(){} 与 test =()=>{} 那个ES6的let不加好像能跑，嘿嘿
还有那个arguments，可以直接接受所有传来的参数，并以数组形式存储

下面讲一下那个额外参数“…xxx”
HTML：

<button type="button" onclick="es5(1, 2, 3, 4, 5, 6)">测试ES5函数</button>
<button type="button" onclick="es6(1, 2, 3, 4, 5, 6)">测试ES6函数</button>

JS:

function fn() {
    return 3;
}

/*ES5函数*/
function es5(a, b, c = a + b + 1 + fn(), ...params) {
    console.log(a, b, c);
    console.log('params', params);
    console.log('arguments', arguments);
}
/*ES6函数*/
let es6 = (a, b, c = a + b + 1 + fn(), ...params) => {
    console.log(a, b, c);
    console.log('params', params);
}

“…params”（params可以换成任何自定义名的变量）会将function里前面没接受的参数存到名为params的数组里。
function test(a,b,c,…params){} 里面变量前面别写let,conset,var!，可以function test(a,b=1,c=func(),…params){}。解释：如果b没值，b=1,b有传值就覆盖b=1，c的值可以是函数的返回值，。。。params用于存储a,b,c没存下的值，他是的数组。
结果图：

看那个params和arguments，很新颖的传参方式

3.勾选栏看一下

type=“checkbox”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        margin: auto;
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
</style>
<body>
    <label><input id="all-cbx" type="checkbox"/> 全选</label>
    <label><input id="rev-cbx" type="checkbox"/> 反选</label>
    <hr/>
    <label><input name="users" type="checkbox"/> 赵四</label>
    <label><input name="users" type="checkbox"/> 刘能</label>
    <label><input name="users" type="checkbox"/> 广坤</label>
    <label><input name="users" type="checkbox"/> 王云</label>
    <label><input name="users" type="checkbox"/> 飞机</label>
</body>
<script>
    onload = () => {
  
  // 抓取DOM元素
  let users = document.querySelectorAll('input[name="users"]');
  let allCbx = document.querySelector('#all-cbx');
  let revCbx = document.querySelector('#rev-cbx');
  
  // 点击全选多选框，可以将所有内容选中，再次点击可以取消全选
  allCbx.onclick = () => {
      for (let i = 0, j = users.length; i < j; i++) {
          users[i].checked = allCbx.checked;
      }
  };

  // 点击反选多选框，可以将所有内容反选，再次点击再次反选
  revCbx.onclick = () => {
      for (let i = 0, j = users.length; i < j; i++) {
          users[i].checked = !users[i].checked;
      }
  }
};
</script>
</html>

结果图：

4.强制转化

简约版：

http://t.csdnimg.cn/RsoCc

另外：

深度剖析之由浅入深揭秘JavaScript类型转换(最全总结篇) - 南囝coding的文章 - 知乎
https://zhuanlan.zhihu.com/p/642060047

知识点：
Boolean(参数) Number(参数) String(参数) <这几个最基础的记一下>

<button id="type-conversion-btn" type="button">测试类型转换</button>

onload = () => {
  
  // 测试类型转换
  document.querySelector("#type-conversion-btn").onclick = () => {
      // 显示转换: 将字符串转为整数
      console.log(parseInt('12abc34'));
      // 显示转换: 将字符串转为小数
      console.log(parseFloat('abc34'));
      // 显示转换: 保留两位小数，自动四舍五入
      console.log(3.1499999.toFixed(2));
      // 隐示转换: `==` 会将类型都转为同一类型然后再进行比较
      console.log(1 == '1');
      // 隐示转换: 字符串相减，会先把类型都转成数字，然后再进行数学的减法计算
      console.log('100' - '1');
  };
};

5.一些零碎的语法

**“&emsp”+";”**表示空格（之所以用字符串连接的方式是因为写一块csdn就没了）
要用&emsp ;一定要在他左右加俩个` ，这样他才能完成解析

    for(var i=1;i<=9;i++){
        for(var j = 1;j<=i;j++){
            document.write(`${j}X${i}=${i*j}&emsp;`);
        }
        document.write("<br>")
    }

还要注意document.write里面那个奇怪的引号(英文，tab键上面单击)，仅 ` 能把里面解析了，我试过“” or ""or’'都是直接把括号里面的当字符串输出了。

6.DOM事件–触发事件

除了：

<button onclick="test()" id="btu">点击</button>

let test=()=>{document.getElementById("btu").innerHTML="已点击"}

还可以：

<button onclick="test()" id="btu">点击</button>

document.getElementById("btu").onclick=function(){document.getElementById("btu").innerHTML="已点击"};

就是不用在HTML里加onclick事件，只要点，顺着Id可以到JS里的onclick并执行后续函数操作
完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>点击按钮执行 <em>displayDate()</em> 函数。</p>

<button id="myBtn">点我</button>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
    document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

</body>
</html>

这里再正规讲讲DOM0级事件和DOM2级事件（没DOM1级！历史自己找去）
事件绑定
事件绑定有DOM 0级和DOM 2级，没有DOM 1级，DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型，这个标准下的事件模型就是我们所说的2级DOM事件模型。
DOM 0级事件绑定
我们现在给一个注册事件都是使用 onxxx 的方式，但是这个方式不是很好，只能给一个事件源的同一个事件类型, 只能绑定一个事件处理函数，一旦写了第二个事件，那么第一个就被覆盖了
语法：事件源.onclick = 事件处理程序（事件处理函数）

oDiv.onclick = function () {
  console.log('我是第一个事件')
}

oDiv.onclick = function () {
  console.log('我是第二个事件')
}

当你点击的时候，只会执行第二个，第一个就没有了

DOM 2级事件绑定事件监听
标准浏览器
使用 addEventListener 的方式添加。addEventListener : 非 IE 7 8 下使用
语法：元素.addEventListener(‘事件类型’，事件处理函数，冒泡还是捕获)
可以给同一个事件源的同一个事件类型绑定多个事件处理函数

oDiv.addEventListener('click', function () {
  console.log('我是第一个事件')
}, false)

oDiv.addEventListener('click', function () {
  console.log('我是第二个事件')
}, false)

当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序执行，先打印我是第一个事件再打印我是第二个事件
注意：事件类型的时候不要写 on，点击事件就是 click，不是 onclick
更多DOM事件参考：

https://zhuanlan.zhihu.com/p/641551898

7.var和let的区别

https://www.runoob.com/js/js-let-const.html

8.JS中类似python中for（let x in ???）

首先，JS中相关的用法为：
for
他打印出来最后txt是（注意他txt是拼起来的嘛）：
BillGates56
然后
我这有个实验：

可见我用一个变量x结合in去访问数组worklist，x只能访问到数组元素的键（即数组元素的索引），而不能访问到数组元素的值，python中直接可以的（下面有对比），这要注意！！！
要想用in去访问数组，得用索引放【】中的办法，像上面那样
python

9.const

const是ES6新增的关键字，说是定义常量的，故可知：常量是不可修改的，并且申明和赋值必须在同一行
const
但引起我注意的是我做Bank OS算法时对const申明的对象的"修改"：

const对于复合类型的数据是different的(具体看list后面的那5行话)
注意：

const 声明的变量不得改变值，这意味着，const 一旦声明变量，就必须立即初始化，不能留到以后赋值。
const 的作用域与 let 命令相同：只在声明所在的块级作用域内有效。
const 命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后使用
const 声明的常量，也与let一样不可重复声明。

本质 const 实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

原文链接：https://blog.csdn.net/qq_62789540/article/details/128875156

这里还提供一位大佬的讲解：

http://t.csdnimg.cn/lX9yx

“但其const只是规定变量的标识符不能重新分配，例如声明变量是引用类型，则不可变的只是变量绑定的指针（JS不存在这个概念，指变量的值是栈中存放的内存地址，访问时会自动寻址找到堆中存放的对象），而对象的属性可以任意改变。所以const关键字并不能定义真正的常量对象，真正的常量对象应该是：不可扩展、不可删除、不可修改的。”

10.JS访问对象

比如我这定义一个对象：

let car={name:"Fiat", model:500, color:"white"}

访问对象嘞，分为俩种方法（一定记住俩点！！）

car.name

car["name"]

(你这谨记！！【】里面一定要双引号，因为定义对象时那name默认为string类型，但你要let car={1:Fiat},那car[1]，1不加双引号还是可以的，强解释语言嘛，1解释为number可以的，name只能解释成string)

还有，用

for (let i in car){
console.log(car[i])
}

这里的i会自动访问对象的“键”，甭管你是name:Fita还是1：Fita,你看我上面的结果，typeof（i）都是string类型，也可以说，ObjectName[———]中括号这里面是string类型且值属于该对象键值集合，则可以成功访问。

WLQH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫