ホームページ > 記事 > ウェブフロントエンド > この記事では、最も一般的に使用されている ES6 の使用方法を説明します。
この記事では、最も一般的に使用されている ES6 の使用方法を説明します。
- 青灯夜游転載
- 2022-09-20 10:20:141554ブラウズ
この記事では ES6 について説明し、最も一般的に使用される ES6 をマスターするために 30 分を与えます。それを学ばなければ、殺されるのを待っていますか?
1. ES6 について
テクノロジーや言語を理解する最良の方法は、それが何であるかを知ることです。
ES6 これは、ECMA 国際標準化機構によって策定されたスクリプト言語の標準仕様です
それでは、なぜそれが表示されるのでしょうか? Woolen布？
あらゆる規格の誕生は、言語の改良や機能の強化を意味しており、時代の発展とともに、JavaScript 言語の欠点の一部が時代のニーズを満たさなくなってきています。企業や開発者のニーズ。 [関連する推奨事項: JavaScript 学習チュートリアル]
例:
- 変数プロモーション機能により、実行時のプログラムの予測不可能性が高まります
- 構文が緩すぎる
および ES6 新しい標準の目的は次のとおりです:
Make JS は大規模な Web アプリケーションの開発に使用でき、エンタープライズ レベルの開発言語になる
エンタープライズ レベルの開発言語は、モジュール型開発に適しており、依存関係が適切に管理されます
次に、少し時間を費やします。一般的な開発を学び、人気のある言語をインタビューするためです。 ES6 そうですか?
2. ES6 テンプレート文字列
テンプレート文字列、文字列を結合します。 変数は通常次のようになります
let a = '小明' let b = '?' let c = a + '爱吃' + b // 小明爱吃?
しかし、今ではさらに多くのES6テンプレート文字列メソッドが提供されています
let a = '小明'
let b = '?'
let c = ` ${a} 爱吃 ${b}` // 小明爱吃?
3。 ES6 判定文字列 特定の値が含まれているかどうか
開発でよく使われるものなので説明は省きますが、よく使われる方法をすべて列挙しますので、学生は選択できます
#1.indexOf()
このメソッドは、指定された文字列値が文字列内で最初に出現する位置を返すことができますIf 文字列取得する値が表示されない場合、メソッドは -1let str = '?????'
console.log( str.indexOf('?') != -1 ); // false
2 を返します。includes()
パラメータ stringかどうかを示すブール値を返します。
let str = '?????'
str.includes('?') ? console.log( true ) : console.log( false ) // true## が見つかります #3.startsWith()は、現在の文字列が別の指定された値で始まるかどうかを判定するために使用され、判定結果に基づいて true または false を返します
参数：
str.startsWith( searchString , [position])
searchString : 要搜索的值
position: 在 str 中搜索 searchString 的开始位置，默认值为 0
例子：
let str = "前端,熊猫开发团队";
console.log( str.startsWith("前端") ); // true
console.log( str.startsWith("熊猫开发团队") ); // false
console.log( str.startsWith("熊猫开发团队", 3) ); // true
4. endsWith()は、文字列が指定された値で終わるかどうかを判定し、判定結果に基づいて true または false を返します。
let str = "熊猫开发团队";
console.log( str.endsWith("队") ); // true
IV. ES6 アロー関数アロー関数の登場により、関数の定義が簡素化され、コードがより簡潔になり、キーワードが不要になりました
functionただし、アロー関数の制限にも注意する必要があります。アロー関数自体には
thisがなく、this は親 欠点:
- アロー関数にはプロトタイプ
- prototype
がないため、アロー関数には # を指す this がありません。
## アロー関数は独自の this - を作成しません。外側の層に最初の通常の関数がある場合、その
this# を継承します。 ## アロー関数が定義されているとき、外側の層には関数はありません。厳密モードと非厳密モードです。モードでは、その
this は # を指します。 ##window - グローバルオブジェクト
基本的な書き方:
//没有参数，写空括号 let getTitle = () => { return '熊猫开发团队' }; //只有一个参数，可以省去参数括号 let getTitle = title => { return title }; //如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中 let getTitle = (val1, val2, val3, val4) => { return [val1, val2, val3, val4]; }
オブジェクトの属性と値が同じ場合、再利用する際に値の書き込みを省略できますlet a = '?';
let b = '?';
const obj1 = {
a: a,
b: b,
}
const obj2 = {
a,
b,
}
最も一般的に使用される === および ==
に加えて、2 つの値の結果を比較するために使用されます。ES6 新しいものがあります
Object.is(val1,val2)
console.log( Object.is(88, 88) ) // true
console.log( Object.is('熊猫', '?') ) // false
let obj = {};
Object.assign( obj, { name: '熊猫' } );
console.log( obj ) // { name: '熊猫' }
8。 ES6 ブロックレベルのスコープまず第一に、スコープとは何かを理解する必要があります。 スコープとは、変数が使用できる範囲です。
ES6のletlet
が存在しない前は、# のみがありました。 ##varのグローバル スコープと関数スコープ、およびブロック レベル スコープは、実際には {} (コード ブロック) を意味し、変数は 内にのみ存在します。 {} 効果的です
{ let a = '?️?️'; var b = '1️⃣2️⃣'; console.log( a ) a // '?️?️' } console.log( a ) a // ReferenceError: a is not defined. console.log( b ) b // '1️⃣2️⃣'varキーワードは、ブロック内の変数 b を定義するために上で使用されており、グローバルにアクセスできますしかし、実際にはアプリケーション シナリオでは、変数の漏洩や名前の重複を心配します。この変数には現在のブロック内でアクセスできるようにするだけなので、
キーワード
を使用する必要があります。9 . ES6 構造化演算子
たとえば、配列 arr を定義するには、ES6 が配列を構造化する前に、次のようにします。
arr [0] 配列の内部にアクセスする方法そして、さらに多くの方法があります 可能有的同学会问了，既然 ES6 有解构数组，那有解构对象吗 ? 那你往下看 十. ES6 展开操作符 直接看代码啦let arr = ['?','?','?']
console.log( arr[0], arr[1], arr[2] ); // '?','?','?'
let [a, b, c] = arr;
console.log( a, b, c ); // '?','?','?'
let obj = { a: '?', b: '?', c: '?' }
let { a: a, b: b, c: c } = obj;
console.log( a, b, c ); // '?', '?', '?'
let arr = ['☠️', '?', '?'];
console.log(...arr) // ☠️ ? ?
let obj1 = { name:'熊猫' , job:'前端'}
let obj2 = { hobby:'掘金', ...obj1 }
console.log( ...obj2 ) // { hobby:'掘金', name:'熊猫' , job:'前端'}
以上がこの記事では、最も一般的に使用されている ES6 の使用方法を説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。