如何使用 TypeScript 查找数组项?(一种现代的,更简单的方法)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/31455805/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I find an array item with TypeScript? (a modern, easier way)
提问by whitneyland
Is there a canonical way to find an item in an array with TypeScript?
是否有使用 TypeScript 在数组中查找项目的规范方法?
ES6+ allows this simple/clean approach
ES6+ 允许这种简单/干净的方法
[{"id":1}, {"id":-2}, {"id":3}].find(myObj => myObj.id < 0) // returns {"id":-2}
TypeScript implements many ES6+ features and continues to do so. It seems likely it has at least as nice a solution, so:
TypeScript 实现了许多 ES6+ 特性,并且会继续这样做。看起来它至少有一个很好的解决方案,所以:
How can an item be found in a array using TypeScript, considering ease of use, modern best practices, and elegance via simplicity?
(restating the question slightly to seek best approaches)
考虑到易用性、现代最佳实践和简洁优雅,如何使用 TypeScript 在数组中找到项目?
(稍微重述问题以寻求最佳方法)
Notes
笔记
"item" could be a JavaScript object, or almost anything else. The example above happens to be to find plain ol' native JS objects, but many scenarios exist.
"canonical" is just a fancy way in Computer Science (and other fields) to say "general accepted rule or standard formula" (remember everyone here didn't know that at some point)
This is not about new features. Any version of JS could do this. However the form to do so gets less and less appealing the farther you go back in time.
TypeScript roadmapfor reference.
“ item”可以是一个 JavaScript 对象,或者几乎任何其他东西。上面的例子恰好是寻找普通的 ol' 原生 JS 对象,但是存在很多场景。
“规范”只是计算机科学(和其他领域)中表示“普遍接受的规则或标准公式”的一种奇特方式(记住这里的每个人在某些时候都不知道)
这与新功能无关。任何版本的 JS 都可以做到这一点。然而,随着时间的推移,这样做的形式变得越来越不吸引人。
供参考的TypeScript 路线图。
采纳答案by Fenton
Part One - Polyfill
第一部分 - Polyfill
For browsers that haven't implemented it, a polyfill for array.find
. Courtesy of MDN.
对于尚未实现它的浏览器,array.find
. 由 MDN 提供。
if (!Array.prototype.find) {
Array.prototype.find = function(predicate) {
if (this == null) {
throw new TypeError('Array.prototype.find called on null or undefined');
}
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
var list = Object(this);
var length = list.length >>> 0;
var thisArg = arguments[1];
var value;
for (var i = 0; i < length; i++) {
value = list[i];
if (predicate.call(thisArg, value, i, list)) {
return value;
}
}
return undefined;
};
}
Part Two - Interface
第二部分 - 界面
You need to extend the open Array interface to include the find
method.
您需要扩展开放的 Array 接口以包含该find
方法。
interface Array<T> {
find(predicate: (search: T) => boolean) : T;
}
When this arrives in TypeScript, you'll get a warning from the compiler that will remind you to delete this.
当它到达 TypeScript 时,你会收到来自编译器的警告,提醒你删除它。
Part Three - Use it
第三部分 - 使用它
The variable x
will have the expected type... { id: number }
该变量x
将具有预期的类型...{ id: number }
var x = [{ "id": 1 }, { "id": -2 }, { "id": 3 }].find(myObj => myObj.id < 0);
回答by Mohsen
For some projects it's easier to set your target to es6
in your tsconfig.json
.
对于一些项目,它更容易你的目标设定es6
在你的tsconfig.json
。
{
"compilerOptions": {
"target": "es6",
...
回答by everblack
Playing with the tsconfig.json You can also targeting es5 like this :
使用 tsconfig.json 您还可以像这样针对 es5:
{
"compilerOptions": {
"experimentalDecorators": true,
"module": "commonjs",
"target": "es5"
}
...
回答by Asaga
You could just use underscore library.
你可以只使用下划线库。
Install it:
安装它:
npm install underscore --save
npm install @types/underscore --save-dev
Import it
导入它
import _ = require('underscore');
Use it
用它
var x = _.filter(
[{ "id": 1 }, { "id": -2 }, { "id": 3 }],
myObj => myObj.id < 0)
);
回答by Pierre Fiorelli
If you need some es6 improvements not supported by Typescript, you can target es6 in your tsconfig and use Babel to convert your files in es5.
如果你需要一些 Typescript 不支持的 es6 改进,你可以在你的 tsconfig 中定位 es6 并使用 Babel 在 es5 中转换你的文件。