Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

operator/演算子 #32

Closed
10 tasks done
azu opened this issue May 26, 2016 · 15 comments
Closed
10 tasks done

operator/演算子 #32

azu opened this issue May 26, 2016 · 15 comments

Comments

@azu
Copy link
Collaborator

azu commented May 26, 2016

#17 基本文法

演算子について

  • 一つの節に演算子をまとめるの目的
  • 演算子は検索がしにくいため、知らない記号がでてきたらここを見てという意図
  • 型変換の詳細は別にする
  • 二項演算子
    • プラス (+
    • マイナス (-
    • 乗算 (*
    • 除算 (/
    • 剰余 (%
    • 指数演算子 (**
  • グループ演算子
  • 単項演算子(算術)
    • 単項プラス (+
    • 単項マイナス (-
    • インクリメント (++
    • デクリメント (--
  • 比較演算子
    • 等しい (==
    • 等しくない (!=
    • 厳密に等しい (===
    • 厳密に等しくない (!==
    • より大きい (>
    • 以上 (>=
    • より小さい (<
    • 以下 (<=
  • ビット演算子
    • ビット論理積 (&
    • ビット論理和 (`|&)
    • ビット排他的論理和 (^
    • ビット否定 (~
    • 左シフト(<<
    • 右シフト(>>
    • ゼロ埋め右シフト(>>>
  • 代入演算子
  • 条件(三項)演算子
  • 論理演算子
    • AND(&&)
    • OR(||)
    • NOT(!)
  • 文字列演算子
  • コンマ演算子
  • 余白
    - [ ] 単項演算子(特殊)
    - delete演算子
    - typeof演算子
    - void演算子
    - [ ] 関係演算子
    - in演算子
    - instanceof演算子
    • [仕様] 演算子の優先度
    • [構文] typeofは typeof()とかけるとけど、これは()という演算子とtypeof演算子が組み合わさっているだけ = 関数ではない
    • [仕様] NaN
      • *でNaNになる仕組み
      • IEEE 754で決められた仕組み
      • Infinity
    • [演算子] 優先度の調整をするには () を使う
    • [演算子] 四則演算はどの言語でも同じ
    • [演算子] ビット演算子は使うひとは使うという感じ
    • [演算子] andとor演算子は、四則演算/比較以外だと多用される
    • [Tips] ショートカット的な使い方をすることが多い
    • [型変換] || は 0 がfalsyであることに気をつける必要がある
    • [型変換] 比較演算子の==はほぼ使わない
    • [型変換] 例外は == null のみ
    • [型変換] 基本的には === のみを使う方が安全
    • [型変換] JavaScriptには暗黙的な型変換があるため
    • [演算子] == null は === null && === undefinedという意味
    • [演算子] ++と--は実はここまで使って来なかった? forで使ってるかも
    • [演算子] ++はインクリメンタル += 1
    • [演算子] --はデクリメンタル -= 1
    • [演算子] + は文字列結合としても使える
    • [仕様] JavaScriptに演算子overloadはない
      • 一時期提案されてたけどどっかいった
    • [演算子] + は数字と文字列のみとする
    • [型変換] + は文字列を数字に変換する
    • [型変換] + は Number(string) にする
    • [型変換] - は数字に変換する
    • [型変換] - を文字列に使うのはハック的なやりかた
    • [演算子] ! は真偽値を反転させる
    • [型変換] ! は評価した値を反転ので、暗黙的な型変換が行われる
    • [型変換] 演算子はなんだかんだと勝手に型変換が行われる
    • [型変換] 同じ型以外を安易に比較してはいけない
    • [型変換] どうやって同じ型だけに限定するかというのも考える必要がある
    • [比較] プリミティブに落として比較するよりオブジェクトかどうかの真偽値を取る方法[比較] Array.isArray、Object.isなど、Object.shallowEqualなど
    • [[class]]とtoStringの問題
    • [型変換] 型変換は明示的に行う
    • [型変換] 暗黙的な型変換を避ける
    • [型変換] Symbolは暗黙的な型変換を潰している
    • [型変換] JSDocを使うことでコーディング時の型違反エラーに気付く
    • [アンチパターン] 一つの関数で型ごとに処理を分けるのは避けたい
    • [アンチパターン] jQueryで行われている
    • [アンチパターン] 言語レベルのサポートがないため難しい書き方になる
    • [構文] /と正規表現リテラルとコメントは紛らわしいという問題がある
    • [構文] パースするのが難しかったがsweet.jsのやつで解決できてた
    • [演算子] newとかin...演算子はどうするか?
    • [演算子] in演算子はプロトタイプチェーン
    • [演算子] ...はspread の話でまとめたい
    • [演算子] 演算子の話を演算子の話でまとめるのは難しい
    • [演算子] 助詞みたいな話なので、演算子だけどうこうできることは少ない
    • [演算子] 論理演算子はできるだけ簡潔に
    • 複数の方向の条件を一つの文でまぜない
    • [Tips] ベン図を書いて解決してみる => リーダブルコードに載ってる
    • [Tips] 演算子の間違いはバグを起こしやすい
    • [Tips] テストしたい条件分岐
    • [型変換] JavaScriptには静的型ではないのた、間違った演算ができる
    • [型変換] NaN、無限などが生まれる
    • [型変換] これが生まれる前提のコードをかいては行けない
      • ゆーざーの任意入力を直接扱う場合ぐらい?
      • 入力を受け取る前に弾いたほうがいいのではないかな
    • [Number] +0-0は異なる
    • [判定] Object.isでは判定できる
    • [判定] +∞なのか-∞なのかという違いがでる
    • 仕様での分類
    • [判定] 複雑な例 Rule no-mixed-operators - ESLint - Pluggable JavaScript linter
    • [分類] 12.4 Update Expressions
      • ++
    • [分類] 12.5 Unary Operators
      • delete
      • void
      • [登場済み] typeof
      • [型変換] +
      • [型変換] -
      • ~
      • !
    • [分類] 12.6 Exponentiation Operator
      • **
    • [分類] 12.7 Multiplicative Operators
      • [登場済み] *
      • [登場済み] /
      • [登場済み] %
    • [分類] 12.8 Additive Operators
      • [登場済み] +
      • [登場済み] -
    • [分類] 12.9 Bitwise Shift Operators
      • <<
    • [分類] 12.10 Relational Operators
      • <
      • <=
      • =

      • instanceof
      • [登場済み?] in
        • for in
      • true or falseを返す
    • [分類] 12.11 Equality Operators
      • ==
      • !=
      • [登場済み] ===
      • [登場済み] !==
    • [分類] 12.12 Binary Bitwise Operators
      • &
      • ^
      • !
    • [分類] 12.13 Binary Logical Operators
      • &&
      • ||
    • [分類] 12.14 Conditional Operator
      • [登場済み] ? :
    • [分類] 12.15 Assignment Operators
      • *=/=%=+=-=<<=>>=>>>=&=^=|=**=
    • [分類] 12.16 Comma Operator
      • [登場済み] ,
    • MDNの分類
    • 分類

演算子はJavaScriptの歴史が詰まった感じなので、色々だけここでまとめられるものはまとめたい。
演算子は検索がしにくいのもあるため、このページに書いてあったような気がするという感じにまとめたい

@azu
Copy link
Collaborator Author

azu commented Jun 24, 2016

特に四則演算を説明するには、暗黙的な型変換と明示的な型変換について事前に知っていないと難しそう。 #53
逆に暗黙的な型変換をしてはいけない理由をちゃんと出す必要がある。

一つ具体的でES2015ではまる可能性が高いものとして、 Symbol() + "文字列"がある。

Symbol() + "文字列";

はエラーで

String(Symbol()) +"文字列"

ならOKであるというのは、暗黙的な型変換に頼っては行けない理由の一つ。

@azu azu modified the milestone: 7th Meeting Jun 30, 2016
@azu azu changed the title 式と演算子 operator/演算子 Jul 2, 2016
@azu
Copy link
Collaborator Author

azu commented Jul 21, 2016

話の大きな流れとしては、
演算子の紹介 -> 異なる型を演算したらどうなる? -> #53 型変換の仕方
となるはず

演算子 -> 暗黙の型変換 -> 明示的な型変換

@azu
Copy link
Collaborator Author

azu commented Jul 21, 2016

Operator Description Example
+ 足し算 1+1 === 2
- 引き算 1-1 === 0
* 掛け算 2*8===16
/ 割り算 8/2===4
** べき乗 2**3===8

やたら大量にでてくるのでグループ毎に簡易なまとめをもうけるのが良さそうな気がする

@azu
Copy link
Collaborator Author

azu commented Jul 22, 2016

** で∞とNaNになるパターン一覧
http://www.ecma-international.org/ecma-262/7.0/#sec-applying-the-exp-operator

基本的に IEEE 754 なので、IEEE 754に簡単に触れるのがいい気がするけど、
IEEE 754についての細かい仕組みは理解しなくてもプログラミングできる気はするな。
一定の上限とかがあるみたいなことがわかっていれば

@azu
Copy link
Collaborator Author

azu commented Jul 22, 2016

分類はこれでやるのが良さそう。

12 ECMAScript Language: Expressions

12.1 Identifiers
12.2 Primary Expression
12.3 Left-Hand-Side Expressions
12.4 Update Expressions
12.5 Unary Operators
12.6 Exponentiation Operator
12.7 Multiplicative Operators
12.8 Additive Operators
12.9 Bitwise Shift Operators
12.10 Relational Operators
12.11 Equality Operators
12.12 Binary Bitwise Operators
12.13 Binary Logical Operators
12.14 Conditional Operator ( ? : )
12.15 Assignment Operators
12.16 Comma Operator ( , )

#32 (comment) へ加えた

@azu
Copy link
Collaborator Author

azu commented Jul 23, 2016

これは紙面的な作りと、ウェブ向けの作りがあったほうがよいなと思った。
例えば、実行環境があるウェブ向けなら、そのばで実行できることを前提とした作りの方が理解がし易い。
演算子ってアルゴリズム的に理解するものでもないはずなので、ひたすら実例で理解した方がいい。

@azu
Copy link
Collaborator Author

azu commented Jul 24, 2016

等価性の比較とその使いどころ - JavaScript | MDN

Object.is=== の違いについて分かりやすい。
Object.is って変化したって事を知りたい時に(shallowEqual)で使ってるぐらいな印象。
他のケースで Object.is って何に使うんだろ? TypedArrayとかそっちなのかなー

@azu
Copy link
Collaborator Author

azu commented Jul 25, 2016

見間違いやすい演算子の例が欲しいな。
グループ演算子を使って明示という感じの

@azu
Copy link
Collaborator Author

azu commented Jul 26, 2016

Effective JavaScriptの第1章が浮動小数点数とかNaNの話なので参考になりそう

@azu
Copy link
Collaborator Author

azu commented Jul 27, 2016

@azu
Copy link
Collaborator Author

azu commented Jul 27, 2016

条件演算子と短絡評価についてはからめて話をしたい気がする。

const と 条件演算子 と 短絡評価。
なので関数の引数の処理をやってみるのがいいのかな。
ある具体的な形の関数にしたいなー

長期的には、この部分がデフォルト引数とかに繋がる気がする

@azu
Copy link
Collaborator Author

azu commented Jul 30, 2016

特殊な単項演算子についてはここで説明するのはやめました。
ここでは検索が難しい記号の演算子をまとめるという目標にしています。
なので、すべての演算子をまとめるのが目的ではないのでやめます。

以下は草案の文章


単項演算子(特殊)

delete演算子

オブジェクトのプロパティ または 配列の指定した添字を削除する。

var obj = { key: "value" };
delete obj.key;
console.log(obj.key); // => undefined
var array = [5, 10];
delete array[0];
console.log(array[0]); // => undefined
console.log(array[1]); // => 10

変数を削除する演算子ではない。

var foo = "val";
delete foo; // => Error

typeof演算子

説明済み。プリミティブとオブジェクトの判定について。

typeof "value"; // => "string"
typeof 42; // => "number"

void演算子

undefinedを返す特性を利用した圧縮やブックマークレットの仕組みに使われている。

void 0;// => undefined

関係演算子

in演算子

for...in文と同じ。

var object = { "key": "value" };
"key" in object; // => true
Reflect.has(object, "key"); // => true
object.hasOwnProperty("key"); // => true

@azu
Copy link
Collaborator Author

azu commented Jul 30, 2016

https://asciidwango.github.io/js-primer/basic/operator/ landed.
全体的に細かすぎるのでどうにかできたらどうにかしたい感じではある。

一つの節に演算子をまとめるの目的

ひとまず目的は達成したので閉じます。

@azu azu closed this as completed Jul 30, 2016
@azu
Copy link
Collaborator Author

azu commented Jul 31, 2016

+= とかのについて書いてない

azu added a commit that referenced this issue Jul 31, 2016
- 代入演算子と二項演算子について
- 分割代入(Destructuring assignment)

refs #32 #113
azu added a commit that referenced this issue Jul 31, 2016
- 代入演算子と二項演算子について
- 分割代入(Destructuring assignment)

refs #32 #113
@azu
Copy link
Collaborator Author

azu commented Nov 8, 2016

Operatorが長すぎる問題
比較演算子だけを取り出すという手法がありそう。
プリミティブとオブジェクト #145 の問題で、基本型と参照型の違いの話として"比較"がでてくるので、
これだけを先に取り出してしまうのはありそう。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant