JS ES5について
全文は合計 7,500 ワードで、コードから 6,000 ワードが削除されており、読むのに 20 分かかると予想されますが、理解するには 1 ～ 2 日かかる場合があります。
ES5 新しい構文 – 2009 年に作成
厳密モード: JS は、プログラマがより健全なコードを作成できるように、より多くのエラー レポートを提供します。
- オープニングメソッド、スクリプトの先頭に「use strict」と書きます。
- 特定の機能
- 変数は最初に宣言する必要があります
- 関数は使用する前に宣言する必要があります
- 関数内の this キーワード: window の場合は、未定義に変更します。
- オブジェクト作成の正確な構成 – 新人にとっては無味乾燥、マスターにとっては成果物
- オブジェクトティゴン定義プロパティ
- 書き込み可能が再割り当て可能かどうか
- enumerable: 横断できるかどうか
- configurable : 再構成できるかどうか
- 値: 値
- get: 計算されたプロパティ - without() を使用してトリガーします
- セット: リスナー
- 対象物を守る方法
-
- prexxxx: 拡張を禁止、新規書き込みを禁止
- シール: 属性の追加と削除を防止します
- 凍結: 追加、削除、変更を防止します。
ES6の新機能
- 2015 年 6 月に制作された、JS のマイルストーンです
- 新しいスコープ: 変数は let と const で宣言する必要があります
- ウィンドウのグローバル スコープに対応し、カスタム プロパティを保存するために使用されます。
- ES6 より前: ローカル スコープを提供するには、最初にドーン関数の自己呼び出しを作成する必要があります。
- ブロックレベルのスコープ: {} アクセサリ、let および const を使用します。
- 関数スコープに対応して、置き換えられた Dawn 関数スコープは関数のプライベート変数を提供できます。
- let と const
- let: 変更量、宣言された変数は後で再割り当て可能
- const: 定数、宣言時に割り当てる必要があり、後で再割り当てすることはできません
- ステートメントプロモーションについて
- ステートメントの昇格があります。一時記憶域のデッド ゾーン:一時的な昇格は、一時記憶域のデッド ゾーンに格納されています。使用できません。使用する前に、
let / constコードが
作者の意図: 宣言プロモーションに依存する以前のコードと互換性を持たせるために、作者はあえて宣言プロモーション機能を削除せず、エラー報告を使用してユーザーに最初に変数を宣言してから変数を使用するように強制します (変数が使用されている場合)。最初にエラーが報告されます - テンプレート文字列 -
HTML
コードに変換されます スプライシングから生まれます
- 文字列の部分的な内容の置換をサポートします - ${}
- 改行操作をサポートします
範囲
それは何ですか すべてはオブジェクトですes6
以前の特殊功能オブジェクトのスコープ
には、グローバル スコープとローカル スコープの 2 つのスコープがあります グローバル
グローバル スコープ：ホスト環境を操作するためにシステムが提供する API がオブジェクトに格納されます
ホスト関数: パラサイトと配列の関係は、ここではブラウザ、ノード、JS の関係です。
nodejs がホストの場合、グローバル オブジェクトは global になります。これ
により、Hugo がブラウザのグローバル オブジェクトになります。
local ローカル スコープ:被调用后一時的に生成された関数のオブジェクトは、関数内で宣言された変数を格納するために使用され、
呼び出される前は静的です。
スコープ チェーン: 複数のスコープがネストされているシナリオがある場合 - 関数内に関数がネストされている
内部関数が変数を使用する場合、近接性の原則に従い、長いスコープから検索するときに最も近い変数を使用します。
宣言的ホイスティング: JS 独自の設計 – 非常にゴミ
宣言操作：ライフ操作はjsエディタで限定的に
読み込まれ、使用箇所の先頭に昇格され、調整されたコードで実行されます。順序; よく考慮されます - 関数の巻き上げは var よりも優先されます
function : 全体的なプロモーション – 関数名 ++ 関数本体
var プロモーション ステートメントは代入を促進しません
クロージャ: ah 関数内に b 関数がある場合、b 変数は波動関数で使用されます。
function a(){
var c=11
function b(){
console.log(c);
}
// 由于函数作用域时临时的调用结束后会自动销毁，所以
// b函数为了保证自己能顺利执行，所以会把外部作用与保存在兹省的scopes属性里
// 这个被保存在scopes中的函数作用域-- 称呼闭包
}
必要な用途: 関数のプライベート プロパティの作成
var 函数 =(function(){
var 变量=值
return function(){
}
})()
閉鎖のデメリット:
関数のスコープは一時的なもので、メモリを節約するために実行後に破棄されますが、
クロージャを閉じるとツリー スコープの半分が保存されるため、メモリを無駄に消費します。
引数: 関数
引数: 関数内の暗黙の変数。関数の呼び出し時に受け取ったすべてのパラメータを保存します。
用途: 実パラメータの数が固定されていない関数の実装によく使用されます。
関数のオーバーロード:
if を使用して引数変数で判定し、実パラメータの数と型が異なると判定し、別のロジック処理をリロードする
アクセサ構文:
object. 属性名: ドット構文
object [js]: 角括弧構文 -- 属性名は js コードであるため、より柔軟です
オブジェクトはインポートされた型です
メモリはヒープメモリとスタックメモリに分けられます
スタックメモリ: 高速なクエリ速度、小さなデータの格納、基本データ+ オブジェクトアドレスはアドレスディレクトリに相当します
ヒープメモリ : 大きなデータの格納 - オブジェクトタイプはアドレスメモリを持ちます
オブジェクトの浅いコピー
空のオブジェクトを作成し、元のオブジェクトをトラバースして、そのオブジェクト内の属性を新しいオブジェクトに 1 つずつコピーするように制限されています。
適用可能なタイプ: オブジェクト タイプの場合は、使用します。深拷贝
this がオブジェクトで使用される関数
これの存在により、関数のパラメータの受け渡しが変更されました
解決策 1 - 従来型: 関数は仮パラメータを通じてオブジェクトの実パラメータを受け取り、関数を処理します
解決策 2 - 新しいスタイル: 関数を置くオブジェクト、this キーワードは工作时関数オブジェクトの場所
コンストラクタ
これは特別な作業のため単数形の関数です -创建构造函数オブジェクトの関数
命名規則: 通常、区別するために大きなこぶを使用します。
ステップ
1. 空のオブジェクトを作成します
。 2. 受け取った実際のパラメータを上記の空のオブジェクトに格納します。
プロトタイプのコンセプト
目的: メモリを節約するため、オブジェクトが作成されるたびに同じ関数を生成しないようにします。
実現: コンストラクターには、共有関数を格納できるプロトタイプがあります。
オブジェクトを生成するときは、__proto__ 属性、リンク、およびコンストラクターのプロトタイプ
オブジェクトを使用します。 プロトタイプ接続メカニズム:オブジェクトのプロパティを使用するときに、オブジェクトにプロパティがない場合は、自動的に
新しい演算子 __proto__ が探すのは
新しいオペレーター
新しい要素文字が関数の前に配置されると、関数は自動的に 4 行のコードを完成させます。
var this
this = {
}
this.__proto__ =函数.prototype
return this
これが指す新しいもの
Function (): no prefix is the window object. Function
(): object –ランタイムが存在 スコープ チェーン メカニズムを開始します:上部スコープでこの実行例を検索します。出力されるのは window (ない場合は調べてください) であることがわかりました。その後、関数内の関数は何でしょうか? 以下のコードを見てください
var emp ={
ename:'qiushan',
show(){
const b=()=>{
console.log('this:',this);
}
b()
},
}
emp.show()
// show 函数中的this是其前方的emp
配列の高階関数
高階関数: 関数内で他の関数が使用されている場合、それらは高階関数と呼ばれます。ES6 では
配列型にさらにメソッドが追加されています。配列
のプロトタイプを印刷することで、これらのメソッドを表示できます。
console.log(Array.prototype)
フロントエンドおよびバックエンド プロジェクトの人気により、JS を使用してフロントエンドで Web ページ データを処理する需要が急増しています。 フロントエンドとバックエンドの分離ルーチン: Ajax を使用してサーバーからデータをリクエストし
、フロントエンド (ブラウザ) の HTML コードに一時的に結合し、最後に // を表示します
各ユーザーのブラウザは別々に結合されます – サーバーへの負荷を共有します
フロントエンドとバックエンドは分離されていません: バックエンドend はデータを HTML に直接結合し、ブラウザに表示を送信します。
//サーバーには大きな負荷がかかっており、結合が必要です -- 大手 Web サイトでは処理できません
サーバーから送信されるデータは通常配列です。データベースからチェックされるため、
配列の処理能力を向上させるためにフロントエンド JS が必要です。
次の配列のデータが 0 より大きいかどうかを判断します。
<script>
// 高阶函数：函数中使用了其他函数，就叫高阶函数
console.log(Array.prototype);
var nums = [12, 13, 14, 15, 16, -1, 18];
// 判断配个元素都大于0
var a = nums.every((value, index, array) => {
return value > 0;
});
console.log('a:',a);
</script>
それらの 1 つが負の場合、
それ以外の場合は真です
。nums の要素は、アロー関数によって順番に検出されます。各要素は、value とシリアル番号の 3 つの値を提供する必要があります。配列から取得されるシリアル番号です。アロー関数は、次のいずれかを判断する必要があります
。要素は条件を満たします
。
<script>
// 高阶函数：函数中使用了其他函数，就叫高阶函数
console.log(Array.prototype);
var nums = [12, 13, 14, -15, 16, -1, 18];
// 判断配个元素都大于0
var a = nums.every((value, index, array) => {
console.log(value,index,array);
return value > 0;
});
console.log('a:',a);
</script>
コードを実行する:
負の数がある場合、コードの実行が中断されることがわかりました。
実際、パラメーター Every は、要件の 1 つが満たされない限り値を返し、操作を終了するのと同じです。
機能を簡素化する
// 1，没有使用的形参可以不写
a = nums.every((value) => {
console.log(value);
return value < 0;
});
// 3，箭头函数形参只有一个省略()
a = nums.every((value) => {
console.log(value);
return value < 0;
});
// 4，箭头函数的函数体只有一行省略return
a = nums.every((value) => {
value < 0;
});
演習: 次の配列が偶数であるかどうかを判断してください
var nums=[12,5,32,1231,1223,-1,123,43]
効果を実感してください:
演習: 次の配列が負であるかどうかを判断します。
var nums=[12,5,32,1231,1223,-1,123,43]
効果を実感してください:
高次関数 一部
some: 一部、 true である限り、条件を満たすものがいくつかあります– 論理和と同様、true は true
次のように: 500 を超える項目があるかどうかを判断します。
// 高阶函数some
// some：一些，有一些满足条件的
// 只要有真的就行，--类似于逻辑或，又真则真
var nums=[12,564,123,1231,5346,68456]
var mians=nums.some(value=>value>=500)
console.log(mians ? '有' : '没有');
結果：
フィルターフィルター
給与が 30 を超え、給与が 10000 未満のすべての人々を検索します
マップマッピング
データを HTML コードにマッピングする
**マップ: **自動的に便利な配列、各要素はアロー関数で処理され、戻り値は新しい配列を形成します
join:デフォルトでは、文字列はカンマで区切られており、パラメータを渡すことでパラメータを渡すことができます
効果
演習: 次の配列のデータを Web ページにマッピングします
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="cart">
</ul>
<script>
var cars=['冬瓜','南瓜','西瓜','美离间','奇异果','西红柿','桃子']
// 把元素放到li标签里面
</script>
</body>
</html>
</body>
</html>
答え：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="cart">
</ul>
<script>
var cars=['冬瓜','南瓜','西瓜','美离间','奇异果','西红柿','桃子']
// 把元素放到li标签里面
var car=cars.map((value)=>{
return `<li>${
value}</li>`
})
var a=car.join('<br/>')
console.log(a);
cart.innerHTML =a
</script>
</body>
</html>
</body>
</html>
たとえば、少しの時間をかけて遊ぶこともできます。
<body>
<ul id="list">
<!-- 占位 -->
</ul>
<script>
var stus=[
{
name:"宝宝",age:"22",color:"red"},
{
name:"山海",age:"42",color:"blue"},
{
name:"秋慧",age:"21",color:"yellow"},
{
name:"玛丽",age:"62",color:"red"},
{
name:"凯瑞",age:"82",color:"red"},
{
name:"小李",age:"21",color:"red"},
{
name:"丘丘人",age:"20",color:"skyblue"},
]
var strs=stus.map((value)=>{
return `<li style="background-color:${
value.color}">${
value.name}-${
value.age}</li>`
})
str=strs.join("<br />")
list.innerHTML=str
</script>
</body>
それぞれに
減らす
寄付を減らす方法 1
方法 2
ES6について
ES6 のいくつかの新機能
-
アロー関数
- 匿名関数を記述するより簡単な方法
- （）=>{ } 》》》 function(){ }
- 2 つの構文シュガーが提供されています
-
- 仮パラメータが 1 つだけの場合、括弧は省略できます –x=>{ }
-
- 関数本体が 1 行のみの場合、{return} は省略できます
- this指向
-
- 関数(): ウィンドウ
-
严格模式下时undefind
-
- object.function(): オブジェクト
-
- new function (): 構築されたオブジェクト
-
- アロー関数 (): それ自体はスコープチェーンに従って検索されません
-
配列の高階関数
-
- 関数が他の関数を使用する
-
すべて: すべての要素が要件を満たします
-
some: 条件を満たす要素をフィルタリングします。
-
filter: 条件を満たす要素をフィルタリングします。
-
map:map - メイン句を HTML にマップします。
-
- 通常は join 属性とともに使用されます
-
forEach: 配列を走査します
-
forEach はプロトタイプでこのメソッドを使用する人に適しています
-
- for...of: 要素/配列のようなものに適しています
-
減らす: マージする
詳細が十分ではありませんか? もちろん、これは主に ES5 に関するものですが、ES5+ES6 についてはこの記事を読むことをお勧めします
。25 分で JavaScript ES5 ～ ES6 を使い始めることができます