jQuery map() で取得した配列を合計する方法

Question

HTMLからjQuery.map()を用いちて、配列を取得した後に、その配列を合計したくreduceを使い、
以下にて試しているのですが、result.reduce is not a function となってしまいます。

function Qty(){
	var result = jQuery(".XXXXlist_ tr select[name^=qty] option:selected").map(function(index, element){
		return element.innerHTML;
	});
	var qtySum = result.reduce(function (sum, element){
		return sum+element;
	},0);
	console.log(qtySum);
}

前半部分のmap()での値取得は成功しているのですが、
取得した配列を合計する方法をお教えいただけますと幸いです。

Answer 1

jQueryのmap()の返り値はjQueryオブジェクトで、jQuery オブジェクトは reduce() をサポートしていません。

必要のないところで jQuery を使うのはやめましょう。

  var result = [...document.querySelectorAll(
      ".XXXXlist_ tr select[name^=qty] option:checked")].map(
      element => element.innerHTML);

または、.get() で配列を取得できます。

    var qtySum = result.get().reduce(function(sum, element) {

Comments

[zagin]

ありがとうございます！こちらの方法でも値返ってきました。

Answer 2

jQueryオブジェクトからデータを抜き出すのはgetです

  var qtySum = result.get().reduce(function(sum, element){
    return sum+parseFloat(element);
  },0);

Comments

[zagin]

ありがとうございます！
.get()での取得、完全に失念していました。

大変助かりました。
jQueryとの複合での記述という点で、シンプルですので、こちらベストアンサーとさせていただきます。