前端學習之JavaScript知識點彙總

前端學習之JavaScript與ES6

總結匯總一些JavaScript的基礎語法與進階用法，還涉及一些ES6擴展語法標準相關的知識點。

1. Js引入方式

// 行內式
<input type="button" value="點我試試" onclick="alert('Hello World')" />
// 內嵌式
<script>
    alert('Hello  World~!');
</script>
// 引入外部js文件
<script src="my.js"></script>

2. 註釋與輸入輸出

• 註釋

// 單行註釋	
/*
  多行註釋
  並通過提示框顯示出來
*/

• JavaScript輸入輸出語句

爲了方便信息的輸入輸出，JS中提供了一些輸入輸出語句，其常用的語句如下：

方法	說明	歸屬
alert(msg)	瀏覽器彈出警示框	瀏覽器
console.log(msg)	瀏覽器控制檯打印輸出信息	瀏覽器
prompt(info)	瀏覽器彈出輸入框，用戶可以輸入	瀏覽器

alert() 主要用來顯示消息給用戶，console.log() 用來給程序員自己看運行時的消息。

2. 變量的使用

在代碼運行時，變量的數據類型是由 JS引擎 根據 = 右邊變量值的數據類型來判斷的，運行完畢之後， 變量就確定了數據類型。JavaScript 擁有動態類型，同時也意味着相同的變量可用作不同的類型：

//  聲明變量  
var age; //  聲明一個 名稱爲age 的變量     
age = 10; // 給 age  這個變量賦值爲 10  
var age  = 18;  // 聲明變量同時賦值爲 18
var age = 10,  name = 'zs', sex = 2;   

• 聲明變量特殊情況

情況	說明	結果
var age ; console.log (age);	只聲明 不賦值	undefined
console.log(age)	不聲明 不賦值 直接使用	報錯
age = 10; console.log (age);	不聲明 只賦值	10

變量命名規範：

• 由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號( $ )組成，如：usrAge, num01, _name
• 嚴格區分大小寫。var app; 和 var App; 是兩個變量
• 不能 以數字開頭。 18age 是錯誤的
• 不能 是關鍵字、保留字。例如：var、for、while
• 變量名必須有意義。 MMD BBD nl → age
• 遵守駝峯命名法。首字母小寫，後面單詞的首字母需要大寫。

3. 簡單數據類型

JS 把數據類型分爲兩類：簡單數據類型（Number,String,Boolean,Undefined,Null）和複雜數據類型（object) 。

• 數字型 Number

var age = 21;       // 整數
var Age = 21.3747;  // 小數     

1.數字型進制

最常見的進制有二進制、八進制、十進制、十六進制。

  // 1.八進制數字序列範圍：0~7
 var num1 = 07;   // 對應十進制的7
 var num2 = 019;  // 對應十進制的19
 var num3 = 08;   // 對應十進制的8
  // 2.十六進制數字序列範圍：0~9以及A~F
 var num = 0xA;   

現階段我們只需要記住，在JS中八進制前面加0，十六進制前面加 0x

2.數字型範圍
JavaScript中數值的最大和最小值

• 最大值：Number.MAX_VALUE，這個值爲： 1.7976931348623157e+308
• 最小值：Number.MIN_VALUE，這個值爲：5e-32

3.數字型三個特殊值

• Infinity ，代表無窮大，大於任何數值
  -Infinity ，代表無窮小，小於任何數值
• NaN ，Not a number，代表一個非數值

4.isNaN

用來判斷一個變量是否爲非數字的類型，返回 true 或者 false

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum);          // false ，21 不是一個非數字
var usrName = "andy";
console.log(isNaN(userName));// true ，"andy"是一個非數字

• 字符串型 String

字符串型可以是引號中的任意文本，其語法爲 雙引號 “” 和 單引號’’

var strMsg = "我愛北京天安門~";  // 使用雙引號表示字符串
var strMsg2 = '我愛吃豬蹄~';    // 使用單引號表示字符串
// 常見錯誤
var strMsg3 = 我愛大肘子;       // 報錯，沒使用引號，會被認爲是js代碼，但js沒有這些語法

因爲 HTML 標籤裏面的屬性使用的是雙引號，JS 這裏我們更推薦使用單引號。
1.字符串引號嵌套
JS 可以用單引號嵌套雙引號 ，或者用雙引號嵌套單引號 (外雙內單，外單內雙)

var strMsg = '我是"高帥富"程序猿';   // 可以用''包含""
var strMsg2 = "我是'高帥富'程序猿";  // 也可以用"" 包含''

2.字符串轉義符
類似HTML裏面的特殊字符，字符串中也有特殊字符，我們稱之爲轉義符。
轉義符都是 \ 開頭的，常用的轉義符及其說明如下：

轉義符	解釋說明
\n	換行符，n 是 newline 的意思
\ \	斜槓 \
’	’ 單引號
"	”雙引號
\t	tab 縮進
\b	空格 ，b 是 blank 的意思

3.字符串長度
字符串是由若干字符組成的，這些字符的數量就是字符串的長度。通過字符串的 length 屬性可以獲取整個字符串的長度。

var strMsg = "我是帥氣多金的程序猿！";
alert(strMsg.length); // 顯示 11

4.字符串拼接

• 多個字符串之間可以使用 + 進行拼接，其拼接方式爲 字符串 + 任何類型 = 拼接之後的新字符串
• 拼接前會把與字符串相加的任何類型轉成字符串，再拼接成一個新的字符串

//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 數值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 數值字符串 + 數值
alert('11' + 12);     // 1112 

5.字符串拼接加強

console.log('pink老師' + 18);        // 只要有字符就會相連 
var age = 18;
console.log('pink老師age歲啦');      // 這樣不行哦
console.log('pink老師' + age);         // pink老師18
console.log('pink老師' + age + '歲啦'); // pink老師18歲啦

