JS技巧技法总结

时间: 2019-12-22阅读: 180标签: 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 = "http://tts.baidu.com/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 脚本语言,就是动态作用域的。

闭包

  闭包的内在矛盾是运行时的环境和定义时的作用域之间的矛盾。那么我们把内部环境中需要的变量,打包交给闭包函数,它就可以随时访问这些变量了。

  闭包这个概念,对于初学者来讲是一个挑战。其实,闭包就是把函数在静态作用域中所访问的变量的生存期拉长,形成一份可以由这个函数单独访问的数据。正因为这些数据只能被闭包函数访问,所以也就具备了对信息进行封装、隐藏内部细节的特性。

闭包与面向对象

  听上去是不是有点儿耳熟?封装,把数据和对数据的操作封在一起,这不就是面向对象编程嘛!一个闭包可以看做是一个对象。反过来看,一个对象是不是也可以看做一个闭包呢?对象的属性,也可以看做被方法所独占的环境变量,其生存期也必须保证能够被方法一直正常的访问。

闭包的实现

函数要变成 JavaScript 的一等公民。也就是要能把函数像普通数值一样赋值给变量,可以作为参数传递给其他函数,可以作为函数的返回值。

要让内层函数一直访问它环境中的变量,不管外层函数退出与否。

归纳总结

因为JavaScript是静态作用域的,所以它内部环境中需要的变量在编译时就确定了,运行时不会改变;

又因为JavaScript中,函数是一等公民,可以被调用,可以作为参数传递,可以赋值给变量,也可以作为函数返回值,所以它的运行时环境很容易变化;

当函数作为另一个函数(外层函数)的返回值返回时,其外层函数中的变量已经从调用栈弹出,但是我们必须让内部函数可以访问到它需要的变量,因此运行时的环境和定义时的作用域之间就产生矛盾;

所以我们把内部环境中需要的变量,打包交给内层函数(闭包函数),它就可以随时访问这些变量了,就形成了闭包。

本文首发于个人博客,欢迎指正和star

站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/7306

三个实用的javascript小技巧

如果你想从后向前获取一个数组的元素,可以这样写:如果你想在某个条件逻辑值为true时,执行某个函数,就像这样:如果你必须给一个变量赋默认值,可以简单的这样写:

JS禁止打开控制台

主要为了通过禁止打开控制台,防止别人进行代码调试。禁止右键查看源码和F12;通过页面宽度变化监测控制台;利用控制台特性改写对象toString;利用控制台特性进行监听dom属性

javascript如何判断值是否为整数?

javascript如何判断一个值是否为整数?下面本篇文章就来给大家介绍一下使用javascript判断一个值是否为整数的方法。

(a ==1 && a== 2 && a==3) 有可能是 true 吗?

1. 利用松散相等运算符 == 的原理,自定义 toString 和 valueOf 返回对应值2. 利用半宽度韩文等特殊字符,玩“障眼法”,本质上其实并没有做到题设3. 劫持 JS 对象的 getter,不过这种方式对于严格相等 === 同样有效

js中~~和 | 的妙用

~~它代表双非按位取反运算符,如果你想使用比Math.floor()更快的方法,那就是它了。需要注意,对于正数,它向下取整;对于负数,向上取整;非数字取值为0,它具体的表现形式为:

js技巧_js中一些常见的陷阱

这里我们针对JavaScript初学者给出一些技巧和列出一些陷阱。如果你已经是一个砖家,也可以读一读。你是否尝试过对数组元素进行排序?

5个小技巧让你写出更好的 JavaScript 条件语句

使用 Array.includes 来处理多重条件,少写嵌套,尽早返回,使用函数默认参数和解构,相较于 switch,Map / Object 也许是更好的选择,使用 Array.every 和 Array.some 来处理全部/部分满足条件,让我们一起写出可读性更高的代码吧

js语言中常见错误总汇

事实证明很多这些 null 或 undefined 的错误是普遍存在的。 一个类似于 Typescript 这样的好的静态类型检查系统,当设置为严格的编译选项时,能够帮助开发者避免这些错误。

js求数组的最大值--奇技淫巧和笨方法

js中有很多“奇技淫巧”,有时我会常常刻意去用这些“奇技淫巧”(注意,我不是在反对用它,只是有时其实没必要用)。比如,求数组中的最大值,js中Array没有原生的求最大值的方法,但是Math有呀

一些 JavaScript 中的代码小技巧

一些 JavaScript 中的代码小技巧:使用函数过滤并序列化对象、用 Set 来实现数组去重、用块级作用域避免命名冲突、函数参数值校验、用解构赋值过滤对象属性、用解构赋值获取嵌套对象的属性、合并对象、使用 === 代替 ==

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广