フロントエンド学習 ES6 ～ ES11

プログラミング 2023-10-01 12:19:47 訪問数: null

ES6

させて

1. 変数は繰り返し宣言できない

let で宣言された変数名は、変数の汚染を避けるために繰り返すことができません。

let star = '罗志祥';
let star = '小猪';
console.log(star);

ここに画像の説明を挿入します
var で宣言された変数は繰り返すことができ、後続の値は前の値を上書きします。

var star = '罗志祥';
var star = '小猪';
console.log(star);

ここに画像の説明を挿入します

2. ブロックレベルのスコープ

ブロックスコープで let を使用して変数を宣言すると、ブロックスコープが得られます。

{
    
    
	let myName= '王思聪';
}
console.log(myName);

ここに画像の説明を挿入します
var を使用して、ブロックレベルのスコープを使用せずにブロックレベルのスコープで変数を宣言します

{
    
    
	var myName= '王思聪';
}
console.log(myName);

ここに画像の説明を挿入します

3. 変動昇進はありません

let が変数を宣言する前に、変数が最初に出力されると、エラーが報告され、変数の昇格は行われません。

console.log(song);
let song = '日不落';

ここに画像の説明を挿入します
varで変数を宣言する前に、先に変数を出力するとundefinedと出力されますが、varで宣言した変数は変数昇格があるので、先頭で変数が宣言され、その後「 」から代入が始まるのでエラーにはなりませvar song = '日不落';ん報告されます。

console.log(song);
var song = '日不落';

ここに画像の説明を挿入します

4. スコープチェーンには影響しません

ブロック レベル スコープで変数が見つからない場合は、グローバル スコープに戻ってそれを見つけます。let で宣言された変数はスコープ チェーンには影響しません。

let myAge = 18;
{
    
    
	console.log(myAge );
}

ここに画像の説明を挿入します

5. let の典型的な例

目的: div をクリックすると、図に示すように div がピンク色に変わります。
ここに画像の説明を挿入します

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.cantainer {
      
      
				display: flex;
			}
			
			.item {
      
      
				margin: 10px;
				width: 100px;
				height: 60px;
				border: solid black 1px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
      
      
				// 获取div元素对象
				let items = document.getElementsByClassName('item');

				//遍历并绑定事件
				for(var i = 0; i < items.length; i++) {
      
      
					items[i].onclick = function() {
      
      
						//this.style.background = 'pink';//可以使用
						
						//不能使用，因为 var 声明的变量没有块级作用域的说法，后面 i 会变成 3，但是没有下标为 3的元素，故报错。
						items[i].style.background = 'pink';
					}
				}
			}
		</script>
	</head>

	<body>
		<div class='cantainer'>
			<div class='item'></div>
			<div class='item'></div>
			<div class='item'></div>
		</div>
	</body>

</html>

ここに画像の説明を挿入します
ここでは変数 i を var で宣言していますが、ブロックレベルのスコープがないので i は 3 になりますが、添字 3 の要素がないのでエラーとなります。ただし、変数 i を宣言するには let を使用します。ブロックレベルのスコープがあるため、エラーは報告されず、正常に実行できます。

定数

1.constは定数の宣言に使用します（値を変更できない量を定数と呼びます）

const SCHOOL = '河池学院';
console.log(SCHOOL); // 常量一般使用大写（潜规则）

2. 定数には初期値を割り当てる必要があります。

const A;

ここに画像の説明を挿入します

3. 定数の値は変更できません。

const SCHOOL = '河池学院';
SCHOOL = 'hcuniversity';
console.log(SCHOOL); // 常量一般使用大写（潜规则）

ここに画像の説明を挿入します

4. ブロックレベルのスコープ

{
    
    
	const PLAYER = 'UZI';
}
console.log(PLAYER); // 常量一般使用大写（潜规则）

ここに画像の説明を挿入します

5. 配列およびオブジェクトの要素の変更は定数の変更としてカウントされず、エラーは報告されません。

const ARRAY = ['A','B','C','D'];
ARRAY.push('E');
console.log(ARRAY);

ここに画像の説明を挿入します定数アドレスへの参照は変更されていないため、変更とはみなされません。同様のことがオブジェクトにも当てはまります。

代入の分割

