梦入琼楼寒有月，行过石树冻无烟

📖 earlier posts 📖

D3 颜色序数比例尺

2022-04-21

作为较为常用且功能逊色的比例尺之一，D3还为其提供颜色序数比例尺，共有四类，10～20种颜色，其方法都以d3.scale.category()来进行定义，他的全部方法共有：

ID DA FA
d3.scale.category10 共有10种颜色
d3.scale.category20 共有20种颜色
d3.scale.category20b 共有20种颜色的第二方案
d3.scale.category20c 第三种共有20种颜色搭配方案

首先我们定义一个高和宽分别为1600的svg图像，之后分别指定圆的颜色为category10，并输出10个圆，圆的边距以及坐标可以通过使用return padding.right + i * padding.left;来计算出坐标以及间隔，并定义一个y轴坐标后输出。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
var databases = d3.range(10);
var color = d3.scale.category10();

var svg = d3.select("body")
	.append("svg")
	.attr("width",1600)
	.attr("height",1600)

var padding = {
	right: 130,
	left: 100,
}

var circle = svg.selectAll("circle")
	.data(databases)
	.enter()
	.append("circle")
	.attr("cx", function(d,i) {
		return padding.right + i * padding.left;
	})
	.attr("cy",100)
	.attr("r",40)
	.attr("fill",function (d,i) {
		return color(i)
	})

/*
	/—— font-size and text-anchor
	/———— 设置文字大小以及文字居中
	/—— return color(i)
	/———— 让其生成十个颜色并对应到 text 元素中
	/—— text color(d)
	/———— 将对应文字输出到 text 中。
 */
var text = svg.selectAll("text")
	.data(databases)
	.enter()
	.append("text")
	.attr("font-size","15px")
	.attr("text-anchor","middle")
	.attr("x",function (d,i) {
		return padding.right + i * padding.left;
	})
	.attr("y",200)
	.attr("fill",function (d,i) {
		return color(i)
	})
	.text(function (d) {
		return color(d);
	})

D3 简介

2022-04-21

D3（Data-Driven Document）即数据驱动文档，是一个主要用于数据可视化所开发的javascript库，启动主要是数据决定绘图流程以及程序设计模型。或者另一个称呼为“事件驱动 ——由用户动作来决定程序流程的设计模型”。在版本控制中，D3主要使用了语义话版本控制，格式为主板本号.次版本号.修订号 即：

  1. 主版本号：做了不兼容的API修改
  2. 次版本号：当你做了向下兼容的功能增加
  3. 修订号：当你做了向下兼容的问题修正。

数据与DOM的绑定

同样的，在WEB中数据可视化中不仅仅只有D3，还有不少的类似与：Highcharts、Echarts、Chart。当然除此之外还有维度更高的，如蚂蚁空间地理可视化框架，D3 能够将数据与DOM对象进行绑定，使得数据与图形为一体，我们当修改DOM的时候，数据自然而然的会进行更新，这意味着我们配合各种各样的语言来呈现不同的数据展示。

计算和绘图的独立

在D3中数据变成一个数据图表将会被分为两个步骤为计算与绘图，在Highcharts等框架中，计算和绘图shingle整体，并输入数据。而D3中数据与绘图是进行分开的，而计算内所做的就是计算所得到的节点或坐标而绘图则是渲染图表。

支持 SVG 与 Canvas

在 D3 中，SVG与Canvas中通常会出现在不同的环境中，如地图中的飞线图，都可以使用SVG或Canvas路径以及SVG动画进行实现，在3.X之前的版本主要支持SVG，但从4.X开始也支持 Canvas。

数据可视化

数据可视化即Data Visualization，起源与18世纪，在19世纪中叶时期，数据可视化主要被运用与军事用途没来表示军队的死亡以及分布当中。而进入20世纪，由于大数据以及移动互联网的飞速发展，数据可视化也会运用在产品分析、行为分析以及数据统计等场景中。

图标的分类及用途

柱形图


柱形图是最为常见的，也是最容易理解的一个图表，使用柱形图的长短可以表示数据的大小，或者需要表现随着时间变化，数据的大小等。如果将柱形图的x或y轴进行一环，的可以得到一个横向的柱状图，也被称之为条形图。