• 布爾型Boolean

布爾類型有兩個值：true 和 false ，其中 true 表示真（對），而 false 表示假（錯）。
布爾型和數字型相加的時候， true 的值爲 1 ，false 的值爲 0。

console.log(true + 1);  // 2
console.log(false + 1); // 1

• Undefined和 Null

一個聲明後沒有被賦值的變量會有一個默認值undefined ( 如果進行相連或者相加時，注意結果）

var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   //  NaN

一個聲明變量給 null 值，裏面存的值爲空（學習對象時，我們繼續研究null)

var vari = null;
console.log('你好' + vari);  // 你好null
console.log(11 + vari);     // 11
console.log(true + vari);   //  1

• 獲取變量數據類型

typeof 可用來獲取檢測變量的數據類型

var num = 18;
console.log(typeof num) // 結果 number      

• 字面量

字面量是在源代碼中一個固定值的表示法，通俗來說，就是字面量表示如何表達這個值。

• 數字字面量：8, 9, 10

• 字符串字面量：‘黑馬程序員’, “大前端”

• 布爾字面量：true，false

• 數據類型轉換

var num=1;
num.toString();
String(num)
num+"字符串";

parseInt('78');
parseFloat('78.21');
Number('12')
'12'-0

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true
    

4. 運算符（操作符）

4.1 算數運算符

+加，-減，*乘，/除法，%取餘數
浮點數值的最高精度是 17 位小數，但在進行算術計算時其精確度遠遠不如整數。

var result = 0.1 + 0.2;    // 結果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);   // 結果不是 7，  而是：7.000000000000001

• 遞增和遞減運算符

在 JavaScript 中，遞增（++）和遞減（ – ）既可以放在變量前面，也可以放在變量後面。放在變量前面時，我們可以稱爲前置遞增（遞減）運算符，放在變量後面時，我們可以稱爲後置遞增（遞減）運算符。
遞增和遞減運算符必須和變量配合使用。

• 遞增運算符

前置遞增運算符

++num 前置遞增，就是自加1，類似於 num = num + 1，但是 ++num 寫起來更簡單。先自加，後返回值

  var  num = 10;
  alert(++num + 10);   // 21

後置遞增運算符
num++ 後置遞增，就是自加1，類似於 num = num + 1 ，但是 num++ 寫起來更簡單。先返回原值，後自加

var  num = 10;
alert(10 + num++);  // 20

4.2 比較運算符

<,>,>=,<=,,!=,= !==

console.log(18 == '18');  //判斷兩邊的值是否相等，有隱式轉換
console.log(18 === '18');  // 判斷兩邊的值和數據類型是否完全相同

4.3 邏輯運算符

&&與， ||或， !非

console.log( 123 && 456 );        // 456
console.log( 0 && 456 );          // 0
console.log( 123 && 456&& 789 );  // 789

console.log( 123 || 456 );         //  123
console.log( 0 ||  456 );          //  456
console.log( 123 || 456 || 789 );  //  123

4.4 賦值運算符

var age = 10;
age += 5;  // 相當於 age = age + 5;
age -= 5;  // 相當於 age = age - 5;
age *= 10; // 相當於 age = age * 10;

4.5 運算符優先級

• 一元運算符裏面的邏輯非優先級很高
• 邏輯與比邏輯或優先級高

5. 流程控制

5.1 分支結構

• if 語句

// 適合於檢查多重條件。
if (條件表達式1) {
    語句1；
} else if (條件表達式2)  {
    語句2；
} else if (條件表達式3)  {
   語句3；
 ....
} else {
    // 上述條件都不成立執行此處代碼
}

• 三元表達式

  表達式1 ? 表達式2 : 表達式3;

• switch分支

switch( 表達式 ){ 
    case value1:
        // 表達式 等於 value1 時要執行的代碼
        break;
    case value2:
        // 表達式 等於 value2 時要執行的代碼
        break;
    default:
        // 表達式 不等於任何一個 value 時要執行的代碼
}

5.2 循環控制

• for循環

//  基本寫法
for(var i = 1; i <= 10; i++){
    console.log('hello world!');
}
// 用戶輸入次數
var num = prompt('請輸入次數:')；
for ( var i = 1 ; i <= num; i++) {
    console.log('hello world!');
} 

for (var i = 1; i <= 100; i++) {
     console.log('這個人今年' + i + '歲了');
}

打印五行五列星星

var star = '';
for (var j = 1; j <= 3; j++) {
    for (var i = 1; i <= 3; i++) {
      star += '☆'
    }
    // 每次滿 5個星星 就 加一次換行
    star += '\n'
}
console.log(star);

• while循環

while (條件表達式) {
    // 循環體代碼 
}

• do-while循環

do {
    // 循環體代碼 - 條件表達式爲 true 時重複執行循環體代碼
} while(條件表達式);

• continue、break

continue 關鍵字用於立即跳出本次循環，繼續下一次循環（本次循環體中 continue 之後的代碼就會少執行一次）。
break 關鍵字用於立即跳出整個循環（循環結束）。

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       console.log('這個包子有蟲子，扔掉');
       continue; // 跳出本次循環，跳出的是第3次循環 
    }
    console.log('我正在吃第' + i + '個包子呢');
}

for (var i = 1; i <= 5; i++) {
 if (i == 3) {
     break; // 直接退出整個for 循環，跳到整個for下面的語句
 }
 console.log('我正在吃第' + i + '個包子呢');
}

6. 代碼規範

6.1 標識符命名規範

• 變量、函數的命名必須要有意義
• 變量的名稱一般用名詞
• 函數的名稱一般用動詞

6.2 操作符規範

