คำถามติดแท็ก ecmascript-6

เช่นถ้าฉันมีวัตถุสองชิ้น: var foo = { x: "bar", y: "baz" } และ var oof = {} และฉันต้องการถ่ายโอนค่า x และ y จาก foo ไปยัง oof มีวิธีการทำเช่นนั้นโดยใช้ไวยากรณ์ destructuring es6 หรือไม่? อาจจะชอบ: oof{x,y} = foo

135 javascript  ecmascript-6  destructuring 

มีวิธีใดบ้างที่จะmap/ reduce/ filter/ etc a Setใน JavaScript หรือฉันจะต้องเขียนเอง? นี่คือส่วนSet.prototypeขยายที่เหมาะสม Set.prototype.map = function map(f) { var newSet = new Set(); for (var v of this.values()) newSet.add(f(v)); return newSet; }; Set.prototype.reduce = function(f,initial) { var result = initial; for (var v of this) result = f(result, v); return result; }; Set.prototype.filter = …

135 javascript  set  ecmascript-6  reduce 

ฉันได้ทำวิจัยส่วนใหญ่เกี่ยวกับBabelJSและMDN แล้ว (ซึ่งไม่มีข้อมูลเลย) แต่โปรดอย่าลังเลที่จะบอกฉันว่าฉันไม่ได้ระมัดระวังเพียงพอในการค้นหาข้อมูลเพิ่มเติมเกี่ยวกับ ES6 Spec ฉันสงสัยว่า ES6 รองรับการสืบทอดหลายแบบในลักษณะเดียวกับภาษาพิมพ์เป็ดอื่น ๆ หรือไม่ ตัวอย่างเช่นฉันสามารถทำสิ่งต่างๆเช่น: class Example extends ClassOne, ClassTwo { constructor() { } } เพื่อขยายหลายชั้นเรียนไปยังชั้นเรียนใหม่? ถ้าเป็นเช่นนั้นล่ามจะชอบวิธีการ / คุณสมบัติจาก ClassTwo มากกว่า ClassOne หรือไม่?

134 javascript  ecmascript-6 

ฉันได้ทดลอง ES6 มาระยะหนึ่งแล้วและเพิ่งพบปัญหาเล็กน้อย ฉันชอบใช้ฟังก์ชันลูกศรมากและเมื่อใดก็ตามที่ทำได้ฉันก็ใช้มัน อย่างไรก็ตามดูเหมือนว่าคุณไม่สามารถผูกมันได้! นี่คือฟังก์ชั่น: var f = () => console.log(this); นี่คือวัตถุที่ฉันต้องการผูกฟังก์ชันเข้ากับ: var o = {'a': 42}; และนี่คือวิธีที่ฉันจะผูกfกับo: var fBound = f.bind(o); จากนั้นฉันสามารถโทรfBound: fBound(); ซึ่งจะส่งออกสิ่งนี้ ( oวัตถุ): {'a': 42} เย็น! น่ารัก! ยกเว้นว่าใช้ไม่ได้. แทนที่จะส่งออกoอ็อบเจ็กต์มันจะส่งออกwindowอ็อบเจ็กต์ ฉันอยากรู้ว่า: คุณผูกฟังก์ชันลูกศรได้ไหม (และถ้าเป็นเช่นนั้นอย่างไร) ฉันได้ทดสอบโค้ดด้านบนใน Google Chrome 48 และ Firefox 43 แล้วผลลัพธ์ก็เหมือนกัน

134 javascript  function  ecmascript-6 

ฉันมีอาร์เรย์ของวัตถุ ฉันต้องการค้นหาตามฟิลด์บางฟิลด์จากนั้นจึงเปลี่ยน: var item = {...} var items = [{id:2}, {id:2}, {id:2}]; var foundItem = items.find(x => x.id == item.id); foundItem = item; ฉันต้องการให้มันเปลี่ยนวัตถุเดิม อย่างไร? (ฉันไม่สนหรอกว่ามันจะอยู่ใน lodash ด้วยหรือเปล่า)

134 javascript  arrays  ecmascript-6  lodash 

