H5 の新機能、CSS3 および ES5、ES6 の新機能

1.H5を新たに追加

新機能: セマンティック タグ、オーディオおよびビデオ処理 API、キャンバス、ドラッグ アンド ドロップ API、履歴 API、地理的位置 API、webSocket、web ストレージの localStorage および SessionStorage、フォーム コントロール

フォーム コントロール:
color: カラー コントロール、トリガーされるとカラー ピッカーが開きます <input type="color">
date: 時間コントロール、年、月、日を表示 <input type="date">
datetime-local: 時間コントロール、年と月の表示 日 + 時間 <input type="datetime-local">
月: 時間コントロール、年 + 月を表示 <input type="month">
時間: 時間コントロール、時間 <input type="time">
週を表示: 週の制御、表示年 + 周期番号 <input type="week">
email: メールの形式を確認するための制御 <input type="email">
tel: 電話の形式を確認するための制御 (最終的にはこの 0830-120-111 と表示されます) <input type="tel">
range: 不確かな精度の数値を入力します。デフォルト値は中間値で、min と max を使用して許容範囲を調整します <input type="range"> text: 1 行のテキストを入力し
ます、
Enter を 押す 検索">

2.CSS3の新機能

a) 新しいセレクター p:nth-child(n){color: rgba(255,O,0,0.75)}; b)
フレックス ボックス モデル表示: flex;
c) マルチカラム レイアウト column-count: 5;
d )メディアクエリ @media (max-width: 480px){.box: fcolumn-count: 1}} e
) パーソナライズされたフォント @font-face{font-family: BorderWeb;
src:urI(BORDERWO.eot);}
f ) color透明度の色: rgba(255,0,0,0.75);
g) 角丸ボーダー-半径: 5px;
h) 背景グラデーション背景: 線形グラデーション (赤、緑、青);
i) シャドー ボックス-影: 3px 3px 3px rgba (0,64,128,0.3); j) リフレクション box-reflect: 2px 未満;
k) テキスト装飾 text-stroke-color: 赤;
I) テキスト オーバーフロー text-overflow: 省略記号;
m) 背景効果 background- size: 100px 100px;
n) スムーズなトランジション トランジション: すべての .3s イーズイン . 1s;
o) アニメーション @keyframes anim-1{50% (border-radius: 50%;j}animation:
anim-1 1s;
p) transform transform
1 回転変換: 回転(20deg);
2 傾斜変換: 傾斜 (150deg, - 10deg);
3 変位変換: 平行移動 (20px, 20px);
4 スケーリング変換: スケール (.5);

3.ES5の新機能

1. ES5 の新しい構文 - Strict モード

①厳格モードを有効にします。

グローバル/ローカルの先頭に、文字列「use strict」を追加します

②厳格モードの特徴：

1. 変数を定義するために var を省略することは許可されていません。関数の仮パラメーターに同じ名前を付けることは許可されていません。通常の関数では、これは window を表すことが許可されていません。これは未定義です。

2. グローバルに有効化された厳格モードはすべてのコードを規制でき、ローカルで有効化された厳格モードはローカルコードのみを規制できます

③このキーワード：

1. グローバルな this、通常の関数の this、および自己呼び出し関数の this はすべてウィンドウを表します

2. イベント関数内のこれは、イベント ソースを表します

3. object メソッド内の this は、現在のオブジェクトを表します

2. ES5 はいくつかの配列メソッドを追加します

1. indexOf: 配列内で要素が最初に出現する添字を見つける

構文: Array.indexOf (指定された要素)
戻り値: 配列内に要素が見つかった場合はその要素に対応する添字を返し、見つからなかった場合は -1 を返します

var arr = [1,2,3,4,5,6,7,8,9]
//查找数字5在数组中的位置
var index = arr.indexOf(5)
// console.log(index);
// 利用indexOf判断某个元素是否数组中

2. forEach: 配列をトラバースするために使用 - 新しい配列は生成されません

構文: array.forEach(function(value,index,array){
value は毎回トラバースされる要素です
index は各要素に対応する添え字です
array は現在トラバースされている配列です
})
index と array はオプションのパラメータです。これら 2 つのパラメータは追加してもしなくてもかまいません.
この トラバーサル メソッドは for ループ トラバーサルを使用するのと同じ効果があります. for ループはメソッド内にカプセル化されています
が, for ループとは異なります. 違いは次のとおりです.

forEach の実装原理と通常の for ループの違いは?

1. 実装原理: foreach ループは実際には拡張された for ループです. for ループと比較して, より簡潔であり, 配列またはコレクションをトラバースするために使用できます. その根底にある原理は反復子の機能を実現することです. , foreach Iterable インターフェースを実装するすべてのオブジェクトをトラバースできます。

