JS on 醉后的星星

javascript中文按拼音顺序排序

Wed, 15 Mar 2023 15:52:01 +0000

js的sort函数的默认排序方法是将排序对象转成字符串，然后根据字符串中每个字符的ascll码依次进行排序，对于不在ascll表中的中文无法进行排序。

localeCompare

localeCompare函数可以比较两个中文的顺序，用该方法配合sort方法可以实现中文排序：

names.sort((a, b) => {
 return a.username.localeCompare(b.username, 'zh');
});

进一步，如果想获得中文首字母，可以依次和每个字母的第一个中文进行比较，进而得出该中文字符的首字母：

const getFirstLetter = function(word) {
 let letters = "ABCDEFGHJKLMNOPQRSTWXYZ#";
 let zh = "阿八嚓哒妸发旮哈讥咔垃呣拏噢妑七呥扨它穵夕丫帀糳";
 for (let i = 0; i < letters.length - 1; i++) {
 if (word.localeCompare(zh[i], 'zh') >= 0 && word.localeCompare(zh[i + 1], 'zh') < 0) {
 return letters[i]
 }
 }
 return '#'
};

注意有些字母没有对应的姓氏，因此不在比较之列。本方法最大的问题是，微信小程序和很多浏览器内核都不支持该函数，用之前先做好测试。

第三方库

若不能使用上述方法，发现一个第三方库jian-pinyin，体积不大，可以直接给出汉字的拼音，很棒。地址：https://github.com/xinglie/pinyin 通过该库直接获取汉字的拼音，然后通过sort函数进行排序，注意js中字符串之间是可以直接比较大小的，比较的依据仍然是ascll。

let sp = function(word) {
 return getSpell(word, function(charactor, spell) {
 return spell[0];
 }, '')
}
names.sort((a, b) => {
 a = sp(a.username);
 b = sp(b.username);
 if (a < b) return -1;
 if (a > b) return 1;
 return 0
});

JS类型转换

Fri, 27 Aug 2021 15:04:00 +0000

首先会判断两者类型，相同直接比较是否全等，类型不相同的话，就会进行类型转换，按以下规则：

布尔->数值
字符+数值->数值
对象->valueof
null==undefined
遇到NaN直接不等

全等`===`不全等`!==`

类型不相同时不会转换类型，直接返回false

null===undefined //true

Object.is()

除了特殊情况一般和===相同

Object.is(NaN,NaN) //true
Object.is(0,-0) //false

转为数值

null->0
undefined->NaN
true->1 false->0
数字字符串->数字
字符串包含非数字->NaN
“”->0
Symbol->报错
对象->valueOf()??toString() []->0 [1]->1 [1,1]->NaN {}->NaN

转为布尔

记住以下false假值：

undefined
null
+0、-0
NaN

转为字符串

null->“null”
undefined->“undefined”
true->“true”、false->“false”
数值->“数值”
对象->toString()方法，该方法会被重写，未重写Object.prototype.toString->"[object 具体类型]"
Symbol->只能强制转换，隐式转换报错

加法

数值+数值：

NaN+*=NaN
Infinity+-Infinity=NaN
-Infinity+-Infinity=-Infinity
-0+-0=-0
0+-0=0 只要有一个操作数是字符串，则转换为字符串进行拼接
[]+{}="[object Object]" {}+[]=0

减法

NaN-*=NaN
Infinity-Infinity=NaN
-Infinity–Infinity=NaN
操作数是字符串、布尔、null、undefined->数值
对象->valueOf()??toString()

>和<

字符串比较->逐个比较字母编码
有一个是数值->将另一个转为数值
对象-》valueof().toString()
布尔->数值
NaN->返回false

valueOf()、toString()

[1,‘a’].valueOf() -> [1,‘a’]
[1,‘a’].toString() -> ‘1,a’
{}.valueOf() -> {}
{}.toString() -> ‘[Object Object]’

arguments

在严格模式或使用...args的的情况下arguments不再追踪参数的变化。

JS常见设计模式

Mon, 23 Aug 2021 13:44:00 +0000

