Loading...
墨滴

杨良文

2021/03/03  阅读:17  主题:橙心

JavaScript 基础总结

javascript 基础总结 --杨良文

一 目录

不折腾的前端和咸鱼有什么区别

目录
一 目录
二 前言
三 DOM 常用 API
四 null 和 undefined 的区别
五 事件流
   5.1 addEventListener
   5.2 原理
   5.3 案例
   5.4 练习题
   5.5 阻止冒泡
   5.6 onmouseover 和 onmouseenter 区别
   5.7 科普
六 typeof 和 instanceof 的区别
七 一句话描述 this
八 JS 位置
九 JS 拖拽
十 setTimeout 实现 setInterval
十一 实现 Sleep
十二 执行上下文
   12.1 执行上下文类型
   12.2 执行栈
十三 函数式编程
   13.1 函数式编程特点
   13.2 纯函数
十四 渐进式网络应用(PWA)
   14.1 优点
   14.2 缺点
十五 规范化
   15.1 CommonJS 规范
   15.2 AMD 规范
   15.3 CMD 规范
   15.4 ES6 Modules 规范
十六 babel 编译原理
十七 题集
   17.1 数组常见 API
   17.2 常见 DOM API
   17.3 数组去重
   17.4 数字化金额
   17.5 遍历问题
   17.6 setTimeout
   17.7 requestAnimationFrame
   17.8 暂时性死区
   17.9 输出打印结果
   17.10 输出打印结果
   17.11 Event Loop
   17.12 输出打印结果
   17.13 使 a == 1 && a == 2 成立
十八 More

二 前言

https://product.mdnice.com/themes/

在 JavaScript 复习过程中,可能会碰到:
1.nullundefined 的区别?
2.addEventListener 函数?
这样杂七杂八的问题,亦或者 a == 1 && a == 2 这样有趣的问题。
将它们归类到 JavaScript 基础,并在本篇文章中一一讲述。
同时,会有十几道简单题目练手。

三 DOM 常用 API

3.1 标题

可以使用 document 或 window 元素的 API 来操作文档本身或获取文档的子类(Web 页面中的各种元素)。

const node = document.getElementById(id); // 或者 querySelector(".class|#id|name");

// 创建元素
const heading = document.createElement(name); // name: p、div、h1...
heading.innerHTML = '';

// 添加元素
document.body.appendChild(heading);

// 删除元素
document.body.removeChild(node);

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>DOM 操作</title>
  <style>
    div {
      border: 1px solid #ccc;
      padding: 50px;
      width: 100px;
    }
  </style>
</head>
<body>
  <div id="dom1">元素 1</div>
  <div class="dom2">元素 2</div>
  
  <button class="btn">点我</button>

  <script>
    (function() {
      const btn = document.querySelector('.btn');

      // 注册点击事件
      btn.onclick = function() {
        const dom1 = document.getElementById('dom1');

        // 第一种添加元素
        const newDom1 = document.createElement('p');
        newDom1.innerHTML = '<a href="https://github.com/LiangJunrong/document-library">jsliang 的文档库</a>';
        dom1.appendChild(newDom1);

        // 第二种添加元素
        const newDom2 = document.createElement('ul');
        newDom2.innerHTML = `
          <li>aaa</li>
          <li>bbb</li>
        `;
        document.body.appendChild(newDom2);

        // 移除元素
        const dom2 = document.querySelector('.dom2');
        document.body.removeChild(dom2);
      }
    })()
  </script>
</body>
</html>

四 null 和 undefined 的区别

  • null 表示 无 的对象,也就是此处不应该有值;而 undefined 表示未定义。
  • 在转换数字的时候,Number(null) 为 0,而 Number(undefined)NaN

使用场景细分如下:

  • null:
  1. 作为函数的参数,表示该函数的参数不是对象。
  2. 作为对象原型链的终点。Object.prototype.__proto__ === null
  • undefined:
  1. 变量被声明但是没有赋值,等于 undefined
  2. 调用函数时,对应的参数没有提供,也是 undefined
  3. 对象没有赋值,这个属性的值为 undefined
  4. 函数没有返回值,默认返回undefined

杨良文

2021/03/03  阅读:17  主题:橙心

作者介绍

杨良文