2. 違い:

1) パフォーマンスの違い: for > forEach

a. for ループは最も単純で、追加の関数呼び出しとコンテキストはありません。

b. forEach 関数が複雑 [array.forEach(function(currentValue, index, arr), thisValue)] であり、実行時に考慮すべきパラメーターとコンテキストが多く、パフォーマンスが低下する可能性がある

2) ループ設定と飛び出しの違い：

a. for ループは、continue を使用して現在のループから飛び出すことができ、break を使用してループ全体から飛び出すことができます。forEach は使用できません。try catch 操作と組み合わせる必要があります。 throw Error() を介して例外をスローし、ループ全体から飛び出します。

b. for ループはループ開始点 i を制御でき、forEach はデフォルトで 0 からのみ開始できます。

c. for ループはループ内の i を変更できますが、forEach は変更できません (最下層は暗黙的にインデックスの自己インクリメントを制御し、操作できません)。

3) グローバル変数への影響の違い:

forEach() はコールバック関数を渡すことでスコープを形成し、その中で定義された変数は for ループのようなグローバル変数には影響しません。

var arr = ['李','白','马','章','亮','强']
// 遍历这个数组
arr.forEach(function(value,index,array){
    // console.log(value);
    // console.log(index);
    // console.log(array);
}

3. マップ: 配列をトラバースし、関数を介して各要素を処理します - それを新しい要素に処理し、すべての新しい要素の新しい配列を形成して返します

構文: array map(function(value,index,array){
return newValue
})
すべての新しい要素の新しい配列を返します

var arr = [10,20,30]
// 让每个元素都加10
var brr = arr.map(function(v){//这里的value是形参，我们可以自定义
    var newValue = v + 10
    return newValue
})
console.log(brr)

4. filter: 配列のフィルター - 配列をトラバースし、指定された条件を満たす要素を配列内に形成します - 新しい配列を形成して戻ります

構文: array.fitler(function(value,index,array){ return condition})戻り値: 条件を満たすすべての要素の配列を返します

var arr = [85,90,68,45,96,21,59]
// 将数组中不及格的所有成绩放在新的数组中
var brr = arr.filter(function(v){
    return v > 60
})
console.log(brr);

5. some: ループ、判断メソッドは、最終的にブール値を返します。そのうちの 1 つが設定を満たしている限り、true を返し、いずれも満たされていない場合は false を返します。これは論理値に非常に似ています。また

var arr=[0,5,6,7,8,2,1,3];
var res=arr.some(function(value) {
 return value>9;
});
console.log(res)；//这里没有大于9的值，所以打印false

6. Every: 判定メソッドである Loop は、true を返す条件をすべて満たす必要があります - 一部はまたは処理中、すべてはおよび処理中です

var arr=[0,5,6,7,8,2,1,3];
var res=arr.every(function(value) {
 return value>-1;
});
console.log(res)；//这里都大于9的值，所以打印true

要約:

forEach と map はトラバーサルの処理です。forEach は新しい配列を生成しませんが、map は新しい配列を生成します。

filter はトラバーサル処理と戻り値ブール型の判定で、真の項目の新しい配列を返します。

some と every は論理判定メソッドで、戻り値の設定に応じて Boolean の結果を返します。

4.ES6の新機能

1. let と const

let は、変数を宣言するために ES6 で新しく追加されたキーワードで、次の特徴があります。

変数のプロモーションはありません。ブロック レベルのスコープでのみ有効です。

const は、ES6 で変数を宣言するための新しいキーワードでもあり、主に定数の宣言に使用されます。次の特徴があります。

定数を宣言するときに値を割り当てる必要があり、ブロック レベルのスコープでのみ有効です。割り当て後、値を変更することはできません。

var、let、および const の違い:

1. var によって宣言された変数のスコープは、それが配置されている関数内にあり、let および const によって宣言された変数のスコープは、それが配置されている中括弧内にあります。

2. var で宣言された変数には変数昇格現象があり、let と const で宣言された変数には変数昇格現象がありません。

3. const で変数を宣言するときは、値を代入する必要があります。一般に、代入後に再代入することはできません。

2.アロー機能

( ) は関数を表し、{ } は関数本体を表し、const ft = ()=>{} は関数を ft に割り当てることを表し、ft() は関数を呼び出します

パラメーターがない場合、関数本体のコードは 1 行のみです。パラメーターがある場合、関数本体のコードは 1 行のみです。パラメーターが 1 つだけの場合、中かっこは削除できます。

通常の関数の this はウィンドウを指しますが、ES6 アロー関数の this は実行時のオブジェクトではなく、定義時のオブジェクトを指します。

アロー関数と通常の関数の違いは何ですか?

通常の関数には変数昇格がありますが、アロー関数にはありません

通常の関数の this はそれを呼び出した人を指し、アロー関数はそれが定義された人を指します

通常の関数はコンストラクタとして使用できますが、アロー関数は使用できません

アロー関数には引数がありません。すべてのパラメーターを受け入れるには、...rest を使用します

3.脱構築

分解とは、データ構造を分解してから、定義された変数に値を代入することです。

1. 配列の分解

<script>
            let [a, b] = [0, 1, 2, 3];
            console.log(a + b);//1
</script>

2. オブジェクトの分解

<script>
         let { name, age } = { name: "张三", age: 19 };
         console.log("姓名:" + name + ",年龄:" + age);
</script>

4.残りのパラメータ

残りのパラメーターを使用すると、未知の数のパラメーターを配列として表すことができます。

<script>
            const print = (num, ...args) => {
                console.log(num);
                console.log(args);
            }
            print(0, 1, 2);//[1,2]
   //与结构连用
            let users = ['张三', '李四', '王五'];
            let [u1, ...u2] = users;
            console.log(u1);
            console.log(u2); 
</script>

配列をマージ

<script>
            let u1 = ['张三', '李四', '王五'];
            let u2 = ['张无忌', '赵敏', '周芷若'];
            let u3 = [...u1,...u2];
            console.log(u3);
 </script>

5. 設定 - 重複排除

Set は ES6 が提供するデータ構造で、配列に似ていますが、その中のデータは反復できません。

<script>
            const set1 = new Set([1, 2, 3, 4, 5, 5]);
            const set2 = new Set(['苹果','橘子','橘子']);
            console.log(set1);//{1, 2, 3, 4, 5}
            console.log(set2);//{'苹果', '橘子'}
</script>

1. データを追加 ---set1.add(9);

2. データを削除 ---set1.delete(9);

3. データを含めるかどうかを決定します ---set1.has(9);

4. すべてのデータをクリア ---set1.clear();

6. 配列拡張の方法

1. 配列のマージ --- 上記の残りのパラメーターと同様に、残りのパラメーター

2. includes()---配列に特定の値が含まれているかどうかを判断するために使用され、ブール値を返します

3. find は、最初の適格なメンバーを見つけるために使用されます

let users = [{ name: '张三', age: 18 }, { name: '李四', age: 20 }];
let user = users.find((item, index) =>   
 item.age > 18)
 console.log(user);

4. findIndex()--- 最初の適格なメンバーのインデックスを見つけるために使用され、-1 は返されません

5. フィルタ --- 条件を満たす新しい配列を返すために使用され、条件が満たされない場合は空の配列を返します

6. map --- メンバーの処理後に新しい配列を返すために使用されます

7. Array.from() --- 配列のようなオブジェクトまたはトラバース可能なオブジェクトを実数の配列に変換します

7. 文字列拡張方式

• startsWith() は、文字列パラメータが文字列の先頭にあるかどうかを示します

• endWith() は、文字列パラメーターが文字列の末尾にあるかどうかを示します

let message = "helloworld";
let res = message.startsWith("hello");
console.log(res);

• テンプレート文字列

• repeat() メソッドは、元の文字列を n 回繰り返して新しい文字列を返すことを意味します

8. 関数をすぐに実行する

(1) 即時実行関数 ()(): 通常の関数のカプセル化は、カプセル化関数の定義と実行関数の呼び出しの 2 つのステップに分けられます。ただし、即時実行機能は、定義をカプセル化しながら関数を実行することです（通常は無名関数）

9、this指向

(1) this point: this の本質は、メモリ アドレスを格納するオブジェクトであり、このメモリ アドレスは、ヒープ内の独立したストレージ スペースを指します. いわゆる this point は、このオブジェクトによって格納されるメモリ アドレスです。指し示すストレージスペース

(2) このポイントを変える: call(), apply(), bind()

10.jsのデータ型

1. 基本データ型: Number、String、Boolean、null、undefined、Symbol

2. 参照データ型: オブジェクト、配列、関数、日付、正規表現

11. データ型判定（各データ型判定の欠点を正確に知る）

1. typeof は基本データ型を判定して基本データ型を返すことができますが、null を除き、typeof を使用して null を判定し、Object を返します。

2. instanceof で参照データ型を判断できる 通常、A が B のインスタンスであると判断しても問題ありませんが、参照データ型のオブジェクトはすべて instanceof で Object のインスタンスであると判断できます。

1. コンストラクター コンストラクターは undefined と null 以外の任意のデータ型を判断でき、instanceof の問題も解決します

12. モジュール性

機能パッケージ モジュールに従って、インポートによってインポートされ、エクスポートによってエクスポートされるか、エクスポート デフォルトを使用してエクスポートできます。

export と export defualt の違い

export は複数の属性またはメソッドをエクスポートできます。これらは { } で囲む必要があり、 import を使用する場合は { } を使用して受け入れる必要があります

エクスポートのデフォルトは全体としてスローされ、受け入れる場合は 1 つだけ受け入れられます

13.約束

1. Promise は ES6 が非同期を処理する方法です. その本質はオブジェクトです. promise のパラメータはコールバックです. コールバックには 2 つのパラメータがあります: 解決成功コールバック, 拒否失敗コールバック. 3 つの状態があります: 初期状態の保留中、実行済み、拒否済みです。状態変更の結果は 2 つしかありません: 保留 - 履行または保留 - 拒否から。promise でエラーを処理するには 2 つの方法があります。1 つ目は then で 2 つのコールバックを渡す方法で、2 つ目は catch を介してエラー コールバックを実装する方法です。

2. Promise は、コールバック地獄の問題を解決し、多層コールバック ネスティング ソリューションを解決し、コードの可読性を向上させ、保守を容易にします。

3. 連鎖呼び出し: それぞれが新しい Promise を返します。毎回最初のリゾルブの内容だけが出力され、リジェクトの内容は出力されない、つまり Promise はステートフルであり、保留中→履行または保留→却下のいずれかしか状態を変更できず、元に戻すことはできません。then で新しい Promise が返されますが、 then で登録されたコールバックは以前の Promise にまだ属しています。その後、新しく作成された Promise の場合、ステータスが満たされたノードは、前の Promise のコールバックが完了したときです。つまり、Promise の状態が満たされると、そのコールバック関数が実行され、コールバック関数によって返された結果が値として使用され、次の Promise (つまり、その時点で生成された Promise) に返されます。 、そして次の Promise 状態も変化（resolve or reject を実行）し、そのコールバックを実行…というように連鎖呼び出しの効果が出てきます。

4. Promise オブジェクトの 2 つの特徴:

(1) オブジェクトの状態は、外界の影響を受けません。Promise オブジェクトには、保留中 (進行中)、履行済み (成功)、拒否済み (失敗) の 3 つの状態があります。現在の状態を判断できるのは非同期操作の結果のみであり、他の操作でこの状態を変更することはできません。これがPromiseという名前の由来でもあり、英語で「約束」を意味し、他の方法では変更できないことを意味します。

(2) 状態は一度変化すると再び変化することはなく、この結果はいつでも取得できます。Promise オブジェクトの状態を変更する方法は 2 つしかありません: 保留中から履行済みへ、および保留中から拒否済みへです。この2つの状況が発生している限り、状態は凍結され、再び変化することはなく、この結果は常に維持されます。変更がすでに発生している場合は、Promise オブジェクトにコールバック関数を追加すると、すぐに結果が得られます。これはイベント(Event)とは全く違うもので、聞き逃してもう一度聞くと結果が出ないというのがイベントの特徴です。

5. 一般的に使用される API には、例外をキャッチするコールバック関数 catch () を処理する then () が含まれます。一般的に使用される静的メソッドは 2 つあります。

Promise.all() は複数の promise リクエストをまとめて処理し、すべてのリクエストは成功した場合にのみ成功します。

Promise.race() は複数の promise リクエストをまとめて処理し、1 つでも成功すると成功します

6. async を使用して非同期処理を実現することもでき、非同期関数の同期を実現するキーワード await もあります。

promise と async の同一性と相違点は何ですか?

類似点: Promise と async/await は、JavaScript での非同期プログラミングの 2 つの一般的な方法です。

違い: Promise は、チェーン呼び出しをサポートする JavaScript のオブジェクトであり、非同期操作の最終ステータス (成功または失敗) を記述するために使用されます。非同期操作の結果を処理する then メソッドと catch メソッドを提供します。

async/await は JavaScript のシンタックス シュガーで、Promise に基づいて実装されています. 通常のコールバック関数には使用できません. await キーワードは Promise オブジェクトの戻り結果を待つために使用され、async キーワードは Promise オブジェクトを定義するために使用されます.非同期関数。構文的に同期コードに似ているため、非同期コードの記述がより簡潔で理解しやすくなります。

簡単に言えば、Promise はオブジェクトであり、async/await は Promise オブジェクトのカプセル化です。

14.クラスクラス

関連する紹介は、上記のリンクをクリックして表示できます