ES6 では、特定のパターンに従って配列やオブジェクトから値を抽出し、変数に値を割り当てることができます。これは分割代入と呼ばれます。

  1. 配列の構造化
const F4 =['小沈阳','刘能','赵四','宋小宝'];
let [xiao, liu, zhao, song]= F4; // 将F4数组的值赋值给[xiao, liu, zhao, song]
console.log(xiao);
console.log(liu);
console.log(zhao);
console.log(song);

ここに画像の説明を挿入します

  1. オブジェクトの分解
const player = {
    
    
	name: 'UZI',
	gender: '男',
	operate: function() {
    
    
		console.log('我要拿五杀！');
	}
}
let {
    
    name, gender, operate, age} = player; // 将对象player中的值依次赋给{name, gender, operate, age}
console.log(name);
console.log(gender);
console.log(operate);
console.log(age);  // 因为player中只有三个值，故age的值为undefined
operate(); // 直接调用方法，不需要用player.operate()的方式来调用，可以省略player

ここに画像の説明を挿入します

テンプレート文字列 (バッククォート)

1. 声明

let str = `我也是字符串！`;
console.log(str, typeof str);

ここに画像の説明を挿入します

2. 改行を直接使用できます

let ul = `<ul>
		   	<li>沈腾</li>
			<li>玛丽</li>
			<li>魏翔</li>
			<li>艾伦</li>
		</ul>`; // 单引号和双引号都不能这样赋值，反引号却可以。

3. 可変スプライシング

let lovest ='沈腾';
let out =`${
      
       lovest }是我心目中最搞笑的演员!!`;
console.log(out);

ここに画像の説明を挿入します

オブジェクトの記述を簡素化する

let name = '孙悟空';
let age = 18;
let operate = function() {
    
    
	console.log('我会七十二变!');
}
 
 const person ={
    
    
	name, // 简化写法，相当于name:name
	age,
	operate,
	say(){
    
     // 简化写法，省略function
		console.log('妖怪，哪里跑！');
	}
} 
console.log(person);

ここに画像の説明を挿入します

アロー関数

1. 声明

let fun = (a, b) => {
    
     // 省略了function，加入了=>
	return a+b;
}
let result= fun(1,2);
console.log(result); // 3

2.this は静的です。this は常に、関数が宣言されているスコープ内の this の値を指します。

let fun1 = function() {
    
    
	console.log(this.name);
}
let fun2 = () => {
    
    
	console.log(this.name);
}
window.name = '孙悟空';
const myName = {
    
    
	name:'猪八戒'
}

// 1. 直接调用
fun1();  // 指向 window
fun2();  // 指向 window
// 2. 使用call方法调用
fun1.call(myName);  // 用call改变指向对象，指向 myName
fun2.call(myName);  // 没有改变指向对象，还是指向 window

ここに画像の説明を挿入します

3. オブジェクトをコンストラクターとしてインスタンス化することはできません

let Person = (name, age) => {
    
    
this.name = name;
this.age = age;
}
let me = new Person('孙悟空',18);
console.log(me);

ここに画像の説明を挿入します
エラー: ユーザーはコンストラクターではありません

4. 引数変数は使用できません

let fun = function() {
    
    
console.log(arguments);
}
fun(1,2,3);

ここに画像の説明を挿入します

let fun1 = () => {
    
    
console.log(arguments);
}
fun1(1,2,3);

ここに画像の説明を挿入します

5. アロー関数の略称

  1. パラメータが 1 つの場合は、() を省略できます。
let add = n => {
    
     // 省略小括号（）
	return n+n;
}
console.log(add(10)); // 20
  1. 関数コード本体が 1 文の場合は、{} と return を省略でき、戻り値としてステートメントの実行結果が返されます。
let pow = n =>  n*n; // 省略（），{}和return
console.log(add(10)); // 100

アロー関数は、これとは関係のないコールバックに適しています。例: タイマー、配列メソッドのコールバックなど。
アロー関数は、これに関連するコールバックには適していません。例: イベント コールバック、オブジェクト メソッドなど。

残りのパラメータとスプレッド演算子

ここでマスターによるブログ投稿が見られます。詳細はわかりますか?
ES6 学習パス 3 -- 残りのパラメーターと展開演算子を学習しているすべての人にお勧めします。

シンボルの種類

