DEV Community: NikiMunger

.slice()、.reverse()

NikiMunger — Thu, 11 Dec 2025 02:06:50 +0000

.slice()

.slice() 是 JavaScript 中数组和字符串都支持的一个方法，用来截取一部分内容，返回一个新值（不修改原值）。

语法：

arr.slice(start, end)

start：开始位置（包含）
end：结束位置（不包含）
都是可选参数
不会改变原数组
返回一个新数组

示例:

基本使用

   const arr = [10, 20, 30, 40, 50];

   arr.slice(1, 3);   // [20, 30]  取索引 1~2

省略 end

   arr.slice(2);   // [30, 40, 50]  从索引 2 一直到末尾

复制整个数组

   const copy = arr.slice();  // 完整复制

负数索引（从末尾算起）

   arr.slice(-2);     // [40, 50]   最后两个
   arr.slice(1, -1);  // [20, 30, 40]  从索引 1 开始（包含 1） 到倒数第 1 个元素结束（不包含倒数第 1 个）

.reverse()

.reverse() 是 JavaScript 数组的方法，用于原地反转数组（改变原数组）。

语法:

array.reverse()

返回值：反转后的同一个数组（数组本身）
会修改修改原数组
不会生成新数组

示例：

const arr = [1, 2, 3];
arr.reverse();

console.log(arr);  // [3, 2, 1]

可选链操作符 ?.、逻辑空赋值运算符 ??=、performance、void 操作符

NikiMunger — Sat, 06 Dec 2025 09:09:05 +0000

可选链操作符 ?.

这个 ?. 的语法叫做可选链操作符 (Optional Chaining)。
如果有值就取值，如果是 null 或 undefined 就立即停止并返回 undefined，而不会报错。

逻辑空赋值运算符 ??=

x ??= y 是 JavaScript 中的逻辑空赋值运算符 (Logical Nullish Assignment)。
只有当 x 是 null 或 undefined 时，才把 y 赋值给 x。如果 x 已经有值（哪怕是 0 或 false），则保持原样，什么都不做。

等价写法

// 写法 A：使用简写
x ??= y;

// 写法 B：原本的逻辑 (等价)
if (x === null || x === undefined) {
    x = y;
}

performance

performance 是一个专门用于“精确测量时间”的对象。

它提供比 Date.now() 更高精度（微秒级）的计时能力。

主要用于动画、性能监控、测量时间差。

void 操作符

void 操作符的用途是对一个表达式进行求值，然后丢弃其返回值，最终返回 undefined。

例如

void expression; 
// 效果是：执行 expression，返回 undefined。

模块模式

NikiMunger — Sat, 06 Dec 2025 07:50:58 +0000

模块模式是利用 IIFE 和闭包 (Closure) 的特性，模拟出一种“类”的概念，拥有公有 (Public) 和私有 (Private) 的成员与方法。

这是 JavaScript 实现封装 (Encapsulation) 的经典方式。

基本结构
模块模式通常是一个 IIFE，它返回一个对象 (Object)。这个对象包含了你可以公开访问的方法（API），而 IIFE 内部的其他变量则保持私有。

代码示例：一个计数器模块

var CounterModule = (function() {
    // 【私有变量】
    // 只能在这个 IIFE 内部访问，外部无法直接修改
    var count = 0;

    // 【私有函数】
    function logResult() {
        console.log("当前数值: " + count);
    }

    // 【返回公有对象】
    // 这里利用了闭包：返回的方法依然持有对 count 的引用
    return {
        increment: function() {
            count++;
            logResult();
        },
        decrement: function() {
            count--;
            logResult();
        },
        reset: function() {
            count = 0;
            console.log("计数器已重置");
        }
    };
})();

// 使用模块
CounterModule.increment(); // 输出: 当前数值: 1
CounterModule.increment(); // 输出: 当前数值: 2
CounterModule.reset();     // 输出: 计数器已重置

// 试图直接访问私有变量
console.log(CounterModule.count); // undefined (被保护了)

