ES6 新增文法

1. let

let關鍵字就是用來聲明變量的
使用let關鍵字聲明的變量具有塊級作用域
在一個大括号中使用let關鍵字聲明的變量才具有塊級作用域 var關鍵字是不具備這個特點的
防止循環變量變成全局變量
使用let關鍵字聲明的變量沒有變量提升
使用let關鍵字聲明的變量具有暫時性死區特性

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>使用let關鍵字聲明變量</title>
</head>
<body>
	<script type="text/javascript">
		/*
			let關鍵字就是用來聲明變量的

			使用let關鍵字聲明的變量具有塊級作用域

			在一個大括号中 使用let關鍵字聲明的變量才具有塊級作用域 var關鍵字是不具備這個特點的

			防止循環變量變成全局變量

			使用let關鍵字聲明的變量沒有變量提升

			使用let關鍵字聲明的變量具有暫時性死區特性

		*/
		
		/* --------let關鍵字就是用來聲明變量的-------- */
		// let a = 10;
		// console.log(a);
		
		/* --------使用let關鍵字聲明的變量具有塊級作用域-------- */
		// if (true) {
		// 	let b = 20;
		// 	console.log(b)
		// 	if (true) {
		// 		let c = 30;
		// 	}
		// 	console.log(c);
		// }
		// console.log(b)
		
		/* -------在一個大括号中 使用let關鍵字聲明的變量才具有塊級作用域 var關鍵字是不具備這個特點的--------- */

		// if (true) {
		// 	let num = 100;
		// 	var abc = 200;
		// }
		// console.log(abc);
		// console.log(num)


		/* -------防止循環變量變成全局變量--------- */
		// for (let i = 0; i < 2; i++) {}
		// console.log(i);
		

		/*-----使用let關鍵字聲明的變量沒有變量提升------*/
		// console.log(a);
		// let a = 100;
		

		/* -------使用let關鍵字聲明的變量具有暫時性死區特性------- */
		var num = 10
		if (true) {
			console.log(num);
			let num = 20;
		}



	</script>
</body>
</html>

2. const

作用：聲明變量，常量就是值（記憶體位址）不能變化的量。

具有塊級作用域

if (true) {
const a = 10;
}
console.log(a) // a is not defined

聲明變量時必須指派

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>使用const關鍵字聲明常量</title>
</head>
<body>
	<script type="text/javascript">
		// 使用const關鍵字聲明的常量具有塊級作用域
		// if (true) {
		// 	const a = 10;
		// 	if (true) {
		// 		const a = 20;
		// 		console.log(a);  // 20
		// 	}
		// 	console.log(a);  // 10
		// }
		// console.log(a);  a is not defined
		
		// 使用const關鍵字聲明的常量必須賦初始值
		// const PI = 3.14;
		
		// 常量聲明後值不可更改 
		const PI = 3.14;
		// PI = 100;
		const ary = [100, 200];
		ary[0] = 123;
		ary = [1, 2] // 報錯
		console.log(ary);
	</script>
</body>
</html>

ES6 新增文法

3. 解構指派

ES6中允許從數組或對象中提取值，按照對應位置，對變量指派。對象也可以實作解構。

3.1 數組解構

ES6 新增文法

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>數組解構</title>
</head>
<body>
	<script type="text/javascript">
		// 數組解構允許我們按照一一對應的關系從數組中提取值 然後将值指派給變量
		let ary = [1,2,3];
		let [a, b, c, d, e] = ary;
		console.log(a) // 1
		console.log(b) // 2
		console.log(c) // 3
		console.log(d) // undefined
		console.log(e) // undefined
	</script>
</body>
</html>

3.2 對象解構

對象解構允許我們使用變量的名字比對對象的屬性，比對成功将對象屬性的值指派給變量。

ES6 新增文法

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>對象解構</title>
</head>
<body>
	<script type="text/javascript">
		// 對象解構允許我們使用變量的名字比對對象的屬性 比對成功 将對象屬性的值指派給變量
		
		let person = {name: 'lisi', age: 30, sex: '男'};
		// let { name, age, sex } = person;
		// console.log(name)
		// console.log(age)
		// console.log(sex)
		
		let {name: myName} = person;
		console.log(myName)

	</script>
</body>
</html>

4. 箭頭函數

4.1 箭頭函數的用法

ES6 中新增的定義函數的方式

箭頭函數是用來簡化函數定義文法的

