Вопросы по тегу: ecmascript-6

(69)

Javascript переназначает переменную let с деструктурированием

В моем приложении React я использую руководство по стилю eslint от airbnb, которое выдает ошибку, если я не использую деструктурирование.В приведенной ниже ситуации я сначала использую let для присвоения двум переменным широта и долгота координатам первого элемента в массиве местоположений. объекты. Затем я пытаюсь использовать деструктурирование, чтобы переназначить их значения, если пользователь предоставил мне доступ к их местоположению.let latitude = locations[0].coordinates[1]; let longitude = locations[0].coordinates[0]; if (props.userLocation.coords) { // doesn't work - unexpected token { latitude, longitude } = props.userLocation.coords; // causes linting errors // latitude = props.userLocation.coords.latitude; // longitude = props.userLocation.coords.longitude; } Разрушение структуры оператора if приводит к ошибке неожиданный токен.Переназначение переменных по старинке вызывает ошибку ESlint: Use object destructuring.
P

Phil Mok

4 года назад

Ответов: 1

Фигурные скобки (скобки) в инструкции Node.js 'require'

Я пытаюсь понять разницу между двумя операторами «require» ниже.В частности, какова цель { }, обернутых вокруг ipcMain?const electron = require('electron') const {ipcMain} = require('electron') Кажется, что они оба присваивают содержимое модуля electron, но, очевидно, работают по-разному.Кто-нибудь может пролить свет?
A

AproposArmadillo

5 лет назад

Ответов: 2

Как назначить правильный тип для React.cloneElement при передаче свойств дочерним элементам?

Я использую React и Typescript. У меня есть компонент реакции, который действует как оболочка, и я хочу скопировать его свойства своим дочерним элементам. Я следую руководству React по использованию элемента клонирования: https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement. Но при использовании React.cloneElement я получаю следующую ошибку от Typescript:Argument of type 'ReactChild' is not assignable to parameter of type 'ReactElement'.at line 27 col 39 Type 'string' is not assignable to type 'ReactElement'. Как я могу назначить правильный ввод для react.cloneElement?Вот пример, который повторяет приведенную выше ошибку:import * as React from 'react'; interface AnimationProperties { width: number; height: number; } /** * the svg html element which serves as a wrapper for the entire animation */ export class Animation extends React.Component{ /** * render all children with properties from parent * * @return {React.ReactNode} react children */ renderChildren(): React.ReactNode { return React.Children.map(this.props.children, (child) => { return React.cloneElement(child, { //
D

David C

5 лет назад

Ответов: 2

Активная ссылка с React-Router?

Я пробую React-Router (v4), и у меня возникают проблемы с запуском Nav, чтобы одна из Linkбыла active. Если я нажму на любой из тегов Link, активный материал начнет работать. Однако я бы хотел, чтобы Home Link был активен, как только приложение запускается, так как это компонент, который загружается по маршруту /. Есть ли способ сделать это?Вот мой текущий код:const Router = () => ( Home {/* I want this to start off as active */} About )
S

Saad

5 лет назад

Ответов: 2

В чем разница между prettier-eslint, eslint-plugin-prettier и eslint-config-prettier?

Я хочу использовать Prettier и ESLint вместе, но у меня возникли некоторые конфликты, просто используя их один за другим. Я вижу, что есть эти три пакета, которые позволяют использовать их в тандеме: красивее-эслинт eslint-плагин-красивее eslint-config-красивее Однако я не уверен, какой из них использовать, так как все эти имена пакетов содержат eslint и prettier.Что мне использовать?
Y

Yangshun Tay

5 лет назад

Ответов: 1

Typescript: невозможно использовать оператор импорта вне модуля

У меня есть файл .ts в приложении node js (последняя версия node.js от 07.10.19) с импортом модуля узла без экспорта по умолчанию. Я использую эту конструкцию: import {Class} from 'abc'; Когда я запускаю код, у меня возникает эта ошибка: Невозможно использовать оператор импорта вне модуля.В сети я вижу много решений этой проблемы (для .js), но мне это не помогает, может быть потому, что у меня есть машинописный файл. Вот мой код:import { Class } from 'abc'; module.exports = { ... execute(a : Class ,args : Array){ ... Вот мой tsconfig.json:{ "compilerOptions": { "target": "es6", "module": "commonjs", "strict": true } }
Z

Zerumi

2 года назад

Ответов: 5

Поддерживает ли Jest импорт/экспорт ES6?

Если я использую импорт/экспорт из ES6, то все мои тесты Jest завершатся с ошибкой: Неожиданное зарезервированное слово Я конвертирую тестируемый объект в старый синтаксис IIFE, и вдруг мои тесты проходят успешно. Или возьмем еще более простой тест: var Validation = require('../src/components/validation/validation'); // PASS //import * as Validation from '../src/components/validation/validation' // FAIL Та же ошибка. Очевидно, здесь проблема с импортом/экспортом. Мне нецелесообразно переписывать свой код с использованием синтаксиса ES5 только для того, чтобы сделать мою тестовую среду счастливой.У меня есть вавилонская шутка. Я пробовал различные предложения из проблем GitHub. Это еще не все.Файл package.json "scripts": { "start": "webpack-dev-server", "test": "jest" }, "jest": { "testPathDirs": [ "__tests__" ], "testPathIgnorePatterns": [ "/node_modules/" ], "testFileExtensions": ["es6", "js"], "moduleFileExtensions": ["js", "json", "es6"] }, Файл babelrc{ "presets": ["es2015", "react"], "plugins": ["transform-decorators-legacy"] } Есть ли это решение?
P

P.Brian.Mackey

6 лет назад

Ответов: 8

Что именно делает анонимная функция JavaScript f => f?

Я использую стороннюю библиотеку, в которой есть функция, принимающая функции в качестве аргументов. Я делаю некоторые условные проверки, чтобы решить, добавлять ли конкретную функцию в качестве параметра, а в некоторых случаях я не хочу предоставлять функцию. Предоставление null в этих случаях вызывает ошибку.Я нашел этот код, который работает, но я не совсем понимаю, что происходит.compose(__DEV__ ? devTools() : f => f) Является ли f => f эквивалентом () => {} пустой анонимной функции?
S

SomethingOn

5 лет назад

Ответов: 5

Почему стрелочные функции не имеют массива аргументов?

function foo(x) { console.log(arguments) } //foo(1) prints [1] но var bar = x => console.log(arguments) выдает следующую ошибку при вызове таким же образом:Uncaught ReferenceError: arguments is not defined
C

Conqueror

5 лет назад

Ответов: 1

ES6: Conditional & Dynamic Import Statements

Conditional Is it possible to have conditional import statements like below? if (foo === bar) { import Baz from './Baz'; } I have tried the above but get the following error (from Babel) when compiling. 'import' and 'export' may only appear at the top level Dynamic Is it possible to have dynamic import statements like below? for (let foo in bar) { if (bar.hasOwnProperty(foo)) { import Baz from `./${foo}`; } } The above receives the same error from Babel whilst compiling. Is this possible to do or is there something I am missing? Reasoning The reason I am trying to do this is that I have a lot of imports for a number of "pages" and they follow a similar pattern. I would like to clean up my code base by importing these files with a dynamic for loop. If this is not possible then is there a better way to handle large number of imports in ES6?
E

Enijar

6 лет назад

Ответов: 5

Node.js ES6 classes with require

So up until now, i have created classes and modules in node.js the following way: var fs = require('fs'); var animalModule = (function () { /** * Constructor initialize object * @constructor */ var Animal = function (name) { this.name = name; }; Animal.prototype.print = function () { console.log('Name is :'+ this.name); }; return { Animal: Animal } }()); module.exports = animalModule; Now with ES6, you are able to make "actual" classes just like this: class Animal{ constructor(name){ this.name = name ; } print(){ console.log('Name is :'+ this.name); } } Now, first of all, i love this :) but it raises a question. How do you use this combined with node.js's module structure? Say you have a class where you wish to use a module for the sake of demonstration say you wish to use fs so you create your file: Animal.js var fs = require('fs'); class Animal{ constructor(name){ this.name = name ; } print(){ console.log('Name is :'+ this.name); } } Would this be the right way? Also, how do you expose this class to other files within my node project? And would you still be able to extend this class if you're using it in a separate file? I hope some of you will be able to answer these questions :)
M

Marc Rasmussen

5 лет назад

Ответов: 5

Что означает «... разрешается в объект, не являющийся модулем, и его нельзя импортировать с использованием этой конструкции»?

У меня есть файлы TypeScript:MyClass.tsclass MyClass { constructor() { } } export = MyClass; MyFunc.tsfunction fn() { return 0; } export = fn; MyConsumer.tsimport * as MC from './MyClass'; import * as fn from './MyFunc'; fn(); Это выдает ошибку при попытке использовать new Модуль "MyClass" преобразуется в объект, не являющийся модулем, и его нельзя импортировать с помощью этой конструкции. и при попытке вызова fn() Невозможно вызвать выражение, тип которого не имеет сигнатуры вызова. Что дает?
R

Ryan Cavanaugh

5 лет назад

Ответов: 4

Когда использовать компоненты React на основе классов ES6 по сравнению с функциональными компонентами ES6 React?

Потратив некоторое время на изучение React, я понял разницу между двумя основными парадигмами создания компонентов.У меня вопрос, когда я должен использовать какой и почему? Каковы преимущества / компромиссы одного над другим?Классы ES6:import React, { Component } from 'react'; export class MyComponent extends Component { render() { return ( ); } } Функциональный:const MyComponent = (props) => { return ( ); } Я считаю функциональным всякий раз, когда этот компонент не может управлять состоянием, но так ли это?Думаю, если я использую какие-либо методы жизненного цикла, лучше всего будет использовать компонент на основе классов.
o

omarjmh

6 лет назад

Ответов: 5

Как перейти к элементу?

У меня есть виджет чата, который поднимает массив сообщений каждый раз, когда я прокручиваю страницу вверх. Проблема, с которой я столкнулся сейчас, заключается в том, что ползунок остается фиксированным вверху при загрузке сообщений. Я хочу, чтобы он сосредоточился на последнем элементе индекса из предыдущего массива. Я понял, что могу создавать динамические ссылки, передавая index, но мне также нужно знать, какую функцию прокрутки использовать для достижения этого handleScrollToElement(event) { const tesNode = ReactDOM.findDOMNode(this.refs.test) if (some_logic){ //scroll to testNode } } render() { return ( ) }
e

edmamerto

5 лет назад

Ответов: 25

How to convert a plain object into an ES6 Map?

For some reason I can't find this simple thing in the MDN docs (maybe I'm just missing it).I expected this to work:const map = new Map({foo: 'bar'}); map.get('foo'); // 'bar' ...but the first line throws TypeError: (var)[Symbol.iterator] is not a functionHow do I make a Map from a plain object? Do I really have to first convert it into an array of arrays of key-value pairs?
c

callum

6 лет назад

Ответов: 6

Wrap long template literal line to multiline without creating a new line in the string

In es6 template literals, how can one wrap a long template literal to multiline without creating a new line in the string?For example, if you do this:const text = `a very long string that just continues and continues and continues` Then it will create a new line symbol to the string, as interpreting it to have a new line. How can one wrap the long template literal to multiple lines without creating the newline?
V

Ville Miekk-oja

6 лет назад

Ответов: 11

Альтернатива для __dirname в узле при использовании флага --experimental-modules

Я использую флаг - экспериментальные модули при запуске моего приложения узла, чтобы использовать модули ES6.Однако, когда я использую этот флаг, метапеременная __ dirname недоступна. Есть ли альтернативный способ получить ту же строку, которая хранится в __ dirname, совместимую с этим режимом?
A

Amygdaloideum

4 года назад

Ответов: 14

setState не обновляет состояние сразу

Я хотел бы спросить, почему мое состояние не меняется, когда я выполняю событие onClick. Некоторое время назад я искал, что мне нужно привязать функцию onClick в конструкторе, но состояние все еще не обновляется.Вот мой код:import React from 'react'; import Grid from 'react-bootstrap/lib/Grid'; import Row from 'react-bootstrap/lib/Row'; import Col from 'react-bootstrap/lib/Col'; import BoardAddModal from 'components/board/BoardAddModal.jsx'; import style from 'styles/boarditem.css'; class BoardAdd extends React.Component { constructor(props) { super(props); this.state = { boardAddModalShow: false }; this.openAddBoardModal = this.openAddBoardModal.bind(this); } openAddBoardModal() { this.setState({ boardAddModalShow: true }); // set boardAddModalShow to true /* After setting a new state it still returns a false value */ console.log(this.state.boardAddModalShow); } render() { return ( Create New Board ); } } export default BoardAdd
S

Sydney Loteria

5 лет назад

Ответов: 15

ES6 отображает массив объектов, чтобы вернуть массив объектов с новыми ключами

У меня есть массив объектов:[ { id: 1, name: 'bill' }, { id: 2, name: 'ted' } ] Ищу простой однострочник для возврата:[ { value: 1, text: 'bill' }, { value: 2, text: 'ted' } ] Так что я могу легко перекачать их в выпадающий список с соответствующими клавишами.Мне кажется, это простое решение должно работать, но я получаю недопустимые синтаксические ошибки:this.props.people.map(person => { value: person.id, text: person.name })
B

Ben174

5 лет назад

Ответов: 1

Объединение переменных и строк в React

Есть ли способ включить в React обозначение фигурных скобок и тег href? Скажем, у нас есть следующее значение в состоянии:{this.state.id} и следующие атрибуты HTML в теге:href="#demo1" id="demo1" Есть ли способ добавить состояние id в атрибут HTML, чтобы получить что-то вроде этого:href={"#demo + {this.state.id}"} Что даст:#demo1
l

lost9123193

5 лет назад

Ответов: 5

Импорт ES2015 не работает (даже на верхнем уровне) в Firefox

Это мои образцы файлов: Test t1.js:import Test from 't2.js'; t2.js:export const Test = console.log("Hello world"); Когда я загружаю страницу в Firefox 46, она возвращает «SyntaxError: объявления импорта могут появляться только на верхнем уровне модуля», но я не уверен, насколько более высокоуровневый оператор импорта может здесь получить. Является ли эта ошибка отвлекающим маневром, и импорт / экспорт просто еще не поддерживается?
C

Christoph Burschka

6 лет назад

Ответов: 8

Динамически импортировать изображения из каталога с помощью webpack

Итак, вот мой текущий рабочий процесс для импорта изображений и значков в webpack через ES6:import cat from './images/cat1.jpg' import cat2 from './images/cat2.svg' import doggy from './images/doggy.png' import turtle from './images/turtle.png' Это быстро становится беспорядком. Вот что я хочу:import * from './images' Мне кажется, что должен быть какой-то способ динамически импортировать все файлы из определенного каталога в качестве их имени без расширения, а затем использовать эти файлы по мере необходимости.Кто-нибудь видел, как это делается, или есть какие-нибудь мысли о том, как лучше это сделать?ОБНОВЛЕНИЕ:Используя выбранный ответ, я смог сделать это:function importAll(r) { let images = {}; r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); }); return images; } const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));
k

klinore

5 лет назад

Ответов: 6

Как мне получить доступ к методу Object.prototype в следующей логике?

Я использую следующую логику, чтобы получить строку i18n данного ключа.export function i18n(key) { if (entries.hasOwnProperty(key)) { return entries[key]; } else if (typeof (Canadarm) !== 'undefined') { try { throw Error(); } catch (e) { Canadarm.error(entries['dataBuildI18nString'] + key, e); } } return entries[key]; } Я использую ESLint в своем проекте. Получаю следующую ошибку: Не обращаться к методу hasOwnProperty Object.prototype из целевого объекта. Это ошибкаno-prototype-builtins. Как мне изменить свой код, чтобы устранить эту ошибку? Я не хочу отключать это правило.
b

booYah

5 лет назад

Ответов: 5

ES6, как вы можете экспортировать импортированный модуль в одну строку?

Я бы хотел, но, по возможности, в одну строку: импорт модуля из './Module/Module;' Модуль экспорта; Я пробовал следующее, но похоже, что это не работает: модуль экспорта из './Module/Module;
D

Detuned

6 лет назад

Ответов: 6

Объединить два объекта с ES6

Я уверен, что этот вопрос задавали раньше, но я не могу найти ответ, который ищу, поэтому вот:У меня есть два объекта, а именно:const response = { lat: -51.3303, lng: 0.39440 } let item = { id: 'qwenhee-9763ae-lenfya', address: '14-22 Elder St, London, E1 6BT, UK' } Мне нужно объединить их вместе, чтобы сформировать следующее:item = { id: 'qwenhee-9763ae-lenfya', address: '14-22 Elder St, London, E1 6BT, UK', location: { lat: -51.3303, lng: 0.39440 } } Я знаю, что смогу сделать это так:item.location = {} item.location.lat = response.lat item.location.lng = response.lng Однако я считаю, что это уже не лучший способ делать это, потому что ES6 представил классную деструктуризацию / присваивание; Я пробовал глубокое слияние объектов, но, к сожалению, он не поддерживается :( Я также просмотрел некоторые функции ramda, но не нашел ничего подходящего.Итак, как лучше всего объединить эти два объекта с помощью ES6?
T

Tom Oakley

5 лет назад

Ответов: 2

Документируйте параметр деструктурированной функции в JSDoc

Раньше я всегда документировал параметры своего объекта следующим образом:/** * Description of the function * * @param {Object} config - The configuration * @param {String} config.foo * @param {Boolean} [config.bar] - Optional value * @return {String} */ function doSomething (config = {}) { const { foo, bar } = config; console.log(foo, bar); // do something } Но я не уверен, что лучше всего использовать с параметром деструктурированной функции. Я просто игнорирую объект, определяю его как-нибудь или как лучше всего его задокументировать?/** * Description of the function * * @param {String} foo * @param {Boolean} [bar] - Optional value * @return {String} */ function doSomething ({ foo, bar } = {}) { console.log(foo, bar); // do something } Мне кажется, что мой подход, описанный выше, не делает очевидным, что функция ожидает объект, а не два разных параметра.Другой способ, который я мог бы придумать, - использовать @ typedef, но это может закончиться огромным беспорядком (особенно в большом файле с множеством методов)?/** * @typedef {Object} doSomethingConfiguration * @property {String} foo * @property {Boolean} [bar] - Optional value */ /** * Description of the function * * @param {doSomethingConfiguration} * @return {String} */ function doSomething ({ foo, bar } = {}) { console.log(foo, bar); // do something }
m

morkro

6 лет назад

Ответов: 3

Что фигурные скобки внутри списков параметров функций делают в es6?

Я продолжаю видеть функции, которые выглядят следующим образом в кодовой базе, над которой я работаю:const func = ({ param1, param2 }) => { //do stuff } Что именно это делает? Мне трудно найти это в Google, потому что я даже не уверен, как это называется или как описать это в поиске Google.
N

Nathan

6 лет назад

Ответов: 3

Почему [NaN] .includes (NaN) возвращает true в JavaScript?

Мне известно, что NaN «странно» в JavaScript, то есть NaN === NaN всегда возвращает false, как описано здесь. Поэтому не следует проводить сравнения === для проверки NaN, а вместо этого использовать isNaN (..).Я был удивлен, обнаружив, что> [NaN].includes(NaN) true Это кажется непоследовательным. Почему такое поведение?Как вообще работает? Включает ли метод, специально проверяет isNaN?
Y

Yossi Vainshtein

10 месяцев назад

Ответов: 5

В чем разница между babel-preset-stage-0, babel-preset-stage-1 и т. Д.?

Мой вопрос: в чем разница между babel-preset-stage-0,babel-preset-stage-1,babel-preset-stage-2 и babel-preset-stage-3, и какой лучший выбор при разработке с ES6?
f

flyingzl

6 лет назад

Ответов: 5

Почему JSX-реквизиты не должны использовать стрелочные функции или привязку?

Я запускаю lint с моим приложением React и получаю эту ошибку:error JSX props should not use arrow functions react/jsx-no-bind И здесь я запускаю стрелочную функцию (внутри onClick):{this.state.photos.map(tile => ( this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} /> by {tile.author}} actionIcon={ this.handleDelete(tile)}>} > this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/> ))} Это плохая практика, которой следует избегать? И как лучше всего это сделать?
K

KadoBOT

6 лет назад

Ответов: 6

2022 WebDevInsider