原理分析：当 IIFE 执行完毕后，通常局部变量会被销毁。但因为 increment 等函数被返回并赋值给了外部的 CounterModule，它们保留了对 IIFE 作用域的引用（闭包），所以 count 变量得以保留在内存中，但外界只能通过这些“接口”去操作它。

js传参、typeof

NikiMunger — Sat, 06 Dec 2025 07:25:26 +0000

js传参

在 JavaScript 里，函数参数默认就是可选的，不传 = undefined，函数作者必须自己判断要不要用它

typeof

if (typeof onComplete === 'function') onComplete();

因为 onComplete 可能是：

没传（undefined）
传了 null
传了一个字符串、数字、对象……
也可能传了一个真正的函数

如果直接写：

onComplete();

但 onComplete 不是函数，就会报错：

TypeError: onComplete is not a function

所以先检查它是不是函数：

typeof onComplete === 'function'

只有在值为 "function" 时才调用。

typeof 的结果

值	typeof 返回值
函数	`"function"`
数字	`"number"`
字符串	`"string"`
对象（含数组）	`"object"`
null	`"object"`（历史遗留）
undefined	`"undefined"`

svg中的描边属性

NikiMunger — Wed, 26 Nov 2025 08:31:06 +0000

svg中的描边属性

stroke
stroke 是 SVG 中图形的“描边”颜色。

<circle cx="50" cy="50" r="40" stroke="red" fill="none" />

stroke-width
描边宽度
```
<circle stroke-width="5" />
```
stroke-linecap
线条端点的形状（caps = “帽子”）

值效果

butt 平头（默认）

round 圆头

square 方形头，并且略向外延伸
```
<line stroke-linecap="round" />
```
stroke-linejoin
拐角的形状（joins = “连接”）

值效果

miter 尖角

round 圆角

bevel 斜切角
stroke-dasharray
虚线模式（超级常用，做动画必用！）
```
stroke-dasharray="dash gap dash gap ..."
```
例如：
```
<circle stroke-dasharray="5 10" />
```
意味着：
画 5 的线
空 10 的间隔
再画 5
再空 10
…

值	效果
butt	平头（默认）
round	圆头
square	方形头，并且略向外延伸

值	效果
miter	尖角
round	圆角
bevel	斜切角

进度条svg动画

NikiMunger — Wed, 26 Nov 2025 07:51:23 +0000

<svg width="300" height="100">
  <path id="p"
        d="M10 50 L290 50"
        stroke="green"
        stroke-width="4"
        fill="none" />
</svg>

<script>
  const p = document.getElementById('p');
  const len = p.getTotalLength();

  p.style.strokeDasharray = len;
  p.style.strokeDashoffset = len;

  void p.getBoundingClientRect();
  p.style.transition = "stroke-dashoffset 2s";
  p.style.strokeDashoffset = 0;

</script>

`d="M10 50 L290 50"`

包含两个指令：

M10 50
M = moveTo
作用：将画笔移动到 (10, 50)，不画线。
L290 50
L = lineTo
作用：从当前点画一条直线到 (290, 50)

作用：

告诉 SVG 要画哪一条线
决定路径的长度，用于动画计算

思路

通过p.style.strokeDasharray = len;画虚线

虚线：线段空白线段空白 ...
线段和空白的长度都是len
通过p.style.strokeDashoffset = len;使虚线的起点向前移动 len 的长度

移动前：
线段空白线段空白 ...

移动后：
(线段) 空白线段空白 ...
括号中的线段向前移动，移出了视口，所以表现为空白
void p.getBoundingClientRect();强制浏览器 reflow
确保浏览器将p.style.strokeDashoffset的值先设为len，再设为0，
而不是因为样式批处理优化直接将p.style.strokeDashoffset的值设置为0
动画
```
p.style.transition = "stroke-dashoffset 2s";
p.style.strokeDashoffset = 0;
```
p.style.strokeDashoffset从len变为0。
逐渐增长的进度条，是因为随着p.style.strokeDashoffset的减小，移出窗口的第一段线段逐渐向后移动变得可见。