散点图


散点图使用三维数据集，将其中的二维数据分别对应到x和y轴，之后将第三维用点来作为表示。

折线图


折线图的目的与柱状图类似，适合在二维的数据集中，某一维相对另一维度的变化趋势，不哦那个的是折线图适合连续的数据，柱状图适合较为离散的数据，折线图也适用一些数量较大的数据而住装图适合少量的数据。

饼状图


饼状图可以用于表述数值的大小，缺点就是数值之间的差距不大，基本上通过饼状图的颜色以及注释来进行分辨，因此饼状图一般用于表示一个值站总体的百分比。

弦图


弦图用于表示点与点之间的联系，两点之间的连线来表示那个点具有联系以及线的粗细表示权重。

力导向图


力导向图适合描述打来那个节点之间的关系，各个节点之间具有相互的作用里来表示节点之间的用线相连，而相连的定点表示具有一定的关系，适合用于任务关系以及力导向图等。

树图


树图用于表示层级、上下级以及包含与被包含的关系，与之类似的还有集群图等。

Auto.js 入门

2022-04-21

Auto.js 是一个不需要 Root 权限的 JavaScript 自动化软件，发展至今已经从原来只针对自动化的 JavaScript 扩展语言演变为一个自动化软件，供两种方式给开发者进行使用，一种是提供了 GUI 页面，而另一种是简单的使用 javaScript 来完成一些相应的操作。

1
2
3
Auto.js 开源版本已经不再维护，后续将只会维护 Auto.js Pro 专业版，其专业版内置了 Visual Studio 远程连接以及打包、制作等服务，除了自动化还可以开发 Android 软件并进行打包，同时内置了更加强大的加密方法。

并此提供了自定义权限、启动图和优化还有签名等功能，来通过 Auto.js 实现真正的一个独立 Android 应用的开发。

通过 VS Code 开发 Auto.js

Auto.js 的开发一般通过VS Code 上的 Autojs 扩展或 Android Auto.js 直接进行下载，之后在 Android 或模拟器中打开 Auto.js Client 左侧导航中连接电脑，Auto.js 为我们提供了多种方式。

连接 VS Code \ VS Code 连接 Auto.js

Auto.js 为我们所提供的方法较多，我们首先通过 VS Code 连接 Auto.js 但一般会遇到 connect error:Error:connect ETIMEDOUT xxxxx:9317 的错误，通常难以解决，目前解决此问题的方法是开放 9317 和 8327 端口以通过防火墙规则。

1
在 VS Code 和 Android Auto.js 在一个网络的情况下，且 ADB 模式连接都已失败的情况下，可以采用另一种方法进行连接，VS Code 连接手机的前提下是 Android 已经安装好了 Auto.js

在正常情况下，我们只需要通过 Ctrl+P 的组合键，来调出命令执行页面，之后在表单中输入 >Auto.js Pro:连接新的设备 -> adb 连接手机，即 USB 形式连接，如果出错，可以尝试下述方案，在 Auto.js 中的连接侧栏内，选择连接电脑，输入电脑 IP 即可，但需要主要的是该主机已经安装了VS Code 和相关 Auto.js 扩展，且在开启的情况下进行，即可连接。

对于部分 PC 端 Android 模拟器的选择，建议蓝叠国际版、夜神\MUME\雷电 等，同时也推荐使用 Android Studio & Genymotion 等作为开发主机，但非必要情况下还是建议通过手机投屏最为有效。

1
2
3
4
5
在上述的模拟器中，类似于 Android Studio& Genymotion 等纯 Android 模拟，是基于 X86 架构的，因此对于应用的支持仅限 Google 生态，所以我们下载后 Android 对应 Version 后还需要通过相对应的 Android Version 对 x86 架构进行翻译为 ARM。

