4个值得收藏的Javascript技巧

更新时间：2022年07月29日 08:52:17 作者：天行无忌

这篇文章主要介绍了4个值得收藏的Javascript技巧，文章首先通过变量转字符串展开主题详情，需要的小伙伴可以参考一下

前言

学习一门语言的一种非常有效的方法就是阅读该编程语言开发的优秀开源项目的源代码。 Vuejs是最好的Javascript开源项目之一。

1.变量转字符串

vue/src/shared/util.js

将值转换为字符串是一个非常常见的需求，在Javascript中，有两个函数将值转换为字符串：

String()
JSON.stringify()

这两个功能具有不同的机制，请看下面代码：

console.log(String(null)); // null
console.log(JSON.stringify(null)); // null

console.log(String(undefined)); // undefined 这里是字符串
console.log(JSON.stringify(undefined)); // undefined 这里是变量

console.log(String("abc")); // abc
console.log(JSON.stringify("abc")); // "abc"

console.log(String({ key: "value" })); // [object Object]
console.log(JSON.stringify({ key: "value" })); // {"key":"value"}

console.log(String([1, 2, 3])); // 1,2,3
console.log(JSON.stringify([1, 2, 3])); // [1,2,3]

const obj = {
    title: "devpoint",
    toString() {
        return "obj";
    },
};
console.log(String(obj)); // obj
console.log(JSON.stringify(obj)); // {"title":"devpoint"}

从上面输出结果来看，两个方法将对象转为字符串机制存在差异，如何选择呢？

实际开发中我们需要将null和undefined转换为字符串时，经常是希望它返回一个空字符串。
当需要将一个数组和一个普通对象转换为字符串时，经常使用JSON.stringify。
如果需要对象的toString方法被重写，则需要使用String()。
在其他情况下，使用String()将变量转换为字符串。

为了满足以上条件，Vue源码的实现如下：

function isPlainObject(obj) {
    return Object.prototype.toString.call(obj) === "[object Object]";
}
function toString(val) {
    if (val === null || val === undefined) return "";
    if (Array.isArray(val)) return JSON.stringify(val);
    if (isPlainObject(val) && val.toString === Object.prototype.toString)
        return JSON.stringify(val);
    return String(val);
}
const obj = {
    title: "devpoint",
    toString() {
        return "obj";
    },
};
console.log(toString(obj)); // obj
console.log(toString([1, 2, 3])); // [1, 2, 3]
console.log(toString(undefined)); // ""
console.log(toString(null)); // ""

2.普通对象

vue/src/shared/util.js

Object.prototype.toString允许将对象转换为字符串。对于普通对象，当调用此方法时，总是返回[object object]。

const runToString = (obj) => Object.prototype.toString.call(obj);
console.log(runToString({})); // [object Object]
console.log(runToString({ title: "devpoint" })); // [object Object]
console.log(runToString({ title: "devpoint", author: { name: "devpoint" } })); // [object Object]

类似上面这种对象我们称之为普通对象。

在Javascript中还有一些特殊的对象，如Array、String和RegExp，它们在Javascript引擎中具有特殊的设计。当它们调用Object.prototype.toString方法时，会返回不同的结果。

const runToString = (obj) => Object.prototype.toString.call(obj);
console.log(runToString(["devpoint", 2021])); // [object Array]
console.log(runToString(new String("devpoint"))); // [object String]
console.log(runToString(/devpoint/)); // [object RegExp]

为了区分特殊设计对象和普通对象，可以用下面的函数来实现。

function isPlainObject(obj) {
    return Object.prototype.toString.call(obj) === "[object Object]";
}

很多时候，我们希望一个函数只执行一次。如果多次调用该函数，则只会执行第一次。

3.once

vue/src/shared/util.js

很多时候，我们希望一个函数只执行一次。如果多次调用该函数，则只会执行第一次。

function once(fn) {
    let called = false;
    return function () {
        if (!called) {
            called = true;
            fn.apply(this, arguments);
        }
    };
}

function launchRocket() {
    console.log("我已经执行了");
}
const launchRocketOnce = once(launchRocket);
launchRocketOnce();
launchRocketOnce();
launchRocketOnce();

