一、了解ES6

1）ES6官網(wǎng)：http://www.ecma-international.org/ecma-262/6.0/

創(chuàng)新互聯(lián)公司服務(wù)項目包括張店網(wǎng)站建設(shè)、張店網(wǎng)站制作、張店網(wǎng)頁制作以及張店網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，張店網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到張店省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

2）Javascript是ECMAScript的實現(xiàn)和擴(kuò)展

3）ES學(xué)習(xí)建議：

• 基礎(chǔ)語法（包括與舊版的差異優(yōu)劣；新版有哪些坑等等）
• 應(yīng)用場景
• 多在項目中應(yīng)用

補充：VSCode的插件Live Server的作用：

• 頁面更改后自動刷新
• 使用的是http協(xié)議而非file://

二、ES6特性入坑

1）let\const

let

// let定義變量
let name = "zhangsan"

// var會造成變量穿透
for(var i=0;i<5;i++){
  console.log(i);
};
console.log("===這里就是變量穿透===>" + i) // 結(jié)果：===這里就是變量穿透===>5
// let不會造成變量穿透
for(let i=0;i<5;i++){
  console.log(i);
};
console.log("===這里就是變量穿透===>" + i) // 結(jié)果：i is not defined

const：

// ES5
Object.defineProperty(window, 'es', {
  value:'es6',
  writable:false
})
console.log(es) // window.es,括號內(nèi)為簡寫;結(jié)果：es6
window.es = 'es2015'
console.log(window.es) // 結(jié)果：es6

// ES6 const：常量
// 1
const es = 'es6'
console.log(es) // 結(jié)果：es6
//es = 'es2015' // 這行報錯 
console.log(es)

// 2.const 常量名不允許重復(fù)聲明
var str = 'es6'
var str = 'es2015'
console.log(str) // es2015

// 3
// const 聲明的常量 不屬于 頂層對象window
// var   聲明的變量 屬于   頂層對象window

// 4.const不存在常量提升
// var變量提升
console.log(str) // 結(jié)果：undefined
var str = 'es6'
// 相當(dāng)于
var str
console.log(str) // 結(jié)果：undefined
str = 'es6'

// 5.const聲明的常量具有塊級作用域
// var
if(true){
  var strsix = 'es6'
}
console.log(strsix) // 結(jié)果：es6

const聲明常量的本質(zhì)

const聲明的常量真的不可以改變嗎

const esObj = {
  name:'es6',
  year:2015,
}
esObj.name = 'es2015'
console.log(esObj.name) // 結(jié)果：es2015

const esObj = {
  name:'es6',
  year:2015,
}
Object.freeze(esObj)
esObj.name = 'es2015'
console.log(esObj.name) // 結(jié)果：es6


const arr = ['es6', 'es7', 'es8']
Object.freeze(arr)
arr[0] = 'es2015'
console.log(arr[0]) // 結(jié)果：es6 


const esObj = {
  name:'es6',
  year:2015,
  extension:['es7', 'es8'],
}
// Object.freeze(esObj)
myFreeze(esObj)
esObj.extension[0] = 'es2016'
console.log(esObj.extension[0]) // 結(jié)果：es7

// 對深層次的數(shù)據(jù)進(jìn)行凍結(jié)
function myFreeze(obj){
  Object.freeze(obj)
  // ES5的forEach;keys()方法得到的是數(shù)組
  Object.keys(obj).forEach(function(key){
    if(typeof obj[key] === 'object'){
      myFreeze(obj[key])
    }
  });
}

// 建議優(yōu)先使用const

2）箭頭函數(shù)

2-1箭頭函數(shù)

// 1-1.原始寫法
const sum = function(x, y){
  return x + y
}
const res = sum(4, 4)
console.log(res)
// 1-2
// 默認(rèn)參數(shù) 給參數(shù)列表設(shè)定初始值
function add(a=100,b=100) {
    console.log(a,b);    
}
// 執(zhí)行方法，會用默認(rèn)值填充，打印出來100,100
add();
// 覆蓋默認(rèn)值打印  結(jié)果是1,2      
add(1,2);

// 2.箭頭函數(shù)寫法
const sum2 = (x, y) => {
  return x + y
}
// 相當(dāng)于：  const sum2 = (x, y) => x + y
const res2 = sum2(5, 5)
console.log(res2)

// 3.只有一個形參，小括號可省略

// 4
const btnObj = document.querySelector('#btn')
// console.log(btnObj)
btnObj.addEventListener('click', () => {
  /*箭頭函數(shù)里面沒有this，當(dāng)需要在箭頭函數(shù)里用到this時，
   它會通過當(dāng)前的作用域鏈，向它上層的作用域內(nèi)去找this指向，到底
   指向的誰*/
  console.log(this) // 結(jié)果：window
  this.style.backgroundColor = '#f00'
})

2-2箭頭函數(shù)任何場景都可以使用嗎

// 1
const obj = {
  name1:'cy',
  showName:function(){
      console.log('名字：'+ this.name1) //名字：cy
  },
  // 簡寫：
  showName(){
      console.log('名字='+ this.name1) //名字=cy
  },

  showName:() => {
    console.log('名字：'+ this.name1) // 名字：undefined
  },
}
obj.showName()