由于更多的是针对 Android 对应的系统版本，对于 Android 8，可以通过 [Genymotion_ARM_Translation](https://github.com/m9rco/Genymotion_ARM_Translation/tree/master/package) 来进行添加。

同样的你也可以选择 Genymotion 官方所提出的 Open GApps 服务来根据自己的模拟机版本来进行选择，之后重启即可，感谢 **haku** 为此注释所做出的贡献。

自动化模拟点击

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 检测无障碍服务是否已经启用
auto.waitFor()

// 显示控制台
console.show()
  
function registerQQ(packageName) {
 className("android.widget.TextView").text("QQ").findOne().click()
 sleep(300)
 click(742.2, 1820.0)
}

// 执行注册
registerQQ(packageName)

在上述的一段小 Demo 中，auto.waitFor() 以及 console.show() 主要用于检测无障碍服务和显示 Auto.js Code 执行过程中所输出的信息，同时在构造方法 registerQQ 内所包含的参数主要介绍如下：

Id Name Info
1 className() 目标应用程序的类名
2 text() 目标应用程序
3 findOne() 查找
4 click() 点击

可以通过在 Android Auto.js 中的左侧导航内，通过开启 ：“无障碍服务、悬浮窗” 等较为主要的功能，来进行辅助编写。之后的 sleep() 主要设置延迟，到最后的 click 方法内的 x,y 同样通过 Auto.js 的悬浮窗来进行实现。

Layout at vertical

在提供基础的自动化服务之外，Auto.js 还提供了诸如类似页面空间类似语法，以此来构建自动化应用，以此来适配不同的场景，比如 Layout 中所应用到的垂直布局(vertical):

1
2
3
4
5
ui.layout(
    <vertical padding="16">
        <input text="user" textColor="black" textSize="16sp" marginTop="16" />
    </vertical>
)

通过 Auto.js 所特有的语法来构建一个垂直布局的表单，并通过读个参数来进行选择，在 Auto.js 中作者还提供了一系列的文本控件，如上述的 textColor 可以来设置字体的颜色，支持标准的 RGB 格式和颜色名称，都是可选的。

同时，还支持设置字体的大小，如 textSize="16sp" 即按照 Meterial Design 的规范，同时可以使用例如上述我们所添加的上边距 marginTop ，来进行实现基础表单的构造。

我们可以结合上述的 Auto.js 和 Layout at vertical 来进行构建和向下继续扩展，根据 首页 (autojs.org) 的官方文档从而构建一个自动化的工作流。

JavaScript 异步函数编写

2022-04-21

在Java中，每个异步函数都构建在其他某个异步函数之上，只要是异步函数，那么该函数从上倒下都是异步函数。

什么是堵塞

堵塞是异步函数中的一个术语，主要强调了异步函数的高速度。假如异步MySQL数据库驱动程序做一个查询可能会上一个小时，但是负责发送查询请求的那个函数却可以能微秒级速度返回。

什么是同步函数和异步函数

同步和异步可以从字面上进行理解，当然也有第二个答案是同步是阻塞模式、而异步是非堵塞模式：

1. 同步

1. 同步则发送出数据后，等待接收方回复响应则发送下一个数据

2. 异步

1. 异步可以理解为，不等接受方回复响应则发送队列中的下一个数据

有时异步函数

有些函数有时候是异步的，但是在其他的时候又不是异步的，就比如JQuery同名函数，可用于延迟函数，直到DOM已经完全加载，就不会有延迟，但是他的回调将会立刻触发

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>Data</title>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
		</script>
</head>
<body>
	<script src="js/one.js"></script>
	<script src="js/two.js"></script>
</body>
</html>

浏览器如果从缓存中访问当前页面，使得DOM（文档对象模型，Document Object Model）提前准备。正常情况下这段代码是可以正常执行的。

one.js

1
2
3
$(function() {
	utils.log('Ready');
});

two.js

window.utils = {
    log: function() {
        if (window.console) console.log.apply(console, arguments);
    }
};

JavaScript 异步函数类型

2022-04-21

JavaScript环境主要有setTimeout和setInterval异步函数集，而JavaScript主要分为两种类型，分别为：“I/O函数”和“计时函数”两大类

I/O 函数

JavaScript脚本语言主要采用了非阻塞式的I/O，相比其他开发语言很容易造成阻塞，相比之下可以明显的看到JavaScript只需要加入一个返回事件队列（回调）即可解决阻塞的问题。

1
2
3
4
5
6
var ajaxRequest = new XMLHttpRequest;
ajaxRequest.open('GET', url);
ajaxRequest.send(null);
while (ajaxRequest.readyState === XMLHttpRequest.UNSENT) {
        // code 
};

在以上code之中，这种堵塞会将永远的循环运行下去，不可能会停止。

1
2
3
4
5
6
var ajaxRequest = new XMLHttpRequest;
ajaxRequest.open('GET',url);
ajaxRequest.send(null);
ajaxRequest.onreadystatechange = function() {
    // code
};

此时只需要在加上一个事件处理器，即可返回事件队列从而不会造成上述堵塞问题。

计时函数

著名的时间事件主要涉及了两个函数，分别为setTimeout与setInterval两个函数，但是这两个函数都有自己的权限，比如上一章讲的“无法准时显示，但会维持在那个数值范围之内而不超过”。

setTimeout()

setTimeout()函数是在JavaScript异步加载中常见的异步加载函数，例子如下：

1
2
3
4
5
6
7
8
<script>
		for (var one = 1; one <= 3; one++) {
		setTimeout (function() {
			document.write(one,"<br>");
			},3000);        /*三秒后输出语句*/
		};
</script>
<p id="data()"></p>

只所以最后输出结果为“4.4.4”是因为这里的延时为3秒，定义的函数都会抢着要第一个触发

setInterval()

1
2
3
setInterval(function() {
	console.log("Hello");
}, 3000);

原因

英特尔 i7处理器

国外开发人员发现当使用setInterval函数调度事件的时候，且延迟设置为0毫秒，则会尽可能的循环此事件。当使用英特尔i7处理器的计算机中，使用谷歌、火狐等浏览器，大约为200次/秒。但是在node环境下，此事件触发频率大约可达到1000次.秒。
而将setInterval函数替换成while循环语句，则在谷歌、火狐等浏览器事件的触发频率高达400万次/秒，在Node环境之中则会达到500万次/秒。

结论

最后的出结论，setTimeout与setInterval设计时就是想成为慢慢吞吞的，这是一个HTML规范，所有的主要浏览器都要遵守的规范，在推行的延时、时隔的最小值就是4毫秒。

JavaScript 简单的理解异步

2022-04-21

简介

异步加载是JavaScript开发中最关键的技术之一，主要可利用异步构建快速、高效的JavaScript应用。在众多WEB页面中为了避免服务器请求过多导致服务器崩溃，则可使用JavaScript异步技术。

简单的例子

未使用异步

在未使用JavaScript异步加载之前，用户访问服务器是一下子访问然后在加载各种图片和文字的，则会造成服务器的资源消耗。

使用异步

使用异步之后，当用户访问服务器的时候，页面是根据用户的移动而随着加载的，是断断续续的，而不是一下子造成大量的服务器请求。

队列

什么是队列

当调用某个函数的时候，会有一个异步延时事件加入队列，然后接着执行下一行代码直到最后没有任何代码进行执行（此时JavaScript会问队列里是否还有数据）。

队列实例

当点击按钮之后，则按钮中的数据会将数据添加到队列之中，输入和点击队列。

异步加载函数

setTimeout()

setTimeout()函数是在JavaScript异步加载中常见的异步加载函数，例子如下：

1
2
3
4
5
6
7
8
<script>
		for (var one = 1; one <= 3; one++) {
		setTimeout (function() {
			document.write(one,"<br>");
			},3000);        /*三秒后输出语句*/
		};
</script>
<p id="data()"></p>

只所以最后输出结果为“4.4.4”是因为这里的延时为3秒，定义的函数都会抢着要第一个触发

线程的堵塞

1
2
3
4
5
6
7
8
var start = new Date;
setTimeout(function() {
	var end = new Date;
	console.log("经过时间：",end - start,'ms');
}, 3000);
while (new Date - start < 1000) {
	// code
}

以上代码根据实际理念应该是等待3秒后执行，而实际运行当中则打印时间为3001。这时主要问题出现在setTimeout函数之中，因为setTimeout和setIn-terval一样，计时精度要比预期望差很多。

1
2
3
4
5
6
7
8
var start = new Date;
setTimeout(function() {
	var end = new Date;
	console.log("经过时间：",end - start,'ms');
}, 500);
while (new Date - start < 1000) {
	// code
}

而输出的数据至少是1000，因为setTimeout回调while循环结束运行之前不可能被触发。

setInterval()

1
2
3
setInterval(function() {
	console.log("Hello");
}, 3000);

algoliasearch-helper

2022-04-21

algolia 是一个通过 Saas 模式提供网络搜索的产品，在 2012 年创办，主要是在手机上进行离线搜索，并在此之后使用外部托的方式为客户的网站提供了网络搜索服务，以及 REST API 的提供，涵盖了大量主流语言。与同类型的 Elasticsearch 相比起来 Algolia 更加的轻量级，并且与站点达成了高度耦合，不太依赖数据库，而是更加更可自定义的 RESTAPI 的方式进行提供。

且 algolia 高度活跃在诸如开源社区中获得了一大批开发者的青睐，而本文主要通过 algolia 在原生的 JavaScript 环境下的使用，通常此类都是面向大前端时代下的产物，但通过 algoliasearch-helper.js 可以解决这种尴尬问题。

在此之前我们需要了解 algoliasearch-helper.js 主要作用，首先需要认识到 helper 主要用于创建基于搜索的应用程序，以此来帮助开发者构建属于自己的应用程序的搜索结构，同时还提供了更加高级的 API 来方便访问高级搜索过滤器。

通过 algoliasearch-helper 我们可以实现在站点中加入 helper，以及在没有 js 框架的情况下根据 algolia 来来建立根据用户所需的界面。

获取 API


首先我们需要在 algolia 页面中找到 appliacation 以及 apikey 和 IndexNeame，以保障你在使用前已经构建了索引，即 IndexName，之后的 algolia 会使用该索引的 json 数据来进行查询。

添加时格式为 json，届时 algolia 会各种提示你进行添加或上传数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[
    {
    "name":"针对本年度中旬纽约时报针对中国的境外社交平台舆论攻击分析",
        "author":"LAB",
        "date":"2022/01/11",
        "class":"会议沙龙",
        "url":"http://src.chnhonker.com/index.php?m=&c=blog&a=view&id=2"
    },
    {
        "name":"关于 3.99MB 恶意程序进一步扩展与深入分析",
        "author":"LAB",
        "date":"2022/01/12",
        "class":"会议沙龙",
        "url":"http://src.chnhonker.com/index.php?m=&c=blog&a=view&id=3"
    }
]

为了方便演示我们通过上述两条数据来进行插入，同时使用 Algolia 还需要在项目中使用 algolia-client 来引用 algolia.js 库，需要在页面中引入两行 js 库：

1
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/g/algoliasearch@3(algoliasearchLite.min.js),algoliasearch.helper@2"></script>

与 Elasticsearch 和 Kibana 类似，Elasticsearch 用于存储搜索和分析，同时 Kibana 用于可视化数据的操作，来作为 Es 学习的第一步，同样的我们需要在 algolia 中 create index，并 add data，通过下述 code 进行输出：

1
2
3
4
<pre id="jsonecho"></pre>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/g/algoliasearch@3(algoliasearchLite.min.js),algoliasearch.helper@2"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var applicationID = "you_appID";
var apiKey = "you_apiKey";
var index = "you_Index";

var client = algoliasearch(applicationID, apiKey);
var helper = algoliasearchHelper(client, index);

helper.on('result', function(content) {
    renderHits(content);
});

function renderHits(content) {
    $('#jsonecho').html(JSON.stringify(content, null, 2));
}

helper.search();

通过 helper.on("result") 来输出来自 Algolia 的 Json 数据并使用 helper.search() 来执行一个空搜索。

解析 API


根据 algoliasearch-helper.js 官方文档中的例子，我们通过Searchable attributes 中设置的 “_highlightResult” 来进行获取数据并解析。

如果要达到一个搜索的目的，我们需要根据 API 内容中 hits 进行返回数据，以此来获取下文，即构造代码为：

1
2
3
4
5
6
7
8
9
10
11
12
function renderHits(content) {
    $('#container').html(function() {
        return $.map(content.hits, function(hit) {
            return '<li><a href=' + hit._highlightResult.url.value + '>' +hit._highlightResult.name.value + '</a></li>';
        });
    });
}

$('#search-box').on('keyup', function() {
    helper.setQuery($(this).val())
        .search();
});

并将前端 code 进行绑定，方便解析搜索和显示数据：

1
2
3
<input type="text" autocomplete="off" id="search-box"/>

<ul id=container></ul>

通过 search-box 来监听输入更改以达到查询并触发更新的效果，在调用 setQuery 时通过 helper 手动触发搜索，同时也可以为其写入样式，如关键词高亮同样可以为其加上样式。这主要是通过 algolia 所提供的分词效果，与 Elasticsearch 中提供的分词方法类似，都是通过 <em> 元素来进行分词的。

1
2
3
#container em {
    background: red;
}

