标签: JavaScript

JavaScript 事件循环

(async () => {
  await new Promise((resolve) => {
    console.log(1)
    resolve()
  }).then(() => console.log(2))
  console.log(3)
})()

// 执行顺序 1 2 3
// 可以拆成几块看
await new Promise((resolve) => {
  console.log(1)
  resolve()
})
// 等同于
function

CrabSAMA大约 5 分钟

Python作用域与Javascript对比

img

Python 中的也存在作用域的概念，但与 JavaScript 不同，它只存在闭包函数作用域。

Python 中只有模块（module），类（class）以及函数（def、lambda）才会引入新的作用域，其它的代码块（如 if/elif/else/、try/except、for/while 等）是不会引入新的作用域的，也就是说这些语句内定义的变量，外部也可以访问，如下代码：

if __name__=='__main__':
    lst = [1, 2, 3]
    for i in lst:
        print(i)
    print(i)

CrabSAMA小于 1 分钟

正则表达式运行多次结果不一样

背景

// 用于匹配是否被 i18n 块包裹
const i18nKeyPattern =
  /(?:i18n(?:-\w+)?[ (\n]\s*(?:key)?path=|v-t=['"`{]|(?:this\.|\$|i18n\.|[^\w\d])(?:t|tc|te)\()\s*['"`](.*?)['"`]/gm
const str = "$t('当有效期结束时间到了，是否直接下线？')"

// Array(2) ["$t('当有效期结束时间到了，是否直接下线？'", "当有效期结束时间到了，是否直接下线？"]
i18nKeyPattern.exec(value)
// null
i18nKeyPattern.exec(value)

// true
i18nKeyPattern.test(value)
// false
i18nKeyPattern.test(value)

CrabSAMA大约 2 分钟

js类型转换

console.log((\[\])?true:false);
console.log((\[\]==false?true:false));
console.log(({}==false)?true:false)

CrabSAMA大约 2 分钟

浏览器对象

window——不但充当全局作用域，而且表示浏览器窗口

innerWidth / innerHeight
获取浏览器窗口内部宽高。
内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。

outerWidth / outerHeight
获取浏览器窗口的整个宽高。

navigator——表示浏览器的信息

常见属性：

navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。

CrabSAMA大约 2 分钟

DOM操作

HTML文档被浏览器解析后是一颗DOM树，要改变HTML的结果，可以通过JavaScript来操作DOM。
DOM是一个属性结构，操作DOM就是这几个操作：

更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

DOM获取

CrabSAMA大约 8 分钟

JavaScript语言精粹：继承

两种实现方式：

伪类
函数化

伪类

通过定义一个构造器，并扩充它的原型实现继承效果。

var Manmmal = function (name) {
	this.name = name;
}

Manmmal.prototype.get\_name = function() {
	return this.name;
}

Manmmal.prototype.says = function() {
	return this.saying  '';
}

// 现在我们可以构造一个实例

var myMammal = new Mammal('Herb the Mammal');
var name = myMammal.get\_name();  // 'Herb the Mammal'

CrabSAMA大约 3 分钟

Prototype

帮你彻底搞懂JS中的PROTOTYPE、__PROTO__与CONSTRUCTOR（图解）

CSDN链接

我们需要牢记两点：①_proto_和_constructor_属性是对象所独有的；② _prototype_属性是函数所独有的，因为函数也是一种对象，所以函数也拥有_proto_和_constructor_属性。
_proto_属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的_proto_属性所指向的那个对象（父对象）里找，一直找，直到_proto_属性的终点null，再往上找就相当于在null上取值，会报错。通过_proto_属性将对象连接起来的这条链路即我们所谓的原型链。
_prototype_属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法，即f1.proto === Foo.prototype。
_constructor_属性的含义就是指向该对象的构造函数，所有函数（此时看成对象了）最终的构造函数都指向Function。

CrabSAMA大约 1 分钟

Proxy

Proxy 用于修改某些操作的默认行为（基本操作有属性查找，赋值，枚举，函数调用等）。

链接

Proxy方法——MDN链接

CrabSAMA小于 1 分钟

Set和Get

对象的 set get 是es5的中对象的特性，使用示例：

在初始化对象的时候这样使用

let b = {
    get x() {
        return x;
    },
    set x(val) {
        x = val + 2;
    }
};
b.x = 6;  // b.x 被赋值，同时进入set函数对值进行处理
console.log(b.x);  // b.x = 8

CrabSAMA小于 1 分钟