2024年Web前端最新29，阿里P7深入Binder原理讲解

2401_84412050

于 2024-05-05 12:45:54 发布

阅读量927

点赞数 24

分类专栏：程序员文章标签：前端 binder

本文链接：https://blog.csdn.net/2401_84412050/article/details/138464014

版权

程序员专栏收录该内容

205 篇文章 1 订阅

订阅专栏

ES6

列举常用的ES6特性：
箭头函数需要注意哪些地方？
let、const、var
拓展：var方式定义的变量有什么样的bug？
Set数据结构
拓展：数组去重的方法
箭头函数this的指向。
手写ES6 class继承。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

微信小程序

简单描述一下微信小程序的相关文件类型?
你是怎么封装微信小程序的数据请求？
有哪些参数传值的方法？
你使用过哪些方法，来提高微信小程序的应用速度？
小程序和原生App哪个好？
简述微信小程序原理？
分析微信小程序的优劣势
怎么解决小程序的异步请求问题？

字符串不可变

JavaScript中的字符串一经定义就不可更改，举个例子：

let str = “Const”;

str[0] = ‘c’ ;

console.log(str);

代码执行结果：

JavaScript字符串不可变

如果想获得一个不一样的字符串，只能新建：

let str = “Const”;

str = str.replace(‘C’,‘c’);

console.log(str);

看起来我们似乎改变了字符串，实际上原来的字符串并没有被改变，我们得到的是replace方法返回的新字符串。

.toLowerCase()、.toUpperCase()

转换字符串大小写，或者转换字符串中单个字符的大小写。

这两个字符串的方法比较简单，举例带过：

console.log(‘Good Boy’.toLowerCase());//good boy

console.log(‘Good Boy’.toUpperCase());//GOOD BOY

console.log(‘Good Boy’[5].toLowerCase());//b

代码执行结果：

JavaScript字符串大小写

.indexOf()、.lastIndexOf() 查找子串

.indexOf(substr,idx)函数从字符串的idx位置开始，查找子串substr的位置，成功返回子串首字符下标，失败返回-1。

let str = “google google”;

console.log(str.indexOf(‘google’));//0 idx默认为0

console.log(str.indexOf(‘google’,1));//7 从第二个字符开始查找

console.log(str.indexOf(‘xxx’));//-1 没找到返回-1

代码执行结果：

如果我们想查询字符串中所有子串位置，可以使用循环：

let str = “I love love love love u.”;

let sub = “love”;

let pos = -1;

while((pos = str.indexOf(sub,pos+1)) != -1)

console.log(pos);

代码执行结果如下：

JavaScript查询所有子串

.lastIndexOf(substr,idx)倒着查询子串，首先查找最后一个符合的串：

let str = “google google”;

console.log(str.lastIndexOf(‘google’));//7 idx默认为0

按位取反技巧（不推荐，但要会）

由于indexOf()和lastIndexOf()方法在查询不成功的时候会返回-1，而~-1 === 0。也就是说只有在查询结果不为-1的情况下使用~才为真，所以我们可以：

let str = “google google”;

if(~indexOf(‘google’,str)){

…

}

通常情况下，我们不推荐在不能明显体现语法特性的地方使用一个语法，这会在可读性上产生影响。好在以上代码只出现在旧版本的代码中，这里提到就是为了大家在阅读旧代码的时候不会产生困惑。

补充：

~是按位取反运算符，例如：十进制的数字2的二进制形式为0010，~2的二进制形式就是1101（补码），也就是-3。

简单的理解方式，~n等价于-(n+1)，例如：~2 === -(2+1) === -3

.includes()、.startsWith()、.endsWith()

.includes(substr,idx)用于判断substr是否在字符串中，idx是查询开始的位置

console.log(‘Google Google’.includes(‘Google’));//true

console.log(‘Google Google’.includes(‘xxxxxx’));//false

console.log(‘9966’.includes(‘99’,1));//false

代码执行结果：

.startsWith('substr')和.endsWith('substr')分别判断字符串是否以substr开始或结束

console.log(“google”.startsWith(‘go’));//true

console.log(‘google’.endsWith(‘le’));//true

console.log(‘google’.endsWith(‘ie’));//false

代码执行结果：

.substr()、.substring()、.slice()

.substr()、.substring()、.slice()均用于取字符串的子串，不过用法各有不同。

.substr(start,len)

返回字符串从start开始len个字符组成的字符串，如果省略len，就截取到原字符串的末尾。start可以为负数，表示从后往前第start个字符。

let str = “0123456789”;

console.log(str.substr(1))//123456789，从1开始到最后

console.log(str.substr(3,2))//34，从3开始的2个字符

console.log(str.substr(-3,2))//78，倒数第二个开始

代码执行结果：

substr()

.slice(start,end)

返回字符串从start开始到end结束（不包括）的字符串。start和end可以为负数，表示倒数第start/end个字符。

let str = ‘0123456789’;

console.log(str.slice(1,5));//1234，区间[1,5)之间的字符

