耿直咸鱼

的45°人生

0%

Posted on Edited on In , Symbols count in article: 1.7k Reading time ≈ 2 mins.

需求

实现一个输入url数组与并发数的并发数量，控制请求队列函数

核心思路

控制并发数量，关键点是利用promise，当一个请求完成之后再去发起下一个请求

  • 要完成一个继续一个，保证同时有limit个在同时执行，所以需要一个递归的执行函数run（用于执行并发limit个url）
  • 首先在函数执行时，需要将执行中的任务按顺序填满，数量为限制并发数（利用for循环执行）
  • 执行函数中，需要在执行完成后，判断是否有下一个待执行任务：（如果执行完毕的数量小于urls的长度，说明还没有执行完）
    • 声明变量i来计数，与最终需要执行的总数比较判断是否需要递归执行下一个任务

代码实现

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// url执行函数（充当着发送请求的任务）
const fn = (url) => {
    // 这里用Promise来模拟发送请求
    return new Promise((resolve, reject) => {
        console.log('完成一个任务', url, new Date());
        resolve({
            url, 
            date: new Date(),
        })
    })
}


// 控制并发url函数
/*
	传入参数为：
		1. urls[数组]
		2. limit[允许并发数]
*/
function limitQueue(urls, limit) {
    // 完成任务数量（记录）
    let fulfilledIndex = 0;
    // 填充执行队列
    for (let executeIndex = 0; executeIndex < limit; executeIndex++) {
        run();   // 执行任务
    };
    
    // 执行任务函数
    function run() {
        // 构造待执行任务，当该任务完成后，如果还有待完成得任务 就继续执行
        new Promise((resolve, reject) => {
            let url = urls[fulfilledIndex++];  // 获取当前url
            resolve(fn(url));    // resolve fn执行得结果
        }).then(() => {
            if (fulfilledIndex < urls.length) {  // 说明还有没执行完的
                run();
            }
        })
    }
}