ฉันกำลังเขียนสคริปต์ที่เลื่อนลงด้านล่างหรือด้านบนของอินพุตขึ้นอยู่กับความสูงของดรอปดาวน์และตำแหน่งของอินพุตบนหน้าจอ นอกจากนี้ฉันต้องการตั้งค่าตัวปรับเปลี่ยนเป็นแบบเลื่อนลงตามทิศทางของมัน แต่ใช้setStateภายในของการcomponentDidUpdateสร้างลูปที่ไม่มีที่สิ้นสุด (ซึ่งเห็นได้ชัด) ฉันพบวิธีแก้ปัญหาในการใช้getDOMNodeและการตั้งชื่อคลาสเป็นแบบเลื่อนลงโดยตรง แต่ฉันรู้สึกว่าควรมีวิธีแก้ปัญหาที่ดีกว่าโดยใช้เครื่องมือ React ใครสามารถช่วยฉัน? นี่คือส่วนหนึ่งของรหัสการทำงานด้วยgetDOMNode(ia ตรรกะการวางตำแหน่งที่ถูกละเลยเล็กน้อยเพื่อลดความซับซ้อนของรหัส) let SearchDropdown = React.createClass({ componentDidUpdate(params) { let el = this.getDOMNode(); el.classList.remove('dropDown-top'); if(needToMoveOnTop(el)) { el.top = newTopValue; el.right = newRightValue; el.classList.add('dropDown-top'); } }, render() { let dataFeed = this.props.dataFeed; return ( <DropDown > {dataFeed.map((data, i) => { return (<DropDownRow key={response.symbol} data={data}/>); …

133 javascript  reactjs  ecmascript-6 

ฉันพยายามขยายข้อผิดพลาดด้วย ES6 และ Babel มันไม่ได้ผล class MyError extends Error { constructor(m) { super(m); } } var error = new Error("ll"); var myerror = new MyError("ll"); console.log(error.message) //shows up correctly console.log(myerror.message) //shows empty string วัตถุข้อผิดพลาดไม่เคยได้รับชุดข้อความที่ถูกต้อง ลองใน Babel REPL ตอนนี้ฉันได้เห็นวิธีแก้ปัญหาบางอย่างใน SO แล้ว ( ตัวอย่างเช่นที่นี่ ) แต่ทั้งหมดดูเหมือนจะไม่เป็น ES6-y ทำยังไงให้สวยแบบ ES6? (ที่ทำงานใน Babel)

132 javascript  ecmascript-6  babeljs  transpiler 

ฉันกำลังพยายามเพิ่มองค์ประกอบ React map ในโปรเจ็กต์ของฉัน แต่พบข้อผิดพลาด ฉันใช้บล็อกโพสต์ของ Fullstack React เป็นข้อมูลอ้างอิง ฉันติดตามว่าข้อผิดพลาดเกิดขึ้นที่ไหนใน google_map.js บรรทัด 83: function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } นี่คือส่วนประกอบแผนที่ของฉันจนถึงตอนนี้ หน้าเว็บโหลดได้ดี (ไม่มีแผนที่) เมื่อฉันแสดงความคิดเห็นบรรทัดที่ 58-60 สามบรรทัดสุดท้าย แก้ไข: ฉันได้ทำการเปลี่ยนแปลงที่ @Dmitriy Nevzorov แนะนำและยังคงให้ข้อผิดพลาดเดิม import React from 'react' import GoogleApiComponent …

132 javascript  google-maps  reactjs  ecmascript-6  react-router 

ฉันกำลังเขียนแอพใหม่โดยใช้ES6ไวยากรณ์(JavaScript) ผ่านทbabelรานสไพเลอร์และpreset-es2015ปลั๊กอินรวมถึงsemantic-uiสไตล์ index.js import * as stylesheet from '../assets/styles/app.scss'; import * as jquery2 from '../dist/scripts/jquery.min'; import * as jquery3 from '../node_modules/jquery/dist/jquery.min'; console.log($('my-app')); index.html <!DOCTYPE html> <html lang="fr"> <head> <body> <script src="dist/app.js"></script> </body> </html> โครงสร้างโครงการ . ├── app/ │ ├── index.js ├── assets/ ├── dist/ │ ├── scripts/ │ │ ├── …

129 javascript  jquery  ecmascript-6  browserify  semantic-ui 

ฉันใช้ typescript 1.6 กับไวยากรณ์โมดูล es6 ไฟล์ของฉันคือ: test.ts: module App { export class SomeClass { getName(): string { return 'name'; } } } main.ts: import App from './test'; var a = new App.SomeClass(); เมื่อฉันพยายามรวบรวมmain.tsไฟล์ฉันได้รับข้อผิดพลาดนี้: ข้อผิดพลาด TS2306: ไฟล์ 'test.ts' ไม่ใช่โมดูล ฉันจะทำมันให้สำเร็จได้อย่างไร?

129 javascript  typescript  ecmascript-6 

การใช้ฟังก์ชันลูกศร ES6 กับการthisผูกศัพท์นั้นยอดเยี่ยมมาก อย่างไรก็ตามฉันพบปัญหาเมื่อสักครู่ที่ผ่านมาโดยใช้กับการเชื่อมโยงการคลิก jQuery ทั่วไป: class Game { foo() { self = this; this._pads.on('click', function() { if (self.go) { $(this).addClass('active'); } }); } } ใช้ฟังก์ชันลูกศรแทน: class Game { foo() { this._pads.on('click', () => { if (this.go) { $(this).addClass('active'); } }); } } จากนั้น$(this)จะถูกแปลงเป็น ES5 (self = this) type closed …

129 javascript  jquery  ecmascript-6  arrow-functions 

tl; dr: เป็นไปได้ไหมที่จะสร้างเทมเพลตที่ใช้ซ้ำได้? ฉันพยายามใช้ตัวอักษรเทมเพลต แต่ฉันคิดว่าฉันไม่เข้าใจและตอนนี้ฉันเริ่มหงุดหงิด ฉันหมายถึงฉันคิดว่าฉันเข้าใจแล้ว แต่ "มัน" ไม่ควรเป็นวิธีการทำงานหรือวิธีที่ควรได้รับ มันควรจะได้รับที่แตกต่างกัน ตัวอย่างทั้งหมดที่ฉันเห็น (แม้แต่เทมเพลตที่ติดแท็ก) กำหนดให้ "การแทนที่" ต้องทำในเวลาประกาศไม่ใช่เวลาทำงานซึ่งดูเหมือนว่าไม่มีประโยชน์สำหรับฉันสำหรับเทมเพลต บางทีฉันอาจจะบ้า แต่ "เทมเพลต" สำหรับฉันคือเอกสารที่มีโทเค็นซึ่งถูกแทนที่เมื่อคุณใช้ไม่ใช่เมื่อคุณสร้างมันมิฉะนั้นจะเป็นเพียงเอกสาร (เช่นสตริง) เทมเพลตจะถูกเก็บไว้กับโทเค็นเนื่องจากโทเค็นและโทเค็นเหล่านั้นจะได้รับการประเมินเมื่อคุณ ... ประเมินมัน ทุกคนยกตัวอย่างที่น่ากลัวคล้ายกับ: var a = 'asd'; return `Worthless ${a}!` นั่นเป็นเรื่องดี แต่ถ้าผมรู้อยู่แล้วว่าaผมจะเพียงหรือreturn 'Worthless asd' return 'Worthless '+aประเด็นคืออะไร? อย่างจริงจัง. โอเคประเด็นคือความเกียจคร้าน ข้อดีน้อยลงอ่านได้ง่ายขึ้น ยิ่งใหญ่ แต่นั่นไม่ใช่แม่แบบ! ไม่ใช่ IMHO และ MHO คือทุกสิ่งที่สำคัญ! ปัญหา IMHO …

129 javascript  ecmascript-6  template-literals 

ด้วยเหตุผลบางอย่างฉันไม่พบสิ่งง่ายๆนี้ในเอกสาร MDN (บางทีฉันอาจจะพลาด) ฉันคาดว่าจะได้ผล: const map = new Map({foo: 'bar'}); map.get('foo'); // 'bar' ... แต่บรรทัดแรกพ่น TypeError: (var)[Symbol.iterator] is not a function ฉันจะสร้างแผนที่จากวัตถุธรรมดาได้อย่างไร ก่อนอื่นฉันต้องแปลงเป็นอาร์เรย์อาร์เรย์ของคู่คีย์ - ค่าหรือไม่

128 javascript  ecmascript-6 

คำถามของฉันคือ: อะไรคือความแตกต่างระหว่างbabel-preset-stage-0, babel-preset-stage-1, babel-preset-stage-2และbabel-preset-stage-3และสิ่งที่เป็นทางเลือกที่ดีที่สุดเมื่อเราพัฒนาด้วยES6?

126 ecmascript-6  babel 

ผมทำงานด้วยและมาข้ามปัญหานี้ที่ผมได้รับcreate-react-appHome does not contain an export named Home วิธีตั้งค่าApp.jsไฟล์มีดังนี้ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import { Home } from './layouts/Home' class App extends Component { render() { return ( <div className="App"> Hello <Home /> </div> ) } } export default App; ตอนนี้ในlayoutsโฟลเดอร์ของฉันฉันมีHome.jsไฟล์ …

123 javascript  reactjs  ecmascript-6  create-react-app