微语:代码适合中午敲,早晚出BUG
数组如何递归降维 JavaScript
Array.prototype.myReduce = function () {
let newArr = [];
for (let item of this) {
if (Array.isArray(item)) {
newArr = newArr.concat(item.myReduce());
} else {
newArr.push(item);
}
}
return newArr;
};
// 多维数组
let arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arr.myReduce());
ES6语法处理数组多维展开 JavaScript
flat可以展开数组,里面可以接收一个参数,例如flat(3),就是展开3维数组。或者传入Infinity展开所有
let ar = [12, 34, 3, [343, [194, [23]]]]
let st = ar.flat(Infinity)
console.log(st)
ES6构造函数新增方法 JavaScript
1.Arry.from(),将两类对象转为真正的数组,可以接收第二个参数用来处理元素。
<script>
let a = {
0: '1',
1: '2',
2: '3',
length: 3,
}
let s = Array.from(a, v => {
return v * 10
})
console.log(s)
</script>
2.Array.of(),将一组值,转为数组。
Array.of(1,2,3)//[1,2,3]
React配置二级路由 JavaScript
在layout中配置二级路由只需要在Route下面嵌套Route即可,在需要显示的地方写
例如:
配置二级App.js
<Route path='/Layout' element={<Layout />}>
{/* 热映 */}
<Route path='/Layout/Popular' element={<Popular />}></Route>
<Route path='/Layout/Cinema' element={<Cinema />}></Route>
<Route path='/Layout/My' element={<My />}></Route>
</Route>
layout页面
引入Outlet:
import { Outlet } from 'react-router-dom';
放置出口:
<div className='page'>
<Outlet />
</div>
完整代码
import React from 'react'
import './App.scss'
import Login from './views/login/Login.jsx'
import Register from './views/register/Register.jsx'
import Layout from './views/layout/Layout'
import Popular from './views/Popular/Popular'
import Cinema from './views/cinema/cinema'
import My from './views/my/My'
import { HashRouter, Route, Routes } from 'react-router-dom';
function App() {
return (
<HashRouter>
{/* routes线路匹配容器,所有组件都要放置才这里 */}
<Routes>
<Route path='/' exact element={<Login />}></Route>
{/* 登录 */}
<Route path='/Login' element={<Login />}></Route>
{/* 注册 */}
<Route path='/Register' element={<Register />}></Route>
<Route path='/Layout' element={<Layout />}>
{/* 热映 */}
<Route path='/Layout/Popular' element={<Popular />}></Route>
<Route path='/Layout/Cinema' element={<Cinema />}></Route>
<Route path='/Layout/My' element={<My />}></Route>
</Route>
</Routes>
</HashRouter>
);
}
export default App;
数组扁平化处理 JavaScript
有一个多维数组
const arr = [1, [2, 3, [4, [5]]], 6];
要求转换成:
[1,2,3,4,5,6]
可以使用一下方法解决:
方法一:
const arr = [1, [2, 3, [4, [5]]], 6];
const flattenedArr = arr.flat(Infinity);
console.log(flattenedArr);
方法二:
const flat = arr => arr.reduce((prev, curr) => Array.isArray(curr) ? [...prev, ...flat(curr)] : [...prev, curr], []);
console.log(flat(arr))
方法三:
const flat = arr => {
const flattenedArr = [];
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
flattenedArr.push(...flat(arr[i]));
} else {
flattenedArr.push(arr[i]);
}
}
return flattenedArr;
};
console.log(flat(arr));
数组快速去重的方法 JavaScript
一.使用 Set 数据结构:Set 是 ES6 中的一种数据结构,它只能存储唯一的值,可以通过将数组转换为 Set 来去除重复项,然后再将 Set 转换回数组。
const arr = [1, 2, 3, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
二.使用 Array.prototype.filter() 方法:使用 filter() 方法遍历数组,根据元素在数组中的首次出现的索引来确定是否保留该元素。
const arr = [1, 2, 3, 3, 4, 4, 5];
const uniqueArr = arr.filter((value, index, self) => self.indexOf(value) === index);
三.使用 Array.prototype.reduce() 方法:使用 reduce() 方法遍历数组,将元素添加到结果数组中,但仅在结果数组中不存在相同的元素时才添加。
const arr = [1, 2, 3, 3, 4, 4, 5];
const uniqueArr = arr.reduce((result, value) => {
if (!result.includes(value)) {
result.push(value);
}
return result;
}, []);
四.使用 ES6 中的 map() 方法:使用 map() 方法遍历数组,将元素作为键值对存储在 Map 数据结构中,然后返回 Map 的键数组。
const arr = [1, 2, 3, 3, 4, 4, 5];
const uniqueArr = Array.from(new Map(arr.map(value => [value, value])).values());
echarts如何根据窗口大小自适应 JavaScript
通过调用window.onresize 来实现,当窗口缩放之后,echarts也会重新绘制
window.onresize = function () {
myChart.resize()
}