Junjie Blog

JavaScript 平滑回到顶部

Wed, 15 Sep 2021 00:00:00 GMT

scrollIntoView()

Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

使用scrollIntoView()方法实现平滑回到顶部。

语法

element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数

参数

alignToTop (可选) 布尔值

如果为true ，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"} 。这是这个参数的默认值。
如果为false ，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。

scrollIntoViewOptions (可选) 一个包含下列属性的对象：

behavior 可选
定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。
block 可选
定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline 可选
定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

示例

var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

注意

取决于其它元素的布局情况，此元素可能不会完全滚动到顶端或底端。

代码实现

DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平滑回到顶部title>
    <style>
        body {
            height: 2000px;
        }

        #btn {
            width: 100px;
            height: 100px;
            background: red;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    style>
head>

<body>
<button id="btn">点击回到顶部button>
<script>
    let element = document.getElementById("btn");
    element.onclick = () => {
        let body = document.querySelector('body');
        body.scrollIntoView({
            behavior: 'smooth',
            block: 'start',
        })
    }
script>
body>

html>

JavaScript数组方法

Fri, 10 Sep 2021 00:00:00 GMT

Array.from()

Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

console.log(Array.from('foo')); // ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x)); // [2, 4, 6]

Array.isArray()

Array.isArray() 用于确定传递的值是否是一个 Array。

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('string');   // false
Array.isArray(undefined);  // false

Array.of()

Array.of() 方法创建一个具有可变数量参数的新数组实例，支持任意的参数数量或类型。

Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Array.prototype.concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

Array.prototype.every()

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

const arr = [1, 30, 39, 29, 10, 13];
console.log(arr.every((val) => val < 40)); // true

Array.prototype.fill()

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

const array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

Array.prototype.filter()

filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

Array.prototype.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

Array.prototype.findIndex()

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3

Array.prototype.flat()

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2));
// expected output: [0, 1, 2, [3, 4]]

Array.prototype.forEach()

forEach() 方法对数组的每个元素执行一次给定的函数。

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

Array.prototype.includes()

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

Array.prototype.indexOf()

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

Array.prototype.join()

join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

Array.prototype.keys()

keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

for (const key of iterator) {
    console.log(key);
}

// expected output: 0
// expected output: 1
// expected output: 2

Array.prototype.lastIndexOf()

lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo'));
// expected output: 3

console.log(animals.lastIndexOf('Tiger'));
// expected output: 1

Array.prototype.map()

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

Array.prototype.pop()

pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。

JavaScript Demo: Array.pop()
const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]

Array.prototype.push()

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

JavaScript Demo: Array.push()
const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

Array.prototype.reduce()

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被作为初始值 initialValue，迭代器将从第二个元素开始执行（索引为 1 而不是 0）。

下面的例子能够帮助你理解 reduce() 的用处——计算数组所有元素的总和：

JavaScript Demo: Array.reduce()
const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
    (previousValue, currentValue) => previousValue + currentValue,
    initialValue
);

console.log(sumWithInitial);
// expected output: 10

Array.prototype.reduceRight()

reduceRight() 方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

JavaScript Demo: Array.reduceRight()
const array1 = [[0, 1], [2, 3], [4, 5]];

const result = array1.reduceRight((accumulator, currentValue) => accumulator.concat(currentValue));

console.log(result);
// expected output: Array [4, 5, 2, 3, 0, 1]

Array.prototype.reverse()

reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

JavaScript Demo: Array.reverse()
const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]

// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// expected output: "array1:" Array ["three", "two", "one"]

Array.prototype.shift()

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

JavaScript Demo: Array.shift()
const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

Array.prototype.slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end ）。原始数组不会被改变。

JavaScript Demo: Array.slice()
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

Array.prototype.some()

some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。

备注：

如果用一个空数组进行测试，在任何情况下它返回的都是false。

JavaScript Demo: Array.some()
const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

Array.prototype.sort()

sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的

由于它取决于具体实现，因此无法保证排序的时间和空间复杂性。

JavaScript Demo: Array.sort()
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

