es6で配列の最大値を見つける方法

配列の最大値を見つける方法: 1. Math.max() は apply() とともに使用され、最大値を見つけます。構文は「Math.max.apply(null,array);」です。 "; 2. Math.max() を併用します。展開演算子 "..." を使用して検索します。構文は "Math.max(...array);"; 3. Reduce() を使用して検索します。構文は「array.reduce((a,b)=>{return a=a>b?a:b});」です。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

配列の最大値を取得するいくつかの方法

// 写法一：
Math.max.apply(null, [14, 3, 77, 30]);

// 写法二：
Math.max(...[14, 3, 77, 30]);

// 写法三：reduce
[14,3,77,30].reduce((accumulator, currentValue)=>{
    return accumulator = accumulator > currentValue ? accumulator : currentValue
});

記述方法は 3 つあり、最初の 2 つは Math を使用します。 () メソッドが実装されています。最後のメソッドは reduceAPI を使用します。以下では、基本的な Math.max() メソッドを使用して最大値を達成する方法について説明します。配列の説明、例での apply メソッドの適用の詳細な説明、reduceAPI の紹介と使用法。

Math.max()

---

最初の 2 つの記述メソッドは、これから紹介する Math.max() メソッドを使用します。まずは次の方法を検討してください。

Math.max() 関数は、一連の数値の最大値を返します。

使用法:

Math.max(10, 20);   //  20
Math.max(-10, -20); // -10
Math.max(-10, 20);  //  20

これは、数値グループの 最大値であり、配列の最大値ではないことに注意してください。 , 上記の使用法から、パラメーターは配列ではなく、カンマで区切られた一連の数値であることがわかります。そのため、このメソッドを直接使用して配列の最大値を達成することはできませんが、いくつかの改善を加えます。

apply メソッドとスプレッド演算子の使用法

---

##1. applyメソッド

前述したように、

Math.max() メソッドを直接使用して配列の最大値を取得することはできません。 ES5 適用メソッドを満たします。

ここでは主に、apply を使用して配列の最大値を取得できる理由について説明します

console.log(Math.max(1, 2, 344, 44, 2, 2, 333));

console.log(Math.max.call(null, 1, 2, 344, 44, 2, 2, 333));

console.log(Math.max.apply(null, [1, 2, 344, 44, 2, 2, 333]));

call() メソッドが関数を呼び出すとき、パラメータは通常の関数と同じ方法で渡されます。

Math.maxのcallメソッドを使用し、最初のパラメータとしてnullを渡すことで、使い方は元のMath.max()と同じです。 、配列の取得はまだ実装されていません。最大値ですが、これは Math.max.apply(null, [14, 3, 77, 30]);# の仕組みを理解するための最初の重要なステップです。 ＃＃ 書かれた。

Math.max()

はパラメータ リスト、つまり一連の数値を使用します。ターゲットは配列です。call メソッドについては前に述べたので、apply メソッドを使用できます。違いは、apply() メソッドは、ニーズを達成するためにパラメーター配列 を受け入れることです。 したがって、

Math.max

の apply メソッドを使用し、最初のパラメーターとして null を渡し、2 番目のパラメーターとして配列を渡します。これは私たちのニーズを満たします。

2. 展開演算子の使用

Math.max()

の apply メソッドの使用について説明しました。この機能を実現するには、実際のところ、apply メソッドを手動で実装したときに、パラメーターの問題で特別な処理を行いました。入力されたパラメーター配列を apply 内のパラメーター リストに分解するにはどうすればよいでしょうか? ES6 を適用すると、スプレッド演算子が使用されます。 スプレッド演算子を使用してパラメータ配列をパラメータ リストに分解できるため、これを

Math.max() に直接使用してみてはいかがでしょうか。

スプレッド演算子を使用すると、次の最大値を取得できます。配列 値を実装するもう 1 つの方法。これにより、配列内の最大値を簡単に取得できます。 <pre class='brush:php;toolbar:false;'>var arr = [1, 2, 3]; var max = Math.max(...arr); // 3</pre>

reduce

reduce API を使用して配列の最大値を取得します:

---

// reduce
[14,3,77,30].reduce((accumulator, currentValue)=>{
    return accumulator = accumulator > currentValue ? accumulator : currentValue
});