// test 
const urls = [1,2,3,4,5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

(async _ => {
    await limitQueue(urls, 4);
})();


/*
	完成一个任务 1 2022-07-16T07:23:41.283Z
    完成一个任务 2 2022-07-16T07:23:41.287Z
    完成一个任务 3 2022-07-16T07:23:41.288Z
    完成一个任务 4 2022-07-16T07:23:41.288Z
    完成一个任务 5 2022-07-16T07:23:41.288Z
    完成一个任务 6 2022-07-16T07:23:41.289Z
    完成一个任务 7 2022-07-16T07:23:41.289Z
    完成一个任务 8 2022-07-16T07:23:41.289Z
    完成一个任务 9 2022-07-16T07:23:41.289Z
    完成一个任务 10 2022-07-16T07:23:41.289Z
    完成一个任务 11 2022-07-16T07:23:41.289Z
    完成一个任务 12 2022-07-16T07:23:41.289Z
    完成一个任务 13 2022-07-16T07:23:41.289Z
    完成一个任务 14 2022-07-16T07:23:41.289Z
    完成一个任务 15 2022-07-16T07:23:41.290Z
*/

Posted on In , Symbols count in article: 2.4k Reading time ≈ 2 mins.

Fetch API 是基于Promise的

特点

  • 使用Promise，不使用回调函数
  • 采用模块化设计
  • 通过数据流对象处理数据，可以提高网站性能

fetch()方法是暴露在全局作用域中的，包括主页面执行线程、模块和工作线程。调用这个方法，浏览器就会向给定的URL发送请求

1. 分派请求

fetch()只有一个必需的参数，多数情况下，这个参数是要获取资源的URL，并且返回一个Promise

1
2
let r = fetch('/bar');
console.log(r);     // Promise <pending>

请求完成、资源可用时，Promise会解决为一个Response对象，这个对象是API封装的，可以通过它获取相应的资源

1
2
3
4
5
6
7
8
9
const hotSongsRequest = (id) => {
    const url = BASE_URL + '/artist/top/song?id=' + id;
    fetch(url).then(response => {
        console.log(response)            // 关注Response的打印结果
    })
};

const BASE_URL = 'http://localhost:3000';
hotSongsRequest(6452);

打印结果：

2. 读取响应

通过text()方法获取结果内容，这个方法返回一个Promise

1
2
3
4
5
6
7
8
9
10
const hotSongsRequest = (id) => {
    const url = BASE_URL + '/artist/top/song?id=' + id;
    fetch(url).then(response => response.text().then(value => {
        let data = JSON.parse(value).songs;
        console.log(data);
    }))
};

const BASE_URL = 'http://localhost:3000';
hotSongsRequest(6452);

打印结果：

内容的结构通常是打平的

1
2
3
4
5
6
7
8
const hotSongsRequest = (id) => {
            const url = BASE_URL + '/artist/top/song?id=' + id;
            fetch(url).then(response => response.text())
                .then(value => console.log(JSON.parse(value).songs))
};

const BASE_URL = 'http://localhost:3000';
hotSongsRequest(6452);

3. 处理状态码和请求失败

从下图看，Response对象中含有status和statusText属性检查响应状态

补课：HTTP状态码

注意：

  • 可以显式地设置fetch()在遇到重定向时的行为，不过默认行为是跟随重定向并返回状态码不是300-399的响应，跟随重定向时，响应对象的redirected属性，会被设置为true，而状态码仍然是200
1
2
3
4
5
6
7
8
9
fetch('/permanent-redirect')
	.then((response) => {
    // 默认行为是跟随重定向直到最终URL
    // 这个例子会出现至少两轮网络请求
    // <origin url>/permanent-redirect -> <redirect url>
    console.log(response.status); // 200
    console.log(response.statusText); // OK
    console.log(response.redirected); // true
});
  • 只要服务器返回了响应，fetch()的Promise都会解决

下面代码我故意写错端口号：

1
2
3
4
5
6
7
8
const hotSongsRequest = (id) => {
            const url = BASE_URL + '/artist/top/song?id=' + id;
            let r = fetch(url);
    		console.log(r);
};

const BASE_URL = 'http://localhost:4000';
hotSongsRequest(6452);

由图可知，Promise的状态为fulfilled

这个行为是合理的，系统级网络协议已经成功完成消息的一次往返传输。至于真正的“成功”请求，则需要在处理响应时再定义。

通常状态码为200 时就会被认为成功了，其他情况可以被认为未成功

为区分这两种情况，可以在状态码非200~299 时检查Response 对象的ok 属性

  • 以下情况会引起fetch()失败而导致Promise被拒绝
    • 服务器没有响应而导致浏览器超时
    • 违反CORS、无网络连接、HTTPS 错配及其他浏览器/网络策略问题都会导致期约被拒绝

4. 自定义选项

只使用URL 时，fetch()会发送GET 请求，只包含最低限度的请求头

要进一步配置如何发送请求，需要传入可选的第二个参数init 对象

init对象可以按照键值对进行填充

1
fetch(url, init)

init配置请看链接：[fetch API](https://developer.mozilla.org/zh-CN/docs/Web/API/fetch

比如我们要发送POST请求，就可以做如下配置：

1
2
3
fetch(url, {
    method: 'POST',
})

Posted on In , Symbols count in article: 4.7k Reading time ≈ 4 mins.

<script>元素

将JavaScript插入到HTML中主要依赖的是<script>元素

<script>特性

  • async（可选）：表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载【只对外部脚本文件有效】
  • charset（可选）：使用src属性指定的代码字符集【这个属性很少使用，因为大多数浏览器不在乎它的值】
  • crossorigin（可选）：配置相关请求的CORS（跨源资源共享）设置【默认不使用CORS】
    • crossorigin="anonymous"配置文件请求不必设置凭据标志
    • crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据
  • defer（可选）：表示脚本立即下载，但是可以延迟到文档完全被解析和显示之后再执行【只对外部脚本文件有效】
  • integrity（可选）：允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Integrity）
    • 如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行
    • 这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提供恶意内容
  • language（废弃）：最初用于表示代码块中的脚本语言（如"JavaScript"、"JavaScript 1.2"或"VBScript"）【大多数浏览器都会忽略这个属性，不应该再使用它】
  • src（可选）：表示包含要执行的代码的外部文件
  • type（可选）：代替language，表示代码块中脚本语言的内容类型（也称MIME 类型）
    • 按照惯例，这个值始终都是"text/javascript"，尽管"text/javascript"和"text/ecmascript"都已经废弃了
    • JavaScript 文件的MIME 类型通常是"application/x-javascript"，不过给type 属性这个值有可能导致脚本被忽略
    • 在非IE 的浏览器中有效的其他值还有"application/javascript"和"application/ecmascript"
    • 如果这个值是module，则代码会被当成ES6 模块，而且只有这时候代码中才能出现import 和export 关键字

使用<script>的元素

  1. 在HTML中嵌入代码
  2. 通过<script>标签引入外部JavaScript代码

一般更加推荐把JavaScript代码放到外部文件中

理由如下：

  • 可维护性：JavaScript 代码如果分散到很多HTML 页面，会导致维护困难，而用一个目录保存所有JavaScript 文件，则更容易维护，这样开发者就可以独立于使用它们的HTML 页面来编辑代码
  • 缓存：浏览器会根据特定的设置缓存所有外部链接的JavaScript 文件，这意味着如果两个页面都用到同一个文件，则该文件只需下载一次，这最终意味着页面加载更快
  • 适应未来：通过把JavaScript 放到外部文件中，就不必考虑用XHTML或注释黑科技。包含外部JavaScript 文件的语法在HTML和XHTML中是一样的

注意：

  • 使用了src 属性的<script>元素不应该再在<script>和<script>签中再包含其他JavaScript 代码

    • 如果两者都提供的话，则浏览器只会下载并执行脚本文件，从而忽略行内代码。

  • 【JSONP跨域原理】<script>元素一个最为强大、同时也备受争议的特性是，它可以包含来自外部域的JavaScript，跟<img>元素很像，<script>元素的src 属性可以是一个完整的URL，而且这个URL 指向的资源可以跟包含它的HTML 页面不在同一个域中文件

  • 【XSS攻击】来自外部域的代码会被当成加载它的页面的一部分来加载和解释。这个能力可以让我们通过不同的域分发JavaScript，不过，引用了放在别人服务器上的JavaScript 文件时要格外小心，因为恶意的程序员随时可能替换这个文件。在包含外部域的JavaScript 文件时，要确保该域是自己所有的，或者该域是一个可信的来源，<script>标签的integrity 属性是防范这种问题的一个武器，但这个属性也不是所有浏览器都支持

  • 【顺序加载】在没有使用defer或者async的情况下，浏览器都会按照<script>在页面中出现的顺序依次解释它们

<script>元素位置及加载

我们知道，浏览器解析HTML的时候是从上到下依次解析的，如果把<script>标签都放在<head>标签里面，那么这就意味着必须把所有JavaScript代码都下载、解析和解释完成后，才能开始渲染页面（因为页面在浏览器解析到<body>的起始标签时才开始渲染），这也就是【JavaScript会阻塞浏览器解析HTML文件】，这样导致的后果就是页面渲染会明显延迟，期间浏览器窗口完全空白，给用户带来不好的体验

为了解决这个问题，可以采用如下方法：

把script元素放在body底部

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
	<head>
	<title>Example HTML Page</title>
	</head>
	<body>
	<!-- 这里是页面内容 -->
	<script src="example1.js"></script>
	<script src="example2.js"></script>
	</body>
</html>

这样，页面会在处理JavaScript之前进行渲染

延迟加载脚本

HTML4.01中引入defer属性，表示脚本可以立即下载但是延迟到文档完全被解析和显示之后再执行【对外部脚本文件才有效】

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
	<head>
	<title>Example HTML Page</title>
    <script defer src="example1.js"></script>
	<script defer src="example2.js"></script>
	</head>
	<body>
	<!-- 这里是页面内容 -->
	</body>
</html>

异步执行脚本

HTML5中引入async属性，表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载【只对外部脚本文件有效】

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
	<html>
	<head>
	<title>Example HTML Page</title>
	<script defer src="example1.js"></script>
	<script defer src="example2.js"></script>
	</head>
	<body>
	<!-- 这里是页面内容 -->
	</body>
</html>

defer和async的区别：

defer可以保证脚本顺序执行，但是async不能保证，因为给脚本添加async 属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本

动态加载脚本

除了通过<script>元素加载脚本，还可以通过JavaScript使用DOM API的方式向DOM中动态添加script元素加载指定的脚本

1
2
3
let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);

默认情况下，以这种方式创建的<script>元素是以异步方式加载的，相当于添加了async属性

存在问题：

  1. 并不是所有浏览器都支持async属性
  2. 以这种方式获取的资源对浏览器预加载器是不可见的，这会严重影响它们在资源获取队列中的优先级，进而影响性能

解决方式：

  1. 如果要统一动态脚本的加载行为，可以明确将其设置为同步加载

    1
    2
    3
    4
    let script = document.createElement('script');
    script.src = 'gibberish.js';
    script.async = false;
    document.head.appendChild(script);

  2. 要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们

    1
    <link rel="preload" href="gibberish.js">

拓展：<noscript>元素

<noscript>元素给不支持JavaScript的浏览器提供替代内容

<noscript>元素可以包含任何可以出现在<body>中的HTML 元素，<script>除外

在下列两种情况下，浏览器将显示包含在

  • 浏览器不支持脚本
  • 浏览器对脚本的支持被关闭

任何一个条件被满足，包含在<noscript>中的内容就会被渲染，否则，浏览器不会渲染<noscript>中的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
    <title>Example HTML Page</title>
    <script defer="defer" src="example1.js"></script>
    <script defer="defer" src="example2.js"></script>
    </head>
    <body>
    <noscript>
    <p>This page requires a JavaScript-enabled browser.</p>
    </noscript>
    </body>
</html>

这个例子是在脚本不可用时让浏览器显示一段话，如果浏览器支持脚本，则用户永远不会看到它

Posted on Edited on In , , Symbols count in article: 732 Reading time ≈ 1 mins.

方式1：展平数组再求和

数组扁平化方式有很多，请参照：数据处理 | 数组扁平化（3种）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function fn(array) {
    // 先将数组展平
    const newArray = array.flat(Infinity);
    
    // 这里我利用reduce求和
    return newArray.reduce((p, c) => p+c, 0);
}

// test
const arr = [
   5,
   7,
   [ 4, [2], 8, [1,3], 2 ],
   [ 9, [] ],
   1,
   8
];
console.log(fn(arr));  // 50

方式2：递归求和

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function fn(array) {
    let sum = 0;
    
    for (let item of array) {
        sum += Array.isArray(item) ? fn(item) : item;
    }
    return sum;
};

// test
const arr = [
   5,
   7,
   [ 4, [2], 8, [1,3], 2 ],
   [ 9, [] ],
   1,
   8
];
console.log(fn(arr));  // 50

方式3： 同2但用reduce实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function fn(array) {
    return array.reduce((acc, cur) => {
        return acc += Array.isArray(cur) ? fn(cur) : cur;
    }, 0)
}

// test
const arr = [
   5,
   7,
   [ 4, [2], 8, [1,3], 2 ],
   [ 9, [] ],
   1,
   8
];
console.log(fn(arr));  // 50

Posted on Edited on In , Symbols count in article: 849 Reading time ≈ 1 mins.

因为JavaScript的number有安全范围：[-2^53-1, 2^53]，所以在大数相加的时候会出问题

比如

1
2
3
let a = 9007199254740991;
let b = 1234567899999999999;
console.log(a+b);   // 1243575099254741000

可知，相加的结果是在整数范围内的，小于b，结果肯定不准确

实现思路

  1. 将大数转为字符串
  2. 对齐字符串
  3. 利用对齐位数相加并记录是否有进位
  4. 输出数字

代码实现

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
function sumBigInt(val1, val2) {
    // 找到两者最大长度
    let maxLen = Math.max(val1.length, val2.length);
    
    // 用0补齐字符串
    val1 = val1.padStart(maxLen, 0);
    val2 = val2.padStart(maxLen, 0);
    
    let remainer = 0;   // 余数
    let digit = 0;      // 进位
    let sum = '';
    
    for (let index = maxLen - 1; index >= 0; index--) {
        remainer = parseInt(val1[index]) + parseInt(val2[index]) + digit;
        digit = Math.floor(remainer / 10);
        sum = remainer % 10 + sum;
    }

    if (digit === 1) {
        sum = '1' + sum;
    };
    
    return sum;
}

// test
let a = '9007199254740991';
let b = '1234567899999999999';
let res = sumBigInt(a, b);
console.log(res);   // 1243575099254740990

参考

JS 实现两个大数相加？

Posted on Edited on In , Symbols count in article: 1.2k Reading time ≈ 1 mins.

实现效果

1
2
3
4
5
6
7
8
// 如下
const a = 1234567
// 转换为
const b = 1,234,567

// 如果有小数点，小数后面的不用转换
const c = 1234567.1234567
const d = 1,234,567.1234567

手写实现

方式1：遍历添加

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
function fn(num) {
    // 分隔小数
    let n = String(num).split('.');  // 转为字符串形式再进行分隔
    // 分成整数部分和小数部分
    let n1 = n[0], n2 = n[1];
    
    // 处理整数部分
    /*
    	注意添加逗号是从后面开始添加的
    	不然会出现这样的情况
    	123,456,7
    	这样是不对的，所以可以先翻转，处理完后再翻转
    */
    
    let temp = [...n1].reverse();    // 转为['7', '6', '5','4', '3', '2','1']
    
    let res = [];
    for (let index  = 0; index < temp.length; index++) {
        if (index % 3 === 0 && index !== 0) {
            res.push(',');
        }
        res.push(temp[index]);
    }
    
    res.reverse();   // 翻转
    
    let final = res.join('');
    // 如果有小数
    n2.length ? final = final + '.' + [...n2].join('') : final;
    
    return final
}

// test
const num = 1234567.1234567;
console.log(fn(num));   // 1,234,567.1234567

方式2：正则表达式 replace 【正则表达式我表示记不住啊~】

1
2
3
4
5
6
7
8
9
10
11
12
13
function fn(num) {
    let res=num.toString().replace(/\d+/, function(n){ 
        return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
           return $1+",";
         });
   })
    
    return res;
}

