一、關鍵字
1、let關鍵字
特性：
- let宣告的變數只在所處于的塊級有效
// let變數具有塊級作用域，即在{}里面生效
if (true) {
let a = 10;
}
console.log(a); // not defined
- 不存在變數提升
// let 不存在變數提升
console.log(a);
let a = 100;
- 暫時性死區
var tmp = 123;
if (true) {
tmp = 'abc';
let tmp;
}
2、const關鍵字
作用：宣告常量，常量就是值（記憶體地址）不能變化的量，
特性：
- 具有塊級作用域
if (true) {
const a = 10;
console.log(a); // 10
}
console.log(a); // not defined
- 宣告常量時必須賦值
// 必須賦初值
const pi; // 報錯
- 常量賦值后，值不能修改，
// 簡單資料型別賦值后不能更改，復雜資料型別賦值后可以改變資料結構內部的值不能更改地址
const pi = 3.14;
// pi = 100; // Assignment to constant variable.
const arr = [100, 200];
arr[0] = 'a';
arr[1] = 'b';
console.log(arr);
arr = ['a', 'b']; // 報錯
3、let、var、const的區別
- 使用 var 宣告的變數，其作用域為該陳述句所在的函式內，且存在變數提升現象，
- 使用 let 宣告的變數，其作用域為該陳述句所在的代碼塊內，不存在變數提升，
- 使用 const 宣告的是常量，在后面出現的代碼中不能再修改該常量的值，
二、解構賦值
ES6中允許從陣列中提取值，按照對應位置，對變數賦值，物件也可以實作解構，
1、陣列解構
方法[variable1，variable2，variable3…] = [陣列內容]
-
陣列解構允許我們按照一一對應的關系從陣列中提取值，然后將值賦值給變數
-
如果解構不成功，變數值變成undefined
// 陣列解構允許我們按照一一對應的關系從陣列中提取值，然后將值賦值給變數
let [a, b, c, d, e] = [1, 2, 3];
console.log(a);
console.log(b);
console.log(c);
// 如果解構不成功，變數值變成undefined
console.log(d);
console.log(e);
2、物件解構
物件解構允許我們使用變數的名字匹配物件的屬性， 匹配成功將物件屬性的值賦值給變數
let person = {
name: "zhangsan",
age: 20,
sex: '男'
};
let {
name,
age,
sex
} = person;
console.log(name); // zhangsan
console.log(age); // 20
console.log(sex); // 男
當然也可以對解構的變數重新賦值
let {
name: myName,
age: myAge
} = person;
console.log(myName);
console.log(myAge);
三、箭頭函式及剩余引數
1、箭頭函式
ES6中新增的定義函式的方式：
() => {}
const fn = () => {}
函式體中只有一句代碼，且代碼的執行結果就是回傳值，可以省略大括號
const sum = (num1, num2) => num1 + num2;
如果形參只有一個，可以省略小括號
const fn = v => v;
箭頭函式不系結this關鍵字，箭頭函式中的this，指向的是函式定義位置的背景關系this，
// 箭頭函式不系結this關鍵字，其this指向函式定義位置的背景關系
const obj = {
name: "andy"
};
function fn() {
console.log(this); // obj
return () => {
console.log(this); // obj
};
};
const resFn = fn.call(obj);
resFn();
fs = () => {
console.log(this); // Window
}
fs();
2、剩余引數 …args
剩余引數語法允許我們將一個不定數量的引數表示為一個陣列，
function sum (first, ...args) {
console.log(first); // 10
console.log(args); // [20, 30]
}
sum(10, 20, 30)
剩余引數和解構配合使用
let students = ['wangwu', 'zhangsan', 'lisi'];
let [s1, ...s2] = students;
console.log(s1); // 'wangwu'
console.log(s2); // ['zhangsan', 'lisi']
三、內置物件擴展
1、擴展運算子
- 擴展運算子可以將陣列或者物件轉為用逗號分隔的引數序列，
let ary = [1, 2, 3];
...ary // 1, 2, 3
console.log(...ary); // 1 2 3
console.log(1, 2, 3)
- 擴展運算子可以應用于合并陣列，
// 方法一
let ary1 = [1, 2, 3]; let ary2 = [3, 4, 5];
let ary3 = [...ary1, ...ary2];
// 方法二
ary1.push(...ary2);
- 將類陣列或可遍歷物件轉換為真正的陣列
let oDivs = document.getElementsByTagName('div');
oDivs = [...oDivs];
2、Array的擴展方法
- Array.from() 將類陣列或可遍歷物件轉換為真正的陣列
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
還可以接受第二個引數，作用類似于陣列的map方法，用來對每個元素進行處理，將處理后的值放入回傳的陣列，
let arrayLike = {
"0": 1,
"1": 2,
"length": 2
}
let newAry = Array.from(aryLike, item => item *2)
- find() 用于找出第一個符合條件的陣列成員，如果沒有找到回傳undefined
let ary = [{
id: 1,
name: '張三‘
}, {
id: 2,
name: '李四‘
}];
let target = ary.find((item, index) => item.id == 2);
// {id:2, name:"李四"}
- findIndex() 用于找出第一個符合條件的陣列成員的位置，如果沒有找到回傳-1
let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9);
console.log(index); // 2
- includes() 表示某個陣列是否包含給定的值，回傳布林值，
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
3、String 的擴展方法
- 模板字串
ES6新增的創建字串的方式，使用反引號定義，
let name = `zhangsan`;
- 模板字串中可以決議變數，
let name = '張三';
let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan
- 模板字串中可以換行
let result = {
name: 'zhangsan',
age: 20,
sex: '男'
}
let html = ` <div>
<span>${result.name}</span>
<span>${result.age}</span>
<span>${result.sex}</span>
</div> `;
- 在模板字串中可以呼叫函式，
const sayHello = function () {
return '哈哈哈哈 追不到我吧 我就是這么強大';
};
let greet = `${sayHello()} 哈哈哈哈`; console.log(greet); // 哈哈哈哈 追不到我吧 我就是這么強大 哈哈哈哈
- startsWith() 和 endsWith()
startsWith()：表示引數字串是否在原字串的頭部，回傳布林值
endsWith()：表示引數字串是否在原字串的尾部，回傳布林值
let str = 'Hello world!';
str.startsWith('Hello') // true
str.endsWith('!') // true
- repeat()
repeat方法表示將原字串重復n次，回傳一個新字串，
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
4、Set 資料結構
ES6 提供了新的資料結構 Set，它類似于陣列，但是成員的值都是唯一的，沒有重復的值，
Set本身是一個建構式，用來生成 Set 資料結構，
const s = new Set();
Set函式可以接受一個陣列作為引數，用來初始化，
const set = new Set([1, 2, 3, 4, 4]);
- 實體方法
- add(value)：添加某個值，回傳 Set 結構本身
- delete(value)：洗掉某個值，回傳一個布林值，表示洗掉是否成功
- has(value)：回傳一個布林值，表示該值是否為 Set 的成員
- clear()：清除所有成員，沒有回傳值
const s = new Set();
s.add(1).add(2).add(3); // 向 set 結構中添加值
s.delete(2) // 洗掉 set 結構中的2值
s.has(1) // 表示 set 結構中是否有1這個值 回傳布林值
s.clear() // 清除 set 結構中的所有值
- 遍歷
Set 結構的實體與陣列一樣，也擁有forEach方法，用于對每個成員執行某種操作，沒有回傳值，
s.forEach(value => console.log(value))
5、Map資料結構
map是用來存放鍵值對的有序串列，類似于Python中的字典資料型別，
其定義如下：
let map = new Map();
map也有很多方法：
- set() 添加元素
- get() 獲取元素的值
- has() 判斷是否存在該鍵
- delete() 洗掉元素
- clear() 清空
// 鍵值對的有序串列
let map = new Map();
map.set('name', '張三');
map.set("age", '20');
console.log(map.get('name'));
console.log(map);
console.log(map.has('name'));
map.delete('name');
map.clear();
console.log(map);
6、Symbol資料型別
- Symbol是原始資料型別，用來表示獨一無二的值，通常用來定義物件的私有變數，定義時不需要new宣告，
const name1 = Symbol('name');
const name2 = Symbol("name"); // 二者記憶體地址不一樣
console.log(name1 === name2); // false
- 如果用symbol定義物件的變數，取值時一定要用[]
let s1 = Symbol("s1");
console.log(s1);
let obj = {};
obj[s1] = "andy";
console.log(obj);
console.log(obj.s1); // undefined
console.log(obj[s1]);
- 遍歷symbol
不能簡單地用for、foreach遍歷獲取，
可以用Object.getOwnPropertySymbols()和Reflect.ownKeys()獲取
// 遍歷symbol定義物件的變數 獲取屬性名
let s = Object.getOwnPropertySymbols(obj);
console.log(s);
let m = Reflect.ownKeys(obj);
console.log(m);
下一篇：ES6—（2）迭代器和生成器
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/302811.html
標籤：其他
上一篇：JSON與AJAX初識