张宇童 - 前沿技术博客

JavaScript提取字符串的几种方式

2019-11-26 张宇童 学习日志

第一种：

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

评论(0) 浏览(363)

JavaScript去除首尾空格

2019-11-26 张宇童 学习日志

不管在哪种语言中去除字符串首尾空格都是会经常用到的

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

评论(0) 浏览(874)

JavaScript中的扁平化输出

2019-11-26 张宇童 学习日志

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

评论(0) 浏览(363)

React时间轴

2019-11-24 张宇童 学习日志

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

评论(0) 浏览(520)

如何在react中使用videojs组件

2019-11-21 张宇童 关注网络

首先需要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

评论(0) 浏览(406)

BrowserRouter与HashRouter的区别

2019-11-20 张宇童 学习日志

关于BrowserRouter和HashRouter我百度了一下，看了网上说的一大堆总结了以下精华：

BrowerRouter是为老版本浏览器提供的hash路由

意思就是说在URL中会存在#号

而BrowserRouter是新浏览器H5的路由组件

不会再URL中存在#号

switch包含的部分只会匹配一个路由

标签: javascript ES6

评论(0) 浏览(704)

如何将html字符串转换成dom元素呢？

2019-11-20 张宇童 学习日志

这里要说的不是最常见的document.createElement('div')这种方式

以上这种方式太普通了就不介绍了

下面是一个字符串

str = '<div>hello<a>链接</a></div>'

我们要把它转换成dom 对象应该如何做呢？

很简单不要使用docuemnt.createElement()的一层一层的创建

只需要使用一个内置对象DOMParser()即可

const parser = new DOMParser();
parser.parserFromString('str', 'text/html')

标签: javascript ES6

评论(0) 浏览(405)

如何创建一个store?

2019-11-20 张宇童 学习日志

相信很多人不用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

评论(0) 浏览(362)

React复制组件的使用

2019-11-17 张宇童 学习日志

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

评论(0) 浏览(367)

react配置proxy代理

2019-11-17 张宇童 学习日志

首先我们需要安装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

标签: react proxy

评论(0) 浏览(661)