ecmascript-6

问题 What is the major benefit of writing import React, { Component } from 'react'; class Link extends Component { ... } instead of import React from 'react'; class Link extends React.Component { ... } when it comes to react 15.4.x?? In my perspective and in my case (correct me if I am wrong) it does not matter at all since: I am using a webpack2 for making my bundles; I use code splitting to split my app code from vendor code; I use webpack.optimize.CommonsChunkPlugin plugin with minChunks:

问题 This code is not working in Edge browser. The accordion panel does not open and I get this error: Object doesn't support property or method 'forEach' const accordionBtn = document.querySelectorAll('.btn-accordion'); accordionBtn.forEach(item => item.addEventListener('click', e => { e.preventDefault(); const currItem = e.currentTarget; currItem.classList.toggle("open"); })) 回答1: Note this should work in Edge 16+ and across the latest versions of other browsers according to MDN. I manually

问题 it would be best to first look at my code: import React, { Component } from 'react'; import _ from 'lodash'; import Services from 'Services'; // Webservice calls export default class componentName extends Component { constructor(props) { super(props); this.state = { value: this.props.value || null } } onChange(value) { this.setState({ value }); // This doesn't call Services.setValue at all _.debounce(() => Services.setValue(value), 1000); } render() { return ( <div> <input onChange={(event,

问题 it would be best to first look at my code: import React, { Component } from 'react'; import _ from 'lodash'; import Services from 'Services'; // Webservice calls export default class componentName extends Component { constructor(props) { super(props); this.state = { value: this.props.value || null } } onChange(value) { this.setState({ value }); // This doesn't call Services.setValue at all _.debounce(() => Services.setValue(value), 1000); } render() { return ( <div> <input onChange={(event,

问题 This answer shows how a simple ES6 class: class A { constructor() { this.foo = 42; } bar() { console.log(this.foo); } } is equivalent the following ES5 code: function A() { this.foo = 42; } A.prototype.bar = function() { console.log(this.foo); } Is is similarly possible to translate ES6 class inheritance to ES5 code? What would be the ES5 equivalent to following derived class? class B extends A { constructor() { super(); this.foo2 = 12; } bar() { console.log(this.foo + this.foo2); } baz() {

问题 Consider the following code: const log = ({a,b=a}) => console.log(a,b); log({a:'a'}) The variable b is assigned the value a . This does work when transpiling it to es5, but I am not entirely sure if this is valid es6 syntax. Am I allowed to do this kind of default value assignment in a destructured object? 回答1: const log = ({a,b=a}) => console.log(a,b); log('a') is syntactically valid but semantically invalid, since you are trying to destructure a string primitive, which gets boxed into a

问题 Consider the following code: const log = ({a,b=a}) => console.log(a,b); log({a:'a'}) The variable b is assigned the value a . This does work when transpiling it to es5, but I am not entirely sure if this is valid es6 syntax. Am I allowed to do this kind of default value assignment in a destructured object? 回答1: const log = ({a,b=a}) => console.log(a,b); log('a') is syntactically valid but semantically invalid, since you are trying to destructure a string primitive, which gets boxed into a

问题 I love that ECMAScript 6 allows you to write curried functions like this: var add = x => y => z => x + y + z; However, I hate that we need to parenthesize every argument of a curried function: add(2)(3)(5); I want to be able to apply curried functions to multiple arguments at once: add(2, 3, 5); What should I do? I don't care about performance. 回答1: Currying and the application of curried functions are controversial issues in Javascript. In simple terms, there are two opposing views, which I

问题 Here is the code in question: const array = [ 1, 2, 3 ] array.map(item => { item = item + 1 }) console.log(array) I thought that the item (first) argument in the map method is a reference to the original item in the array, and that mutating it directly would change the contents of that first array... is that not true? 回答1: map function returns a new array, it does not change the original one. item is a local variable here in arrow function item => {...} . The assignment item = item + 1 does

问题 I am working on a React app. There is some dynamic content which contents HTML tags. When I am showing that content on the page, it's showing with raw HTML tag. For say: const msg = "Some <strong>text</strong> here" I want to show like this on page Some text here If I use dangerousHtml then it's showing like this without bold "Some text here" Can anyone please help? Thanks in advance! 回答1: You can use the 'dangerouslySetInnerHTML' like: const msg = () => ({__html: 'Some <strong>text</strong>