小编Pal*_*tro的帖子

修改以减少es6

我想用文本内容flexbox收集所有li并减少第二秒的总时间并将其返回.我做到了,但是如何将代码重写为单个reduce函数.结果应该是以秒为单位的数据时间总和

HTML

<li data-time="3:07">Flexbox Video</li>
<li data-time="5:59">Redux Video</li>
...
Run Code Online (Sandbox Code Playgroud)

JS

const listItems = [...document.querySelectorAll('li')];

const flexBoxItem = listItems
    .filter(item => item.textContent.includes('Flexbox'))
    .map(item => item.dataset.time)
    .map(item => {
        let parts = item.split(':').map(i => parseFloat(i))
        return (parts[0] * 60) + parts[1]
    })
    .reduce((prev, next) => prev + next, 0)
Run Code Online (Sandbox Code Playgroud)

javascript arrays reduce ecmascript-6

2
推荐指数
1
解决办法
78
查看次数

在JavaScript中减少对象数组

我有100个索引的数组

const randomArr = [...Array(100).keys()]
Run Code Online (Sandbox Code Playgroud)

如何像这样返回100个数组

[{index: i}, {title: `title${i}`}] 
Run Code Online (Sandbox Code Playgroud)

其中i应该是随机的数组的索引.

javascript arrays loops ecmascript-6

2
推荐指数
1
解决办法
70
查看次数

加载视频mp4 Webpack加载器

如何在webpcak 4中将loader用于mp4视频格式,我尝试这样:

       {
            test: /\.mp4$/,
            use: 'file-loader',
            loader: 'file-loader?name=videos/[name].[ext]',
        },
Run Code Online (Sandbox Code Playgroud)

然后像这样导入

import pressButtonAnimated from './images/pressButtonAnimated.mp4'
Run Code Online (Sandbox Code Playgroud)

但这对我不起作用,并且出现错误 You may need an appropriate loader to handle this file type.

但这是对我有用的,但我不想在每个文件中添加

import pressButtonAnimated from '-!file-loader!./images/pressButtonAnimated.mp4'
Run Code Online (Sandbox Code Playgroud)

webpack webpack-loader webpack-4

2
推荐指数
1
解决办法
4936
查看次数

使用nth-of类按类选择元素

我试图用nth-of-type设置每隔一个灰色的背景.time.title元素(奇/偶模式).

 <div class="calendar">
     <div class="time">Gray Background</div>
     <div class="title">Gray Background</div>
     <div class="time">White Background</div>
     <div class="title">White Background</div>
     <div class="time">Gray BG</div>
     <div class="title">Gray BG</div>
     <div class="time">White Background </div>
     <div class="title">White Background</div>
 </div>
Run Code Online (Sandbox Code Playgroud)

html css css-selectors css3

1
推荐指数
1
解决办法
74
查看次数

Icomoon selection.json,为现有项目添加新图标

我尝试将新图标添加到selection.json中,我下载了新的json文件,并在其中添加了该图标。但是它们在index.html中不可见。我没有看到facebook和goole +图标。selection.json自动更新了我的iconmoon.svf文件。我的selection.json代码。 在此处输入图片说明

{
  "IcoMoonType": "selection",
  "icons": [
    {
      "icon": {
        "paths": [
          "M325.8 457.4v111.8h184.8c-7.4 48-55.8 140.6-184.8 140.6-111.2 0-202-92.2-202-205.8s90.8-205.8 202-205.8c63.4 0 105.6 27 129.8 50.2l88.4-85.2c-56.8-53-130.4-85.2-218.2-85.2-180.2 0.2-325.8 145.8-325.8 326s145.6 325.8 325.8 325.8c188 0 312.8-132.2 312.8-318.4 0-21.4-2.4-37.8-5.2-54h-307.6z",
          "M1024 448h-96v-96h-96v96h-96v96h96v96h96v-96h96z"
        ],
        "attrs": [
          {"fill": "rgb(53, 78, 90)"}
        ],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "icon-google-plus"
        ],
        "grid": 16
      },
      "attrs": [
        {"fill": "rgb(53, 78, 90)"}

      ],
      "properties": {
        "order": 68,
        "id": 2,
        "name": "google-plus",
        "prevSize": 32
      },
      "setIdx": 0,
      "setId": 2,
      "iconIdx": 0
    }, …
Run Code Online (Sandbox Code Playgroud)

html fonts svg json

1
推荐指数
1
解决办法
2123
查看次数

使用语句传播语法ES6

我尝试用扩展语法编写三元运算符并复制两个对象.是否可以在文字对象中使用带有扩展语法的三元运算符?我的代码工作正常,我只想优化它.

hintStyle: disabled ? {...globalStyles.hint, ...globalStyles.hintDisabled} : globalStyles.hint,
Run Code Online (Sandbox Code Playgroud)

我想这样写:

hintStyle: {...globalStyles.hint, {disabled ? ...globalStyles.hintDisabled : {}}},
Run Code Online (Sandbox Code Playgroud)

javascript spread-syntax ecmascript-next

0
推荐指数
1
解决办法
2027
查看次数

为什么在es6中需要构造函数?

为什么当我在test id中编写'new ServerNotificationApi'时不会调用构造函数,因为我new ServerNotificationApi.constructor()工作,但我无法理解为什么当我写 new ServerNotificationApi单元测试时出现错误'TypeError:_serverNotifications.default不是构造函数'

class ServerNotificationApi {
        constructor() {
            SignalR.initConnection(url.serverNotificationHubName)
        }

        subscribe = callback => SignalR.subscribe(url.entityChanged, url.serverNotificationHubName, callback);

        unsubscribe = callback => SignalR.unsubscribe(url.entityChanged, url.serverNotificationHubName, callback);
    }

    export default new ServerNotificationApi()
Run Code Online (Sandbox Code Playgroud)

测试

 it('constructor should call signalR method \'initConnection\'', () => {
        sinon.stub(SignalR, 'initConnection')

        new ServerNotificationApi.constructor()

    SignalR.initConnection.calledWith(url.serverNotificationHubName).should.be.true

        SignalR.initConnection.restore()
    })
Run Code Online (Sandbox Code Playgroud)

javascript unit-testing ecmascript-6 enzyme

0
推荐指数
1
解决办法
53
查看次数

如何在构建之前使用npm删除文件夹

我有一个脚本, "build": "rimraf dist webpack --progress --config webpack/prod.js", 但是实际上,它不是删除dist而是删除webpack文件夹中的所有文件。但是我只需要删除dist

Structure:
 -dist
 -webpack
     -somefiles.js
Run Code Online (Sandbox Code Playgroud)

javascript node.js npm webpack package.json

0
推荐指数
2
解决办法
2091
查看次数