1.シンボルタイプとは何ですか?

シンボルは ES6 の基本的なデータ型です。Symbol() 関数は、静的メソッドと静的プロパティを持つ Symbol 型の値を返します。

2. シンボル型を使用する理由は何ですか?

ES5 オブジェクトのプロパティ名はすべて文字列であるため、プロパティ名の競合が簡単に発生する可能性があります。

たとえば、他人が提供したオブジェクトを使用していて、そのオブジェクトに新しいメソッドを追加したい場合、新しいメソッドの名前が既存のメソッドと競合する可能性があります。

各属性の名前が一意であることを保証し、属性名の競合を根本的に防ぐメカニズムがあれば素晴らしいと思います。これが、ES6 で Symbol タイプが導入された理由です。

3. シンボルタイプの使い方

詳細はこちら

ECMAScript 6 の入門

ES7

1.Array.prototype.includes

includes メソッドは、配列に要素が含まれているかどうかを検出し、ブール値を返すために使用されます。

const array = ['孙悟空', '猪八戒', '沙和尚', '唐三藏'];
console.log(array.includes('孙悟空')); // true
console.log(array.includes('白骨精')); // false

2. 指数演算子

ES7 では累乗を実装するために指数演算子 "**" が導入されており、その機能は Math.pow の結果と同じです。

console.log(2 ** 10); // 1024
console.log(Math.pow(2, 10)); // 1024

ES8

1.非同期関数

  1. async 関数の戻り値は Promise オブジェクトです。
  2. Promise オブジェクトの結果は、async 関数実行の戻り値によって決まります。
async function fun() {
    
    
	return 1;
}
let result = fun();
console.log(result);

ここに画像の説明を挿入します
結果が成功状態である Promise オブジェクト

async function fun() {
    
    
	throw error // 抛出错误
}
let result = fun();
console.log(result);

ここに画像の説明を挿入します
結果が失敗状態となる Promise オブジェクト

2.await 式

  1. await は async 関数で記述する必要があります
  2. await の右側の式は通常、Promise オブジェクトです。
  3. await は、promise の成功した値を返します
  4. await の Promise が失敗した場合、例外がスローされます。例外は try...catch を通じてキャッチして処理する必要があります。
async function fun() {
    
    
	try {
    
    
		let success= await Promise.resolve('我成功了');
		console.log(success);
		// await Promise.reject('我失败了');
	} catch(error) {
    
    
		console.log(error)
	}
}
fun();

3.Object.values、Object.entries、Object.getOwnPropertyDescriptors

  1. Object.values() メソッドは、指定されたオブジェクトの列挙可能なすべてのプロパティ値の配列を返します。
  2. Object.entries() メソッドは、指定されたオブジェクト自体の走査可能なプロパティ [キー、値] の配列を返します。
const book = {
    
    
	name:'西游记',
	person:['孙悟空', '猪八戒','沙和尚', '唐三藏'],
	event:['三打白骨精', '智取芭蕉扇', '大闹天宫']
}
// 获取对象所有的键
console.log(Object.keys(book));
// 获取对象所有的值
console.log(Object.values(book));
// 获取对象所有的键值对
console.log(Object.entries(book));
// 获取有属性描述的对象
console.log(Object.getOwnPropertyDescriptors(book));

ここに画像の説明を挿入します

ES9

1.レスト/スプレッド属性

残存パラメータとスプレッド演算子は ES6 で導入されましたが、ES6 では配列のみに適用されますが、
ES9 では配列と同様にレスト パラメータとスプレッド演算子がオブジェクトに対して提供されます。

function connect({
     
     host, port, ...user}) {
    
    
	console.log(host);
	console.log(port);
	console.log(user);
}
connect({
    
    
	host: '127.0.0.1',
	port: 3306,
	username: 'root',
	password: 'root',
	type: 'master'
});

2. キャプチャグループという名前の正規表現

ES9 では、名前付きキャプチャ グループに記号「?」を使用できるため、キャプチャ結果が読みやすくなります。

let str = '<a href="http://www.baidu.com">百度</a>';
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
const result = reg.exec(str);
console.log(result.groups.url); // http://www.baidu.com
console.log(result.groups.text); // 百度

3. 正規表現 dotAll パターン