詳細な説明reduce メソッドのパラメータの説明この記事では、reduce API の使用方法について説明します

#reduce() メソッドは、ユーザーが提供するリデューサー関数を実行します。配列内の各要素に対して (昇順で実行され)、その結果を 1 つの戻り値に要約します。

このメソッドのパラメータに注意することが重要です:

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

要約すると、reduce メソッドには 2 つのパラメータがあります。1 つはコールバック (定義したリデューサ関数)、もう 1 つはコールバックです。もう 1 つは、initialValue です。これは初期値です。

ほとんどの場合、initialValue パラメータは使用せず、コールバックのみを使用します。ただし、initialValue パラメータは、reduce メソッドに非常に関連しているため、initialValue パラメータの目的、およびその他の機能を理解しておく必要があります。パラメータが使用されます。

コールバックと初期値の 2 つのパラメーターについて詳しく説明します。 ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃折り返し電話： ＃＃＃＃＃＃

callback 执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，注意这个：如果没有提供 initialValue则第一个值除外，你会发现initialValue在reduce方法中比较关键，如果搞不清楚initialValue参数的意义，几乎很难去运用reduce方法。

callback函数又有四个参数，其中前三个参数也是十分关键的，和initialValue参数一样，需要搞清楚含义，分别是：accumulator，currentValue 和 index。

之所以说清楚reduce方法的几个关键参数是非常关键的，主要就在于，initialValue初始值有和没有这两种情况下，callback的三个参数（accumulator，currentValue 和 index）是不一样的。

• initialValue：

initialValue参数 可选，这个参数作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

下面讲方法在执行过程中，callback的三个参数（accumulator，currentValue 和 index）是如何不一样的：

回调函数第一次执行时，accumulator 和currentValue的取值有两种情况：如果调用reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值；如果没有提供 initialValue，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值。

注意：如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

这也是index参数里描述的：index 可选。是数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始。

reduce方法如何运行

1.无初始值的情况

假如运行下段reduce()代码：

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
});

callback 被调用四次，每次调用的参数和返回值如下表：

由reduce返回的值将是最后一次回调返回值（10）。

你还可以使用箭头函数来代替完整的函数。 下面的代码将产生与上面的代码相同的输出：

[0, 1, 2, 3, 4].reduce((prev, curr) => prev + curr );

2.有初始值的情况

如果你打算提供一个初始值作为reduce()方法的第二个参数，以下是运行过程及结果：

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
    return accumulator + currentValue
}, 10)

这种情况下reduce()返回的值是20。

reduce使用场景

reduce使用场景1.将二维数组转化为一维

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(a, b) {
    return a.concat(b);
  },
  []
);
// flattened is [0, 1, 2, 3, 4, 5]

写成箭头函数的形式：

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
 ( acc, cur ) => acc.concat(cur),
 []
);

注意！！！上面这个例子，有初始值，初始值是一个空数组[]。

concat()方法介绍：

concat() 方法用于合并两个或多个数组。

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

连接两个数组

以下代码将两个数组合并为一个新数组：

var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];

alpha.concat(numeric);
// result in ['a', 'b', 'c', 1, 2, 3]

连接三个数组

以下代码将三个数组合并为一个新数组：

var num1 = [1, 2, 3],
    num2 = [4, 5, 6],
    num3 = [7, 8, 9];

var nums = num1.concat(num2, num3);

console.log(nums);
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]

reduce使用场景2.数组里所有值的和

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// 和为 6

写成箭头函数的形式：

var total = [ 0, 1, 2, 3 ].reduce(
  ( acc, cur ) => acc + cur,
  0
);

注意，这里设置了初始值，为0，如果不这个初始值会怎么样呢？数组为空的时候，会抛错TypeError,再看一遍下面的描述：

如果数组为空且没有提供initialValue，会抛出TypeError 。如果数组仅有一个元素（无论位置如何）并且没有提供initialValue， 或者有提供initialValue但是数组为空，那么此唯一值将被返回并且callback不会被执行。

所以，在使用reduce时我们可以先判断一下数组是否为空，来避免这个问题。

【相关推荐：javascript视频教程、编程视频】

以上がes6で配列の最大値を見つける方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。