4.浏览器嗅探

vue/src/core/util/env.js

我们知道Javascript可以在浏览器、nodejs等环境中运行，那么如何检查当前的Javascript代码是否在浏览器环境中运行？

如果Javascript在浏览器环境中运行，则会有一个全局对象：window。因此，可以通过以下方式判断环境：

const inBrowser = typeof window !== "undefined";

在Chrome中执行

在Node中执行

如果脚本在浏览器环境中运行，那么我们可以通过以下方式获取浏览器的userAgent：

const UA = inBrowser && window.navigator.userAgent.toLowerCase();

在Chrome中执行

不同的浏览器具有不同的userAgent。在Internet Explorer的userAgent中，始终包含单词MSIE和Trident。在Chrome浏览器的userAgent中，始终包含Chrome一词。

同样，在Android操作系统浏览器中，userAgent始终包含单词Android。在iOS中，总是有iPhone、iPad、iPod、iOS一词。

因此，可以通过检查userAgent来确定当前的浏览器供应商和操作系统。

export const UA = inBrowser && window.navigator.userAgent.toLowerCase();
export const isIE = UA && /msie|trident/.test(UA);
export const isIE9 = UA && UA.indexOf("msie 9.0") > 0;
export const isEdge = UA && UA.indexOf("edge/") > 0;
export const isAndroid =  (UA && UA.indexOf("android") > 0) || weexPlatform === "android";
export const isIOS =  (UA && /iphone|ipad|ipod|ios/.test(UA)) || weexPlatform === "ios";
export const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge;
export const isPhantomJS = UA && /phantomjs/.test(UA);
export const isFF = UA && UA.match(/firefox\/(\d+)/);

附带说明一下，Edge和Chrome均基于Chromium，因此两种浏览器的userAgent都包含Chrome一词。也就是说，当浏览器的userAgent中包含Chrome一词时，该浏览器不一定是Chrome。const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge

到此这篇关于4个值得收藏的Javascript技巧的文章就介绍到这了,更多相关Javascript技巧内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

使用原生JS实现滚轮翻页效果的示例代码
这篇文章主要介绍了使用原生JS实现滚轮翻页效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
JavaScript实现简单打地鼠游戏
这篇文章主要为大家详细介绍了JavaScript实现简单打地鼠游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
怎样用JS模拟实现枚举
这篇文章主要介绍了怎样用JS模拟实现枚举，对枚举感兴趣的同学，可以实验一下
2021-04-04
JS如何修改对象数组的key值
这篇文章主要介绍了JS如何修改对象数组的key值,使用map循环,在map循环内创建一个新对象,将item要改变的key赋给新创建的对象里面新key值,然后push给一个新创建的数组dataNew即可,需要的朋友可以参考下
2024-02-02
JavaScript中的遍历详解(多种遍历)
编程这么多年，要是每次写遍历代码时都用 for 循环，真心感觉对不起 JavaScript 语言,这篇文章为大家分享几种不同的遍历方法,需要的朋友可以参考下
2017-04-04
TypeScript函数和类型断言实例详解
在某些情况下,我们会比TS更清楚一个数据的类型,这种时候我们就可以使用断言来告诉TS相信我,我知道自己在干什么,下面这篇文章主要给大家介绍了关于TypeScript函数和类型断言的相关资料,需要的朋友可以参考下
2022-06-06
jQuery $.data()方法使用注意细节
前段时间同事在群里对jQuery里的.data()方法大发牢骚,接下来介绍jQuery $.data()方法使用注意细节，需要了解的朋友可以参考下
2012-12-12
JavaScript.The.Good.Parts阅读笔记（一）假值与===运算符
JavaScript 假值与===运算符，学习js的朋友可以看下。
2010-11-11
Textarea输入字数限制实例(兼容iOS&安卓)
下面小编就为大家带来一篇Textarea输入字数限制实例(兼容iOS&安卓)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
D3.js实现简洁实用的动态仪表盘的示例
本篇文章主要介绍了D3.js实现简洁实用的动态仪表盘的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04