将创建对象的具体逻辑封装在?个函数中，创建后返回这个对象，那么这个函数就可以被视为?个??。

// 简单??模式：只需要?个正确的参数，就可以获取到你所需要的对象，?于?成实例
// 比如对象工厂，函数工厂
function Animal(opts) {
 var obj = new Object();
 obj.color = opts.color;
 obj.name = opts.name;
 obj.getInfo = function () {
 return "名称：" + obj.name + "， 颜?：" + obj.color;
 };
 return obj;
}
var cat = Animal({ name: "波斯猫", color: "??" });

// ???法模式：本意是将实际创建对象的?作推迟到?类中，这样核?类就变成了抽象类，
// ???法只是?个实例化对象的??，只做实例化对象这?件事情，?于?成实例
class User {
 constructor(name = "", viewPage = []) {
 if (new.target === User) {
 throw new Error("抽象类不能实例化!");
 }
 this.name = name;
 this.viewPage = viewPage;
 }
}
class UserFactory extends User {
 constructor(name, viewPage) {
 super(name, viewPage); // 调??类的constructor(name, viewPage)，继承?类的this对象
 }
}
// let user = new User(); // 不允许直接实例化
let userFactory = new UserFactory();

//抽象??模式：并不直接?成实例，?是?于对产品类簇的创建
function getAbstractUserFactory(type) {
 switch (type) {
 case "wechat":
 return UserOfWechat;
 break;
 case "qq":
 return UserOfQq;
 break;
 case "weibo":
 return UserOfWeibo;
 break;
 default:
 throw new Error("参数错误, 可选参数:wechat、qq、weibo");
 }
}
let WechatUserClass = getAbstractUserFactory("wechat");
let QqUserClass = getAbstractUserFactory("qq");
let WeiboUserClass = getAbstractUserFactory("weibo");
let wechatUser = new WechatUserClass("微信?李");
let qqUser = new QqUserClass("QQ?李");
let weiboUser = new WeiboUserClass("微博?李");

单例模式

保证?个类仅有?个实例，并提供?个访问它的全局访问点。

class Singleton {
 static getInstance = (function () {
 let instance;
 return function () {
 if (!instance) {
 instance = new Singleton(...arguments);
 }
 return instance;
 };
 })();
 constructor(name) {
 this.name = name;
 }
}

let s1 = Singleton.getInstance("lisi");
console.log(s1.name); //lisi
let s2 = Singleton.getInstance("san");
console.log(s1.name); //lisi
console.log(s1 === s2); // true

观察者模式

定义了对象间?对多的依赖关系，当?标对象的状态发?改变时，所有依赖它的对象都会得到通知。

// ?标者类
class Subject {
 constructor() {
 this.observers = []; // 观察者列表
 }
 // 添加
 add(observer) {
 this.observers.push(observer);
 }
 // 删除
 remove(observer) {
 let idx = this.observers.findIndex((item) => item === observer);
 idx > -1 && this.observers.splice(idx, 1);
 }
 // 通知
 notify() {
 for (let observer of this.observers) {
 observer.update();
 }
 }
}
// 观察者类
class Observer {
 constructor(name) {
 this.name = name;
 }
 // ?标对象更新时触发的回调
 update() {
 console.log(`?标者通知我更新了，我是：${this.name}`);
 }
}
// 实例化?标者
let subject = new Subject();
// 实例化两个观察者
let obs1 = new Observer("前端开发者");
let obs2 = new Observer("后端开发者");
// 向?标者添加观察者
subject.add(obs1);
subject.add(obs2);
// ?标者通知更新
subject.notify();
// 输出：
// ?标者通知我更新了，我是前端开发者
// ?标者通知我更新了，我是后端开发者

发布订阅模式

实现了对象间多对多的依赖关系，通过事件中?管理多个事件。?标对象并不直接通知观察者，?是通过事件中?来派发通知。