createElementNS、setAttribute()、SVG 的 viewBox 属性、`

NikiMunger — Wed, 26 Nov 2025 01:25:23 +0000

createElementNS

document.createElementNS(namespaceURL, tagName)

namespaceURL（命名空间 URL）
这是一个固定的字符串，用来告诉浏览器这个标签属于哪个规范。
SVG 固定用：
```
'http://www.w3.org/2000/svg'
```
MathML 用：
```
'http://www.w3.org/1998/Math/MathML'
```
tagName（元素名称）
也就是你要创建的标签名称，例如：
- 'svg'
- 'circle'
- 'rect'
- 'path'

示例：在 SVG 命名空间里创建一个 <svg> 标签

document.createElementNS('http://www.w3.org/2000/svg', 'svg');

setAttribute()

setAttribute(name, value) 是 DOM API，用于：
给元素添加 / 修改 HTML 或 SVG 的属性（attribute）

它可以操作任何标签上的属性，包括：

HTML 属性
SVG 属性
自定义属性（data-*）
布尔属性（disabled）
非标准属性（自定义扩展）

最常用形式

element.setAttribute('属性名', '属性值');

为什么要用 setAttribute？

因为某些属性不能直接用点语法赋值，尤其是：

SVG 属性
带中划线的属性（如 stroke-width、data-id）
不存在于 DOM property 的 HTML 属性

例如：

circle.stroke-width = 4;

不会生效

circle.setAttribute('stroke-width', 4);

才能生效

SVG 的 viewBox 属性

viewBox 决定了：
SVG 内部的“坐标系统范围”是什么，以及如何映射到屏幕上的显示区域。
它定义了你在 SVG 画布里“看到的那一块区域”。

viewBox 的语法

viewBox="minX minY width height"

minX：视图窗口的左上角 X 坐标
minY：视图窗口的左上角 Y 坐标
width：视图窗口的宽度
height：视图窗口的高度

SVG 的两个坐标系统

SVG 有两个坐标系统：外部尺寸（实际显示大小）由 width / height 或 CSS 控制
内部坐标系（viewBox 决定）

例子：

<svg width="200" height="200" viewBox="0 0 100 100">

含义：

外部尺寸 = 200x200 像素
内部绘图坐标 = 100x100 单位
相当于你把 100x100 的世界压缩放大到 200x200 来显示

结果：

在 SVG 里 (0,0) 是左上角
(100,100) 是右下角
一个单位 = 2 像素（因为 200/100 = 2）

`<svg>`

所有 SVG 图形（rect, circle, path）,都必须放在 <svg> 内才能渲染。

元素	作用	与对方关系
`<svg>`	整个进度条的画布	父节点
`<rect>`	画出来的边框	子节点

强制浏览器 reflow（重排）

NikiMunger — Mon, 24 Nov 2025 03:00:29 +0000

访问某些布局相关属性（offsetLeft / offsetTop / offsetWidth / clientWidth / getComputedStyle 等）会让浏览器强制刷新布局，以便获得一个最新、真实的数值。

浏览器为何会“强制重排”

浏览器为了性能会进行 layout（重排）和 paint（重绘）的优化：

不会每次 DOM 改变就立即计算布局
会等待、合并多个 DOM 改动
等到下一帧（约 16ms），统一执行布局计算

但是！当 JS 访问某些属性时，浏览器必须给出确切数值！
例如：

indicator.offsetLeft

offsetLeft 是个布局属性（layout property）
浏览器如果要返回正确的值，就必须确保布局是最新的。

因此浏览器会：

立即执行 layout（重排）
更新所有 layout 相关计算
返回最新的 offsetLeft 值

这称为：
Forced Synchronous Layout（强制同步布局，也叫强制 reflow）

会触发强制 reflow的属性

属性	会强制 Reflow
`offsetLeft / offsetTop`	✔
`offsetWidth / offsetHeight`	✔
`scrollWidth / scrollHeight`	✔
`clientWidth / clientHeight`	✔
`getBoundingClientRect()`	✔
`getComputedStyle()`	✔

真实使用场景：CSS 动画重触发

最典型的代码：

element.classList.remove("animate");
void element.offsetWidth; // 强制 reflow
element.classList.add("animate");

这能让 CSS 动画从头开始执行。

为什么？

移除类 → 动画属性被移除，但浏览器还没计算布局
强制 reflow → 浏览器计算新的布局
再添加类 → 动画重新触发

如果没有 reflow，浏览器可能把两次操作合并，导致动画不重新触发。

transition、组合选择器、.parentNode、.classList

NikiMunger — Mon, 24 Nov 2025 02:59:20 +0000

transition

transition 用来在两个 CSS 状态之间平滑过渡

可过渡的属性

数值（width、height、opacity、margin 等）
颜色（background-color）
变换（transform）
以及其它明确可插值的属性。

timing-function（速度曲线）

linear：匀速
ease：默认（慢 — 快 — 慢）
ease-in：慢到快（起始慢）
ease-out：快到慢（结束慢）
ease-in-out：两头慢，中间快

组合选择器

.happy-fishing-indicator.red { ... }

它等于选择：

class 里同时包含
happy-fishing-indicator
且
red
的元素。

必须满足：

<div class="happy-fishing-indicator red"></div>

才能被选中。

组合选择器的好处

因为 indicator 本身有一个基础类：

indicator.className = 'happy-fishing-indicator';

再切换颜色时，程序只是动态增加第二个类：

indicator.classList.add('red');
indicator.classList.add('yellow');
indicator.classList.add('green');

.parentNode

.parentNode 是 DOM 节点对象的一个属性，表示当前节点的父节点。

语法

node.parentNode

返回一个 Node 对象，通常是：

一个元素节点（Element）
或者 document
或者 null（没有父节点时）

简单示例

<div id="box">
  <p id="text">Hello</p>
</div>

const text = document.getElementById('text');
console.log(text.parentNode);

输出：

<div id="box">...</div>

常见用途

删除自己（非常常见）

const btn = document.querySelector('.delete');

btn.onclick = () => {
  btn.parentNode.remove();  
};

父节点删除 → 整个子节点一起删除。

找到上层结构（如卡片、列表项）

const btn = document.querySelector('.close-btn');

btn.addEventListener('click', () => {
  const card = btn.parentNode; // 卡片容器
  card.classList.add('hidden');
});

.classList

.classList 是 DOM 元素的一个属性，返回一个类似数组的 DOMTokenList 对象，用来操作元素的 CSS class。

方法详解

add()
增加一个或多个 class：

el.classList.add('active');
el.classList.add('a', 'b', 'c'); // 一次添加多个

如果已经存在，不会重复添加。

remove()
删除一个或多个 class：

el.classList.remove('active');
el.classList.remove('a', 'b', 'c');

不存在也不会报错。

toggle()
如果存在 → 删除
如果不存在 → 添加

el.classList.toggle('active');

可传第二个参数：

el.classList.toggle('open', true);  // 强制添加
el.classList.toggle('open', false); // 强制删除

这在需要“强制状态”非常有用。

contains()
检测 class 是否存在：
```
if (el.classList.contains('selected')) {
  //...
}
```
返回 true / false。
replace()
替换 class：
```
el.classList.replace('old', 'new');
```
相比 remove + add 更简洁。

onclick和addEventListener、inset

NikiMunger — Fri, 21 Nov 2025 15:33:03 +0000

onclick和addEventListener

onclick = ...

只能设置一个处理函数。
如果你写多次，后面的会覆盖前面的。

mini.onclick = () => console.log('A');
mini.onclick = () => console.log('B'); 
// 最后只有 B 有效

addEventListener()

可以对同一个事件添加多个监听器，不会互相覆盖。

mini.addEventListener('click', () => console.log('A'));
mini.addEventListener('click', () => console.log('B'));
// A 和 B 都会执行

css中的inset

inset 是 CSS 中用来设置元素“定位偏移”的简写属性，等同于同时设置：

top
right
bottom
left 它主要用于绝对定位 / 固定定位 / 相对定位的元素（position: absolute / fixed / relative / sticky）。

inset 的语法支持 1～4 个值：

inset: <top> <right> <bottom> <left>;

或者简写方式

写法	展开含义
`inset: 10px;`	top=10px, right=10px, bottom=10px, left=10px
`inset: 10px 20px;`	top=10px, bottom=10px, right=20px, left=20px
`inset: 10px 20px 30px;`	top=10px, right=20px, left=20px, bottom=30px
`inset: 10px 20px 30px 40px;`	top=10px, right=20px, bottom=30px, left=40px

在js数组中 undefined和空槽（empty slot）的区别

NikiMunger — Fri, 21 Nov 2025 15:22:32 +0000

undefined 是一个真实存在的值，数组里真的存了一个元素，只是值是 undefined。
空槽（empty slot）根本没有元素，索引不存在，就像那个格子不存在。

区别

1.创建方式不同

const a = [1, undefined, 3];
const b = [1, , 3];   // 注意这里的逗号 ,, 产生了空槽

a[1] 的值是 undefined（数组里真的有一个元素）
b[1] 是一个“空槽”，数组索引 1 处根本没有元素

2."in" 运算符区别

1 in a   // true，因为有元素，只是值是 undefined
1 in b   // false，因为它是空槽，不存在元素

3.数组长度长度一样，但内容不同

a.length // 3
b.length // 3

长度一样，但内部结构不一样。

4.forEach / map / filter 之类对空槽会跳过

a.forEach((v,i)=>console.log(i, v));
// 输出：0 1, 1 undefined, 2 3

b.forEach((v,i)=>console.log(i, v));
// 输出：0 1, 2 3    (索引1被跳过)

5.JSON.stringify 的区别

JSON.stringify([1, undefined, 3])
// "[1,null,3]"   undefined 转成 null

JSON.stringify([1, , 3])
// "[1,null,3]"   空槽也转成 null

注意：虽然结果一样，但内部意义不同。

6.map 的行为更明显

[1, undefined, 3].map(x => 100)
// [100, 100, 100]
[1, , 3].map(x => 100)
// [100, , 100]   // 注意空槽保留为空槽！

空槽不会被 map 处理，也不会变为 undefined，而是继续保持空槽。

7.数组序列化展开时的区别

[...a] // [1, undefined, 3]

[...b] // [1, undefined, 3]   <-- 空槽在展开时会变成 undefined

创建空槽的行为

Array 构造函数（单个数字参数）
```
const a = Array(3);  // [empty x 3]
```

数组字面量中使用省略的逗号

const a = [1, , 3];  // 中间是空槽

使用 delete 删除数组元素

const a = [1,2,3];
delete a[1];         // [1, empty, 3]

使用稀疏数组赋值跳过索引

const a = [];
a[2] = 'x';          // [empty x 2, "x"]

使用 map/filter/slice 等操作保留空槽

[ , 1, , 2].map(x => x)  // 仍然是 [empty, 1, empty, 2]

使用 holes 的数组做扩展、解构（会变 undefined，但原数组仍然有空槽）

const a = [ , 2, 3];
const b = [...a];   // b 里不是空槽，是 undefined
                    // a 自身仍然有空槽

创建 undefined 元素的行为

普通赋值

const a = [];
a[0] = undefined;   // 明确设置

使用扩展运算符展开空槽数组

const a = [ , 1];
const b = [...a];   // b = [undefined, 1]

使用解构赋值展开空槽

const [a, b] = [, 1]; // a === undefined

JSON.parse 解析含 null 的 json（与 undefined 不同，但不会产生空槽）
```
JSON.parse("[1, null, 3]")  // [1, null, 3]
```
（这里不会产生空槽，而是“null”，我放在这里是为了对比。）

map/filter 等回调返回 undefined

[1,2,3].map(x => undefined); // [undefined, undefined, undefined]

函数返回 undefined 导致数组填充 undefined

const a = Array.from([1,,3], x => x);  
// => [1, undefined, 3]

直接写 undefined 作为数组元素
```
[undefined, 2, undefined]
```

clipPath、contain: layout style

NikiMunger — Thu, 20 Nov 2025 15:05:02 +0000

clipPath

clip-path是 CSS 中非常强大和实用的属性，用来裁剪(clip)元素的可见区域，就像用“剪刀”把元素切成你想要的形状。
它并不改变元素的真实大小，只改变显示出来的部分。

常见语法

clip-path: circle();
clip-path: ellipse();
clip-path: polygon();
clip-path: inset();

inset(top right bottom left) 的含义

1.inset(0 0 0 0) —— 裁剪矩形区域
inset(top right bottom left) 的含义是：
从元素的每一侧向内“裁剪”多少距离。
写法：

inset(上 右 下 左)

所以，inset(0 0 0 0)表示元素完全不被裁剪，裁剪区域刚好等于整个元素本身的矩形。

2.round 16px —— 裁剪矩形的圆角半径
加上 round 是用来给裁剪区域加圆角的。

round 16px

表示：
裁剪的矩形区域四个角都是 16px 的圆角。

为什么要用 clip-path 而不用 border-radius？

可以硬裁剪子元素（包括溢出内容）

contain: layout style;

contain: layout style; 是 CSS 中 Containment（包含）功能的一种写法，用来告诉浏览器：

这个元素是一个独立的区域，它在 layout（布局）和 style（样式计算）两方面都跟外界隔离，可以单独优化。
这是浏览器的性能优化机制。

1.contain 是什么？

contain 用来告诉浏览器：

我（这个元素）和外面的世界互不影响
因此你可以更高效地重绘 / 重排，不必从根节点开始重算

也就是说：
当这个元素内部变化时，浏览器不需要重新做全局的 layout/style，只用重新计算这个区域。

常用于：

大型页面
无限滚动列表
组件化 UI（React/Vue 中常用）

2.contain: layout style

contain 值	作用
layout	元素内部的布局不会影响外部布局
style	元素的 CSS（如 counters、属性继承）不会影响外部

DEV Community: NikiMunger

.slice()、.reverse()

.slice()

.reverse()

可选链操作符 ?.、逻辑空赋值运算符 ??=、performance、void 操作符

可选链操作符 ?.

逻辑空赋值运算符 ??=

performance

void 操作符

模块模式

js传参、typeof

js传参

typeof

typeof 的结果

svg中的描边属性

svg中的描边属性

进度条svg动画

d="M10 50 L290 50"

思路

createElementNS、setAttribute()、SVG 的 viewBox 属性、``

createElementNS

setAttribute()

最常用形式

为什么要用 setAttribute？

SVG 的 viewBox 属性

viewBox 的语法

SVG 的两个坐标系统

<svg>

强制浏览器 reflow（重排）

浏览器为何会“强制重排”

会触发强制 reflow的属性

真实使用场景：CSS 动画重触发

transition、组合选择器、.parentNode、.classList

transition

相关属性

可过渡的属性

timing-function（速度曲线）

组合选择器

组合选择器的好处

.parentNode

语法

简单示例

常见用途

.classList

方法详解

onclick和addEventListener、inset

onclick和addEventListener

onclick = ...

addEventListener()

css中的inset

在js数组中 undefined和空槽（empty slot）的区别

区别

创建空槽的行为

创建 undefined 元素的行为

clipPath、contain: layout style

clipPath

常见语法

inset(top right bottom left) 的含义

为什么要用 clip-path 而不用 border-radius？

contain: layout style;

1.contain 是什么？

2.contain: layout style

`d="M10 50 L290 50"`

createElementNS、setAttribute()、SVG 的 viewBox 属性、`

`<svg>`