Array.prototype.splice()

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。

JavaScript Demo: Array.splice()
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

Array.prototype.toString()

toString() 返回一个字符串，表示指定的数组及其元素。

JavaScript Demo: Array.toString()
const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());
// expected output: "1,2,a,1a"

Array.prototype.unshift()

unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度（该方法修改原有数组）。

JavaScript Demo: Array.unshift()
const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

Array.prototype.values()

values() 方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值。

JavaScript Demo: Array.values()
const array1 = ['a', 'b', 'c'];
const iterator = array1.values();

for (const value of iterator) {
    console.log(value);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

Git历史版本回滚

Sun, 05 Sep 2021 00:00:00 GMT

查看历史记录 如果内容偏多，需要使用方向键上下滚动，按q退出

git log
git log --oneline
git reflog 查看所有操作记录

进行版本回退时，不需要使用完整的哈希字符串，前七位即可. 版本切换之前，要提交当前的代码状态到仓库

找到想要回退的版本号之后，在本地 Git 仓库执行如下命令：

git reset --hard <版本号> 或者 git reset --soft <版本号>

对于上述两条命令，仅有--hard和--soft参数的不同，两者的区别是：

--hard，抛弃当前工作区的修改
--soft，回退到之前的版本，但保留当前工作区的修改，可以重新提交

执行完本地回滚之后，还需要执行如下命令，同步远端的内容：git push origin <分支名>

在执行上述命令的时候，可能会提示本地的版本落后于远端的版本，因此我们还需要在上述命令中加上--force参数：git push origin <分支名> --force

回退命令：

git reset --hard HEAD^ 回退到上个版本
git reset --hard HEAD~3 回退到前3次提交之前，以此类推，回退到n次提交之前
git reset --hard commit_id 退到/进到，指定commit的哈希码（这次提交之前或之后的提交都会回滚）

回滚后提交可能会失败，必须强制提交

强推到远程：(可能需要解决对应分支的保护状态)

git push origin HEAD --force

WebStorm 键盘快捷键

Fri, 03 Sep 2021 00:00:00 GMT

快捷键	作用
双倍的Shift	随处搜索在 WebStorm、您的项目和当前 Git 存储库中快速查找任何文件、操作、类、符号、工具窗口或设置。
Ctrl+Shift+A	寻找行动查找命令并执行它、打开工具窗口或搜索设置。
双倍的Ctrl	运行任何东西启动运行/调试配置，运行 npm 和 yarn 脚本，并重新打开最近的项目。
Alt+Enter	显示上下文操作快速修复突出显示的错误和警告，改进和优化代码的意图操作。
F2 Shift+F2	在代码问题之间导航跳转到下一个或上一个突出显示的错误。
Ctrl+E	查看最近的文件从列表中选择最近打开的文件。
Ctrl+W Ctrl+Shift+W	扩展或缩小选择根据特定的代码结构增加或减少选择范围。
Ctrl+/ Ctrl+Shift+/	添加/删除行或块注释注释掉一行或一段代码。
Alt+F7	查找用法显示整个项目中使用代码元素的所有位置。

Web开发简介

Wed, 01 Sep 2021 00:00:00 GMT

Web 开发是创建 Web 应用程序或网站的过程。创建 Web 应用程序的一种方法是将逻辑分离为其服务器端和客户端部分。这个过程通常涉及具有不同专业的开发人员。让我们更多地了解 Web 开发的这一方面。

前端和后端开发

习惯上将 Web 开发分为两部分：前端和后端。

前端开发，也称为客户端编程，是用户界面的开发（换句话说，Web 应用程序/站点的可视化部分）以及编写与用户交互的逻辑。简而言之，前端开发负责用户打开网页时看到的所有内容以及与之交互的所有内容。

后端开发，也称为服务器端编程，是Web应用程序内部服务器端的开发，是其逻辑的实现。后端开发包括用户看不到的东西，以及在他们的浏览器和计算机之外发生的事情。

开发者

通常，不同的专家负责前端和后端开发：分别是前端和后端开发人员。为了更好地理解它们之间的区别，请查看这些开发人员所拥有的任务示例。

前端开发人员根据从设计师那里收到的布局制作网页。他们负责网站在不同浏览器和不同设备上的正确运行和显示。感谢前端开发人员，交互元素出现在网页上。
后端开发人员编写应用程序的基本业务逻辑、处理用户数据、在数据库中组织信息存储、实施数据安全和保护、优化应用程序以实现最大速度和可扩展性。

此外，有些人参与了 Web 应用程序开发的所有阶段：从客户端部分的创建到服务器部分的实现。这样的程序员被称为全栈 开发人员。

分离客户端和服务器部分

客户端和服务器端是 Web 开发中的术语，它们告诉我们应用程序代码在哪里执行。但是为什么我们要把客户端和服务器部分分开呢？为什么我们需要将用户界面表示和服务逻辑分开？有几个原因：

我们可以独立替换前端和后端逻辑，最大限度地减少错误数量。例如，我们可以在不修改常用流程的情况下改变网站的外观；
我们需要一个服务器来存储和结构化数据；
客户端的数据可能会过时，但服务器的答案通常是最新的；
在几台服务器上管理数据流和编排流程比在数百万个客户端上更容易；
有些任务不需要从服务器更新，在本地执行它们会更快。

前端和后端如何通信

为了使 Web 服务正常工作，客户端和服务器部分必须交互。这通过HTTP 请求发生。在最基本变体中，前端和后端之间的交互发生如下：

客户端使用 HTTP 协议向服务器发送请求以检索或修改数据。
后端处理此请求并通过 HTTP 返回响应。
前端接收响应并对其进行处理，然后将结果显示给用户。

在客户端和服务器之间交换数据的最流行格式是JSON ，但确实存在其他格式。标记语言有助于以用户友好的方式显示来自服务器的响应。最常用的标记语言是HTML和XML。

结论

在本主题中，您了解了 Web 开发过程的大致组织方式、服务器和客户端部分的划分以及这些部分如何相互交互。通常不同的专家在服务器和客户端部分工作：后端和前端开发人员。但也有全栈开发人员——一种同时进行前端和后端开发的通用开发人员。看你喜欢哪个专业。

Welcome

Thu, 26 Aug 2021 00:00:00 GMT

博客文章支持 Docusaurus Markdown 功能, 如 MDX.

提示

使用 React 的强大功能创建交互式博客文章。

<button onClick={() => alert('button clicked!')}>Click me!</button>

Docusaurus 博客功能由 blog plugin提供支持.

只需将 Markdown 文件（或文件夹）添加到 blog 目录。

可以将普通博客作者添加到 authors.yml.

可以从文件名中提取博客文章日期，例如：

2019-05-30-welcome.md
2019-05-30-welcome/index.md

博客文章文件夹可以方便地放置博客文章图片：

该博客也支持标签！

如果您不想要博客：只需删除此目录，并在 Docusaurus 配置中使用 blog: false。

Junjie Blog

JavaScript 平滑回到顶部

scrollIntoView()​

语法​

参数​

示例​

代码实现​

JavaScript数组方法

Array.from()​

Array.isArray()​

Array.of()​

Array.prototype.concat()​

Array.prototype.every()​

Array.prototype.fill()​

Array.prototype.filter()​

Array.prototype.find()​

Array.prototype.findIndex()​

Array.prototype.flat()​

Array.prototype.forEach()​

Array.prototype.includes()​

Array.prototype.indexOf()​

Array.prototype.join()​

Array.prototype.keys()​

Array.prototype.lastIndexOf()​

Array.prototype.map()​

Array.prototype.pop()​

Array.prototype.push()​

Array.prototype.reduce()​

Array.prototype.reduceRight()​

Array.prototype.reverse()​

Array.prototype.shift()​

Array.prototype.slice()​

Array.prototype.some()​

Array.prototype.sort()​

Array.prototype.splice()​

Array.prototype.toString()​

Array.prototype.unshift()​

Array.prototype.values()​