// 操作符的左右兩側各保留一個空格
for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整個 for 循環，跳到整個for循環下面的語句
   }
   console.log('我正在吃第' + i + '個包子呢');
}

6.3 單行註釋規範

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 單行註釋前面注意有個空格
   }
   console.log('我正在吃第' + i + '個包子呢');
}

6.4 其他規範

關鍵詞、操作符之間後加空格

7.數組

// 定義數組
var 數組名 = new Array() ；
var arr = new Array();   // 創建一個新的空數組

//1. 使用數組字面量方式創建空的數組
var  數組名 = []；
//2. 使用數組字面量方式創建帶初始值的數組
var  數組名 = ['小白','小黑','大黃','瑞奇'];

var arrStus = ['小白',12,true,28.9];

// 定義數組
var arrStus = [1,2,3];
// 獲取數組中的第2個元素
alert(arrStus[1]); 
// 如果訪問時數組沒有和索引值對應的元素，則得到的值是undefined

// 遍歷數組
var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

// 數組的長度
var arrStus = [1,2,3];
alert(arrStus.length);  // 3

/*
當我們數組裏面的元素個數發生了變化，這個 length 屬性跟着一起變化
數組的length屬性可以被修改：
如果設置的length屬性值大於數組的元素個數，則會在數組末尾出現空白元素；
如果設置的length屬性值小於數組的元素個數，則會把超過該值的數組元素刪除
*/
// 數組新增元素
數組[ 數組.length ] = 新數據;

8. 函數

• 函數定義和調用

/* 
   計算1-100之間值的函數
*/

// 聲明函數
function getSum(){
  var sumNum = 0;// 準備一個變量，保存數字和
  for (var i = 1; i <= 100; i++) {
    sumNum += i;// 把每個數值 都累加 到變量中
  }
  alert(sumNum);
}

// 調用函數
getSum();

• 函數參數的運用

// 帶參數的函數聲明
function 函數名(形參1, 形參2 , 形參3...) { // 可以定義任意多的參數，用逗號分隔
  // 函數體
}

// 帶參數的函數調用
函數名(實參1, 實參2, 實參3...); 

1.調用的時候實參值是傳遞給形參的
2.形參簡單理解爲：不用聲明的變量
3.實參和形參的多個參數之間用逗號（,）分隔
4. 在JavaScript中，形參的默認值是undefined。
5. 函數可以帶參數也可以不帶參數
6. 聲明函數的時候，函數名括號裏面的是形參，形參的默認值爲 undefined
7. 調用函數的時候，函數名括號裏面的是實參
8. 多個參數中間用逗號分隔
9. 形參的個數可以和實參個數不匹配，但是結果不可預計，我們儘量要匹配

• 函數的返回值

// 聲明函數
function 函數名（）{
   ...
   return  需要返回的值；
}
// 調用函數
函數名();    // 此時調用函數就可以得到函數體內return 後面的值

在使用 return 語句時，函數會停止執行，並返回指定的值
如果函數沒有 return ，返回的值是 undefined

• break ,continue ,return 的區別

1.break ：結束當前的循環體（如 for、while）
2.continue ：跳出本次循環，繼續執行下次循環（如 for、while）
3.return ：不僅可以退出循環，還能夠返回 return 語句中的值，同時還可以結束當前的函數體內的代碼

• arguments的使用

當不確定有多少個參數傳遞的時候，可以用 arguments 來獲取。JavaScript 中，arguments實際上它是當前函數的一個內置對象。所有函數都內置了一個 arguments 對象，arguments 對象中存儲了傳遞的所有實參。arguments展示形式是一個僞數組，因此可以進行遍歷。僞數組具有以下特點：具有 length 屬性， 按索引方式儲存數據，不具有數組的 push , pop 等方法，在函數內部使用該對象，用此對象獲取函數調用時傳的實參。

• 函數的兩種聲明方式

// 聲明定義方式
function fn() {...}
// 調用  
fn(); 

// 這是函數表達式寫法，匿名函數後面跟分號結束
var fn = function(){...}；
// 調用的方式，函數調用必須寫到函數體下面
fn();

9. 作用域

Js中沒有塊級作用域（在ES6之前）

if(true){
  var num = 123;
  console.log(num); //123
}
console.log(num);   //123

在JavaScript中，根據作用域的不同，變量可以分爲兩種：全局變量，局部變量

• 全局變量

在全局作用域下聲明的變量叫做全局變量（在函數外部定義的變量）。
全局變量在代碼的任何位置都可以使用
在全局作用域下 var 聲明的變量 是全局變量
特殊情況下，在函數內不使用 var 聲明的變量也是全局變量（不建議使用）

• 局部變量

在局部作用域下聲明的變量叫做局部變量（在函數內部定義的變量）
局部變量只能在該函數內部使用
在函數內部 var 聲明的變量是局部變量
函數的形參實際上就是局部變量

• 全局變量和局部變量的區別

全局變量：在任何一個地方都可以使用，只有在瀏覽器關閉時纔會被銷燬，因此比較佔內存
局部變量：只在函數內部使用，當其所在的代碼塊被執行時，會被初始化；當代碼塊運行結束後，就會被銷燬，因此更節省內存空間

作用域鏈：採取就近原則的方式來查找變量最終的值。

10. 對象

10.1 對象概述

在 JavaScript 中，對象是一組無序的相關屬性和方法的集合，所有的事物都是對象，例如字符串、數值、數組、函數等。對象是由屬性和方法組成的。

• 屬性：事物的特徵，在對象中用屬性來表示（常用名詞）
• 方法：事物的行爲，在對象中用方法來表示（常用動詞）

var obj = {

    "name":"張三瘋",
    "sex":"男",
    "age":128,
    "height":154
    
}

