1.變量聲明const和let
var關鍵字聲明變量存在函數變量提升,即無論聲明在何處,都會被視爲聲明在函數的最頂部(不在函數內即在全局作用域的最頂部)
ES6中,通常用 let 和 const 來聲明,let 表示變量、const 表示常量。let 和 const 都是塊級作用域。
if (true) {
let a = 10;
}
console.log(a) // a is not defined
console.log(a); // a is not defined
let a = 20;
const
聲明常量,常量就是值(內存地址)不能變化的量
具有塊級作用域
if (true) {
const a = 10;
}
console.log(a) // a is not defined
聲明常量時必須賦值
常量賦值後,值不能修改
const PI = 3.14;
PI = 100; // Assignment to constant variable.
const ary = [100, 200];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary); // ['a', 'b'];
ary = ['a', 'b']; // Assignment to constant variable.
小結
-
const聲明的變量是一個常量
-
既然是常量不能重新進行賦值,如果是基本數據類型,不能更改值,如果是複雜數據類型,不能更改地址值
-
聲明 const時候必須要給定值
let、const、var 的區別
-
使用 var 聲明的變量,其作用域爲該語句所在的函數內,且存在變量提升現象
-
使用 let 聲明的變量,其作用域爲該語句所在的代碼塊內,不存在變量提升
-
使用 const 聲明的是常量,在後面出現的代碼中不能再修改該常量的值
解構賦值
ES6中允許從數組中提取值,按照對應位置,對變量賦值,對象也可以實現解構
數組解構
let [a, b, c] = [1, 2, 3];
console.log(a)//1
console.log(b)//2
console.log(c)//3
//如果解構不成功,變量的值爲undefined
對象解構
let person = { name: 'zhangsan', age: 20 };
let { name, age } = person;
console.log(name); // 'zhangsan'
console.log(age); // 20
let {name: myName, age: myAge} = person; // myName myAge 屬於別名
console.log(myName); // 'zhangsan'
console.log(myAge); // 20
小結
-
解構賦值就是把數據結構分解,然後給變量進行賦值
-
如果解構不成功,變量跟數值個數不匹配的時候,變量的值爲undefined
-
數組解構用中括號包裹,多個變量用逗號隔開,對象解構用花括號包裹,多個變量用逗號隔開
-
利用解構賦值能夠讓我們方便的去取對象中的屬性跟方法
箭頭函數
不需要 function 關鍵字來創建函數
省略 return 關鍵字
繼承當前上下文的 this 關鍵字
ES6中新增的定義函數的方式。
() => {} //():代表是函數; =>:必須要的符號,指向哪一個代碼塊;{}:函數體
const fn = () => {}//代表把一個函數賦值給fn
函數體中只有一句代碼,且代碼的執行結果就是返回值,可以省略大括號
function sum(num1, num2) {
return num1 + num2;
}
//es6寫法
const sum = (num1, num2) => num1 + num2;
如果形參只有一個,可以省略小括號
function fn (v) {
return v;
}
//es6寫法
const fn = v => v;
箭頭函數不綁定this關鍵字,箭頭函數中的this,指向的是函數定義位置的上下文this
const obj = { name: '張三'}
function fn () {
console.log(this);//this 指向 是obj對象
return () => {
console.log(this);//this 指向 的是箭頭函數定義的位置,那麼這個箭頭函數定義在fn裏面,而這個fn指向是的obj對象,所以這個this也指向是obj對象
}
}
const resFn = fn.call(obj);
resFn();
小結
-
箭頭函數中不綁定this,箭頭函數中的this指向是它所定義的位置,可以簡單理解成,定義箭頭函數中的作用域的this指向誰,它就指向誰
-
箭頭函數的優點在於解決了this執行環境所造成的一些問題。比如:解決了匿名函數this指向的問題(匿名函數的執行環境具有全局性),包括setTimeout和setInterval中使用this所造成的問題
剩餘參數
剩餘參數語法允許我們將一個不定數量的參數表示爲一個數組,不定參數定義方式,這種方式很方便的去聲明不知道參數情況下的一個函數
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']
ES6 的內置對象擴展
Array 的擴展方法
擴展運算符(展開語法)
擴展運算符可以將數組或者對象轉爲用逗號分隔的參數序列
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];
構造函數方法: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(arrayLike, item => item *2)//[2,4]
注意:如果是對象,那麼屬性需要寫對應的索引
實例方法:find()
用於找出第一個符合條件的數組成員,如果沒有找到返回undefined
let ary = [{
id: 1,
name: '張三'
}, {
id: 2,
name: '李四'
}];
let target = ary.find((item, index) => item.id == 2);//找數組裏面符合條件的值,當數組中元素id等於2的查找出來,注意,只會匹配第一個
實例方法: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
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 '哈哈哈哈1';
};
let greet = `${sayHello()} 哈哈哈哈`;
console.log(greet); // 哈哈哈哈1 哈哈哈哈
實例方法: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"
Set 數據結構
ES6 提供了新的數據結構 Set。它類似於數組,但是成員的值都是唯一的,沒有重複的值。
Set本身是一個構造函數,用來生成 Set 數據結構
const s = new Set();
Set函數可以接受一個數組作爲參數,用來初始化。
const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 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))