JavaScript ES6文法
- ES6新增文法
-
- let
-
- let文法
- let經典面試題
- 小結
- const
- var、let、const差別
- 解構指派
- 箭頭函數
-
- 箭頭函數經典面試題
- 剩餘函數
- ES6的内置對象拓展
-
- Array的拓展方法
-
- 拓展運算符
- Array.from()
- 執行個體方法find()
- 執行個體方法findIndex()
- 執行個體方法includes()
- string的拓展方法
-
- 模闆字元串
- 執行個體方法 startsWith()和endsWith()
- 執行個體方法 repeat()
- set資料結構
-
- 執行個體方法
- 周遊
ES6新增文法
let
let文法
let聲明的變量隻在所處于的塊級有效
let經典面試題
//題1
var arr = [];
for (var i = 0; i < 2; i++) {
arr[i] = function () {
console.log(i);
}
}
//因為執行arr[0]這個函數時，i==2 i是全局變量了
arr[0](); //輸出2
arr[1](); //輸出2
//題2
let arr = [];
for (let i = 0; i < 2; i++) {
arr[i] = function () {
console.log(i);
}
}
arr[0](); //輸出0
arr[1](); //輸出1
//因為let聲明i，每次循環都會新增一塊 塊級作用域，i指向是目前塊級作用域，是以輸出的是自己上一級（循環産生的塊級作用域）作用域下的i值
小結
- let用來聲明變量
- let關鍵字聲明的變量具有塊級作用域
- 在大括号中，用let聲明的變量具有塊級作用域，而var是沒有的
- 防止循環變量變成全局變量
- let聲明的變量沒有變量提升
- let聲明的變量存在暫時性死區
//存在暫時性死區
var str = '111';
if(true){
str = 'aaa'; //雖然str是全局變量，但是if塊級作用域中，let聲明str，即使指派操作在let聲明變量前，也無法指派成功
let str = 'a1';
}
const
const聲明常量，常量就是值（記憶體位址）不能改變的量
//1.具有塊級作用域
if(true){
const a = 1;
}
console.log(a); //報錯
//2.聲明常量必須指派
const a = 1; //正常
const b; //報錯
//3.聲明常量的值不能被更改
const c = 'ccc';
c = 'ddd'; //報錯Assignment to constant variable
//3.1 聲明的數組可以修改數組中的值
const arr = ['a1','a2'];
arr[0] = '修改了';
console.log(arr); //輸出['修改了','a2'];
//但是這種情況是不允許的
arr = ['第二次修改了','a2']; //報錯Assignment to constant variable
//因為第二次修改屬于重新指派，會改變記憶體位址，是不給允許的
//但是第一次修改，隻是修改記憶體位址指向的
var、let、const差別
- 使用 var 聲明的變量，其作用域為該語句所在的函數内，且存在變量提升現象
- 使用 let 聲明的變量，其作用域為該語句所在的代碼塊内，不存在變量提升
- 使用 const 聲明的是常量，在後面出現的代碼中不能再修改該常量的值
解構指派
//解構指派 數組
var [a,b,c] = [1,2,3];
console.log(a); //輸出1
console.log(b); //輸出2
console.log(c); //輸出3
//解構指派 對象
var obj = {
name:'zhangsan',
age:18,
scale:100
}
var {name,age,scale} = obj;
console.log(name); //輸出zhangsan
console.log(age); //輸出18
console.log(scale); //輸出100
//解構指派 對象 使用别名
//name指向對象的屬性名name aa是給name起的别名
// aa -> name -> obj中的name值
var {name:aa,age:bb,scale:cc} = obj;
console.log(aa); //輸出zhangsan
console.log(bb); //輸出18
console.log(cc); //輸出100
箭頭函數
新增的一種定義函數的方法
//箭頭函數
var fn = ()=>{
console.log('箭頭函數');
}
fn(); //輸出 箭頭函數
//
function sum(a,b){
console.log(a+b);
}
sum(1,2);
//上述函數等價于下列函數
var sum = (a,b)=>{console.log(a+b)};
sum(1,3);
//當形參隻有一個時，可以省略括号，{}中隻有一條執行語句時，可以省略{}
function fn(a){
return a;
}
var a = fn(5);
console.log(a); //輸出5
var b = a => a;
console.log(b(10)); //輸出10
//箭頭函數的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();
箭頭函數經典面試題
var age = 100;
var obj = {
age: 20,
say: () => {
alert(this.age); //此處的this指向的是window變量
}
}
obj.say();//箭頭函數this指向的是被聲明的作用域裡面，而對象沒有作用域的，是以箭頭函數雖然在對象中被定義，但是this指向的是全局作用域
//假設使用
obj.say.call(obj);//通過call方法将this指向綁定為obj，則能彈出obj.age
剩餘函數
剩餘參數文法允許我們将一個不定數量的參數表示為一個數組，不定參數定義方式，這種方式很友善的去聲明不知道參數情況下的一個函數
function fn(a,...arg){
console.log(a);
console.log(arg); //arg為剩餘函數 接受剩下的參數 打包成一個數組
}
fn(1,2,3,4,5);
剩餘參數和解構配合使用
let students = ['wangwu', 'zhangsan', 'lisi'];
let [s1, ...s2] = students;
console.log(s1); // 'wangwu'
console.log(s2); // ['zhangsan', 'lisi']
ES6的内置對象拓展
Array的拓展方法
拓展運算符
let arr = ['a','b','c'];
console.log(...arr); //輸出abc
// 等同于這句
console.log('a','b','c');
可以用來合并數組
let arr = ['a','b','c'];
let arr1 = [1,2,3];
let arr2 = [...arr,...arr1];
console.log(arr2); //["a", "b", "c", 1, 2, 3]
Array.from()
将僞數組周遊轉換為真正的數組
let obj = {
'0' : 'a',
"1" : 'b',
'2' : 'c',
'length' : 3
}
var res = Array.from(obj);
console.log(res);
let obj = {
'0':2,
"1":4,
'length':2
}
var res = Array.from(obj,item => item*2);
console.log(res); //[4, 8]
執行個體方法find()
用于找出第一個符合條件的數組成員，如果沒有找到傳回undefined
let arr = [5,10,15,28,30];
let res1 = arr.find(item => item>12);
let res2 = arr.find(item => item>40);
console.log(res1); //輸出第一個條件比對的值 15
console.log(res2); //全部不符合條件，輸出underfined
執行個體方法findIndex()
用于找出第一個符合條件的數組成員的位置，如果沒有找到傳回-1
let obj = [{
id:1,
name:'zs'
},{
id:2,
name:'ls'
},{
id:3,
name:'ww'
},
];
let res3 = obj.findIndex(item=>item.id==2);
let res4 = obj.findIndex(item=>item.id==4);
console.log(res3); //傳回條件比對的索引号 條件都不比對傳回-1
console.log(res4); //傳回條件比對的索引号 條件都不比對傳回-1
執行個體方法includes()
判斷某個數組是否包含給定的值，傳回布爾值
let arr = [5,10,15,28,30];
console.log(arr.includes(4)); //arr不包含4這個值，傳回false
string的拓展方法
模闆字元串
模闆字元串支援換行
${}支援調用函數
//支援調用變量
let bl = '這是變量'
var str = `這是一個字元串${bl}`;
console.log(str);
//支援調用函數
let obj = {
name:'zs',
say: ()=>{
return '我是zs哈哈哈哈'
}
}
let str1 = `${obj.name}哈哈哈哈哈${obj.say()}`;
console.log(str1);
執行個體方法 startsWith()和endsWith()
startsWith()：表示參數字元串是否在原字元串的頭部，傳回布爾值
endsWith()：表示參數字元串是否在原字元串的尾部，傳回布爾值
let str = 'Hello world!';
str.startsWith('Hello') // true
str.endsWith('!') // true
str.endsWith('。') // false
執行個體方法 repeat()
将一個值重複幾次
let str = 'a';
let res = str.repeat(5);
console.log(res); //輸出aaaaa
set資料結構
執行個體方法
set是一個構造函數，用于生成Set資料結構，不允許有重複值，可以用來電商平台存儲使用者搜尋關鍵詞曆史記錄
const set1 = new Set();
console.log(set1); // Set(0) {}
console.log(set1.size); // 0
const set2 = new Set([1,23,45,67]);
console.log(set2); // Set(4) {1, 23, 45, 67}
console.log(set2.size); // 4
//執行個體方法 添加
set1.add(5).add(10); //支援鍊式調用
console.log(set1); // Set(2) {5,10}
//執行個體方法 删除
set2.delete(45);
console.log(set2); // Set(3) {1, 23, 67}
//執行個體方法 清空
set2.clear();
console.log(set2); // Set(0) {}
//執行個體方法 has
var res1 = set1.has(10);
var res2 = set1.has(7);
console.log(res1); //傳回一個布爾值，表示該值是否為 Set 的成員 true
console.log(res2); // false
周遊
const set = new Set(['a','b','v','z']);
set.forEach(value => console.log(value));
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)