13のJavaScriptの実用的なヒントを逃してはなりません!

オリジナルリンク: https://bss.csdn.net/m/topic/dev_survey2019?source_id=zx

640?wx_fmt = GIF

手始めに、そこにはJavaScriptである未知のが、非常に便利なヒントは?この記事では、我々は誰もが共有すると復号のために一緒に動作します。

640?wx_fmt = JPEG

著者| Duomly
翻訳|半月板、Zebian |火ミン
出品 | CSDN(ID:CSDNnews)

以下は翻訳です。

Javascriptの配列は、最も一般的な概念であり、我々は、配列内のデータを処理するために多くの方法があります。Javascript配列は、最も基本的な概念の一つで考えると、コンセプトは学ぶために初心者をプログラミングに新しいですが、私はこの記事が知られている、少しが、非常に有益なヒントをいくつか説明だと思います。ここで私達は行きます!

640?wx_fmt = PNG

配列から重複を削除

非繰り返しJavascriptの配列から値を抽出する方法:JavaScriptの配列に関連したインタビューの質問では、非常に一般的な問題があります。単に新しいセットを使用する()ことができます:私は、迅速かつ簡単な方法を持っています。二つの方法で実施される方法:.fromを使用して()、拡張別のオペレータ(...)を使用して:

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];

それは簡単ですが、それはないですか?

640?wx_fmt = PNG

配列で指定された値を置き換えます

プログラミングする場合、時にはあなたが特定の値を交換する必要があり、これを達成するための非常にシンプルな方法があります。ただ、(あなたが値、加算する値を削除したい、開始).splitを使用して、3つのパラメータを設定し、いくつかの値を変更するために、あなたはどこ変更することを示しており、どのような新しい価値はい。

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]

640?wx_fmt = PNG

マッピングを実装するために.MAPを()を使用していません

おそらく誰もが.MAP配列()メソッドを知っているが、別の方法があり、あなたが同様の効果を達成するために、同じ簡単な方法を使用することができます。このメソッドは、.from()です:

var friends = [
    { name: ‘John’, age: 22 },
    { name: ‘Peter’, age: 23 },
    { name: ‘Mark’, age: 24 },
    { name: ‘Maria’, age: 22 },
    { name: ‘Monica’, age: 21 },
    { name: ‘Martha’, age: 19 },
]


var friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns [“John”, “Peter”, “Mark”, “Maria”, “Monica”, “Martha”]

640?wx_fmt = PNG

空の配列 

あなたは、配列は空にしたいが、どうするか、のいずれかの要素を削除したくない?場合 実際には、コードのちょうど1ライン:長さが0に設定されています。

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];


fruits.length = 0;
console.log(fruits); // returns []

640?wx_fmt = PNG

オブジェクトにアレイ

配列があれば、我々は、データオブジェクトを置きたい、そして最速の方法は、拡張演算子(...)を使用することです:

var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

640?wx_fmt = PNG

アレイは、データが取り込まれ

有时候需要创建一个数组并用数据填充,或者需要一个所有值都相同的数组,此时可以使用.fill()方法简洁明快地实现:

var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]

640?wx_fmt = PNG

合并数组

你知道怎样可以不使用.concat()来合并数组吗?最简单的方法只需要一行代码。你也许猜到了,那就是扩展运算符(...),它非常适合处理数组:

var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]

640?wx_fmt = PNG

求两个数组的交集

这也是Javascript面试中最常遇到的问题,因为它能展示出你是否会使用数组方法,以及逻辑如何。要找出两个数组的交集,只需要使用之前使用的技巧,首先保证数组中的值不重复,然后利用.filter和.includes方法即可。这样就能找出同时出现在两个数组中的元素。代码如下:

var numOne = [0, 2, 4, 6, 8, 8];
var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]

640?wx_fmt = PNG

从数组中删除假值

首先我们来定义假值。在Javascript中,假值包括false、0、''、null、NaN、undefined。现在可以考虑怎样从数组中删除假值了。只需使用.filter()方法即可实现:

var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]

640?wx_fmt = PNG

从数组中获取随机值

有时候需要从数组中随机选择一个值。简单、快捷、简短且干净的方式就是在数组长度的范围内生成一个随机的索引。代码如下:

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]

640?wx_fmt = PNG

反转数组

需要反转数组时,我们不需要使用复杂的循环和函数来重新创建数组,因为有一个简单的数组方法可以为我们做这件事,只需一行代码,就能反转数组。代码如下:

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse();
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]

640?wx_fmt = PNG

.lastIndexOf()方法

Javascript中有一个有趣的方法,可以让我们找出指定元素最后出现的位置。例如,如果数组中有重复元素,那么可以找出该元素最后出现的位置。代码如下:

var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9

640?wx_fmt = PNG

对数组中的所有值求和

另一个Javascript工程师面试中常见的问题就是对数组中的所有元素求和。这个完全不需要害怕,只需使用.reduce方法,一行代码就可以实现。代码如下:

var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14

640?wx_fmt = PNG

总结

本文向你展示了13个编程技巧,可以保持代码简短整洁。同时别忘了,Javascript中还有许多不同的技巧值得探索,不仅是有关数组的技巧,也包括许多其他的数据类型。希望你喜欢本文的技巧,并能利用这些技巧改善开发流程。

オリジナル:https://dev.to/duomly/13-useful-javascript-array-tips-and-tricks-you-should-know-2jfo

この記事CSDNの翻訳は、元のソースを明記してください。

【終わり】

640?wx_fmt = JPEG

 感熱紙  を推奨 

あなたは、いくつかを知って、HyperledgerファミリーメンバースーパーブックDLT、ライブラリ、開発ツールの記事?
640?wx_fmt = GIF ギフトはノンストップを送信するために、オリジナルの参加アンケートを読むにはこちらをクリック!
640?wx_fmt = PNG
それぞれ「見た目」のあなたのポイント、私は真剣に好きなように

おすすめ

転載: blog.csdn.net/csdnnews/article/details/102763234