// 事件中?
let pubSub = {
 list: {}, // {onwork:[fn1,fn2],offwork:[fn1,fn2],launch:[fn1,fn2]}
 subscribe: function (key, fn) {
 // 订阅
 if (!this.list[key]) {
 this.list[key] = [];
 }
 this.list[key].push(fn);
 },
 publish: function (key, ...arg) {
 // 发布
 for (let fn of this.list[key]) {
 fn.call(this, ...arg);
 }
 },
 unSubscribe: function (key, fn) {
 // 取消订阅
 let fnList = this.list[key];
 if (!fnList) return false;
 if (!fn) {
 // 不传?指定取消的订阅?法，则清空所有key下的订阅
 fnList && (fnList.length = 0);
 } else {
 fnList.forEach((item, index) => {
 if (item === fn) {
 fnList.splice(index, 1);
 }
 });
 }
 },
};
// 订阅
pubSub.subscribe("onwork", (time) => {
 console.log(`上班了：${time}`);
});
pubSub.subscribe("offwork", (time) => {
 console.log(`下班了：${time}`);
});
pubSub.subscribe("launch", (time) => {
 console.log(`吃饭了：${time}`);
});
// 发布
pubSub.publish("onwork", "9:00:00");
pubSub.publish("offwork", "18:00:00");
pubSub.publish("launch", "12:00:00");
// 取消订阅
pubSub.unSubscribe("onwork");
pubSub.publish("onwork", "9:00:00");

适配器模式

适配器?来解决两个接?不兼容的情况，不需要改变已有的接?，通过包装?层的?式实现两个接?的正常协作。

// 已有的地图接?
var googleMap = {
 show: function () {
 console.log("开始渲染?歌地图");
 },
};
var baiduMap = {
 display: function () {
 console.log("开始渲染百度地图");
 },
};
// 已有的渲染接?
var renderMap = function (map) {
 if (map.show instanceof Function) {
 map.show();
 }
};

// 适配器
var baiduMapAdapter = {
 show: function () {
 return baiduMap.display();
 },
};
renderMap(googleMap); // 开始渲染?歌地图
renderMap(baiduMapAdapter); // 开始渲染百度地图

代理模式

不直接引?另?个对象，通过代理对象间接引用，起到中介的作?。

var obj = {};
var proxy = new Proxy(obj, {
 get: function (target, key, receiver) {
 console.log(`getting ${key}!`);
 return Reflect.get(target, key, receiver);
 },
 set: function (target, key, value, receiver) {
 console.log(`setting ${key}=${value}!`);
 return Reflect.set(target, key, value, receiver);
 },
});
proxy.count = 1;
proxy.count;

装饰模式

不改变已有的函数，给函数添加额外的功能，?如ES7中的装饰器。

参考

https://refactoringguru.cn/design-patterns/catalog

学习资料

Tue, 13 Jul 2021 07:55:00 +0000

后盾人 CS-Note

算法

代码随想录

知识点

Cookies,Session和Token TCP 三次握手源码 TCP握手挥手 Service Worker HTTPS 加密、证书、签名与握手 4种常见的内存泄露 JS模块化简单了解二叉树diff算法如何实现一个 Virtual DOM 算法 js 异步历史与 co.js 解读

博客

https://78.al/ https://jerryzou.com/posts/rxjs-practice-01/ 前端面试题阮一峰的网络日志

javascript一些方法原理实现

Tue, 13 Apr 2021 10:01:00 +0000

一般认为js数据类型为7种：number,string,boolean,undefined,null,symbol,object，（有的把bigint也算一种，）其中object为引用类型，其余为基本类型。

console.log(typeof 2); // number
console.log(typeof true); // boolean
console.log(typeof "str"); // string
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof function () {}); // function
console.log(typeof undefined); // undefined
console.log(typeof null); // object

console.log((2).constructor === Number); // true
console.log(true.constructor === Boolean); // true
console.log("str".constructor === String); // true
console.log([].constructor === Array); // true
console.log({}.constructor === Object); // true
console.log(function () {}.constructor === Function); // true

let str = Object.prototype.toString;
console.log(str.call(2)); //[object Number]
console.log(str.call(true)); //[object Boolean]
console.log(str.call("str")); //[object String]
console.log(str.call([])); //[object Array]
console.log(str.call(function () {})); //[object Function]
console.log(str.call({})); //[object Object]
console.log(str.call(undefined)); //[object Undefined]
console.log(str.call(null)); //[object Null]