// test
const num = 1234567.1234567;
console.log(fn(num));   // 1,234,567.1234567

Posted on Edited on In , , Symbols count in article: 1.1k Reading time ≈ 1 mins.

灵魂拷问：数组乱序输出的方式你知道多少呢？

方式1：随机排序

随机抽取一个数，放进新数组中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 时间复杂度 O(n^2)
function randomSortArray(arr) {
    let res = [];
    while (arr.length) {
        let index = parseInt(Math.random() * arr.length);    // 可以在现有数组中随意抽取
        res.push(arr[index]);
        // 记得删除这个元素哦 不然会重复抽取
        arr.splice(index, 1);
    };
    return res;
}


// test
const arr = [1,2,3,4,5,6,7,8,9]
console.log(randomSortArray(arr))   // [8, 4, 2, 9, 7, 6, 1, 3, 5]  [温馨提示：结果勿轻信，每次都是随机的呀~]

方式2：sort法

元素之间的位置交换取决于Math.random() - 0.5的结果是大于0 小于0 还是等于0

1
2
3
4
5
6
7
function randomSortArray(arr) {
    return arr.sort(() => Math.random() - 0.5);
}

// test
const arr = [1,2,3,4,5,6,7,8,9]
console.log(randomSortArray(arr))   // [3, 6, 2, 9, 4, 8, 5, 7, 1] [温馨提示：结果勿轻信，每次都是随机的呀~]