10.2 創建對象的三種方式

• 利用字面量創建對象

var star = {
    name : 'pink',
    age : 18,
    sex : '男',
    sayHi : function(){
        alert('大家好啊~');
    }
};

使用對象

console.log(star.name)     // 調用名字屬性
console.log(star['name'])  // 調用名字屬性
star.sayHi();              // 調用 sayHi 方法,注意，一定不要忘記帶後面的括號

• 利用 new Object 創建對象

創建空對象

var andy = new Obect();

給空對象添加屬性和方法

andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
    alert('大家好啊~');
}

• 利用構造函數創建對象

構造函數的封裝格式：

function 構造函數名(形參1,形參2,形參3) {
     this.屬性名1 = 參數1;
     this.屬性名2 = 參數2;
     this.屬性名3 = 參數3;
     this.方法名 = 函數體;
}

var obj = new 構造函數名(實參1，實參2，實參3)

1.構造函數約定首字母大寫。
2.函數內的屬性和方法前面需要添加 this ，表示當前對象的屬性和方法。
3.構造函數中不需要 return 返回結果。
4.當我們創建對象的時候，必須用 new 來調用構造函數。
構造函數，如 Stars()，抽象了對象的公共部分，封裝到了函數裏面，它泛指某一大類（class）
創建對象，如 new Stars()，特指某一個，通過 new 關鍵字創建對象的過程我們也稱爲對象實例化

function Person(name) {
    this.name = name;
}

function f1(x) { // x = p
    console.log(x.name);
    x.name = "張學友";
    console.log(x.name);  
}

var p = new Person("劉德華");
console.log(p.name); 
f1(p);
console.log(p.name);

• new關鍵字的作用

1.在構造函數代碼開始執行之前，創建一個空對象；
2.修改this的指向，把this指向創建出來的空對象；
3.執行函數的代碼
4.在函數完成之後，返回this—即創建出來的對象

• 遍歷對象

for…in 語句用於對數組或者對象的屬性進行循環操作。

for (變量 in 對象名字) {
    // 在此執行代碼
}

語法中的變量是自定義的，它需要符合命名規範，通常我們會將這個變量寫爲 k 或者 key。

for (var k in obj) {
    console.log(k);      // 這裏的 k 是屬性名
    console.log(obj[k]); // 這裏的 obj[k] 是屬性值
}

10.3 內置對象

JavaScript 中的對象分爲3種：自定義對象 、內置對象、 瀏覽器對象
前面兩種對象是JS 基礎 內容，屬於 ECMAScript； 第三個瀏覽器對象屬於 JS 獨有的， JavaScript 提供了多個內置對象：Math、 Date 、Array、String等

10.3.1 Math對象

屬性、方法名	功能
Math.PI	圓周率
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四捨五入版 就近取整 注意 -3.5 結果是 -3
Math.abs()	絕對值
Math.max()/Math.min()	求最大和最小值
Math.random()	獲取範圍在[0,1)內的隨機值

​ 注意：上面的方法使用時必須帶括號

​ 獲取指定範圍內的隨機整數：

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}

10.3.2 日期對象

獲取當前時間必須實例化：

var now = new Date();
var future = new Date('2019/5/1');

如果創建實例時並未傳入參數，則得到的日期對象是當前時間對應的日期對象
獲取總毫秒數

// 實例化Date對象
var now = new Date();
// 1. 用於獲取對象的原始值
console.log(date.valueOf())	
console.log(date.getTime())	
// 2. 簡單寫可以這麼做
var now = + new Date();			
// 3. HTML5中提供的方法，有兼容性問題
var now = Date.now();

10.3.3 數組對象

1.檢測是否爲數組

• instanceof 可以判斷一個對象是否是某個構造函數的實例

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false

• Array.isArray()用於判斷一個對象是否爲數組，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
var obj = {};
console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

2.添加刪除數組元素的方法

push(參數1)、unshift(參數1)爲增加元素方法；pop、shift爲刪除元素的方法

3 數組排序
sort()，reverse()
sort方法需要傳入參數來設置升序、降序排序

• 如果傳入“function(a,b){ return a-b;}”，則爲升序
• 如果傳入“function(a,b){ return b-a;}”，則爲降序

4.數組索引方法
indexOf(),lastIndexOf()

5.數組轉換爲字符串
toString(),join(‘分隔符’)
join方法如果不傳入參數，則按照 “ , ”拼接元素

6.其他方法
concat()，slice()，splice()

10.3.4 字符串對象

• 基本包裝類型

爲了方便操作基本數據類型，JavaScript 還提供了三個特殊的引用類型：String、Number和 Boolean。基本包裝類型就是把簡單數據類型包裝成爲複雜數據類型，這樣基本數據類型就有了屬性和方法。
js 會把基本數據類型包裝爲複雜數據類型，其執行過程如下 ：

// 1. 生成臨時變量，把簡單類型包裝爲複雜數據類型
var temp = new String('andy');
// 2. 賦值給我們聲明的字符變量
str = temp;
// 3. 銷燬臨時變量
temp = null;

• 字符串的不可變

指的是裏面的值不可變，雖然看上去可以改變內容，但其實是地址變了，內存中新開闢了一個內存空間。當重新給字符串變量賦值的時候，變量之前保存的字符串不會被修改，依然在內存中重新給字符串賦值，會重新在內存中開闢空間，這個特點就是字符串的不可變。
由於字符串的不可變，在大量拼接字符串的時候會有效率問題

• 根據字符返回位置

1.先查找第一個o出現的位置
2.然後 只要indexOf 返回的結果不是 -1 就繼續往後查找
3.因爲indexOf 只能查找到第一個，所以後面的查找，利用第二個參數，當前索引加1，從而繼續查找