console.log(str.slice(1));//123456789，从1到结尾

console.log(str.slice(-4,-1));//678，倒数第四个到倒数第1个

代码执行结果：

slice()

.substring(start,end)

作用几乎和.slice()相同，差别在两个地方：

允许end > start;
不允许负数，负数视为0;

举例：

let str = ‘0123456789’;

console.log(str.substring(1,3));//12

console.log(str.substring(3,1));//12

console.log(str.substring(-1,3));//012，-1被当作0

代码执行结果：

substring()

对比三者的区别：

| 方法 | 描述 | 参数 |

| — | — | — |

| .slice(start,end) | [start,end) | 可负 |

| .substring(start,end) | [start,end) | 负值为0 |

| .substr(start,len) | 从start开始长为len的子串 | 可负 |

方法多了自然就选择困难了，这里建议记住.slice()就可以了，相比于其他两种更灵活。

.codePointAt()、String.fromCodePoint()

我们在前文中已经提及过字符串的比较，字符串按照字典序进行排序，每个字符背后都是一个编码，ASCII编码就是一个重要的参考。

例如:

console.log(‘a’>‘Z’);//true

字符之间的比较，本质上是代表字符的编码之间的比较。JavaScript使用UTF-16编码字符串，每个字符都是一个16为的代码，想要知道比较的本质，就需要使用.codePointAt(idx)获得字符的编码：

console.log(‘a’.codePointAt(0));//97

console.log(‘Z’.codePointAt(0));//90

代码执行结果：

codePointAt()

使用String.fromCodePoint(code)可以把编码转为字符：

console.log(String.fromCodePoint(97));

console.log(String.fromCodePoint(90));

代码执行结果如下：

String.fromCodePoint()

这个过程可以用转义符\u实现，如下：

console.log(‘\u005a’);//Z，005a是90的16进制写法

console.log(‘\u0061’);//a，0061是97的16进制写法

下面我们探索一下编码为[65,220]区间的字符：

let str = ‘’;

for(let i = 65; i<=220; i++){

str+=String.fromCodePoint(i);

}

console.log(str);

代码执行部分结果如下：

上图并没有展示所有的结果，快去试试吧。

.localeCompare()

基于国际化标准ECMA-402，JavaScript已经实现了一个特殊的方法（.localeCompare()）比较各种字符串，采用str1.localeCompare(str2)的方式：

如果str1 < str2，返回负数；
如果str1 > str2，返回正数；
如果str1 == str2,返回0；

举个例子：

console.log(“abc”.localeCompare(‘def’));//-1

为什么不直接使用比较运算符呢？

这是因为英文字符有一些特殊的写法，例如，á是a的变体：

console.log(‘á’ < ‘z’);//false

虽然也是a，但是比z还要大！！

此时就需要使用.localeCompare()方法：

console.log(‘á’.localeCompare(‘z’));//-1

常用方法

str.trim()去除字符串前后空白字符，str.trimStart()、str.trimEnd()删除开头、结尾的空格；

let str = " 999 ";

console.log(str.trim());//999

str.repeat(n)重复n次字符串；

let str = ‘6’;

console.log(str.repeat(3));//666

str.replace(substr,newstr)替换第一个子串，str.replaceAll()用于替换所有子串；

let str = ‘9+9’;

console.log(str.replace(‘9’,‘6’));//6+9

console.log(str.replaceAll(‘9’,‘6’));//6+6

还有很多其他方法，我们可以访问手册获取更多知识。

进阶内容

生僻字、emoji、特殊符号

JavaScript使用UTF-16编码字符串，也就是使用两个字节（16位）表示一个字符，但是16位数据只能表示65536个字符，对于常见字符自然不在话下，但是对于生僻字（中文的）、emoji、罕见数学符号等就力不从心了。

这种时候就需要扩展，使用更长的位数（32位）表示特殊字符，例如：

console.log(‘😂’.length);//2

console.log(‘𝒳’.length);//2

代码执行结果：

emoji

这么做的结果是，我们无法使用常规的方法处理它们，如果我们单个输出其中的每个字节，会发生什么呢？

console.log(‘😂’[0]);

console.log(‘😂’[1]);

代码执行结果：

可以看到，单个输出字节是不能识别的。

好在String.fromCodePoint()和.codePointAt()两个方法是可以处理这种情况的，这是因为二者是最近才加入的。在旧版本的JavaScript中，只能使用String.fromCharCode()和.charCodeAt()两个方法转换编码和字符，但是他们不适用于特殊字符的情况。

我们可以通过判断一个字符的编码范围，判断它是否是一个特殊字符，从而处理特殊字符。如果一个字符的代码在0xd800~0xdbff之间，那么他是32位字符的第一部分，它的第二部分应该在0xdc00~0xdfff。

举个例子：

console.log(‘😂’.charCodeAt(0).toString(16));//d83d

console.log(‘😂’.charCodeAt(1).toString(16));//de02

代码执行结果：