方式3：洗牌法

将数组中的索引值随机打乱，交换当前索引值和随机变化后的索引值互换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 时间复杂度：O(n)
function randomSortArray(arr) {
    for (let i = arr.length - 1; i >= 0; i--) {
        // randomIndex 处于 0 - arr.length之间，因为值不能是arr.length,所以Math.floor向下取值
        let randomIndex = Math.floor(Math.random() * (i+1));   
        // 交换位置
        [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]];
    }
    return arr;
}

// test
const arr = [1,2,3,4,5,6,7,8,9]
console.log(randomSortArray(arr))   // [4, 3, 5, 1, 8, 7, 6, 9, 2] [温馨提示：结果勿轻信，每次都是随机的呀~]

Posted on Edited on In , , Symbols count in article: 3.5k Reading time ≈ 3 mins.

灵魂拷问：数组去重的方式你知道多少呢？

方式1：遍历 + indexOf

1
2
3
4
5
6
7
8
9
10
11
12
13
function fn(arr) {
    let res = [];
    for (let item of arr) {
        if (res.indexOf(item) === -1) {
            res.push(item);
        }
    };
    return res;
}

// test 
const arr = [1,2,3,1,2,3,5,6,7,4,3,2,6,6];
console.log(fn(arr));   // [1, 2, 3, 5, 6, 7, 4]