• 根據位置返回字符

字符串通過基本包裝類型可以調用部分方法來操作字符串
charCodeAt方法返回的是指定位置上字符對應的ASCII碼

• 字符串操作方法

字符串通過基本包裝類型可以調用部分方法來操作字符串，以下是部分操作方法：

• replace()方法

replace() 方法用於在字符串中用一些字符替換另一些字符，其使用格式如下：

字符串.replace(被替換的字符串， 要替換爲的字符串)；

• split()方法

split()方法用於切分字符串，它可以將字符串切分爲數組。在切分完畢之後，返回的是一個新數組。

字符串.split("分割字符")

11. 面向對象

11.1 創建對象

對象是由屬性和方法組成的：是一個無序鍵值對的集合,指的是一個具體的事物

• 屬性：事物的特徵，在對象中用屬性來表示（常用名詞）
• 方法：事物的行爲，在對象中用方法來表示（常用動詞）

//以下代碼是對對象的複習
//字面量創建對象
var ldh = {
    name: '劉德華',
    age: 18
}
console.log(ldh);

//構造函數創建對象
  function Star(name, age) {
    this.name = name;
    this.age = age;
 }
var ldh = new Star('劉德華', 18)//實例化對象
console.log(ldh);	

11.2 類

在 ES6 中新增加了類的概念，可以使用 class 關鍵字聲明一個類，之後以這個類來實例化對象。類抽象了對象的公共部分，它泛指某一大類（class）對象特指某一個，通過類實例化一個具體的對象

• 創建類

//步驟1 使用class關鍵字
class name {
  // class body
}     
//步驟2使用定義的類創建實例  注意new關鍵字
var xx = new name();     

// 1. 創建類 class  創建一個 明星類
class Star {
  // 類的共有屬性放到 constructor 裏面
  constructor(name, age) {
  this.name = name;
  this.age = age;
  }
}
// 2. 利用類創建對象 new
var ldh = new Star('劉德華', 18);
console.log(ldh);

通過結果我們可以看出,運行結果和使用構造函數方式一樣

• 類創建添加屬性和方法

 // 1. 創建類 class  創建一個類
class Star {
    // 類的共有屬性放到 constructor 裏面 constructor是 構造器或者構造函數
    constructor(uname, age) {
      this.uname = uname;
      this.age = age;
    }//------------------------------------------->注意,方法與方法之間不需要添加逗號
    sing(song) {
      console.log(this.uname + '唱' + song);
    }
}
// 2. 利用類創建對象 new
var ldh = new Star('劉德華', 18);
console.log(ldh); // Star {uname: "劉德華", age: 18}
ldh.sing('冰雨'); // 劉德華唱冰雨

1.通過class 關鍵字創建類, 類名我們還是習慣性定義首字母大寫
2.類裏面有個constructor 函數,可以接受傳遞過來的參數,同時返回實例對象
3.constructor 函數只要new生成實例時,就會自動調用這個函數, 如果我們不寫這個函數,類也會自動生成這個函數
4.多個函數方法之間不需要添加逗號分隔
5.生成實例new不能省略
6.語法規範：創建類 類名後面不要加小括號,生成實例 類名後面加小括號, 構造函數不需要加function

11.3 類的繼承

1. 語法

// 父類
class Father{   
} 

// 子類繼承父類
class  Son  extends Father {  
}       

class Father {
      constructor(surname) {
        this.surname= surname;
      }
      say() {
        console.log('你的姓是' + this.surname);
       }
}

class Son extends Father{  // 這樣子類就繼承了父類的屬性和方法
}
var damao= new Son('劉');
damao.say();      //結果爲 你的姓是劉

• 子類使用super關鍵字訪問父類的方法

//定義了父類
class Father {
   constructor(x, y) {
   this.x = x;
   this.y = y;
   }
   sum() {
   console.log(this.x + this.y);
	}
 }
//子元素繼承父類
class Son extends Father {
	 constructor(x, y) {
		super(x, y); //使用super調用了父類中的構造函數
	}
}
var son = new Son(1, 2);
son.sum(); //結果爲3

1.繼承中,如果實例化子類輸出一個方法,先看子類有沒有這個方法,如果有就先執行子類的
2.繼承中,如果子類裏面沒有,就去查找父類有沒有這個方法,如果有,就執行父類的這個方法(就近原則)
3.如果子類想要繼承父類的方法,同時在自己內部擴展自己的方法,利用super調用父類的構造函數,super 必須在子類this之前調用

 // 父類有加法方法
 class Father {
   constructor(x, y) {
   this.x = x;
   this.y = y;
   }
   sum() {
   console.log(this.x + this.y);
   }
 }
 // 子類繼承父類加法方法 同時 擴展減法方法
 class Son extends Father {
   constructor(x, y) {
   // 利用super 調用父類的構造函數 super 必須在子類this之前調用,放到this之後會報錯
   super(x, y);
   this.x = x;
   this.y = y;

  }
  subtract() {
  console.log(this.x - this.y);
  }
}
var son = new Son(5, 3);
son.subtract(); //2
son.sum();//8

時刻注意this的指向問題,類裏面的共有的屬性和方法一定要加this使用

1.constructor中的this指向的是new出來的實例對象
2.自定義的方法,一般也指向的new出來的實例對象
3.綁定事件之後this指向的就是觸發事件的事件源

在 ES6 中類沒有變量提升，所以必須先定義類，才能通過類實例化對象

12. 構造函數和原型

12.1 對象的三種創建方式

• 字面量方式

var obj = {};

• new關鍵字

var obj = new Object();

• 構造函數方式

function Person(name,age){
  this.name = name;
  this.age = age;
}
var obj = new Person('zs',12);

12.2 靜態成員和實例成員