JavaScript 类型(typeof)与转换

2022-04-21

数据类型（typeof）

数据类型共包括字符串、数字、布尔以及对对象等多种类型，通常在JavaScript中可以使用typeof方法进行查看该值的类型，需要注意的时数组与对象的类型是一样的，都是“object”；

字符串 (string)

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="data"></p>
<script>
    document.getElementById("data").innerHTML = typeof "Hello,world";
</script>
</body>
</html>

数字 (number)

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="data"></p>
<script>
    document.getElementById("data").innerHTML = typeof 3.14;
</script>

</body>
</html>

布尔 (boolean)

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="data"></p>
<script>
    document.getElementById("data").innerHTML = typeof true;
</script>
</body>
</html>

数组 (object)

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="data"></p>
<script>
    document.getElementById("data").innerHTML = typeof ["one","two","three"];
</script>
</body>
</html>

对象 (object)

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="data"></p>
<script>
    document.getElementById("data").innerHTML = typeof {one:"one",two:"two",three:"three"};
</script>
</body>
</html>

对象(object)

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="data"></p>
<script>
    document.getElementById("data").innerHTML = typeof new Date();
</script>
</body>
</html>

功能 (function)

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="data"></p>
<script>
    document.getElementById("data").innerHTML = typeof function (data){};
</script>
</body>
</html>

未知 (unknown)

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="data"></p>
<script>
    document.getElementById("data").innerHTML = typeof unknown;
</script>
</body>
</html>

构造器函数（constructor）

构造器函数（constructor）与数据类型（typeof）的区别就是构造器函数可以检测该类型是否是数组还是对象。这在typeof之中是不可行的，因为在typeof之中数组与对象的类型都为“object”

字符串 (String)

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
	document.getElementById("data").innerHTML = "Hello,world".constructor;
</script>
</body>
</html>

数字 (Nbmber)

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
	document.getElementById("data").innerHTML = 3.14.constructor;
</script>
</body>
</html>

布尔 (Boolean)

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
    document.getElementById("data").innerHTML = true.constructor;
</script>
</body>
</html>

数组 (Array)

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
    document.getElementById("data").innerHTML = ["one","twu","three"].constructor;
</script>
</body>
</html>

对象 (Object)

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
    document.getElementById("data").innerHTML = {one:"one",two:"twu",three:"three"}.constructor;
</script>
</body>
</html>

自建对象 （Date)

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
    document.getElementById("data").innerHTML = new Date().constructor;
</script>
</body>
</html>

功能 (Function)

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
    document.getElementById("data").innerHTML = function (Date){}.constructor;
