この記事では、最も一般的に使用されている ES6 の使用方法を説明します。

この記事では 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 文字列取得する値が表示されない場合、メソッドは -1

let 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];
  }

5. ES6 オブジェクト式

オブジェクトの属性と値が同じ場合、再利用する際に値の書き込みを省略できます

let a = '?';
let b = '?';

const obj1 = {
    a: a,
    b: b,
}

const obj2 = {
    a,
    b,
}

6. ES6は2つの値が等しいかどうかを判定します

最も一般的に使用される === および ==

に加えて、2 つの値の結果を比較するために使用されます。

ES6 新しいものがあります

Object.is(val1,val2)

console.log( Object.is(88, 88) )                // true
console.log( Object.is('熊猫', '?') )         // false

7. ES6 Object.assign() オブジェクトをコピーします

let obj = {};

Object.assign( obj, { name: '熊猫' } );

console.log( obj )    // { name: '熊猫' }

8。 ES6 ブロックレベルのスコープ

まず第一に、スコープとは何かを理解する必要があります。 スコープとは、変数が使用できる範囲です。

ES6

の

let

が存在しない前は、# のみがありました。 ##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 を定義するために上で使用されており、グローバルにアクセスできますしかし、実際にはアプリケーション シナリオでは、変数の漏洩や名前の重複を心配します。この変数には現在のブロック内でアクセスできるようにするだけなので、

let

キーワード

を使用する必要があります。

9 . ES6 構造化演算子

たとえば、配列 arr を定義するには、ES6 が配列を構造化する前に、次のようにします。

arr [0]

配列の内部にアクセスする方法そして、さらに多くの方法があります

let arr = ['?','?','?']

console.log( arr[0], arr[1], arr[2] );   // '?','?','?'


let [a, b, c] = arr;

console.log( a, b, c );    // '?','?','?'

可能有的同学会问了，既然 ES6 有解构数组，那有解构对象吗 ?

那你往下看

let obj = { a: '?', b: '?', c: '?' }

let { a: a,  b: b,  c: c } = obj;

console.log( a, b, c );  // '?', '?', '?'

十. ES6 展开操作符

直接看代码啦

let arr = ['☠️', '?', '?'];

console.log(...arr)    // ☠️ ? ?


let obj1 = { name:'熊猫' , job:'前端'}

let obj2 = { hobby:'掘金', ...obj1 }

console.log( ...obj2 )    // { hobby:'掘金', name:'熊猫' , job:'前端'}

（学习视频分享：web前端开发、编程基础视频）

以上がこの記事では、最も一般的に使用されている ES6 の使用方法を説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。