方式2： 遍历 + findIndex

1
2
3
4
5
6
7
8
9
10
11
12
13
function fn(arr) {
    let res = [];
    for (let item of arr) {
        if (res.findIndex(i => i === item) === -1) {
            res.push(item);
        }
    };
    return res;
}

// test 
const arr = [1,2,3,1,2,3,5,6,7,4,3,2,6,6];
console.log(fn(arr));   // [1, 2, 3, 5, 6, 7, 4]

方式3： 遍历 + find

1
2
3
4
5
6
7
8
9
10
11
12
13
function fn(arr) {
    let res = [];
    for (let item of arr) {
        if (!res.find(i => i === item)) {
            res.push(item);
        }
    };
    return res;
}

// test 
const arr = [1,2,3,1,2,3,5,6,7,4,3,2,6,6];
console.log(fn(arr));   // [1, 2, 3, 5, 6, 7, 4]

方式4： 遍历 + includes

1
2
3
4
5
6
7
8
9
10
11
12
13
function fn(arr) {
    let res = [];
    for (let item of arr) {
        if (!res.includes(item)) {
            res.push(item);
        }
    };
    return res;
}

// test 
const arr = [1,2,3,1,2,3,5,6,7,4,3,2,6,6];
console.log(fn(arr));   // [1, 2, 3, 5, 6, 7, 4]

