JS技巧技法总结

JS技巧技法总结

js计数器的⼏种实现

全局变量

let count = 0;

const countUp = () => count++;

闭包

// JavaScript

const countUp = (() => {

let count = 0;

return () => {

return ++count;

};

})();

console.log(countUp()); // 1

console.log(countUp()); // 2

函数属性

// JavaScript

let countUp = () => {

return ++countUp.count;

};

countUp.count = 0;

console.log(countUp()); // 1

console.log(countUp()); // 2

函数属性(TS)

interface Counter {

(): void; // 这⾥定义Counter这个结构必须包含⼀个函数，函数的要求是⽆参数，返回值为void，即⽆返回值

count: number; // ⽽且这个结构还必须包含⼀个名为count、值的类型为number类型的属性

}

const getCounter = (): Counter => { // 这⾥定义⼀个函数⽤来返回这个计数器

const c = () => { // 定义⼀个函数，逻辑和前⾯例⼦的⼀样

c.count++;

};

c.count = 0; // 再给这个函数添加⼀个count属性初始值为0

return c; // 最后返回这个函数对象

};

const counter: Counter = getCounter(); // 通过getCounter函数得到这个计数器

counter();

console.log(counter.count); // 1

counter();

console.log(counter.count); // 2

前端语⾳

语⾳播报：在项⽬中需要对ajax请求返回的消息进⾏语⾳播报,str 为返回的data（可以在浏览器控制台尝试哟～）

//语⾳播报

function voiceAnnouncements(str){

//百度

var url = "/text2audio?lan=zh&ie=UTF-8&text=" + encodeURI(str); // baidu

var n = new Audio(url);

n.src = url;

n.play();

}

voiceAnnouncements('你好，今天吃的什么？')

React Native Text-To-Speech library for Android and iOS

语⾳识别:⽤语⾳控制⾃⼰的⽹站 annyang:

A tiny JavaScript Speech Recognition library that lets your users control your site with voice commands.

annyang has no dependencies, weighs just 2 KB, and is free to use and modify under the MIT license.

数组展开的N种⽅法

循环加递归

flat

flatMap

toString后split

join后split

使⽤ Proxy 来实现⼀个数据绑定和监听

Proxy简介：

let p = new Proxy(target, handler);

// `target` 代表需要添加代理的对象

// `handler` ⽤来⾃定义对象中的操作

let onWatch = (obj, setBind, getLogger) => {

let handler = {

get(target, property, receiver) {

getLogger(target, property)

return Reflect.get(target, property, receiver);

},

set(target, property, value, receiver) {

setBind(value);

return Reflect.set(target, property, value);

}

};

return new Proxy(obj, handler);

};

let obj = { a: 1 }

let value

let p = onWatch(obj, (v) => {

value = v

}, (target, property) => {

console.log(`Get '${property}' = ${target[property]}`);

})

p.a = 2 // bind `value` to `2`

p.a // -> Get 'a' = 2

再谈闭包

⼀等公民的定义

在编程语⾔中，⼀等公民可以作为函数参数，可以作为函数返回值，也可以赋值给变量。例如，字符串在⼏乎所有编程语⾔中都是⼀等公民，字符串可以做为函数参数，字符串可以作为函数返回值，字符串也可以赋值给变量。对于各种编程语⾔来说，函数就不⼀定是⼀等公民了，⽐如Java 8之前的版本。对于JavaScript来说，函数可以赋值给变量，也可以作为函数参数，还可以作为函数返回值，因此JavaScript中函数是⼀等公民。

动态作⽤域与静态作⽤域

注意，是说作⽤域，不是类型。

如果⼀门语⾔的作⽤域是静态作⽤域，那么符号之间的引⽤关系能够根据程序代码在编译时就确定清楚，在运⾏时不会变。某个函数是在哪声明的，就具有它所在位置的作⽤域。它能够访问哪些变量，那么就跟这些变量绑定了，在运⾏时就⼀直能访问这些变量。即静态作⽤域可以由程序代码决定，在编译时就能完全确定。⼤多数语⾔都是静态作⽤域的。

动态作⽤域（Dynamic Scope）。也就是说，变量引⽤跟变量声明不是在编译时就绑定死了的。在运⾏时，它是在运⾏环境中动态地找⼀个相同名称的变量。在 macOS 或 Linux 中⽤的 bash 脚本语⾔，就是动态作⽤域的。

闭包

闭包的内在⽭盾是运⾏时的环境和定义时的作⽤域之间的⽭盾。那么我们把内部环境中需要的变量，打包交给闭包函数，它就可以随时