instanceof

instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置，不能用来判断包装对象。

console.log(2 instanceof Number); // false
console.log(true instanceof Boolean); // false
console.log('str' instanceof String); // false

console.log([] instanceof Array); // true
console.log(function () {} instanceof Function); // true
console.log({} instanceof Object); // true
console.log(Object instanceof Object); //true
console.log(Function instanceof Object); //true

// 原理实现
function myInstanceof(obj, tar) {
 // 获取对象的原型
 let proto = Object.getPrototypeOf(obj);
 // 获取构造函数的 prototype 对象
 let prototype = tar.prototype;
 // 对象原型走到头了
 if (!proto) return false;
 //判断原型是否相等
 return proto === prototype ? true : myInstanceof(proto, tar);
}

深拷贝

数组、对象的typeof结果都为’object’，需要注意的是null的typeof结果也为’object’，函数的typeof结果为’function’，symbol无法直接遍历到。

function deepcopy(data) {
 if (data === null) return null;
 let obj = data instanceof Array ? [] : {};
 for (const [k, v] of Object.entries(data)) {
 obj[k] = typeof v === "object" ? deepcopy(v) : v;
 }
 for (const k of Object.getOwnPropertySymbols(data)) {
 obj[k] = typeof data[k] === "object" ? deepcopy(data[k]) : data[k];
 }
 return obj;
}

Object.create

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__，和new有点像。

function create(proto) {
 obj = {};
 obj.__proto__ = proto;
 return obj;
} //直译

function create(proto) {
 function F() {}
 F.prototype = proto;
 return new F();
} //推荐

new

new操作主要执行了以下操作：

新建一个空对象obj
将空对象的__proto__原型链指向构造函数的原型prototype
将构造函数的this指向obj，执行构造函数
返回构造函数的返回，如果返回为空则返回obj

function newObj(p, ...args) {
 const obj = Object.create(p.prototype);
 const result = p.apply(obj, args);
 return result || obj;
}

function Person(name) {
 this.name = name;
}
Person.prototype.getname = function () {
 console.log(this.name);
};
let person1 = new Person("san");
console.log(person1);
let person2 = newObj(Person, "si");
console.log(person2);

防抖

快速连续触发事件时，只有最后一次触发能成功执行。

function debounce(fn) {
 let timeout = null; // 创建一个标记用来存放定时器的返回值
 return function () {
 clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
 timeout = setTimeout(() => {
 // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
 fn.apply(this, arguments);
 }, 500);
 };
}
function sayHi() {
 console.log("防抖成功");
}

let inp = document.createElement("input");
inp.addEventListener("input", debounce(sayHi));
document.body.append(inp);

节流

一定时间内只会执行1次，上一次未处理完则不会执行。

function throttle(fn) {
 let canRun = true; // 通过闭包保存一个标记
 return function () {
 if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
 canRun = false; // 立即设置为false
 setTimeout(() => {
 // 将外部传入的函数的执行放在setTimeout中
 fn.apply(this, arguments);
 // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
 canRun = true;
 }, 500);
 };
}
function sayHi() {
 console.log("节流成功");
}
btn = document.createElement("button");
btn.innerHTML = "节流";
btn.addEventListener("click", throttle(sayHi));
document.body.append(btn);

call

将this挂载到目标上后执行，最后再删除

Function.prototype.myCall = function (context) {
 context = context || window;
 context.fn = this;
 let arg = [...arguments].slice(1);
 let result = context.fn(...arg);
 delete context.fn;
 return result;
};

apply

Function.prototype.myApply = function (context) {
 context = context || window;
 context.fn = this;
 let result;
 // 需要判断是否存储第二个参数
 // 如果存在，就将第二个参数展开
 if (arguments[1]) {
 result = context.fn(...arguments[1]);
 } else {
 result = context.fn();
 }
 delete context.fn;
 return result;
};

bind