方式5：forEach + 重复方式1234

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function fn(arr) {
    let res = [];
	arr.forEach((item) => {
        if (res.indexOf(item) === -1) {
            res.push(item);
        }
    });
    return res;
}

// test 
const arr = [1,2,3,1,2,3,5,6,7,4,3,2,6,6];
console.log(fn(arr));   // [1, 2, 3, 5, 6, 7, 4]


// 其他的换汤不换药，不写了

方式6：reduce + concat或者扩展运算符合并数组+重复方式1234

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function fn(arr) {
    return arr.reduce((acc, cur) => {
        if (acc.indexOf(cur) === -1) {
            acc  = acc.concat(cur);
            // 或者是
            // acc = [...acc, ...cur];
        };
        return acc;
    }, [])
}

// test 
const arr = [1,2,3,1,2,3,5,6,7,4,3,2,6,6];
console.log(fn(arr));   // [1, 2, 3, 5, 6, 7, 4]


// 其他的换汤不换药，不写了

方式7： filter + indexOf

利用indexOf是返回第一个搜索到的index，来过滤非第一个搜索到的index的元素

1
2
3
4
5
6
7
function fn(arr) {
    return arr.filter((item, index) => arr.indexOf(item) === index);
}

// test 
const arr = [1,2,3,1,2,3,5,6,7,4,3,2,6,6];
console.log(fn(arr));   // [1, 2, 3, 5, 6, 7, 4]

方式8： Set + 扩展运算符

最快的方式，一行搞定

利用：

  1. Set()中没有重复元素
  2. 扩展运算符：任何定义了遍历器接口的对象，都可以用扩展运算符转为数组
1
2
3
4
5
6
7
function fn(arr) {
    return [...new Set(arr)];
}

// test 
const arr = [1,2,3,1,2,3,5,6,7,4,3,2,6,6];
console.log(fn(arr));   // [1, 2, 3, 5, 6, 7, 4]

方式9： Map + keys() + 扩展运算符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function fn(arr) {
    let m = new Map();
    for (let item of arr) {
        if (!m.has(item)) {
            m.set(item, true);     // 值随便指定无所谓
        }
    };
    
    return [...m.keys()];
}

// test 
const arr = [1,2,3,1,2,3,5,6,7,4,3,2,6,6];
console.log(fn(arr));   // [1, 2, 3, 5, 6, 7, 4]

方式10：嵌套循环 + splice去重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function fn(arr) {
    for (let i = 0; i < arr.length ; i++) {
        for (let j = i+1; j< arr.length; j++) {
            if (arr[j] === arr[i]) {
                arr.splice(j, 1);
                j--;
            }
        }
    };
    return arr;
}