實例成員：就是構造函數內部通過this添加的成員
靜態成員：在構造函數本身上添加的成員

 function Star(uname, age) {
     this.uname = uname;
     this.age = age;
     this.sing = function() {
     console.log('我會唱歌');
    }
}
Star.sex = '男';
var ldh = new Star('劉德華', 18);
console.log(Star.sex);//靜態成員只能通過構造函數來訪問

12.3 原型prototype

構造函數方法存在浪費內存的問題。

12.3.1 構造函數原型prototype

構造函數通過原型分配的函數是所有對象所共享的。JavaScript 規定，每一個構造函數都有一個prototype 屬性，指向另一個對象。注意這個prototype就是一個對象，這個對象的所有屬性和方法，都會被構造函數所擁有。可以把那些不變的方法，直接定義在 prototype 對象上，這樣所有對象的實例就可以共享這些方法。

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
}
Star.prototype.sing = function() {
	console.log('我會唱歌');
}
var ldh = new Star('劉德華', 18);
var zxy = new Star('張學友', 19);
ldh.sing();//我會唱歌
zxy.sing();//我會唱歌

12.3.2 對象原型

對象都會有一個屬性 proto 指向構造函數的 prototype 原型對象，之所以我們對象可以使用構造函數 prototype 原型對象的屬性和方法，就是因爲對象有 proto 原型的存在。
__proto__對象原型和原型對象 prototype 是等價的
__proto__對象原型的意義就在於爲對象的查找機制提供一個方向，或者說一條路線，但是它是一個非標準屬性，因此實際開發中，不可以使用這個屬性，它只是內部指向原型對象 prototype

var ldh= new Star('liudehua',18);
console.log(ldh.__proto__ == Star.prototype); //true

12.3.3 constructor構造函數

對象原型（ proto）和構造函數（prototype）原型對象裏面都有一個屬性 constructor 屬性 ，constructor 我們稱爲構造函數，因爲它指回構造函數本身。
constructor 主要用於記錄該對象引用於哪個構造函數，它可以讓原型對象重新指向原來的構造函數。
一般情況下，對象的方法都在構造函數的原型對象中設置。如果有多個對象的方法，我們可以給原型對象採取對象形式賦值，但是這樣就會覆蓋構造函數原型對象原來的內容，這樣修改後的原型對象 constructor 就不再指向當前構造函數了。此時，我們可以在修改後的原型對象中，添加一個 constructor 指向原來的構造函數。
即：如果我們修改了原來的原型對象,給原型對象賦值的是一個對象,則必須手動的利用constructor指回原來的構造函數

 function Star(uname, age) {
     this.uname = uname;
     this.age = age;
 }
 // 很多情況下,我們需要手動的利用constructor 這個屬性指回原來的構造函數
 Star.prototype = {
 // 如果我們修改了原來的原型對象,給原型對象賦值的是一個對象,則必須手動的利用constructor指回原來的構造函數
   constructor: Star, // 手動設置指回原來的構造函數
   sing: function() {
     console.log('我會唱歌');
   },
   movie: function() {
     console.log('我會演電影');
   }
}
var zxy = new Star('張學友', 19);
console.log(zxy)

12.3.4 原型鏈

每一個實例對象又有一個__proto__屬性，指向的構造函數的原型對象，構造函數的原型對象也是一個對象，也有__proto__屬性，這樣一層一層往上找就形成了原型鏈。

• 原型鏈和成員的查找機制

當訪問一個對象的屬性（包括方法）時，首先查找這個對象自身有沒有該屬性。
如果沒有就查找它的原型（也就是 __proto__指向的 prototype 原型對象）。
如果還沒有就查找原型對象的原型（Object的原型對象）。
依此類推一直找到 Object 爲止（null）。
__proto__對象原型的意義就在於爲對象成員查找機制提供一個方向，或者說一條路線。

• 原型對象中this指向

構造函數中的this和原型對象的this,都指向我們new出來的實例對象

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
}
var that;
Star.prototype.sing = function() {
    console.log('我會唱歌');
    that = this;
}
var ldh = new Star('劉德華', 18);
// 1. 在構造函數中,裏面this指向的是實例對象 ldh
console.log(that === ldh);//true
// 2.原型對象函數裏面的this指向的是 實例對象 ldh

• 通過原型爲數組擴展內置方法

 Array.prototype.sum = function() {
   var sum = 0;
   for (var i = 0; i < this.length; i++) {
   sum += this[i];
   }
   return sum;
 };
 //此時數組對象中已經存在sum()方法了  可以始終 數組.sum()進行數據的求

12.3.5 call()

call()可以調用函數
call()可以修改this的指向,使用call()的時候 參數一是修改後的this指向,參數2,參數3…使用逗號隔開連接

 function fn(x, y) {
     console.log(this);
     console.log(x + y);
}
  var o = {
  	name: 'andy'
  };
  fn.call(o, 1, 2);//調用了函數此時的this指向了對象o,

• 子構造函數繼承父構造函數中的屬性

1.先定義一個父構造函數
2.再定義一個子構造函數
3.子構造函數繼承父構造函數的屬性(使用call方法)

 // 1. 父構造函數
 function Father(uname, age) {
   // this 指向父構造函數的對象實例
   this.uname = uname;
   this.age = age;
 }
  // 2 .子構造函數 
function Son(uname, age, score) {
  // this 指向子構造函數的對象實例
  3.使用call方式實現子繼承父的屬性
  Father.call(this, uname, age);
  this.score = score;
}
var son = new Son('劉德華', 18, 100);
console.log(son);

• 借用原型對象繼承方法

1.先定義一個父構造函數
2.再定義一個子構造函數
3.子構造函數繼承父構造函數的屬性(使用call方法)

