javascript: 配列の空の判定

Question

実現したいこと

jsの変数を下記のような形でnullかどうか判定してnullではない変数の中身を変数resに代入する方法で、配列型変数の時に空の判定がうまくできずに困っています。

let a;
let b = 1;
const res = a | b | {}
console.log(res)
//=> b: 1

let c = 2;
let d;
const res2 = c | d | {}
console.log(res2)
//=> c: 2

let e;
let f;
const res3 = e | f | {}
console.log(res3)
//=> 0

// ## ここの判定について
let arr = [];
let arr2 = [{id: 1, name: 'apple'}]
const res4 = arr | arr2 | {}
console.log(res4)
// 現状: => 0
// 求めている答え: => arr2: {id: 1, name: 'apple'}

Answer 1

そもそも論として、|演算は数値用です（MDN）。

そして、[]はtruthyなので、「lengthが0かどうか」をチェックするなど、相応の手間をかけるより他に方法はありません。

Comments

[nanase21]

let arr = [];
let arr2 = [{id: 1, name: 'apple'}]
let res4;
if(arr.length){
res4 = arr;
}else if(arr2.length){
res4 = arr2;
}
console.log(res4)
となるとこのような方法しかないのでしょうか？

[maisumakun]

そうですね、そんな感じです。

Answer 2

まず、またはの論理演算は、||というように、ヴァーティカルライン二本で結ぶのが正しいです。

さて、配列変数に関しては、宣言時、代入の時点で初期化してしまうと、変数単体では真となりますので、
配列変数の長さで、比較演算してはいかがでしょうか？
また、変数がオブジェクトかどうか（配列はオブジェクトになる）の比較も追加しました。

let arr = [];
let arr2 = [{id: 1, name: 'apple'}];
const res4 = (typeof arr == 'object' && arr.length > 0 ? arr : null) || (typeof arr2 == 'object' && arr2.length > 0 ? arr2 : null) || {};
console.log(res4);

Comments

[nanase21]

この場合って、arrの長さしかみていないですよね？
今、求めている答えとしてはarrに中身があればarrを代入し、arrが空であればほぼほぼある想定のarr2が代入されるのでこれでも問題なさそうですね。

[miyabi_pudding]

質問要件に書いてないので、しっかり要件定義してください。

[maisumakun]

> この場合って、arrの長さしかみていないですよね？

lengthの値をいじった変なオブジェクトを与えることがありうるのであれば、それを考慮したコードとする必要はもちろんあります。

[nanase21]

@miyabi_takatsukさん
申し訳ございませんでした。
確認のために追加でご質問させていただいた次第でございます。
ご不快にさせるつもりはありませんでした。

@maisumakun
ご教示いただきありがとうございました。

[miyabi_pudding]

変数が配列かどうかも比較条件にいれました。
もし、変数が未定義でも、エラーなく比較演算を行える構文です。

[nanase21]

ありがとございます。
私の要件漏れによりお手数をおかけしてしまい申し訳ございませんでした。
ご教示いただきありがとうございました。

Answer 3

OR演算子に対する回答は既出ですので割愛します

配列の空の判定

配列要素を取得したいときは、配列操作するしかありません。
length プロパティは String や HTMLCollection など、多くのオブジェクトが持っていますので、
条件に対し真なら配列を、偽ならfalsyを返却するユーザ関数を書くのが条件を絞りやすいと思います。

動的に push() されるなどで、配列要素は object が格納されることが保証されているならこんな感じでしょうか。

// 追記）空の配列の判定
// const isEmptyArray = a => Array.isArray(a) && !a.length;
const aryHasSomething = a => Array.isArray(a) && a.length && a;
let arr = [];
let arr2 = [{id: 1, name: 'apple'}];
const res4 = (aryHasSomething(arr) || aryHasSomething(arr2))[0] || {};
/*           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~    ~~
              配列 or falsy が返却される ので、配列添字 0 でアクセス    default
 */
console.log(res4)

Comments

[miyabi_pudding]

isArrayの存在をすっかり忘れてました・・・。

[AkitoshiManabe]

コードを読む力になりますので古典を示しても良いと思っています。
むしろ、回答者全員が演算子に言及した点こそ重要。

Answer 4

const res4 =  (arr==0?0:arr) || (arr2==0?0:arr2) || {};

Comments

[yambejp]

おすすめはしせんが、あえて姑息になるならの例です

[nanase21]

ご教示いただきありがとうございます。
このような書き方もあるのですね。
勉強になりました。

Answer 5

やりたいことがよくわかりませんが、丁寧に不具合を入れ込まないように書くと、次のような感じですかね。

空配列と空オブジェクトと、False属性「|」と「||」などを学ばれるとよいと思います。

数値と配列の比較を同列に扱うのは危険というか、普通そんなコード書かないです。

const isUndefined = (value) => {
  return typeof value === 'undefined';
}
const resFunc = (a, b) => {
  if (isUndefined(a) && isUndefined(b)) {
    return 0;
  }
  if (!isUndefined(a)) {
    if (!Array.isArray(a)) {
      return a;
    }
    if (a.length !== 0) {
      return a;
    }
  }
  if (!isUndefined(b)) {
    if (!Array.isArray(b)) {
      return b;
    }
    if (b.length !== 0) {
      return b;
    }
  }
}

let a;
let b = 1;
const res = resFunc(a, b)
console.log(res)
//=> 1

let c = 2;
let d;
const res2 = resFunc(c, d)
console.log(res2)
//=> 2

let e;
let f;
const res3 = resFunc(e, f)
console.log(res3)
//=> 0

// ## ここの判定について
let arr = [];
let arr2 = [{id: 1, name: 'apple'}]
const res4 = resFunc(arr, arr2)
console.log(res4)
// [[object Object] {
//  id: 1,
//  name: "apple"
//}]

https://jsbin.com/yohinapasu/edit?html,js,console