ES6 新增文法

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>箭頭函數</title>
</head>
<body>
	<script type="text/javascript">
		// 箭頭函數是用來簡化函數定義文法的
		// const fn = () => {
		// 	console.log(123)
		// }
		// fn();
		
		// 在箭頭函數中 如果函數體中隻有一句代碼 并且代碼的執行結果就是函數的傳回值 函數體大括号可以省略
		// const sum = (n1, n2) => n1 + n2;	 
		// const result = sum(10, 20);
		// console.log(result)
		
		// 在箭頭函數中 如果形參隻有一個 形參外側的小括号也是可以省略的
		// const fn = v => {
		// 	alert(v);
		// }
		// fn(20)
		
		// 箭頭函數不綁定this 箭頭函數沒有自己的this關鍵字 如果在箭頭函數中使用this this關鍵字将指向箭頭函數定義位置中的this
		
		function fn () {
			console.log(this);
			return () => {
				console.log(this)
			}
		}

		const obj = {name: 'zhangsan'};

		const resFn = fn.call(obj);

		resFn();
	</script>
</body>
</html>

ES6 新增文法

4.2 箭頭函數面試題

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>箭頭函數面試題</title>
</head>
<body>
	<script type="text/javascript">
	
		var age = 100;

		var obj = {
			age: 20,
			say: () => {
				alert(this.age)
			}
		}

		obj.say(); // 100
	</script>
</body>
</html>

注意：obj 對象是沒有局部作用域的，是以 say 這個方法實際上是定義在全局作用域的，是以this是指向 window的，故 alert 彈出 100

5. 剩餘參數

剩餘參數允許我們将一個不定數量的參數表示為一個數組

ES6 新增文法

const sum = (...args) => {
			let total = 0;
			args.forEach(item => total += item);
			return total;
		};

		console.log(sum(10, 20)); // 30
		console.log(sum(10, 20, 30)); // 60

let ary1 = ['張三', '李四', '王五'];
        let [s1, ...s2] = ary1;
        console.log(s1) //  '張三'
        console.log(s2) //  [ '李四', '王五']

6. ES6的内置對象擴充

6.1 Array的擴充方法

6.1.1擴充運算符（展開文法）

擴充運算符可以将數組或者對象轉為用逗号分隔的參數序列

ES6 新增文法

注意：console.log 會将逗号分隔符忽略

擴充運算符可以應用于合并數組

ES6 新增文法

// 擴充運算符可以将數組拆分成以逗号分隔的參數序列
		let ary = ["a", "b", "c"];
		...ary // "a", "b", "c"
		console.log(...ary)
		console.log("a", "b", "c")
		
		// 擴充運算符應用于數組合并
		let ary1 = [1, 2, 3];
		let ary2 = [4, 5, 6];
		// ...ary1 // 1, 2, 3
		// ...ary1 // 4, 5, 6
		let ary3 = [...ary1, ...ary2];
		console.log(ary3)

		// 合并數組的第二種方法
		let ary1 = [1, 2, 3];
		let ary2 = [4, 5, 6];

		ary1.push(...ary2);
		console.log(ary1)

- 擴充運算法将類數組或可周遊對象轉換為真正的數組

ES6 新增文法

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <title>擴充運算符</title>
</head>

<body>
    <div>1</div>
    <div>4</div>
    <div>3</div>
    <div>6</div>
    <div>2</div>
    <div>5</div>
    <script type="text/javascript">
        // 利用擴充運算符将僞數組轉換為真正的數組
        var oDivs = document.getElementsByTagName('div');
        console.log(oDivs)
        var ary = [...oDivs];
        ary.push('a');
        console.log(ary);
    </script>
</body>

</html>

輸出結果：

ES6 新增文法

6.1.2 構造函數方法 Array.from()

ES6 新增文法

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>Array.from方法</title>
</head>
<body>
	<script type="text/javascript">
		// var arrayLike = {
		// 	"0": "張三",
		// 	"1": "李四",
		// 	"2": "王五",
		// 	"length": 3
		// }

		// var ary = Array.from(arrayLike);
		// console.log(ary)
		
		var arrayLike = {
			"0": "1",
			"1": "2",
			"length": 2
		}

		var ary = Array.from(arrayLike, item => item * 2)
		console.log(ary)
	</script>
</body>
</html>

6.1.3 執行個體方法 find（）

ES6 新增文法

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>find方法</title>
</head>
<body>
	<script type="text/javascript">
		var ary = [{
			id: 1,
			name: '張三'
		}, {
			id: 2,
			name: '李四'
		}];
		let target = ary.find(item => item.id == 3);
		console.log(target)
	</script>
</body>
</html>

6.1.4 執行個體方法 findindex（）

