张宇童 - 前沿技术博客

JavaScript快速将Array转为Object

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

实现数组与对象的快速转换

首先我们来看一下正常情况下访问bar值

arr = [['bar',3],['two',6]]
// 正常访问 bar
console.log(arr[0][0]) // bar

使用新的API访问bar值 Object.fromEntries()

// ES10新的API Object.fromEntries()
const obj = Object.fromEntries(arr)

console.log(obj.bar) // 3

小实例

这个时候我们有一个object类型的数据，我们需要去除key的长度不等于3的元素。我们该怎么样做呢

const obj = {
    abc: '1',
    bcd: '2',
    fjdkls: '3',
}

思路：我们已知数组的API要远远多于object的API，那么我们可以现将obj转为array

const arr = Object.entries(obj)
console.log(arr)
// (3) [Array(2), Array(2), Array(2)]
// 0: (2) ["abc", "1"]
// 1: (2) ["bcd", "2"]
// 2: (2) ["fjdkls", "3"]
// length: 3
// __proto__: Array(0)

这里我使用了Object.entries()将对象转为了数组

这下就可以直接使用filter进行对数组的过滤了

const res = arr.filter(([k,v]) => {
    return k.length === 3;
})

console.log(res)
// (2) [Array(2), Array(2)]
// 0: (2) ["abc", "1"]
// 1: (2) ["bcd", "2"]
// length: 2
// __proto__: Array(0)

过滤完后我们得到了我们想要的结果，但这还不是最终的结果。因为它现在是数组。我们要将它变为对象

const res_obj = Object.fromEntries(res)
console.log(res_obj)
// {abc: "1", bcd: "2"}

处理完成

标签: javascript ES6

评论(0) 浏览(767)

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) 浏览(485)

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) 浏览(1008)

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) 浏览(473)

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) 浏览(647)

如何在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) 浏览(552)

BrowserRouter与HashRouter的区别

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

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

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

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

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

不会再URL中存在#号

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

标签: javascript ES6

评论(0) 浏览(940)

如何将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) 浏览(513)

如何创建一个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) 浏览(483)

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) 浏览(497)