FE Note

基本数据类型

2020/5/20

# 基本数据类型

# 引用类型

  • Object 、Array 、Function 、Date 、Math 、Regexp 、JSON

# Boolean布尔

  • 类型转换：!!undefined --> false
  • 布尔类型的值的转换规则
undefined,null,false,0,NaN,""  // 返回 false

// 过滤数组中的这些值
[ (undefined, null, false, 0, NaN, "", "", "hello")].filter(item => item); // ['hello']

typeof null; // 返回 object
type undefined // 返回 undefined
1
2
3
4
5
6
7
  • null是一个表示“空”的对象，转为数值时为 0
  • undefined是一个表示”此处无定义”的原始值，转为数值时为NaN
  • void 0

# JavaScript 中的包装类型

typeof new String('abc')  // object
typeof new Object('xxx')  // object
typeof new Boolean(false) // object
1
2
3

# 数据类型检测的方式有哪些

  • typeof, 可用于基本数据类型判断
typeof [];     // object
typeof {};     // object
typeof null;   // object
1
2
3
  • instanceof, 只能正确判断引用数据类型，而不能判断基本数据类型
2 instanceof Number;     // false
true instanceof Boolean; // false
'str' instanceof String; // false
1
2
3
  • constructor, 不能判断 null与undefined, 也不能判断修改原型链后的数据类型
function Fn(){};
// 修改原型链
Fn.prototype = new Array();
var f = new Fn();

f.constructor===Fn;    // false
f.constructor===Array; // true
1
2
3
4
5
6
7
  • Object.prototype.toString.call, 使用对象的原型方法 toString 来判断数据类型

# 栈和队列(LIFO/FIFO)

  • 栈数据结构的访问规则是LIFO(Last-in-First-Out,后进先出)
  • 队列数据结构的访问规则是FIFO(First-In-First-Out, 先进先出)

# script标签async与defer的区别

# script标签module

<!-- hd.js -->
export let hd = { name: "后盾人" };
<!-- html -->
<script type="module">
  import { hd } from "./hd.js";
</script>
1
2
3
4
5
6
  • 延迟解析
<body>
  <script type="module">
    console.log(document.querySelector("button")); //Button
  </script>
  <script>
    console.log(document.querySelector("button")); //undefined
  </script>
  <button>后盾人</button>
</body>
1
2
3
4
5
6
7
8
9
  • 严格模式
<!-- 模块默认运行在严格模式，以下代码没有使用声明语句将报错 -->
<script type="module">
  hd = "houdunren"; // Error
</script>

<script>
  console.log(this); //Window
</script>
<script type="module">
  console.log(this); //undefiend
</script>
1
2
3
4
5
6
7
8
9
10
11
  • 作用域
<!-- 模块都有独立的顶级作用域，下面的模块不能互相访问 -->
<script type="module">
  let hd = "houdunren.com";
</script>

<script type="module">
  alert(hd); // Error
</script>

<!-- 单独文件作用域也是独立的 -->
<script type="module" src="1.1.js"></script>
<script type="module" src="1.2.js"></script>

<!-- # 1.1.js -->
let hd = "houdunren";

<!-- # 1.2.js -->
console.log(hd)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  • 预解析
<!-- 引入多入hd.js 脚本时只执行一次 -->
<script type="module" src="hd.js"></script>
<script type="module" src="hd.js"></script>

<!-- #hd.js内容如下 -->
console.log("houdunren.com");

<!-- 导入多次 hd.js 时只解析一次 -->
<script type="module">
  import "./hd.js";
  import "./hd.js";
</script>

<!-- # hd.js内容如下 -->
console.log("houdunren.com");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# define module

let module = (function() {
  //模块列表集合
  const moduleLists = {};
  function define(name, modules, action) {
    modules.map((m, i) => {
      modules[i] = moduleLists[m];
    });
    //执行并保存模块
    moduleLists[name] = action.apply(null, modules);
  }

  return { define };
})();

//声明模块不依赖其它模块
module.define("a", [], function() {
  return {
    show() {
      console.log("A module func");
    }
  };
});

//声明模块时依赖其它模块
module.define("b", ["a"], function(f) {
  f.show();
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# amd-requirejs

  • 异步加载模块,依赖前置,提前执行
  • define 定义模块define(['require','foo'],function(){return foo;});
  • require 加载模块(依赖前置) require(['foo','bar'],function(foo,bar){});
// a.js
define(function() {
  return {
    a: "hello world"
  };
});
// b.js
require(["./a.js"], function(moduleA) {
  console.log(moduleA.a); // 打印出：hello world
});
1
2
3
4
5
6
7
8
9
10

# cmd-seajs

  • define 定义 exports 导出 define(function(require,exports,module){});moduel 上存储了当前模块上的一些对象。
  • requre(./a)直接导入。require.async 异步导入。
  • 同步加载,依赖就近,延迟执行。
// a.js
define(function(require, exports, module) {
  exports.a = "hello world";
});
// b.js
define(function(require, exports, module) {
  var moduleA = require("./a.js");
  console.log(moduleA.a); // 打印出：hello world
});
1
2
3
4
5
6
7
8
9

# UMD

  • 兼容 AMD 和 commonJS 规范的同时
(function(root, factory) {
  if (typeof define === "function" && define.amd) {
    //AMD
    define(["jquery"], factory);
  } else if (typeof exports === "object") {
    //Node, CommonJS之类的
    module.exports = factory(require("jquery"));
  } else {
    //浏览器全局变量(root 即 window)
    root.returnExports = factory(root.jQuery);
  }
})(this, function($) {
  //方法
  function myFunc() {}
  //暴露公共方法
  return myFunc;
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# ES6 module

// a.js
export var m = 1;
export {};
export { n as m };
export default n;

// b.js
import "./a.js";
import * as m from "./a.js";
import { n as v } from "./a.js";
import { n } from "./a.js";
1
2
3
4
5
6
7
8
9
10
11

# commonJS

module.export = {};

let fn = reqiure("");
1
2
3

使用commitizen格式化提交规范