變量提升

var關鍵字定義變量會有變量提升的問題

 //這裏a未定義，不報錯有打印結果undefined
 console.log(a); // undefined
 var a = 10;
 //打印fn調用也存在變量提升
 function fn() {
     var a = 3;
     console.log("fn().a="+a)
 }
 console.log(fn())//undefined

let定義變量

let定義變量的特點

1. 暫時性死區

在let聲明的前面訪問不到(暫時性死區)（必須聲明之後再使用）

console.log(a);//Uncaught ReferenceError: a is not defined
let a = 10;

2. 不可以重複聲明

 let a = 10;
 let a = 1;//Uncaught SyntaxError: Identifier 'a' has already been declared

3. 塊級作用域

（1）var域let聲明變量的作用域在for循環中不相同

for (var i = 0; i < 3; i++) {
    console.log(i);//0,1,2
}
console.log(i);//3
//for本身是一個父的作用域，而for裏面是一個子的作用域
 for (let i = 0; i < 3; i++) {
     let i = 10;
     console.log(i);//10 10 10
 }
console.log(i);// Uncaught ReferenceError: i is not defined

（2）let在兩個大括號之間就是一個作用域

{
    // let在兩個大括號之間就是一個作用域
    let a = 10;
    let b = 4;
    console.log(a, b);//10,4
}

let在for循環中的使用

點擊每一個li顯示打印結果

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

添加點擊事件

var aLi = document.getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
   aLi[i].onclick = function() {
       console.log(i);//點擊任何li都會打印5
   }
}

上面點擊任何li都會打印5，因爲for循環一次性執行到5了。

解決方案一：

採用自定義屬性，給每一個li添加index屬性

for (var i = 0; i < aLi.length; i++) {
   aLi[i].index = i;
   aLi[i].onclick = function() {
       console.log(this.index);//點擊打印相應的索引值
   }
}

解決方案二：

閉包實現變量的緩存

 for (var i = 0; i < aLi.length; i++) {
    aLi[i].onclick = (function(i) {
        return function() {//閉包
            console.log(i);
        }
    })(i);
}

解決方案三：

let聲明塊級作用域

for (let i = 0; i < aLi.length; i++) {
    aLi[i].onclick = function() {
        console.log(i);
    }
}

const聲明變量

1用於聲明常量：

一經聲明，後面不再修改的變量

const userName = '張三';
userName = '李四'; 
//Uncaught TypeError: Assignment to constant variable.

2聲明引用類型

聲明引用類型變量，只要不更改地址，改屬性是允許的。
下面修改地址，報錯：分配給常量變量

const obj = { a: 1 };
obj = {a: 10}//Uncaught TypeError: Assignment to constant variable.

修改屬性是沒問題的

const obj = { a: 1 };
obj.a = 10;
console.log(obj.a);//10

3 聲明賦值

聲明時，必須賦值否則報錯。

//Uncaught SyntaxError: Missing initializer in const declaration
const USERNAME ;

Rest參數

（1）Rest就是爲解決傳入的參數數量不一定， rest parameter(Rest 參數) 本身就是數組，數組的相關的方法都可以用。

注意：

（2）ES6推薦使用rest參數。不要使用arguments

function fn(...arr) {
    console.log(arr); //(5) [1, 2, 3, 4, 5]
}
console.log(fn(1, 2, 3, 4, 5));//undefined

arguments參數

function fn() {
  var num = 0;
   // 類數組，但不是數組
  console.log(arguments);
  // Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
  for (var i = 0; i < arguments.length; i++) {
      num += arguments[i];
  }
  return num;
}
console.log(fn(1, 2, 3, 4, 5));//15

箭頭函數

定義

箭頭函數相當於匿名函數，並且簡化了函數定義。
並且沒有自己的this，arguments，super或 new.target。
這些函數表達式更適用於那些本來需要匿名函數的地方，並且它們不能用作構造函數。

格式

() => {}

使用

下面兩種定義方式效果相同。

let fn = function() {};
console.log(fn);//ƒ () {}
let fn = () => {};
console.log(fn);//() => {}

