js 基本文法を学ぶ過程で、出会った知識点や問題を記録しておくことで、将来の復習や参考にします。
データ型には：データ、文字列、配列、数字、ブール値などがあります。
一、データ型#
1. 数字#
2. ブール値#
true と false の 2 種類のみで、直接 true と false を使って表現できます。例えば：
true; //true
false; //false
2>1; //true
2>3; //false
かつ &&
両方がtrueのとき、演算結果はtrueになります。
または ||
どちらか一方がtrueであれば、演算結果はtrueになります。
否定 ！
プログラムがtrueのとき、演算結果は反転してfalseになります。
var age = 15;
if(age >= 18) {
alert('成人')
}else{
alert('未成年')
}
age の値は 15 で、age が 18 以上のときにブラウザが成人と表示し、それ以外は未成年と表示します。
3. 文字列#
4. 比較演算子#
==と===
==を使用して比較すると、一般的に型が自動的に変換されてから比較されます。
===を使用して比較すると、データ型が異なる場合は直接falseが返され、型が一致した後に比較が行われます。
特別なnumberとしてNaNがあり、これはどの値とも等しくなく、自分自身のNaNとも等しくありません。
NaN === NaN //false
5.nullとundefined#
nullは空の値を表し、0は数値を表し、''は長さ 0 の文字列を表しますが、nullは空を示します。
undefinedは未定義を示します。
しかし、両者の違いを区別することはあまり意味がなく、大多数はnullを使用し、undefinedは関数の引数が渡されたかどうかを判断する場合にのみ役立ちます。
6. 配列 Array#
[ ] 、順序付けられた集合を表し、その中の各値を要素と呼びます。
new Array(1,2,3) //[1,2,3]
配列のインデックス
二、オブジェクトと変数#
var person = {
name: 'ジャック',
age: 20,
city: '杭州'
}
personはオブジェクト変数で、name: 'ジャック'はキーと値のペアで、nameは属性名、'ジャック'は属性です。
オブジェクトの属性を取得するには、オブジェクト変数.属性を使用します。つまり、person.nameで、結果はジャックになります。
person.name //ジャック
person.age //20
varは動的言語で、たとえ var で x = 100 を定義しても、その後 x = x + 100 とすると 200 になります。
var x = 100;
x = x + 100;
console.log(x) //200
もし int を使って x を定義した場合、後の x = x + 100 はエラーになります。
また、var で定義された変数はその関数のスコープ内にのみ存在し、デフォルトのグローバル変数ではありません。
varを使用せずに、直接 i = 100 と定義すると、変数 i は自動的にグローバル変数として扱われます。
三、文字列#
エスケープ文字\を使用する必要があります。
1. テンプレート文字列#
var name = '小明';
var age = 20;
var message = name + 'は今年' + age + '歳です';
//小明は今年20歳です
var message = `${name}、あなたは今年${20}歳です`
//ES6で追加された構文、同じ結果
文字列は変更できません
文字列の特定のインデックスに値を割り当ててもエラーは発生せず、何の変更も起こりません。
var a = 'hello,world!'
a[0]; //h
a[0] = k;
console.log(a); //結果は'hello,world!'、変更はありません
2.toUpperCase 大文字#
これは新しい文字列を返し、文字列をすべて大文字に変換します。
var a = 'hello';
a.toUpperCase(); //返すHELLO
3.toLowerCase 小文字#
これは新しい文字列を返し、文字列をすべて小文字に変換します。
var a = 'hello'
a.toLowerCase(); //HELLO
4.indexOf#
指定された文字列のインデックスを返し、指定された文字列が見つからない場合は-1を返します。
var a = 'hello,world!'
a.indexOf('world'); //6
5.substring#
指定された範囲のインデックスの文字列を返し、前の数を含み、後の数を含みません。
var a = 'hello,world!'
a.substrng(0, 5); //hello
()の中に 1 つの数値だけがある場合、その数値のインデックスから終了まで取得します。例えば：
var a = 'hello,world!';
a.substring(6); //返すworld!
四、配列#
配列Arrayは任意のデータ型を含むことができ、インデックスを通じて各データにアクセスできます。
1.length 属性#
Arrayの長さはlength属性を使用して取得でき、インデックスとは異なり、1 から計算されます。
var arr = [1,2,3,'hello',null,true]
arr.length; //返す6
lengthの値を変更することで、配列の内容のサイズを変更できます。
var arr = [1,2,3,'hello',null,true]
arr.length; //6
arr.length = 8; //[1,2,3,'hello',null,true,undefined,undefined]
arr.length = 2; //[1,2]
2. インデックスを通じて配列を変更#
Arrayはインデックスを通じて対応する要素を直接変更できます。
var arr = [1,2,3]
arr[1] = 'hello'
console.log(arr); //[1,'hello',3]
js はインデックスを通じて配列の長さを変更することを許可しますが、エラーは発生しませんが、推奨されません。
3.indexOf#
ArrayはindexOfを使用して指定された要素のインデックスを検索できます。
var arr = [1,2,3,'hello']
arr.indexOf(1); //0
arr.indexOf(3); //2
4.slice#
slice属性はsubstringに似ており、後者は文字列の内容を切り取りますが、sliceは配列の内容を切り取り、新しい配列を返します。
2 つの数値がある場合、前の数値を含み、後の数値を含みません。1 つの数値だけの場合は、その数値から終了まで取得します。
var arr = [1,2,3,4,5];
arr.slice[0,2]; //返す[1,2]
arr.slice[2]; //返す[3,4,5]
sliceで数値を指定しない場合、配列のすべての内容を返します。この特性を利用して、同じ配列をコピーできます。
var arr = [1,2,3];
var arr1 = arr.slice();
console.log(arr1); //[1,2,3]
arr1 === arr; //true
注意：2 つの配列を比較すると、内容が同じでも false になります。
var arr = [1,2,3] var arr1 = [1,2,3] arr === arr1 //false
5.push と pop#
push()は配列の末尾に要素を追加します。
pop()は配列の最後の要素を削除します。
6.unshift と shift#
unshift()は配列の先頭に要素を追加します。
shift()は配列の最初の要素を削除します。
7.sort#
sort()は配列をソートできます。現在の配列の要素の位置を直接変更し、呼び出すとデフォルトの方法でソートされます。
var arr = [B,A,C]
arr.sort();
arr //[A,B,C]
8.reverse#
reverse()は配列全体を逆にします。反転ソートではありません。
var arr = [2,1,3]
arr.reverse();
arr; //[3,1,2]
9.splice#
この属性は万能なメソッドで、splice()を呼び出すことで、指定されたインデックスから要素を削除したり追加したりできます。
五、条件判断#
js では、if() {...} else {...}を使用して条件判断を行います。
var age = 22;
if(age>20) {
// age>20が成立した場合、この文を実行します
console.log('22>20')
}else {
// age>20が成立しない場合、この文を実行します
console.log('22<20')
}
最終的に、コンソールには22>20と表示されます。条件が成立したためです。
実行する文は
{}で囲む必要があります。他の状況でエラーが発生しないようにします。
複数条件判断文
3 つ以上の条件判断文は、複数条件判断文と呼ばれます。
var a = 10
if(a<10) {
console.log('a<10')
}else if(a>20){
console.log('a>10')
}else{
console.log('10<=a<=20')
}
複数の条件がすべて満たされている場合、最初に満たされた結果を取り、そのコードを実行し、その後の満たされた条件は自動的に無視されるため、条件判断を行う際には、重複した条件を判断しないようにしてください。
複雑な複数条件判断文
var height = parseFloat(prompt('身長(m)を入力してください:'));
var weight = parseFloat(prompt('体重(kg)を入力してください:'));
var bmi = weight/(height*height);
if(bmi < 18.5) {
console.log('過軽')
}else if(bmi>18.5,bmi<25) {
console.log('正常')
}else if(bmi>25,bmi<28){
console.log('過重')
}else if(bmi>28,bmi<32){
console.log('肥満')
}else{
console.log('重度肥満')
}
parseFloatは文字列を解析し、数値を返します。
六、ループ#
簡単な計算は手で入力できます。
1 + 2 + 3
// コンソール出力 6
しかし、数百回、数千回、数万回の計算を手で入力することはできないため、ループ文を使用して計算を行います。コンピュータが何千回もの計算を行えるようにするためです。
ループ文には 2 種類あり、for と while があり、それぞれ異なる使い方があり、異なる状況に適応します。
1. for ループ#
初期条件、終了条件、増加条件を通じて文をループ実行します。
var x = 0
var i
for(i = 1; i <= 1000; i++) {
x = x + i
}
i = 1 は初期条件で、i は 1 から始まります。
i<= は判断条件で、満たされればループを実行し、満たされなければループを終了します。
i++ は増加条件で、各ループの後に + 1 されます。無数回後に i<=1000 が満たされなくなると、ループを抜けます。
2. for 文を使って配列をループする#
var arr = ['apple', 'banana', 'orange']
var x,i
for(i = 0; i < arr.length; i++) {
x = arr[i]
console.log(x)
}
3. break で for ループを終了する#
var x = 0;
for ( ; ; ) { // 無限ループになります
if (x > 100) {
console.log(x)
break; // if判断でループを終了します
}
x ++;
}
4. for...in#
オブジェクトの属性をループで取り出すことができます。
var person = {
name: 'ジャック',
age: 20,
city: '北京'
};
for(var i in person) {
console.log(i)
console.log(person[i])
}
var i in personは person の中のすべての属性をループで取り出し、console.log(i)で属性名を表示し、console.log(person[i])で属性値を表示します。
配列に対してこの操作を行うと、配列要素のインデックスが表示され、表示結果は文字列形式になります。
5. while ループ#
whileループは判断条件を無視する場合に適しており、forは初期条件と終了条件が明確な場合に適しています。
例えば、1 から 100 までの偶数の合計を計算するには、whileループを使用できます。
var x = 0
var n = 99
while (n > 0) {
x = x + n
n = n - 2
}
x
内部の変数 n はどんどん減少し、n が - 1 になると、判断条件を満たさなくなり、その時点でループを終了します。
6. do...while#
do...whileループは先にループを実行し、その後に条件を判断します。したがって、条件が満たされているかどうかに関わらず、do...whileは少なくとも 1 回はループを実行します。これがforやwhileとの違いです。
例えば：
var n = 0
do{
n = n + 1
}while(n > 1)
n; //1
最初にn=0を定義し、その後n=n+1を実行するので、n=1になり、条件を判断します。n>1 のときに実行されず、条件を満たさないため、ループを終了し、コンソールにnを出力します。結果は1です。
七、Map と Set#
1. Map#
Mapはキーと値のペアの構造で、非常に高速な検索速度を持っています。
属性名と属性値が対応する配列を定義すれば、その配列から name を通じてデータを直接検索できます。
var m = new Map([['ジャック', 95], ['ボブ', 94], ['リンダ', 93]])
m.get('ジャック')
まず、Map配列を初期化します。
var m = new Map(); //空のmap
m.set('ジャック', 95) //新しいキーと値のペアを追加 key-value
m.has('ジャック') // 'ジャック'キーが存在するか確認
m.get('ジャック') // 'ジャック'に対応するデータを取得 value
m.delete('ジャック') // 'ジャック'キーと値のペアを削除 key-value
m.get('ジャック') //undefined
1 つの key は 1 つの value にしか対応できないため、重複して値を割り当てると、後のデータが前のデータを上書きします。
var m = new Map();
m.set('アダム', 67);
m.set('アダム', 88);
m.get('アダム'); // 88
2. Set#
setは値をkeyとして保存し、valueは保存しません。また、set内ではkeyが重複することはできず、重複があった場合は自動的に無視されます。
まず、空のsetを作成します。
var m = new Set() //空のset
m.add(1) //keyを追加
m.delete(1) //keyを削除
m //コンソールに空の配列が表示され、データはありません