javascript 笔记 - Zirpon | Blog
☀️ 🌃
javascript 文字转语音 threejs 3D sketchfab

javascript 笔记

The quick brown fox jumps over the lazy dog

Posted by Zirpon Cheung on 2024-07-06
Estimated Reading Time 5 Minutes
Words 916 In Total
Viewed Times

javascript 笔记

🏝️basic

JavaScript 中的一次性定时器和周期性定时器
JavaScript ES6-10 语法
HTML/CSS switch 开关 （包括 JS 控制 checked 选择）
JavaScript 字典遍历用法介绍
JS 字典遍历非阻塞弹窗

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
for (const [key, value] of Object.entries(object)) {
	console.log(key, value);
}

var points = [40, 100, 1, 5, 25, 10];
points.sort(function (a, b) {
	return a - b;
});

//	var a='xixi';  function  object number string boolean undefined
if (typeof a == "undefined" || a == null) alert("a is undefined");
else alert("a is defined");

myString = "129";
console.log(parseInt(myString)); // expected result: 129

Number("10.33"); // returns 10.33

console.log(+""); // expected output: 0

parseFloat("10 20 30"); // returns 10
parseFloat("10 years"); // returns 10
parseFloat("years 10"); // returns NaN

str = "1222";
console.log(Math.floor(str)); // returns 1222

str = "2344";
console.log(str * 1); // expected result: 2344

negStr = "-234";
console.log(~~negStr); // expected result: -234

Array.from({length: 10}, (val, i) => i) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Array.from(new Array(10).keys()) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Object.keys(Array.from({length: 10})).map((val, i ) => +i) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
[...new Array(10).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
[...Array.from({length: 10}).keys()] // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

🏝️js中(function(){}()) (function(){})() $(function(){});之间的区别

1
2
3
4
5
6
7
//这两种写法，都是一种立即执行函数的写法，即IIFE (Immediately Invoked Function Expression)。这种函数在函数定义的地方就直接执行了。
(function(){}())

(function(){})()

//是$(document).ready(function(){/*...*/})的简写形式，是在DOM加载完成后执行的回调函数，并且只会执行一次。
$(function(){/*...*/})

🏝️html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log("#foo\bar"); // "#fooar"
  document.querySelector("#foo\bar"); // 不匹配任何元素

  console.log("#foo\\bar"); // "#foo\bar"
  console.log("#foo\\\\bar"); // "#foo\\bar"
  document.querySelector("#foo\\\\bar"); // 匹配第一个 div

  document.querySelector("#foo:bar"); // 不匹配任何元素
  document.querySelector("#foo\\:bar"); // 匹配第二个 div
</script>
1
2
3
var el = document.querySelector(".myclass");

var el = document.querySelector("div.user-panel.main input[name='login']");

🏝️bun

  • windows install

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
bun --revision
powershell -c "irm bun.sh/install.ps1|iex"
bun add -d @types/bun
bun add -d @types/react@latest @types/react-dom@latest
bun add -d @babel/core @babel/preset-react
bun add -d @types/figlet

bun --watch run dev

#`foo, bar and baz`
bun run --filter 'ba*' <script>

echo "console.log('Hello')" | bun run -

bun --smol run index.tsx

bun --print process.env
bun --print process.env.production
bun --print process.env.development
bun --print process.env.local

bun build ./cli.ts --compile --outfile mycli
# cli.ts
console.log("Hello world!");

bun build --compile --target=bun-windows-x64 ./path/to/my/app.ts --outfile myapp

bun build --compile --target=bun-linux-x64 ./index.ts --outfile myapp

bun build --compile --target=bun-darwin-x64 ./path/to/my/app.ts --outfile myapp

bun build --compile --minify --sourcemap ./path/to/my/app.ts --outfile myapp

🏝️弹窗插件

🏝️弹窗队列

  • 自己实现的 开箱即用的弹窗队列 源码 AlertQueue

🏝️jsx

  • bun add -d @types/react@latest

1
2
3
4
5
6
7
8
9
10
11
import "react";

function Component(props: { message: string }) {
	return (
		<body>
			<h1 style={{ color: "red" }}>{props.message}</h1>
		</body>
	);
}

console.log(<Component message="Hello world!" />);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import db from "./my.db" with { type: "sqlite" };
console.log(db.query("select * from users LIMIT 1").get());

import myEmbeddedDb from "./my.db" with { type: "sqlite", embed: "true" };
console.log(myEmbeddedDb.query("select * from users LIMIT 1").get());

// this becomes an internal file path
import icon from "./icon.png" with { type: "file" };
import { file } from "bun";

export default {
  fetch(req) {
    // Embedded files can be streamed from Response objects
    return new Response(file(icon));
  },
};

import icon from "./icon.png" with { type: "file" };
import { file } from "bun";
const bytes = await file(icon).arrayBuffer();

import { stuff } from "./my-commonjs.cjs";
import Stuff from "./my-commonjs.cjs";
const myStuff = require("./my-commonjs.cjs");

🏝️plugin 没看太懂

🏝️Javascrip 变声 文字转语音

https://github.com/w-okada/voice-changer
AI 语音开源模型下载地址：https://discord.gg/aihub

HTML5+JavaScript 实现语音合成（文字转语音）
JS 实现将文字转换为语音并自动播放最新 rvc 实时变声（附模型、安装、教程地址）voice-changer，AI 唱歌
js 版本变声器

🏝️javascript 3D 渲染

Here is a footnote reference,[1] and another.[2]

🏝️Endnotes

  1. Here is the footnote. ↩︎

  2. Here’s one with multiple blocks. ↩︎


FEATURED TAGS
javascript 文字转语音 threejs 3D sketchfab
FRIENDS
ESC