JavaScript提取字符串的几种方式
第一种:
str = `"bar" and "foo" and "baz"`; reg = /\"(.*?)\"/g // 第一种方式 while (true) { let a = reg.exec(str) if (a === null) break; console.log(a[1]) } // 成功提取 // index.js:7 bar // index.js:7 foo // index.js:7 baz第二种:
// 第二种方式 console.log(str.match(reg)) // (3) [""bar"", ""foo"", ""baz""] // 第二种方式有点小遐思 会多双引号第三种:
// 第三种方式 利用replace str.replace(reg, function(all, first) { console.log(first) }) // 完美的成功输出了第四种:
// 第三种方式 for (const i of str.matchAll(reg)) { console.log(i) } /* (2) [""bar"", "bar", index: 0, input: ""bar" and "foo" and "baz"", groups: undefined] (2) [""foo"", "foo", index: 10, input: ""bar" and "foo" and "baz"", groups: undefined] (2) [""baz"", "baz", index: 20, input: ""bar" and "foo" and "baz"", groups: undefined] */本章要点:
第三种方式是利用replace的高阶用法。replace的第二个参数不仅仅是可以传入需要替换的字符串,还可以传入一个函数,函数的第一个参数是所有匹配,第二个参数是捕获字符串
第四种方式显得更加简单利用matchAll生成可迭代对象然后进行遍历
标签: javascript ES6
JavaScript去除首尾空格
不管在哪种语言中去除字符串首尾空格都是会经常用到的
JavaScript中我们经常用的去除首尾空格方式是替换,比如:
str = ' hello world ' console.log(str.replace(/^\s+|\s+$/g, '')) // hello world而如今ES10将会让我们更加方便的去除空格
console.log(str.trimStart()) console.log(str.trimEnd())

JavaScript此外还提供了str.trimStart()的别名 str.trimLeft()
还有str.trimEnd()的别名 str.trimRight()
标签: javascript ES6
JavaScript中的扁平化输出
arr = [1, [2, [3, [4, 5, [6, [7, [8, [9]]]]]]]] console.log(arr.flat(10)) // 递归的层数 ,如果指定底层数大于数组实际层数将按照数组最高层数执行
arr = [1,2,3]; console.log(arr.map(x => [x*2])) // 输出的是 [Array(1), Array(1)....]有没有办法直接输出 2,4,6呢?
之前我们讲过flat,这时候可以在map之后加上flat即可
console.log(arr.map(x => [x*2]).flat()) //输出的是 [2,4,6]flat还提供一个API
就不需要我们写的这么多了
console.log(arr.flatMap(x => [x*2])) // 同样输出 [2,4,6]
标签: javascript ES6
React时间轴
https://github.com/stephane-monnot/react-vertical-timeline基本上手就能用
不过里面的 icon 并没有给出详细的说明
icon 用这个就好了
https://github.com/react-icons/react-icons
这个具体的库在这
https://react-icons.netlify.com/#/
很全
然后里面的icon颜色的相关设置
如果想语义话的颜色
可以看
https://www.w3schools.com/colors/colors_names.asp
标签: javascript ES6
如何在react中使用videojs组件
首先需要node安装video-react包
然后在index.html中添加以下
<link rel="stylesheet" href="https://video-react.github.io/assets/video-react.css" />
在需要使用的地方首先引入
import {Player} from 'video-react';

最后使用组件即可
<Player playsInline src="https://zytbk.oss-cn-beijing.aliyuncs.com/1.mp4" />
标签: javascript ES6
BrowserRouter与HashRouter的区别
关于BrowserRouter和HashRouter我百度了一下,看了网上说的一大堆总结了以下精华:
BrowerRouter是为老版本浏览器提供的hash路由
意思就是说在URL中会存在#号
而BrowserRouter是新浏览器H5的路由组件
不会再URL中存在#号
switch包含的部分只会匹配一个路由
标签: javascript ES6
如何将html字符串转换成dom元素呢?
这里要说的不是最常见的document.createElement('div')这种方式
以上这种方式太普通了就不介绍了
下面是一个字符串
str = '<div>hello<a>链接</a></div>'
我们要把它转换成dom 对象应该如何做呢?
很简单不要使用docuemnt.createElement()的一层一层的创建
只需要使用一个内置对象DOMParser()即可
const parser = new DOMParser(); parser.parserFromString('str', 'text/html')
标签: javascript ES6
如何创建一个store?
相信很多人不用store很快就忘记了
首先创建store文件夹
在文件夹中创建index.js
import { createStore } from 'redux' imoprt reducer from './reducer' const store = createStore(reducer) export default store;然后创建reducer.js文件
const defaultState = { ... } export default (state = defaultState, action) { return state; }
命令:
在其他的组件如何获取store数据呢?
使用import store from './store'
获取所有数据 store.getState()
订阅:store.subscribe(f())
触发action:store.dispatch({obj})
标签: javascript ES6
React复制组件的使用
import React, { Component } from 'react'; import copy from 'copy-to-clipboard'; class App extends Component { handleClick = (e) => { copy(e.target.value) } render() { return ( <div className="App"> <p> <input placeholder='请输入' onClick={this.handleClick}/> </p> <textarea></textarea> </div> ); } }
标签: javascript ES6
react配置proxy代理
首先我们需要安装http-proxy-middleware中间件
然后在src目录下创建setupProxy.js文件
里面填写代理规则即可
const proxy = require('http-proxy-middleware') module.exports = function (app) { app.use(proxy('/api',{ target: 'http://localhost:8083', changeOrigin: true, // pathRewrite: { // "^/api": "/" // } })) }可以根据自己的需求更改
保存后此时并不能生效
要想生效必须重新启动npm