</script>
</body>
</html>

判断是否为数值 (Constructor）

第一种写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
    var array = ["one","two","three"];
    document.getElementById("data").innerHTML = isArray(array);
    function isArray(myArray) {
        return myArray.constructor.toString().indexOf("Array") > -1;
    }
</script>
</body>
</html>

<!-- 当"array"为数值（Array）的时候返回true，否则返回false，如返回true则表示array是一个数值

或

第二种写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
    var array = ["one","two","three"];
    document.getElementById("data").innerHTML = isArray(array);
    function isArray(myArray) {
        return myArray.constructor == Array;
    }
</script>
</body>
</html>

<!-- 当"array"为数值（Array）的时候返回true，否则返回false，如返回true则表示array是一个数值

类型转换

数值
数值转字符串 String()
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
	var x = 123;
	document.getElementById("demo").innerHTML = String(x);
</script>
</body>
</html>
数值转字符串方法（toString）
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
    var a = 123;
    document.getElementById("data").innerHTML = a.toString();
</script>
</body>
</html>
布尔
布尔转字符串 String()
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
	var x = true;
	document.getElementById("demo").innerHTML = String(x);
</script>
</body>
</html>
布尔转字符串 （toString)
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
    var a = true;
    document.getElementById("data").innerHTML = a.toString();
