标签: ecmascript-next

我正在尝试做这样的事情:

gulp.task("test", async () => {
    return gulp.src("**/*.scss")
        .pipe(print((filePath) => `File: ${filePath}`));
});

(打印是gulp-print)

但它给出了以下内容:

[22:08:43] Starting 'test'...
[22:08:43] Finished 'test' after 12 ms
[22:08:43] File: src\app\styles\app.scss
[22:08:43] File: src\app\styles\test.scss

即它在打印消息之前完成.

我正在使用Gulp 4(我认为是alpha 2)和TypeScript(1.8.0-dev.20151204).

生成的(ES6)代码如下所示:

gulp.task("test", () => __awaiter(this, void 0, Promise, function* () {
    return gulp.src("**/*.scss")
        .pipe(print((filePath) => `File: ${filePath}`));
}));

在哪里__awaiter:

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, Promise, generator) {
    return new Promise(function (resolve, reject) {
        generator = generator.call(thisArg, _arguments); …

我了解到TC-39建议使用JavaScript classes中的新语法，称为“属性初始化器语法” 。

我还没有找到很多关于它的文档，但是在讨论React时，它被用在了一个蛋头课程中。

class Foo {
  bar = () => {
    return this;
  }
}

这项提议的目的是什么？它与以下内容有何不同：

class Foo {
  bar() {
    return this;
  }
}

我已经看到使用Javascript类的代码使用以下形式（示例是React）：

class UserProfile extends Component {
  state = {
    open: false
  }

  handleOpen = () => {
    this.setState({ open: true })
  }
}

为什么handleOpen实现为设置为函数的属性，而不是类似以下内容的属性：

class UserProfile extends Component {
  state = {
    open: false
  }

  handleOpen() {
    this.setState({ open: true })
  }
}

提前致谢！

运行以下代码时出现此错误

let foo = '  foo  '
console.log(foo.trimLeft())
//foo.trimStart() works neither

我知道互联网上的大多数解决方案都说，我必须修复我的tsconfig.json以包含 es20whatever。

有趣的是，我可以使用 es2018 的东西，比如 Promise.prototype.finally 和 rest spread 等。VSCode 也会自动完成trimStart()，这很奇怪，因为项目和编辑器应该使用相同的tsconfig.json. 但是这段特定的代码无法编译。

这是我的 tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "./",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "plugins": [
      {
        "name": "tslint-language-service",
        "configFile": "./tslint.json"
      }
    ],
    "paths": {
      "foo": ["projects/foo/src/public_api.ts"],
      "bar": ["projects/bar/src/public_api.ts"],
      "baz": ["dist/baz"]
    }
  }
}

我在 monorepo 角度文件夹中运行它（如您所见）。也许这有问题，我不知道。

当我使用React-Native默认打包器启动我的项目时,我有这个错误:Unexpected token在这一行:

static propTypes = {
   /// ...
};

我看了一下GitHub上的React-Native问题,但我找不到解决方案.

有什么建议吗？

特定

var arr = [1,2,true,4,{"abc":123},6,7,{"def":456},9,[10]]

我们可以arr使用Number构造函数过滤数组中的数字项

var res = arr.filter(Number); // [1, 2, true, 4, 6, 7, 9, Array[1]]

是true和[10]预期在所得数组？如果我们替换false了true在arr

var arr = [1,2,false,4,{"abc":123},6,7,{"def":456},9,[10]] 
var res = arr.filter(Number) // [1, 2, 4, 6, 7, 9, Array[1]]

运用 Array.isArray

var res = arr.filter(Array.isArray) // [Array[1]]

String

var res = arr.filter(String) // [1, 2, true, 4, Object, 6, 7, Object, 9, Array[1]]

如果我们想要在arr对象,索引中过滤项目4,7我们会尝试 …

需要一些JS的帮助.是否可以根据需要绑定动画事件？

我需要这样做:

onScroll={
    Animated.event([
        {
            nativeEvent: {
                contentOffset: {y: this.state.animTop}
            }
        }
    ])
}    

我也需要这样做

onScroll={(e) => {
    let positionY =  e.nativeEvent.contentOffset.y;
    this._handleScroll(positionY);
    this.setState({y: positionY})

}}

我试过像这样绑定,但它不需要做Animated.event

componentDidMount() {
    this._handleScroll = this._handleScroll.bind(this);
}
onScroll={
    this._handleScroll
}
_handleScroll(e) {
    Animated.event([
        {
            nativeEvent: {
                contentOffset: {y: this.state.animTop}
            }
        }
    ]);
    if(e > 30) {
        this.setState({statusBarHidden: true});
    } else {
        this.setState({statusBarHidden: false});
    }
}

我在一个项目中工作,我们使用可选的链接运算符(也称为Elvis运算符):

const baz = new obj?.foo?.bar?.baz()

这是让WebStorm理解它的一种方式吗？

PS这是stage-1提案的一部分:https://github.com/tc39/proposal-optional-chaining

有没有理由编写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}

请帮我改写代码以使用动态导入功能.不幸的是我不知道如何在模块中使用动态导入.

import firebase from 'firebase/app';
import 'firebase/firestore';

const config = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
};

const initApp = firebase.initializeApp(config).firestore();
initApp.settings({
  timestampsInSnapshots: true,
});
const app = firebase.app().firestore();

export default !firebase.apps.length ? initApp : app;

我尝试了什么

import('firebase/app')
  .then((firebase) => {
    firebase.initializeApp(config).firestore();
  });