// 2
/*function sum2(x, y){
  // function里面的關(guān)鍵字arguments，arguments能夠取到形參的值和其它東西
  console.log(arguments)
}
sum2(3, 3)*/

const sum = (x, y) => {
  // 在箭頭函數(shù)中不能使用arguments
  console.log(arguments) 
  return x + y
}
sum(4, 4) // arguments is not defined

// 3
// 在ES5中使用函數(shù)模擬一個類
function Course(mame, price){
  this.name = name
  this.price = price
}
const c1 = new Course('es', 500)
console.log(c1)
// ES5中類的方法定義在原型中
Course.prototype.study = function(){
  console.log(`學(xué)習(xí): ${this.name}`) // ES6模板字符串
}
c1.study()
// ES6箭頭函數(shù)不能作為構(gòu)造函數(shù)
const Course = (mame, price) => {
  this.name = name
  this.price = price
}
// TypeError:Course is not a constructor
const c2 = new Course('es', 500)
console.log(c2)
// ES6箭頭函數(shù)不能定義原型方法
Course.prototype.study = () => {
  console.log(`學(xué)習(xí): ${this.name}`) // ES6模板字符串
}
c1.study()

3）解構(gòu)賦值

3-1解構(gòu)賦值

// 1
const course = {
  name:'es6',
  price:500,
  teacher:{
    name2:'cy',
    age:89,
  },
  say(){
    console.log(this) // this指window
    console.log('名字');
  }
}
/*傳統(tǒng)的做法：
var name = course.name
var price =course.price
course.say()
 */
/*const {name2, price} = course
  默認(rèn)情況name,price必須是JSONKey.
  console.log(name2) //結(jié)果：undefined */
const {name, price, teacher:{name2, age}, say} = course
console.log(name, price, name2, age)
say()

// 2
const course = {
  name:'es6',
  price:500,
  teacher:{
    name:'cy',
    age:89,
  }
}
// courseName:為別名,可以用冒號取別名
const {name:courseName, price, teacher:{name, age}} = course
console.log(courseName, price, name, age)

// 3
const arr = ['es6', 'es7', 'es8']
const [a, b, c] = arr
console.log(a, b, c)

3-2準(zhǔn)確的使用解構(gòu)賦值

• 函數(shù)參數(shù)
• 函數(shù)返回值
• 變量互換
• JSON應(yīng)用
• Ajax請求應(yīng)用

4）模板字符串

const name = 'itcast'    
console.log(`hello ${name}`)

5）對象簡寫

如果一個對象中的key和value的名字一樣的情況下可以定義成一個。

function person(name, age) {
    // return {name:name,age:age};
    // 對象簡寫
    return {name, age};
};
// 調(diào)用和執(zhí)行
var json = person("小花花美美", 20);
console.log(json.name, json.age);
//========= 實戰(zhàn)應(yīng)用 =============
//登錄
function login() {
    var username = $("#username").val();
    var password = $("#password").val();
    // 發(fā)送ajax
    $.ajax({
        type: "post",
        // 對象簡寫
        data: {username, password},
        // 原始寫分
        //data:{username:username,password:password},
        success() {
        }
    });
}

6）傳播操作符【...】

把一個對象的屬性傳播到另外一個對象中

// ==== ... 對象融合====
var person1 = {
    name: '小飛飛',
    age: 16,
};
var person2 = {
    ...person1,
    gender:1,
    tel:
};
console.log(person2);
// ==== ... 對象取值====
var person3 = {
    name:"李四",
    gender:1,
    tel:"",
    address:'廣州'
};
// ...person4 把剩下沒取走給我
var {name,gender,...person4} = person3
console.log(name)
console.log(age)
console.log(person4)

// 模擬后臺：異步查詢返回用戶數(shù)據(jù)
function findUsers(){
    $.get("xxxxx",function(res){
        var res = {
            pages:11,
            pageSize:10,
            pageNo:1,
            firstFlag:true,
            lastFlag:false,
            total:123,
            data:[{},{},{},{}],
        };
        // ... 對象取值
        var {data:users,...pagesjon} = res;
        // 等價于
        /*  var users = res.data;
           var pagesjon = {
            res = {
                pages:11,
                pageSize:10,
                pageNo:1,
                firstFlag:true,
                lastFlag:false,
                total:123,
            }; */
    })
}

7）數(shù)組map和reduce方法

map

方法可以將原數(shù)組中的所有元素通過一個函數(shù)進(jìn)行處理并放入到一個新數(shù)組中并返回該新數(shù)組

let arr = ['1', '20', '-5', '3'];
var newarr = arr.map(value => {
    return parseInt(value) * 2;
});
console.log("原數(shù)組：" + arr)
console.log("new數(shù)組：" + newarr)

reduce

reduce(function()(必須),初始值(可選) )

• 第一個參數(shù)是上一次reduce處理的結(jié)果
• 第二個參數(shù)是數(shù)組中要處理的下一個元素

reduce() 會從左到右依次把數(shù)組中的元素用reduce處理，并把處理的結(jié)果作為下次reduce的第一個參數(shù)。如果是 第一次，會把前兩個元素作為計算參數(shù)，或者把用戶指定的初始值作為起始參數(shù)

let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var result = arr2.reduce((a, b) => a + b);
console.log(result);