- var bem = require('p_./miniprogram_npm/@vant/weapp/wxs/bem.wxs')(); + var bem = require('p_./miniprogram_npm/@vant/weapp/wxs/bem.wxs'); - var memoize = require('p_./miniprogram_npm/@vant/weapp/wxs/memoize.wxs')(); + var memoize = require('p_./miniprogram_npm/@vant/weapp/wxs/memoize.wxs'); - var addUnit = require('p_./miniprogram_npm/@vant/weapp/wxs/add-unit.wxs')(); + var addUnit = require('p_./miniprogram_npm/@vant/weapp/wxs/add-unit.wxs'); module.exports = ({ bem: memoize(bem), memoize: memoize, addUnit: addUnit, });
实现这样一个高级类型，对 A、B 两个索引类型做合并，如果是只有 A 中有的不变，如果是 A、B 都有的就变为可选，只有 B 中有的也变为可选。
1 2 3
type Defaultize<A, B> = Pick<A, Exclude<keyof A, keyof B>> & Partial<Pick<A, Extract<keyof A, keyof B>>> & Partial<Pick<B, Exclude<keyof B, keyof A>>>;
infer extends
枚举值转联合类型
以下会把枚举的数值类型转成字符串类型。
1 2 3 4 5 6 7
enum Code { a = 111, b = 222, c = "abc", } type res = `${Code}`; // res = '111' | '222' | 'abc'
StrToNum
使用 infer extends 后就就可以正常使用了。
1 2 3 4 5 6 7 8
enum Code { a = 111, b = 222, c = "abc", } type StrToNum<Str> = Str extends`${infer Num extendsnumber}` ? Num : Str; type res = StrToNum<`${Code}`>; // res = 'abc' | 111 | 222
functionflatten(arr) { var result = []; for (var i = 0, len = arr.length; i < len; i++) { if (Array.isArray(arr[i])) { result = result.concat(flatten(arr[i])) } else { result.push(arr[i]) } } return result; }
Array.prototype.forEach2 = function(callback, thisArg) { if (this == null) { thrownewTypeError('this is null or not defined') } if (typeof callback !== "function") { thrownewTypeError(callback + ' is not a function') } const O = Object(this) // this 就是当前的数组 const len = O.length >>> 0// 后面有解释 let k = 0 while (k < len) { if (k in O) { callback.call(thisArg, O[k], k, O); } k++; } }
- Array.prototype.forEach2 = function(callback, thisArg) { + Array.prototype.map2 = function(callback, thisArg) { if (this == null) { throw new TypeError('this is null or not defined') } if (typeof callback !== "function") { throw new TypeError(callback + ' is not a function') } const O = Object(this) const len = O.length >>> 0 - let k = 0 + let k = 0, res = [] while (k < len) { if (k in O) { - callback.call(thisArg, O[k], k, O); + res[k] = callback.call(thisArg, O[k], k, O); } k++; } + return res }
- Array.prototype.forEach2 = function(callback, thisArg) { + Array.prototype.filter2 = function(callback, thisArg) { if (this == null) { throw new TypeError('this is null or not defined') } if (typeof callback !== "function") { throw new TypeError(callback + ' is not a function') } const O = Object(this) const len = O.length >>> 0 - let k = 0 + let k = 0, res = [] while (k < len) { if (k in O) { - callback.call(thisArg, O[k], k, O); + if (callback.call(thisArg, O[k], k, O)) { + res.push(O[k]) + } } k++; } + return res }
- Array.prototype.forEach2 = function(callback, thisArg) { + Array.prototype.some2 = function(callback, thisArg) { if (this == null) { throw new TypeError('this is null or not defined') } if (typeof callback !== "function") { throw new TypeError(callback + ' is not a function') } const O = Object(this) const len = O.length >>> 0 let k = 0 while (k < len) { if (k in O) { - callback.call(thisArg, O[k], k, O); + if (callback.call(thisArg, O[k], k, O)) { + return true + } } k++; } + return false }
Array.prototype.reduce2 = function(callback, initialValue) { if (this == null) { thrownewTypeError('this is null or not defined') } if (typeof callback !== "function") { thrownewTypeError(callback + ' is not a function') } const O = Object(this) const len = O.length >>> 0 let k = 0, acc if (arguments.length > 1) { acc = initialValue } else { // 没传入初始值的时候，取数组中第一个非 empty 的值为初始值 while (k < len && !(k in O)) { k++ } if (k > len) { thrownewTypeError( 'Reduce of empty array with no initial value' ); } acc = O[k++] } while (k < len) { if (k in O) { acc = callback(acc, O[k], k, O) } k++ } return acc }
实现函数原型方法
call
使用一个指定的 this 值和一个或多个参数来调用一个函数。
实现要点：
this 可能传入 null；
传入不固定个数的参数；
函数可能有返回值；
1 2 3 4 5 6 7 8 9 10 11 12 13 14
Function.prototype.call2 = function (context) { var context = context || window; context.fn = this;
var args = []; for(var i = 1, len = arguments.length; i < len; i++) { args.push('arguments[' + i + ']'); }
Function.prototype.apply2 = function (context, arr) { var context = context || window; context.fn = this;
var result; if (!arr) { result = context.fn(); } else { var args = []; for (var i = 0, len = arr.length; i < len; i++) { args.push('arr[' + i + ']'); } result = eval('context.fn(' + args + ')') }
delete context.fn return result; }
bind
bind 方法会创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
实现要点：
bind() 除了 this 外，还可传入多个参数；
bing 创建的新函数可能传入多个参数；
新函数可能被当做构造函数调用；
函数可能有返回值；
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Function.prototype.bind2 = function (context) { var self = this; var args = Array.prototype.slice.call(arguments, 1);
var fNOP = function () {};
var fBound = function () { var bindArgs = Array.prototype.slice.call(arguments); return self.apply(thisinstanceof fNOP ? this : context, args.concat(bindArgs)); }
fNOP.prototype = this.prototype; fBound.prototype = new fNOP(); return fBound; }
实现 new 关键字
new 运算符用来创建用户自定义的对象类型的实例或者具有构造函数的内置对象的实例。
实现要点：
new 会产生一个新对象；
新对象需要能够访问到构造函数的属性，所以需要重新指定它的原型；
构造函数可能会显示返回；
1 2 3 4 5 6 7 8 9
functionobjectFactory() { var obj = newObject() Constructor = [].shift.call(arguments); obj.__proto__ = Constructor.prototype; var ret = Constructor.apply(obj, arguments); // ret || obj 这里这么写考虑了构造函数显示返回 null 的情况 returntypeof ret === 'object' ? ret || obj : obj; };
使用：
1 2 3 4 5 6
functionperson(name, age) { this.name = name this.age = age } let p = objectFactory(person, '布兰', 12) console.log(p) // { name: '布兰', age: 12 }
实现 instanceof 关键字
instanceof 就是判断构造函数的 prototype 属性是否出现在实例的原型链上。
1 2 3 4 5 6 7 8 9 10
functioninstanceOf(left, right) { let proto = left.__proto__ while (true) { if (proto === null) returnfalse if (proto === right.prototype) { returntrue } proto = proto.__proto__ } }
Object.create2 = function(proto, propertyObject = undefined) { if (typeof proto !== 'object' && typeof proto !== 'function') { thrownewTypeError('Object prototype may only be an Object or null.') if (propertyObject == null) { newTypeError('Cannot convert undefined or null to object') } functionF() {} F.prototype = proto const obj = new F() if (propertyObject != undefined) { Object.defineProperties(obj, propertyObject) } if (proto === null) { // 创建一个没有原型对象的对象，Object.create(null) obj.__proto__ = null } return obj }
实现 Object.assign
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Object.assign2 = function(target, ...source) { if (target == null) { thrownewTypeError('Cannot convert undefined or null to object') } let ret = Object(target) source.forEach(function(obj) { if (obj != null) { for (let key in obj) { if (obj.hasOwnProperty(key)) { ret[key] = obj[key] } } } }) return ret }
var rx_one = /^[\],:{}\s]*$/; var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g; var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g; var rx_four = /(?:^|:|,)(?:\s*\[)+/g;
if ( rx_one.test( json.replace(rx_two, "@") .replace(rx_three, "]") .replace(rx_four, "") ) ) { var obj = eval("(" +json + ")"); }
分层：页面中有很多复杂的效果，如一些复杂的 3D 变换、页面滚动，或者使用 z-index 做 z 轴排序等，为了更加方便地实现这些效果，渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树；关于层叠上下文的知识，具体可以参考这里彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index；
跨站脚本攻击（Cross Site Scripting）本来缩写是 CSS，但是为了和层叠样式表（Cascading Style Sheet）的简写区分开来，所以在安全领域被称为 XSS。它是指黑客往 HTML 文件中或者 DOM 中注入恶意脚本，从而在用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段。
如果 A 页面通过 iframe 被嵌入到 B 页面，那么在 A 页面内部window 对象将指向 iframe，而 top 将指向最顶层的网页这里是 B。所以可以依据这个原理来判断自己的页面是被 iframe 引入而嵌入到别人页面，如果是的话，则通过如下的判断会使得 B 页面将直接替换 A 的内容而显示，从而让用户发觉自己被骗。
1 2 3
if (top.location != window.location) { top.location = window.location }
let str = '😀🤣😜😍🤗🤔' for (const emoji of str) { console.log(emoji) // 😀🤣😜😍🤗🤔 } for (let i = 0, l = str.length; i < l; i++) { console.log(str[i]) // 不能正确输出表情 }
模板字符串使用两个反引号标识（``），可以用来定义多行字符串，或者使用它在字符串中插入变量：
1 2 3 4
let name = 'hero' let tips = `Hello ${name}, welcome to my world.` alert(tips)
标签模板：在函数名后面接一个模板字符串相当于给函数传入了参数进行调用：
1 2 3 4 5 6 7
let name = '布兰', age = 12 let tips = parse`Hello ${name}, are you ${age} years old this year?` functionparse(stringArr, ...variable) {}
// 相当于传递如下参数进行调用 parse 函数 parse(['Hello ', ', are you ', ' years old this year?'], name, age)
let arr = ['a', 'b', 'c'] for (let x of arr.keys()) { console.log(x) // 1, 2, 3 } for (let v of arr.values()) { console.log(v) // 'a' 'b' 'c' } for (let e of arr.entries()) { console.log(e) // [0, 'a'] [0, 'b'] [0, 'c'] }
数组空位，是指数组没有值，比如：[,,]，而像这种 [undefined] 是不包含空位的。由于 ES6 之前的一些 API 对空位的处理规则很不一致，所以实际操作的时候应该尽量避免空位的出现，而为了改变这个现状，ES6 的 API 会默认将空位处理成 undefined：
functionf(x, ...y) { console.log(x) // 1 for (let val of y) { coonsole.log(val) // 2 3 } } f(1, 2, 3)
严格模式：只要函数参数使用了默认值、解构赋值或者扩展运算符，那么函数体内就不能显示的设定为严格模式，因为严格模式的作用范围包含了函数参数，而函数执行的顺序是先执行参数，然后再执行函数体，执行到函数体里的 use strict 的时候，那么此时因为函数参数已经执行完成了，那函数参数还要不要受到严格模式的限制呢？这就出现矛盾了。规避限制的办法有两个：设置全局的严格模式或者在函数体外在包一个立即执行函数并且声明严格模式：
1 2 3 4 5 6 7 8 9
// 解法一 'use strict' functionf(x, y = 2) {}
// 解法二 let f = (function () { 'use strict' returnfunction (x, y = 2) {} })()
let f1 = () => {} // 没有参数 let f2 = (x) => {} // 1个参数 let f3 = (x) => {} // 1个参数可以省略圆括号 let f4 = (x, y) => {} // 2个参数以上必须加上圆括号 let f5 = (x = 1, y = 2) => {} // 支持参数默认值 let f6 = (x, ...y) => {} // 支持 rest 参数 let f7 = ({ x = 1, y = 2 } = {}) // 支持参数解构
箭头函数没有自己的 this：
1 2 3 4 5 6 7
functionPerson() { this.age = 0 setInterval(() => { this.age++ }, 1000) } var p = new Person() // 1 秒后 Person {age: 1}
通过 call/apply 调用箭头函数的时候将不会绑定第一个参数的作用域：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
let adder = { base: 1, add: function (a) { let f = (v) => v + this.base return f(a) }, addThruCall: function (a) { let f = (v) => v + this.base let b = { base: 2, } return f.call(b, a) }, } adder.add(1) // 输出 2 adder.addThruCall(1) // 仍然输出 2
类内部的 this 默认指向类实例，所以如果直接调用原型方法或者静态方法会导致 this 指向运行时的环境，而类内部是严格模式，所以此时的 this 会是 undefined：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
classDog{ constructor(name) { this.name = name } bark() { console.log(`${this.name} is bark.`) } static jump() { console.log(`${this.name} is jump.`) } } let dog = new Dog('大黄') let { bark } = dog let { jump } = Dog bark() // TypeError: Cannot read property 'name' of undefined jump() // TypeError: Cannot read property 'name' of undefined
方法和关键字：
constructor 方法是类的默认方法，通过 new 关键字生成实例的时候，会自动调用；一个类必须有constructor 方法，如果没有显示定义，则会自动添加一个空的；constructor 默认会返回实例对象：
new.target 属性允许你检测函数、构造方法或者类是否是通过 new 运算符被调用的。在通过 new 运算符被初始化的函数或构造方法中，new.target 返回一个指向构造方法或函数的引用。在普通的函数调用中，new.target 的值是 undefined，子类继承父类的时候会返回子类：
1 2 3 4 5 6 7 8 9 10 11 12
classDog{ constructor() { console.log(new.target.name) } } functionfn() { if (!new.target) return'new target is undefined' console.log('fn is called by new') } let dog = new Dog() // 'Dog' fn() // 'new target is undefined' new fn() // 'fn is called by new'
类的继承：
类可以通过 extends 关键字实现继承，如果子类显示的定义了 constructor 则必须在内部调用 super() 方法，内部的 this 指向当前子类：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
classAnimal{ constructor(name) { this.name = name } run() { console.log(`${this.name} is running.`) } } classDogextendsAnimal{ constructor(name) { super(name) // 必须调用 this.name = name } bark() { console.log(`${this.name} is barking.`) } } let dog = new Dog('大黄') dog.run() // '大黄 is running.'
通过 super() 调用父类的构造函数或者通过 super 调用父类的原型方法；另外也可以在子类的静态方法里通过 super 调用父类的静态方法：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
// 基于上面的代码改造 classDogextendsAnimal{ constructor(name){ super(name) // 调用父类构造函数 this.name = name } bark() { super.run() // 调用父类原型方法 console.log(`${this.name} is barking.`) } } let dog = new Dog() dog.bark()s // '大黄 is running.' // '大黄 is barking.'
let re = /(\d{4})-(\d{2})-(\d{2})/ let result = re.exec('2015-01-02') // result[0] === '2015-01-02' // result[1] === '2015' // result[2] === '01' // result[3] === '02'
而现在我们可以通过给捕获组 (?<name>...) 加上名字 name ，通过名字来获取对应组的结果：
1 2 3 4 5
let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/ let result = re.exec('2015-01-02') // result.groups.year === '2015' // result.groups.month === '01' // result.groups.day === '02'
配合解构赋值可以写出非常精简的代码：
1 2 3 4
let { groups: { year, month, day }, } = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/.exec('2015-01-02') console.log(year, month, day) // 2015 01 02
functionbaseFunction({ a, b }) {} functionwrapperFunction({ x, y, ...restConfig }) { // 使用 x 和 y 参数进行操作 // 其余参数传给原始函数 return baseFunction(restConfig) }