</script>
</body>
</html>
数值
字符串转数值 Number
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
	var x = "1";
	document.getElementById("demo").innerHTML = Number(x);
</script>
</body>
</html>
布尔转数值 Number
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
	var x = true;
	document.getElementById("demo").innerHTML = Number(x);
</script>
</body>
</html>
ID DA FA
typeof 查看数据类型 数据类型
constructor 查看构造器函数
String() 转换为字符串 数据转换
toString() 转换为字符串
Number 转换为数值

JavaScript 数据类型

2022-04-21

在JavaScript之中，主要分为四种数据类型，分别为数值(Numerical)、字符串(String)、数组(array)、对象(Object)

数值

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
	var legin = 1;
	document.getElementById('data').innerHTML = legin;
</script>
</body>
</html>

字符串

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
  var leigin = "Hello";
  document.getElementById('data').innerHTML = leigin;
</script>
</body>
</html>

数组

1
2
3
4
5
6
7
8
9
10
<p id="data"></p>
<script>
	var one = 10;
	var two = 20;
	var three = 30;
	document.getElementById('data').innerHTML = one + "<br>" + two + "<br>" + three;
</script>
</body>
</html>

​

对象

1
2
3
4
5
6
7
8
9
<body>
<script>
	var legin = {name: "flyday",
                 age: 21,
                 id: "Clockshan-Ot"};
	document.write(legin.name + "<br>");
	document.write(legin["age"] + "<br>");
</script>
</body>
ID DA
1 数组
‘Hello’ 字符串
one = 10 数组
{name: “flydat”} 对象

JavaScript 运算符方法

2022-04-21

简单的输出

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>

<p id="data"></p>
<script>
document.getElementById("data").innerHTML = "Hello,world" + "!";
</script>

</body
</html>
   
<!-- 输出结果为 Hello,world! -->

简单的算数题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>

<p id="data"></p>
<script>
	var a, b, c;
	a = 1; b = 2;
    c = a + b;
	document.getElementById("data").innerHTML = "1＋2= " + c;
</script>
   
</body>
</html>

<!-- 输出结果为 1 + 2 + 3 -->

类以代数

在开发之中，类以代数通常使用变量来存放值，比如我们要表达的 data = name = user

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
	var one = 1;
	var two = 1;
	var three = 1;
	var dataone = one + two + three;
	document.getElementById('data').innerHTML = "综合:" + dataone; 
</script>
</body>
</html>
<!-- 输出：综合:3-->

一条多量

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
	var one = "1one", two = "2two", three = 11111;
	document.getElementById('data').innerHTML = one;
</script>
</body>
</html>

引号之别

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<p id="data">"1" + 1 + 2：</p>
<script>
	a = "1" + 1 + 2;
	document.getElementById('data').innerHTML = a;
</script>
</body>
</html>

<!-- 输出结果为 112-->

元素

ID DA FA
innerHTML 输出 ducument.getElementByID
var 声明变量
a = 1 赋值
c = a + b 计算值

计算

ID DA
+ 加法
- 减法
* 乘法
/ 除法
% 系数
++ 递增
– 递减
** 幂
📖 more posts 📖