Function.prototype.myBind = function (context) {
 let fn = this;
 var args = [...arguments].slice(1);
 // 返回一个函数
 return function () {
 return fn.apply(context, args.concat(...arguments));
 };
};

柯里化

将能够接收多个参数的函数转化为接收单一参数的函数，并且返回能接收余下参数且返回结果的新函数的技术

function add() {
 return Array.from(arguments).reduce((cur, item) => cur + item, 0);
}

function currying(fn) {
 let args = [];
 return function () {
 args.push(...arguments);
 return fn.apply(this, args);
 };
}

add = currying(add);
console.log(add(1)); //1
console.log(add(2)); //3
console.log(add(3, 4)); //10
console.log(add()); //10

反柯里化

方法借用，扩展方法使用范围，和call,apply,bind类似

function unCurrying(fn) {
 return function (obj, ...args) {
 return fn.apply(obj, args);
 };
}

push = unCurrying(Array.prototype.push);
obj = {};
push(obj, "lisi", "san");
console.log(obj);

// 等同于bind方法
obj = {};
push = Array.prototype.push.bind(obj);
push("lisi", "san");
console.log(obj);

双向绑定

通过Proxy实现对数据监听。

<input type="text" v-model="input" />
<input type="text" v-model="input" />
<div v-bind="input"></div>
<script>
 data = {};
 proxy = new Proxy(data, {
 get(obj, property) {},
 set(obj, property, value) {
 // model赋值
 // obj[property] = value;
 Reflect.set(...arguments);

 //视图响应
 let els = document.querySelectorAll(
 `[v-model="${property}"],[v-bind="${property}"]`
 );
 for (let el of els) {
 el.innerHTML = value;
 el.value = value;
 }
 return true;
 },
 });

 (function () {
 const els = document.querySelectorAll("[v-model]");
 for (const el of els) {
 el.addEventListener("keyup", function () {
 proxy[this.getAttribute("v-model")] = this.value;
 });
 }
 })();
</script>

数组扁平化

function flat(arr) {
 let res = [];
 for (let item of arr) {
 res = Array.isArray(item) ? res.concat(flat(item)) : res.concat(item);
 }
 return res;
}

JS原型与继承

Sun, 11 Apr 2021 12:33:00 +0000

隐式原型proto

除了元对象Object，每个js对象都有隐式原型，但也可以通过Object.create(null)强制创建一个没有__proto__的对象，__proto__指向该对象的构造函数的原型对象。原型链指的就是__proto__串起来的链。

原型prototype

函数对象拥有prototype属性，函数的原型对象包含所有实例共享的方法，包含__proto__和constructor两个属性，constructor指回函数本身，函数原型对象也有__proto__属性，指向构造函数的原型即Function.prototype。实例的__proto__指向函数原型对象，即f1.__proto__ === Foo.prototype。 Object.prototype.__proto__指向null。

总结

定义函数时自动创建prototype原型对象，原型对象包含constructor构造函数，构造函数指回函数本身，new出来的实例拥有__proto__指向prototype原型对象。

类式继承（原型链继承）

将父类的实例赋给子类的prototype，缺点是父类共有属性为引用对象时，所有子类实例会公用同一个对象；无法向父类传参；子类不是父类的实例，而子类的原型是父类的实例，缺少constructor属性。

function Animal() {
 this.name = '动物'
 this.animal = '父类属性'
}
Animal.prototype.getname = function () {
 console.log(this.name)
}
Animal.prototype.getsupername = function () {
 console.log(this.animal)
}
function Dog() {
 this.name = '狗'
}
Dog.prototype = new Animal()
dog = new Dog()
dog.getname()
dog.getsupername()
console.log(dog)

构造函数继承

将子类的变量在父类中执行一遍，即在子类的构造函数中执行一次父类的构造函数，缺点只执行了父类的构造函数，没有继承父类原型，父类的所有方法必须在构造函数中声明才能继承。

function Animal(name) {
 this.name = name
 this.animal = '父类属性'
}
Animal.prototype.getname = function () {
 console.log(this.name)
}
Animal.prototype.getsupername = function () {
 console.log(this.animal)
}
function Dog(name) {
 Animal.call(this, name) //执行父类构造函数
}
dog = new Dog('狗')
// dog.getname() //无法继承原型方法
// dog.getsupername()
console.log(dog)