ES6 新增文法

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>findIndex方法</title>
</head>
<body>
	<script type="text/javascript">
		let ary = [10, 20, 50];
		let index = ary.findIndex(item => item > 15);
		console.log(index)
	</script>
</body>
</html>

6.1.5 執行個體方法 includes（）

ES6 新增文法

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>includes方法</title>
</head>
<body>
	<script type="text/javascript">
		let ary = ["a", "b", "c"];

		let result = ary.includes('a')
		console.log(result) // true
		result = ary.includes('e')
		console.log(result) // false
	</script>
</body>
</html>

6.2 String 的擴充方法

6.2.1 模闆字元串

ES6 中新增的建立字元串的方式，使用反引号定義。

let name = `zhangsan`

模闆字元串可以解析變量

ES6 新增文法

模闆字元串可以換行

ES6 新增文法

在模闆字元串中可以調用函數

ES6 新增文法

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>模闆字元串</title>
</head>
<body>
	<script type="text/javascript">
		// let name = `張三`;
		// let sayHello = `Hello, 我的名字叫${name}`;
		// console.log(sayHello);
		
		// let result = {
		// 	name: "zhangsan",
		// 	age: 20
		// };
		// let html = `
		// 	<div>
		// 		<span>${result.name}</span>
		// 		<span>${result.age}</span>
		// 	</div>
		// `;
		// console.log(html);
		
		const fn = () => {
			return '我是fn函數'
		}

		let html = `我是模闆字元串 ${fn()}`;
		console.log(html)

	</script>
</body>
</html>

6.2.2 執行個體方法： startWith（）和 endWith（）

ES6 新增文法

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>startsWith方法和endsWith方法</title>
</head>
<body>
	<script type="text/javascript">
		let str = 'Hello ECMAScript 2015';
		let r1 = str.startsWith('Hello');
		console.log(r1);  // true
		let r2 = str.endsWith('2016'); 
		console.log(r2); // false
	</script>
</body>
</html>

6.2.3 執行個體方法： repeat（）

ES6 新增文法

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>repeat方法</title>
</head>
<body>
	<script type="text/javascript">
		console.log("y".repeat(5)); // yyyyy
	</script>
</body>
</html>

7. Set 資料結構

ES6 提供了新的資料結構 Set。它類似于數組，但是成員的值是唯一的，沒有重複的值。

ES6 新增文法

7.1 Set執行個體方法

ES6 新增文法

// const s1 = new Set();
        // console.log(s1.size)  // 0

        // const s2 = new Set(["a", "b"]); // 傳遞數組到Set裡面
        // console.log(s2.size) // 2

        // const s3 = new Set(["a","a","b","b"]); // 利用Set進行數組去重
        // console.log(s3.size) // 2
        // const ary = [...s3];
        // console.log(ary) // ['a', 'b']

        // const s4 = new Set();
        // 向set結構中添加值 使用add方法
        // s4.add('a').add('b');
        // console.log(s4.size) // 2

        // 從set結構中删除值 用到的方法是delete
        // const r1 = s4.delete('c');
        // console.log(s4.size) // 2
        // console.log(r1); // false

        // 判斷某一個值是否是set資料結構中的成員 使用has
        // const r2 = s4.has('d');
        // console.log(r2)  // false

        // 清空set資料結構中的值 使用clear方法
        // s4.clear();
        // console.log(s4.size); //0

7.2 周遊

ES6 新增文法

// 周遊set資料結構 從中取值
        const s5 = new Set(['a', 'b', 'c']);
        s5.forEach(value => {
            console.log(value)
        })

ES6 新增文法

1. let

2. const

3. 解構指派

3.1 數組解構

3.2 對象解構

4. 箭頭函數

4.1 箭頭函數的用法

4.2 箭頭函數面試題

5. 剩餘參數

6. ES6的内置對象擴充

6.1 Array的擴充方法

6.1.1擴充運算符（展開文法）

6.1.2 構造函數方法 Array.from()

6.1.3 執行個體方法 find（）

6.1.4 執行個體方法 findindex（）

6.1.5 執行個體方法 includes（）

6.2 String 的擴充方法

6.2.1 模闆字元串

6.2.2 執行個體方法： startWith（）和 endWith（）

6.2.3 執行個體方法： repeat（）

7. Set 資料結構

7.1 Set執行個體方法

7.2 周遊

繼續閱讀

請求逾時VUE axios重新再次請求

IE8 CSS設定DIV居中，添加“margin:0 auto”

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

403 Forbidden，You don't have permission to access / on this server.Forbidden

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條