帶參數的箭頭函數

下面兩種寫法一樣

let fn = (a) => {
    return a * 3;
}
console.log(fn(3));//9
let fn = a => a * 3;
console.log(fn(5));//15

返回值爲對象的箭頭函數

 let fn = () => ({
     a: 1,
     b: 2//設置默認值
 })
 console.log(fn());//{a: 1, b: 2}
 let fn = (a, b) => {
    return {
        a:a,
        b:b
    }
}
console.log(fn(12,14));//{a: 12, b: 14}

使用箭頭函數進行數組排序

思想：才用arr.sort(arr)函數進行排序。

var arr = [43, 5, 7, 43, 28, 986, 4, 1];
arr.sort(function(a, b) {
    return a - b;
});
arr.sort((a, b) => a - b);
console.log(arr);//(8) [1, 4, 5, 7, 28, 43, 43, 986]

箭頭函數中的this

function fn() {
    console.log(this); // obj
    setTimeout(function() {
        console.log(this); // window
    }, 1000);
    setTimeout(() => {
        console.log(this); // obj
    }, 1000);
}
var obj = {
    fn: fn
}
obj.fn();

箭頭函數的參數

不能使用arguments，只能使用rest。

let fn = (...arr) => {
   //console.log(arguments);
   //Uncaught ReferenceError: arguments is not defined
   console.log(arr);//(3) [1, 2, 3]
};
fn(1, 2, 3);

箭頭函數賦值不能用new

箭頭函數賦值對象不能用new，會報：Uncaught TypeError: Person is not a constructor。

let Person = function (){};//Person {}
//不能用new關鍵字，new聲明會報錯
//var Person = () => {};
//Uncaught TypeError: Person is not a constructor
console.log(new Person());

解構賦值

解構賦值語法是一個 Javascript 表達式，這使得可以將值從數組或屬性從對象提取到不同的變量中。

let a = 1;
let b = 2;
let c = 3;
//上面賦值和下面賦值效果相同
let [a, b, c] = [1, 2, 3];
console.log(a, b, c);//1 2 3
//下面的數組元素未賦值
let [y] = [];
console.log(y); // undefined
// 數組元素給默認初始值  
let [y = 3] = [];
console.log(y); // 3
let [y = 3] = [5];
console.log(y); // 5
//官方教程
var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

// Stage 3 proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); //{c: 30, d: 40}

注意：

特殊的對象賦值。

let {a: b} = {a: '1'}
console.log(b);//1
console.log(a)//Uncaught ReferenceError: a is not defined

let {random, floor} = Math;
console.log(random());//0.1054632111171554
console.log(floor(12.4));//12

對象內函數賦值

let U = {
   add: function() {
       console.log('add');
   },
   fn: function() {
       console.log('fn');
   }
};
U.add();//add
U.fn();//fn
//賦值
let {add, fn} = U;
add();//add
fn();//fn

對象解構賦值rest

let o = {a: 1, b: 2, c: 3, d: 4, f: 7};
let {b, ...pzh} = o;
console.log(b, pzh);//2 {a: 1, c: 3, d: 4, f: 7}

forEach循環遍歷數組

形式：

arr.forEach(function (item, index, arr){});

作用：

遍歷數組

參數說明

（1）可以接收兩個參數，第一個參數是一個函數，就是數組的每一項要運行這個函數。這個函數接收三個參數，分別是：數組中的項，下標，數組本身
（2）第二個參數是一個數組(可有可無)。如果有，前面函數中的this就指向這個數組；如果沒有，前面函數的this就指向window。

let arr = [1, 2, 3, 4, 5, 6, 7];
arr.forEach(function(item, index) {
    console.log(item+"============"+index);
    //1============0
    console.log(this);
    //(7) [1, 2, 3, 4, 5, 6, 7]
},arr);

for-of循環遍歷數組

let a = ['A', 'B', 'C'];
for (let attr of a) {
   console.log(attr);//A B C
}

ECMAScript學習（一）

目錄