组合继承

结合前面两种方法，在子类构造函数中执行父类构造函数，子类原型指向父类的实例，缺点是父类构造函数执行了两遍，子类不是父类的实例。

function Animal(name) {
 this.name = name
 this.animal = '父类属性'
 console.log('执行了父类构造函数')
}
Animal.prototype.getname = function () {
 console.log(this.name)
}
Animal.prototype.getsupername = function () {
 console.log(this.animal)
}
function Dog(name) {
 Animal.call(this, name) //继承属性
}
Dog.prototype = new Animal() //继承方法
dog = new Dog('狗')
dog.getname()
dog.getsupername()
console.log(dog)

原型式继承

和类式继承相似，创建一个新对象并使用父类对象做为新对象的原型对象，和类式继承存在一样的问题，引用值会在实例间共享。和Object.create()方法作用一致。适合不需要单独创建构造函数，但仍需要在实例间共享属性的场合。

function inherit(o) {
 function F() { }
 F.prototype = o
 return new F()
}
let Animal = {
 name: '动物'
}
animal = inherit(Animal)
console.log(animal)

寄生式继承

对原型继承的二次封装，对继承的对象进行了拓展。

function inherit(o) {
 function F() { }
 F.prototype = o
 return new F()
}
let Animal = {
 name: '动物'
}
function createDog(obj) {
 let o = new inherit(obj)
 o.getname = function () {
 console.log(this.name)
 } // 增加属性和方法
 return o
}
dog = new createDog(Animal)
dog.getname()
console.log(dog)

寄生组合式继承

寄生继承和构造函数继承的组合，修复子类的原型，子类的原型指向父类原型的一份实例，construction指向子类本身。

function inherit(o) {
 function F() { }
 F.prototype = o
 return new F()
}
function inheritPtototype(subClass, superClass) {
 let p = inherit(superClass.prototype)
 p.construction = subClass
 subClass.prototype = p
}
function Animal(name) {
 this.name = name
 this.animal = '父类属性'
 console.log('执行了父类构造函数')
}
Animal.prototype.getname = function () {
 console.log(this.name)
}
Animal.prototype.getsupername = function () {
 console.log(this.animal)
}
function Dog(name) {
 Animal.call(this, name) //构造函数式继承
}
inheritPtototype(Dog, Animal) //寄生式继承
dog = new Dog('狗')
dog.getname()
dog.getsupername()
console.log(dog)

但是上面左还有一个小问题，就是遍历子类实例属性时，会把construction也遍历出来，可以通过Object.defineProperty方法禁止遍历。

for (const key in dog) {
 console.log(key);
}

所以再升级一下

function extend(subClass, superClass) {
 subClass.prototype = Object.create(superClass.prototype)
 Object.defineProperty(subClass.prototype, "constructor", {
 value: subClass,
 enumerable: false //禁止遍历
 });
}
function Animal(name) {
 this.name = name
 this.animal = '父类属性'
 console.log('执行了父类构造函数')
}
Animal.prototype.getname = function () {
 console.log(this.name)
}
Animal.prototype.getsupername = function () {
 console.log(this.animal)
}
function Dog(name) {
 Animal.call(this, name) //构造函数式继承
}
extend(Dog, Animal) //寄生式继承
dog = new Dog('狗')
dog.getname()
dog.getsupername()

mixin多继承

const Mammal = {
 skill() {
 console.log(this.name + '是哺乳动物')
 }
} // mixin类
function Dog(name) {
 Animal.call(this, name) //构造函数式继承
}
extend(Dog, Animal) //寄生式继承
Object.assign(Dog.prototype, Mammal) //往子类原型拓展其他类方法
dog = new Dog('狗')
dog.getname()
dog.getsupername()
dog.skill()

参考

帮你彻底搞懂JS中的prototype、__proto__与constructor（图解） JavaScript中的new操作符的原理解析 js中__proto__和prototype的区别和关系？原型基础