// 1. 父構造函數
function Father(uname, age) {
  // this 指向父構造函數的對象實例
  this.uname = uname;
  this.age = age;
}
Father.prototype.money = function() {
  console.log(100000);
 };
 
// 2 .子構造函數 
function Son(uname, age, score) {
    // this 指向子構造函數的對象實例
    Father.call(this, uname, age);
    this.score = score;
}
// Son.prototype = Father.prototype;  這樣直接賦值會有問題,如果修改了子原型對象,父原型對象也會跟着一起變化
Son.prototype = new Father();
// 如果利用對象的形式修改了原型對象,別忘了利用constructor 指回原來的構造函數
Son.prototype.constructor = Son;
// 這個是子構造函數專門的方法
Son.prototype.exam = function() {
 console.log('孩子要考試');
}
var son = new Son('劉德華', 18, 100);
console.log(son);

13. ES5新增方法

13.1 數組方法forEach遍歷數組

 arr.forEach(function(value, index, array) {
       //參數一是:數組元素
       //參數二是:數組元素的索引
       //參數三是:當前的數組
 })
  //相當於數組遍歷的 for循環 沒有返回值

13.2 數組方法filter過濾數組

  var arr = [12, 66, 4, 88, 3, 7];
  var newArr = arr.filter(function(value, index,array) {
  	 //參數一是:數組元素
     //參數二是:數組元素的索引
     //參數三是:當前的數組
     return value >= 20;
  });
  console.log(newArr);//[66,88] //返回值是一個新數組

13.3 數組方法some

some 查找數組中是否有滿足條件的元素 
 var arr = [10, 30, 4];
 var flag = arr.some(function(value,index,array) {
    //參數一是:數組元素
     //參數二是:數組元素的索引
     //參數三是:當前的數組
     return value < 3;
  });
console.log(flag);//false返回值是布爾值,只要查找到滿足條件的一個元素就立馬終止循環

• 如果查詢數組中唯一的元素, 用some方法更合適,在some 裏面 遇到 return true 就是終止遍歷 迭代效率更高
• 在forEach 裏面 return 不會終止迭代

13.4 trim方法去除字符串兩端的空格

