变量作用域

作用域类型

  • 全局 Global Scopes

    • let 不属于 window
    • undefined 属于 window
    • var 声明 属于 window

  • 局部 Local Scopes

    • 函数 Function Scopes

    • 块 Block Scopes

      • 使用 let 或者 const
    • let 声明普通变量
    • const 声明“引用”不便类型

特殊变量

null VS. undefined

参考：JavaScript — What’s the difference between Null & Undefined? | by Brandon Mor…

  • null !== undefined but null == undefined

  • null is of type object. undefined is of type undefined

    • null 是 Object 类型
    • undefined 是 undefined 类型

null

  • null 是一个 Object

    • 说明 null 变量的值是 null

      1
2
3

      var test1 = null;
console.log(test1);
// null

    • 说明 null 的类型是 object

      1
2

      console.log(typeof test1);
// object

undefined

  • 一个变量已经被声明，但是还没有被赋值

    • 注意：是“没有被赋值”

    • 说明未被赋值是 undefined

      1
2
3

      var test2;
console.log(test2);
// undefined

    • 说明类型是 undefined

      1
2

      console.log(typeof test2);
// undefined

    • undefined 也能被赋值给一个变量

      1
2
3

      var test = undefined;
console.log(test);
// undefined

模块

参考： https://www.cnblogs.com/fps2tao/p/10823468.html

import

参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

  • import 默认导入 modules 采用 strict mode –> "use strict"

export

  • 导出格式

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

    export default default_name;

import default_name;


export {a, b, c};
export {a as default, b, c};

import {default as a, ...} from mode;
// 等价于 import a from mode;

export * from upper_mode;
export name from upper_mode;
export {a, b, c} from upper_mode;
export {a as aa, b as bb, c as cc} from upper_mode;

default 用法（默认导出）

参考： https://stackoverflow.com/a/42184680

  • javascript 只允许导出一个 default 变量

    1
2
3

    export default Header;

import Header from './Header.jsx';
    1
2
3

    export {Header};

import {Header} from './Header.jsx';

立即执行函数 IIFE(Immediately-Invoked Function Expression)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

var module = (function() {
    var _count = 0;
    var m1 = function() {
        alert(_count)
    }
    var m2 = function() {
        alert(_count + 1)
    }

    return {
        m1: m1,
        m2: m2
    }
})()

  • 形式

    • (lambda_function_definition)()

  • 特点

    • 内部定义的变量不能被访问，可以用于封装模块，返回值用于外部可见

this

参考： http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

纯粹函数调用

  • 指代全局对象，通过它访问的是全局变量

在对象的方法中

  • 指代方法所属的对象

在构造函数中

  • 指代要构建的对象

在 apply 调用中

参考：https://www.w3school.com.cn/js/js_function_apply.asp

  • 非 use strict 模式，给定第一个参数不是对象 object, this 指代全局对象
  • 在 use strict 模式，给定第一个参数不是对象 object, this 指代发出调用 的对象

prototype 属性

  • String 对象
  • Function 对象

作用

  • 改变该类型下对象的所有属性

异步

Promise

参考： https://www.jianshu.com/p/b16e7c9e1f9f 作用： 一种比回调函数和事件更合理更强大的，异步解决方法

执行顺序

  1. Promise 内部代码

    • 立即执行
  2. 脚本代码

  3. then 的 回调函数

    • Javascript 引擎

  4. 浏览器 API setTimeout() 的 回调函数

    • 浏览器 API

箭头函数 Arrow Function

  • eg:

    • var fun = () => {return 1}
    • var fun = (val) => {return 1}

    • var fun = val => {return 1}

      • 注意：可以 “没有” “括号”

    • var fun = var => return 1;

      • 注意：单条语句，大括号也可以省略

sqlite3

https://www.sqlitetutorial.net/sqlite-nodejs/query/

  • db.all()

    • 所有结果

  • db.get()

    • 只有一行

扩展运算符

展开 数组，Object 等

遍历

https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript

  • 遍历 Object 使用 for in

    • for (key in obj)
    • for ((key, val) in obj)
    • for ((key, val, index) in obj)

  • 遍历 Array

    • 注意： 不要使用 for in

      • for ( index in array) —> index 是 0, 1, 2,
      • 不是对应元素
      • 对应元素–>array[index]

    • 有效方法

      • 使用 for … of

        • for (elem of array)
      • for (var i=0; i < arr.length; i++)

      • Array.prototype.forEach(arr, function)

        • 在原 Array 上修改

      • Array.prototype.map(arr, function)

        • 批量应用 map
        • 创建新 Array

      • Array.prototype.filter(arr, funtion)

        • 过滤
        • 新建 Array

Cross-Origin Resource Sharing (CORS)

https://www.cnblogs.com/demingblog/p/8393511.html

  • 名称

    • Cross-Origin: 跨源 或者 跨域

  • 被限制功能：

    • JS 跨域调用

  • 拦截者

    • 浏览器

跨源 Cross-Origin

  • 跨域名：即两个不同的域名，如：www.baidu.com 和 wwww.ifeng.com
  • 跨端口号：域名相同，端口号不同，如：localhost:80 与 localhost:8080
  • 跨协议

被限制的 Js 请求

  • ajax, XMLHttpRequest 请求

  • js fetch API

  • web 字体 @font-face
  • WebGL textures
  • drawImage –> 绘制 canvas
  • 样式表（CSSOM）

  • 注意

    • 直接请求数据，不被限制

      • 如：直接请求加载 别的网站的图片

破解跨源

设置 CORS 头信息

  • 把 被限制的 网站，添加到 请求 headers

    1

    Access-Control-Allow-Origin: http://www.myapp.com

使用 jsonp

使用 jquery

字符串

format like python

参考：

方法：使用 backquote: `text ${your_varname}`

例子：

1

`The lazy ${a} ${b} over the ${c}`