正規表現の中間点。キャリッジ リターンを除く任意の 1 文字と一致します。フラグ 's' によりこの動作が変更され、行
終端記号を表示できるようになります。

let str = `
<ul>
	<li>
		<a>肖生克的救赎</a>
		<p>上映日期: 1994-09-10</p>
	</li>
	<li>
		<a>阿甘正传</a>
		<p>上映日期: 1994-07-06</p>
	</li>
</ul>`;
//声明正则
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
//执行匹配
let data = [];
while(result = reg.exec(str)){
    
    
	data.push({
    
    title: result[1], time: result[2]});
}
//输出结果
console.log(data);

ここに画像の説明を挿入します

ES10

Object.fromEntries と Object.entries

Object.fromEntries は 2 次元配列をオブジェクトに変換します

const result = Object.fromEntries([
    ['name', '孙悟空'],
    ['event', '大闹天宫']
])
console.log(result);

ここに画像の説明を挿入します

Object.entries はオブジェクトを 2 次元配列に変換します

const result1 = Object.entries({
    
    
    name:'孙悟空'
})
console.log(result1);

ここに画像の説明を挿入します

トリムスタートとトリムエンド

const str = '   123   ';
console.log(str);
console.log(str.trim()); // 去除左右两边的空格
console.log(str.trimStart()); // 去除左边的空格
console.log(str.trimEnd()); // 去除右边的空格

Array.prototype. flat と flatMap

const arr = [1,2,3,[4,5,[6,7,8]]];
let result1 = arr.flat(); // 将三维数组解析为二维数组
let result2 = arr.flat(2); // 将三维数组解析为一维数组，参数：解析的深度。不写时默认为1
console.log(result1);
console.log(result2);

ここに画像の説明を挿入します

const arr = [1, 2, 3, 4];
const result1 = arr.map(item => [item * 10]);
const result2 = arr.flatMap(item => [item * 10]);
console.log(result1);
console.log(result2);

ここに画像の説明を挿入します

ES11

クラスのプライベートプロパティ

class Person{
    
    
    name;
    #age;
    #weight;
    constructor(name, age, weight){
    
    
        this.name = name;
        this.#age = age;
        this.#weight = weight;
    }
    intro() {
    
    
		console.log(this.name);
		console.log(this.#age);
	}
}
let p = new Person('孙悟空', 18, 99);
console.log(p.name);
p.intro(); // 但是可以在函数内部调用私有属性
console.log(p.#age); // 私有属性不能在外部调用，会报错

ここに画像の説明を挿入します

Promise.allSettled と Promise.all

Promise.allSettled は常に成功した Promise オブジェクト
Promise.all を返します。受信した Promise オブジェクトのステータスが成功の場合は成功した Promise オブジェクトが返され、それ以外の場合は失敗した Promise オブジェクトが返されます。

let p1 = new Promise((resolve, reject) => {
    
    
	resolve('成功111');
})
let p2 = new Promise((resolve, reject) => {
    
    
	reject('失败222');
})
const result = Promise.allSettled([p1, p2]);
const result1 = Promise.all([p1, p2]);
console.log(result);
console.log(result1);

ここに画像の説明を挿入します

おすすめ

転載: blog.csdn.net/weixin_46683645/article/details/118225037
おすすめ
ライナスは「ドッグフードを食べる」ことに最も積極的！
Open Source Daily | Winamp プレーヤーがオープンソースになりつつある; 生成 AI の戦いは第 2 ラウンドにエスカレート; AI はバブルの初期段階に入った; Yongming を Alibaba Cloud に導入しますか?
ランキング
C言語プログラミングの最新の方法（第2回）第12章回答（自分で書いた回答、継続的に更新）
フレームワークの蜂のアップロードファイルに移動します
タイトルバーシリーズ：タイトルバーで遭遇したピットを非表示にする
Unityはゲームオブジェクトの様々な状況を取得します
N個の異なるボールは、Mどのように多くの種類のプログラムのと同じ袋に入れられますか？
オブジェクト指向のクラス、オブジェクト21
C ++オブジェクト指向プログラミングの研究ノート（8）
P3954 [NOIP2017 普及组] 成绩
分業のプロセス間通信 - ロック
ハッカーは通常、DOSコマンドウィンドウを使用します
アーカイブ
もっと
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)

コードワールド

© 2018 codetd.com