// test 
const arr = [1,2,3,1,2,3,5,6,7,4,3,2,6,6];
console.log(fn(arr));   // [1, 2, 3, 5, 6, 7, 4]

方式11：sort() + 嵌套循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function fn(arr) {
    arr.sort((a, b) => a - b);
    let res = [arr[0]];
    for (let i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            res.push(arr[i]);
        }
    }
    return res;
}

// test 
const arr = [1,2,3,1,2,3,5,6,7,4,3,2,6,6];
console.log(fn(arr));   // [1, 2, 3, 4, 5, 6, 7]

方式12：hasOwnProperty

1
2
3
4
5
6
7
8
9
10
function fn(arr) {
    let m = {};
    return arr.filter(function(item, index, arr){
        return m.hasOwnProperty(typeof item + item) ? false : (m[typeof item + item] = true)
    })
}

// test 
const arr = [1,2,3,1,2,3,5,6,7,4,3,2,6,6];
console.log(fn(arr));   // [1, 2, 3, 5, 6, 7, 4]

方式13： 递归去重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function fn(arr) {
    arr.sort((a,b) => a- b);
    
    function bar(index) {
        if (index >= 1) {
            if (arr[index] === arr[index-1]) {
                arr.splice(index, 1);
            }
            bar(index-1);
        }
    }
    bar(arr.length-1);
    return arr;
}

// test 
const arr = [1,2,3,1,2,3,5,6,7,4,3,2,6,6];
console.log(fn(arr));   // [1, 2, 3, 4, 5, 6, 7]

Posted on Edited on In , , Symbols count in article: 1.1k Reading time ≈ 1 mins.

灵魂拷问：数组扁平化的方式你知道多少呢？

方式1：Array.prototype.flat

1
2
3
4
5
6
7
8
function flatten(arr, depth) {
    return arr.flat(depth);
}


// test
const arr = [1,2,3, [4,5], [[6]], [[7, [8, 9]]], 10];
console.log(flatten(arr, 2))   // [1, 2, 3, 4, 5, 6, 7, [8, 9], 10]

方式2：reduce

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function flatten(arr, depth) {
    if (depth < 1) return arr;
    return arr.reduce((acc, cur) => {
        if (!Array.isArray(cur)) {
            return acc.concat(cur);
        } else {
            return acc.concat(flatten(cur, depth-1));
        }
    }, [])
}

// 改进
function flatten(arr, depth) {
    if (depth < 1) return arr;
    return arr.reduce((acc, cur) => {
        return Array.isArray(cur) ? acc.concat(flatten(cur, depth-1)) : acc.concat(cur);
    } ,[])
}

// test
const arr = [1,2,3, [4,5], [[6]], [[7, [8, 9]]], 10];
console.log(flatten(arr, 2))   // [1, 2, 3, 4, 5, 6, 7, [8, 9], 10]

方式3： 手写递归

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function flatten(arr) {
    let res = [];
    for (let item of arr) {
        if (!Array.isArray(item)) {
            res.push(item)
        } else {
            res.push(...flatten(item))
        }
    };
    return res;
}

// test
const arr = [1,2,3, [4,5], [[6]], [[7, [8, 9]]], 10];
console.log(flatten(arr))   // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Posted on Edited on In , , Symbols count in article: 841 Reading time ≈ 1 mins.

链表转数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function nodeList2Array(head) {
    let array = [];
    while (head) {
        array.push(head.val);
        head = head.next;
    };
    return array;
}

// test
// 设置一个链表   1-> 2 -> 3 -> 4 -> 5
const head = { val: 1, next: { val: 2, next: { val: 3, next: { val: 4, next: { val: 5, next: null}}}}};
const array = nodeList2Array(head);
console.log(array);  // [ 1, 2, 3, 4, 5 ]

数组转链表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function NodeList(val, next) {
    this.val = val ? val : undefined;
    this.next = next ? next : null;
}

function array2NodeList(array) {
    if (!array.length) return null;
    let dum = new NodeList(-1, null);
    let newHead = dum;
    while (array.length) {
        let node = array.shift();
        newHead.next = {
            val: node,
            next: null,
        };
        newHead = newHead.next;
    };
    return dum.next;
}

// test
const array = [ 1, 2, 3, 4, 5 ];
const head = array2NodeList(array);
console.log(head);