var str = '   hello   '
console.log(str.trim()）  //hello 去除兩端空格
var str1 = '   he l l o   '
console.log(str.trim()）  //he l l o  去除兩端空格

13.5 獲取對象的屬性名

Object.keys(對象) 獲取到當前對象中的屬性名 ，返回值是一個數組

 var obj = {
     id: 1,
     pname: '小米',
     price: 1999,
     num: 2000
};
var result = Object.keys(obj)
console.log(result)//[id，pname,price,num]

13.6 Object.defineProperty

Object.defineProperty設置或修改對象中的屬性

Object.defineProperty(對象，修改或新增的屬性名，{
		value:修改或新增的屬性的值,
		writable:true/false,//如果值爲false 不允許修改這個屬性值
		enumerable: false,//enumerable 如果值爲false 則不允許遍歷
        configurable: false  
        //configurable 如果爲false 則不允許刪除這個屬性 屬性是否可以被刪除或是否可以再次修改特性
})	

14. 函數進階

14.1 函數的定義方式與調用

方式1：函數聲明方式 function 關鍵字 (命名函數)

function fn(){}

方式2：函數表達式(匿名函數)

var fn = function(){}

方式3：new Function()

var f = new Function('a', 'b', 'console.log(a + b)');
f(1, 2);

var fn = new Function('參數1','參數2'..., '函數體')
注意
/*Function 裏面參數都必須是字符串格式
第三種方式執行效率低，也不方便書寫，因此較少使用
所有函數都是 Function 的實例(對象)  
函數也屬於對象
*/

/* 1. 普通函數 */
function fn() {
	console.log('人生的巔峯');
}
 fn(); 
/* 2. 對象的方法 */
var o = {
  sayHi: function() {
  	console.log('人生的巔峯');
  }
}
o.sayHi();
/* 3. 構造函數*/
function Star() {};
new Star();
/* 4. 綁定事件函數*/
 btn.onclick = function() {};   // 點擊了按鈕就可以調用這個函數
/* 5. 定時器函數*/
setInterval(function() {}, 1000);  這個函數是定時器自動1秒鐘調用一次
/* 6. 立即執行函數(自調用函數)*/
(function() {
	console.log('人生的巔峯');
})();

14.2 this的使用

• 函數內部的this指向

這些 this 的指向，是當我們調用函數的時候確定的。調用方式的不同決定了this 的指向不同
一般指向我們的調用者。

• call方法

call()方法調用一個對象。簡單理解爲調用函數的方式，但是它可以改變函數的 this 指向
應用場景: 經常做繼承.

var o = {
	name: 'andy'
}
 function fn(a, b) {
      console.log(this);
      console.log(a+b)
};
fn(1,2)// 此時的this指向的是window 運行結果爲3
fn.call(o,1,2)//此時的this指向的是對象o,參數使用逗號隔開,運行結果爲3

• apply方法

apply() 方法調用一個函數。簡單理解爲調用函數的方式，但是它可以改變函數的 this 指向。
應用場景: 經常跟數組有關係

var o = {
	name: 'andy'
}
 function fn(a, b) {
      console.log(this);
      console.log(a+b)
};
fn()// 此時的this指向的是window 運行結果爲3
fn.apply(o,[1,2])//此時的this指向的是對象o,參數使用數組傳遞 運行結果爲3

• bind方法

bind() 方法不會調用函數,但是能改變函數內部this 指向,返回的是原函數改變this之後產生的新函數
如果只是想改變 this 指向，並且不想調用這個函數的時候，可以使用bind
應用場景:不調用函數,但是還想改變this指向

 var o = {
 name: 'andy'
 };

function fn(a, b) {
	console.log(this);
	console.log(a + b);
};
var f = fn.bind(o, 1, 2); //此處的f是bind返回的新函數
f();//調用新函數  this指向的是對象o 參數使用逗號隔開

• call、apply、bind 總結概括
  共同點 : 都可以改變this指向
  不同點:
  1.call 和 apply 會調用函數, 並且改變函數內部this指向.
  2.call 和 apply傳遞的參數不一樣,call傳遞參數使用逗號隔開,apply使用數組傳遞
  3.bind 不會調用函數, 可以改變函數內部this指向.
  應用場景
  1.call 經常做繼承.
  2.apply經常跟數組有關係. 比如藉助於數學對象實現數組最大值最小值
  3.bind 不調用函數,但是還想改變this指向. 比如改變定時器內部的this指向.

14.3 高階函數

高階函數是對其他函數進行操作的函數，它接收函數作爲參數或將函數作爲返回值輸出。
函數也是一種數據類型，同樣可以作爲參數，傳遞給另外一個參數使用。最典型的就是作爲回調函數。
同理函數也可以作爲返回值傳遞回來

14.4 閉包

• 變量的作用域

變量根據作用域的不同分爲兩種：全局變量和局部變量。
1.函數內部可以使用全局變量。
2.函數外部不可以使用局部變量。
3.當函數執行完畢，本作用域內的局部變量會銷燬。

閉包（closure）指有權訪問另一個函數作用域中變量的函數。簡單理解就是 ，一個作用域可以訪問另外一個函數內部的局部變量。

• 閉包的作用

作用：延伸變量的作用範圍。

 function fn() {
   var num = 10;
   function fun() {
       console.log(num);
 	}
    return fun;
 }
var f = fn();
f();


for (var i = 0; i < lis.length; i++) {
// 利用for循環創建了4個立即執行函數
// 立即執行函數也成爲小閉包因爲立即執行函數裏面的任何一個函數都可以使用它的i這變量
(function(i) {
    lis[i].onclick = function() {
      console.log(i);
    }
 })(i);
}

for (var i = 0; i < lis.length; i++) {
  (function(i) {
    setTimeout(function() {
    console.log(lis[i].innerHTML);
    }, 3000)
  })(i);
}

14.5 遞歸

如果一個函數在內部可以調用其本身，那麼這個函數就是遞歸函數。簡單理解:函數內部自己調用自己, 這個函數就是遞歸函數，遞歸函數的作用和循環效果一樣，由於遞歸很容易發生“棧溢出”錯誤（stack overflow），所以必須要加退出條件return。

//利用遞歸函數求1~n的階乘 1 * 2 * 3 * 4 * ..n
 function fn(n) {
     if (n == 1) { //結束條件
       return 1;
     }
     return n * fn(n - 1);
 }
 console.log(fn(3));

// 利用遞歸函數求斐波那契數列(兔子序列)  1、1、2、3、5、8、13、21...
// 用戶輸入一個數字 n 就可以求出 這個數字對應的兔子序列值
// 我們只需要知道用戶輸入的n 的前面兩項(n-1 n-2)就可以計算出n 對應的序列值
function fb(n) {
  if (n === 1 || n === 2) {
        return 1;
  }
  return fb(n - 1) + fb(n - 2);
}
console.log(fb(3));

15. ES6語法

15.1 let

ES6中新增了用於聲明變量的關鍵字，let聲明的變量只在所處於的塊級有效

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

使用let關鍵字聲明的變量才具有塊級作用域，使用var聲明的變量不具備塊級作用域特性。

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

15.2 const

聲明常量，常量就是值（內存地址）不能變化的量

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

• const聲明的變量是一個常量

• 既然是常量不能重新進行賦值，如果是基本數據類型，不能更改值，如果是複雜數據類型，不能更改地址值

• 聲明 const時候必須要給定值

• let、const、var 的區別

使用 var 聲明的變量，其作用域爲該語句所在的函數內，且存在變量提升現象
使用 let 聲明的變量，其作用域爲該語句所在的代碼塊內，不存在變量提升
使用 const 聲明的是常量，在後面出現的代碼中不能再修改該常量的值

15.3 解構賦值

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

1.解構賦值就是把數據結構分解，然後給變量進行賦值
2.如果結構不成功，變量跟數值個數不匹配的時候，變量的值爲undefined
3.數組解構用中括號包裹，多個變量用逗號隔開，對象解構用花括號包裹，多個變量用逗號隔開
4.利用解構賦值能夠讓我們方便的去取對象中的屬性跟方法

15.4 箭頭函數

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();

1.箭頭函數中不綁定this，箭頭函數中的this指向是它所定義的位置，可以簡單理解成，定義箭頭函數中的作用域的this指向誰，它就指向誰
2.箭頭函數的優點在於解決了this執行環境所造成的一些問題。比如：解決了匿名函數this指向的問題（匿名函數的執行環境具有全局性），包括setTimeout和setInterval中使用this所造成的問題

15.5 剩餘參數

剩餘參數語法允許我們將一個不定數量的參數表示爲一個數組，不定參數定義方式，這種方式很方便的去聲明不知道參數情況下的一個函數

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']

15.6 ES6 的內置對象擴展

15.6.1 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

15.6.2 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"

15.6.3 Set 數據結構

ES6 提供了新的數據結構 Set。它類似於數組，但是成員的值都是唯一的，沒有重複的值。
Set本身是一個構造函數，用來生成 Set 數據結構

const s = new Set();

Set函數可以接受一個數組作爲參數，用來初始化。

const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 4}

實例方法

1.add(value)：添加某個值，返回 Set 結構本身
2.delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功
3.has(value)：返回一個布爾值，表示該值是否爲 Set 的成員
4.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))