出于某种原因,在当前Chrome或Firefox中运行良好的ES6代码无法在Safari中运行 - 例如,箭头功能.据我所知,Safari可以支持ES6.有什么需要做的吗？
例:
var arr = [1,3,5].map((i) => i*i);
console.log(arr);
或者如果它是完整.html文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
"use strict";
var arr = [1,3,5].map((i) => i*i);
console.log(arr);
</script>
</body>
</html>
Safari(我使用的是9.0.3)继续给予 SyntaxError: Unexpected token '>'
我想在我的箭头函数中访问它:
import myObject from '../myObjectPath';
export const myClass = Fluxxor.createStore({
initialize() {
this.list = [];
this.id = null;
},
myOutsideFunction(variable1) {
// here this in NOT undefined
myObject.getMyList(this.id, (myList) => {
// here this in undefined
this.list = myList;
}
});
)};
但是内部的箭头功能在ma回调函数中这是未定义的!!
我正在使用babel来传输代码:
myOutsideFunction: function myOutsideFunction() {
var _this = this;
myObject.getMyList(function (myList) {
_this.list = myList;
});
},
假设我有一个generateList()更新状态并将其映射到onClick 的函数<li>.
<li className="some-classname"}
onClick={this.generateList('product')}> Product </li>
有时我会遇到如下错误:
Warning: setState(...): Cannot update during an existing state transition (such as within给予). Render methods should be a pure function of props...
等等.我在网上挖掘了这个问题的答案,并得到了如下答案:
<li className="some-classname"}
onClick={this.generateList.bind(this, 'product')}> Product </li>
但我也看到了一个答案(在Github中,但似乎无法找到它)
<li className="some-classname"}
onClick={() => this.generateList('product')}> Product </li>
有什么主要区别？哪个更合适,更有效？我们应该使用这样的原因.bind以及() =>将函数映射到onClickReact组件(或者我主要使用它)的属性时是什么原因？
这里有问题:
究竟什么是封闭的背景？这是进一步复杂的,因为ES6允许{}成为块/范围/上下文.{}作为分隔符足以定义"封闭上下文",或者它必须在函数范围内.
一个具体的例子:
let EventEmitter = require('events').EventEmitter;
class Person extends EventEmitter {
constructor(name) {
super();
this.name = name;
}
}
let mary = new Person('mary');
mary.on('speak', (said) => {
console.log(${this.name}: ${said});
});
mary.emit('speak', 'you may delay, but time will not');
它只是设置自定义事件,并在触发自定义事件时添加回调函数.为什么这里的箭头功能不起作用？
"mary"是调用"on"函数的对象,该函数应将"on"中的"this"设置为"mary".最重要的是,箭头函数在其参数位置的"on"函数中定义(在词法上足够,对吧？),为什么箭头函数不能从其"封闭的上下文"中得到"this"值,也就是说,这里的"开"功能???
同样的例子,使用传统的函数定义:
let EventEmitter = require('events').EventEmitter;
class Person extends EventEmitter {
constructor(name) {
super();
this.name = name;
}
}
let mary = new Person('mary');
mary.on('speak', function(s) {
console.log(this);
});
mary.emit('speak', 'you may delay, but …
有没有理由编写ES6方法的经典语法？
class MyClass {
myMethod() {
this.myVariable++;
}
}
当我myMethod()在某些事件上使用回调时,我必须写这样的东西(在JSX中):
// Anonymous function.
onClick={() => { this.myMethod(); }}
// Or bind this.
onClick={this.myMethod.bind(this)}
但是如果我将方法声明为箭头函数:
class MyClass {
myMethod = () => {
this.myVariable++;
}
}
我只能写(在JSX中):
onClick={this.myMethod}
我知道这是ES5的一个重复问题，但是我正在寻找ES6箭头功能的语法。我的代码如下。
fetchItems = (callback) => {
//After ajax success
callback(response);
}
const myParams = {name:"John"}
this.fetchItems((res) => {
console.log(res.data);
});
对于上述情况，我想将一些参数（myParams）与函数调用一起传递并进入函数，如何归档该文件，请帮忙。
我正在学习ES6，我只想将我的ES5知识转换为ES6。
这是我的ES5代码：
function click() {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
};
这是我的ES6代码：
const click = () => {
this.className += ' grab';
setTimeout(() => (this.className = 'remove'), 0);
console.log('RENDERING');
}
我的问题是this.className + ='抓住'; 和setTimeout（（）=>（this.className ='remove'），0）; 没有运行该功能。但是console.log会显示在日志中。
是该方法不上箭头职能的工作？
定义 C++ lambda https://en.cppreference.com/w/cpp/language/lambda时，有一个捕获块捕获封闭范围内变量的值（至少如果变量是通过复制而不是通过捕获）参考）。因此，如果 lambda 使用已捕获的变量并且稍后执行 lambda，则 lambda 内的相应变量将具有定义 lambda 时的值。
使用 JavaScript 箭头函数，我可以引用封闭范围中的变量。但是，当调用箭头函数时，它将使用它现在拥有的变量的值（而不是定义箭头函数时它拥有的值）。
是否存在类似的变量捕获机制，允许使用箭头函数对象存储捕获的变量值？
这是一个 C++ 示例：
// Example program
#include <iostream>
#include <string>
#include <functional>
int main()
{
std::function<void(int)> byCopyCaptures[5];
std::function<void(int)> byRefCaptures[5];
for(int i=0; i<5; i++) {
// The variable i is captured by copy:
byCopyCaptures[i] = [i](int j) {std::cout << "capture by copy: i is " << i << " and j is "<< j <<"\n";};
// The variable i is captured by reference: …我正在尝试编写一个模板函数，即一个箭头函数，并将其分配给一个const变量，
这应该是这样的形式 const method: MethodType<T> = <T>(...) => { ... }
但是当我尝试输入变量时它会抱怨method。下面是代码的一个片段：
export type KeyMethod<T> = (data: T) => any;
export interface DiffResult<T> {
additions: T[];
updates: T[];
deletes: T[];
};
export type DiffMethod<T> = (oldState: T[], newState: T[]) => DiffResult<T>;
it complains about this template
vvv
export const diffMethod: DiffMethod<T> = <T>(oldState: T[], newState: T[]) => {
return {
additions: [],
updates: [],
deletes: []
}
};
有没有办法做到这一点？也许我没有遵循语法，但我还没有找到类似的例子。
const makeIncrementer = s=>a=>a+s
makeIncrementer(10).toString() // Prints 'a=>a+s'
这将使得无法正确反序列化（我希望有类似的东西a=>a+10。有没有办法做到这一点？
arrow-functions ×10
javascript ×9
ecmascript-6 ×4
this ×2
binding ×1
c++ ×1
closures ×1
currying ×1
function ×1
jsx ×1
lambda ×1
reactjs ×1
typescript ×1
undefined ×1