JavaScript-ES6筆記

---

title: ES6筆記
date: 2019-03-23 22:12:43
tags: JavaScript
categories: JavaScript
toc: true

ES6 的筆記。

ECMAScript。

ES6(ECMA 2015)

ES7(ECMA 2016)
  **	// 求冪 比如 2**3 == 2 ^ 3
  Array.includes()

ES8(ECMA 2017)
  await/async

ES9(ECMA 2018)
  rest/spread
  異步迭代
  Promise.finally()
  正則

關於變量

var：

1. 可以重複聲明
2. 沒有塊級作用域
3. 不能限制

let： 用來聲明變量。

const： 聲明常量。

1. 進制重複聲明
2. 控制修改
3. 支持塊級作用域

解構賦值

1. 左右兩邊對應
2. 右邊得是個東西(JSON)

let {a,b,c}={a: 12, b: 55, c: 99};

函數

箭頭函數

格式

1. 函數只有一個參數的時候，可以省略參數的括號
2. 函數體內只有一個 return 語句的時候，可以省略大括號

正常的函數：

let f = function (x) {
    return x * x;
}

箭頭函數：

let f = x => x * x

let sum=(a,b)=>a+b;
alert(sum(12, 88));

幾個 🌰：

window.onload=function (){
  	alert('a');
};

window.onload=()=>{
  	alert('a');
};

document.onclick=function (ev){
  	alert(ev.clientX+','+ev.clientY);
};

document.onclick=ev=>{
  	alert(ev.clientX+','+ev.clientY);
};

function show(){
  	return {a: 12, b: 5};
}

let show=()=>({a: 12, b: 5});
console.log(show());

作用

箭頭函數完全修復了this的指向，this總是指向詞法作用域，也就是外層調用者obj。

參數展開

剩餘參數必須是最後一個。

function show(a, b, ...arr){
		console.log(a, b, arr);
}
show(12,5,44,7,85,34,33);
/* 錯誤的用法
function show(a, b, ...arr, c){
  	console.log(a, b, arr, c);
}
*/

展開數組，就跟把數組的東西寫在那一樣。

let arr=[12,5,8,99,27];
function sum(a,b,c,d,e){
  	return a+b+c+d+e;
}
// alert(sum(arr[0], arr[1], ...))
alert(sum(...arr));	// 相當於 alert(sum(12,5,8,99,27));


let arr1=[1,2,3];
let arr2=[4,5,6];
let arr=[...arr1, ...arr2]; // 相當於 let arr=[1,2,3, 4,5,6];

系統對象

Array

map

映射，1 對 1。

let arr=[100, 98, 37, 28, 19, 96, 56, 67];
let res=arr.map(function (item){
    if(item>=60){
      return true;
    }else{
      return false;
    }
});
// 使用箭頭函數：let res=arr.map(item=>item>=60);
console.log(arr, res);

forEach

遍歷，循環一遍。

let arr=[12, 5, 8, 99];

arr.forEach((item, index)=>{
    //alert('第'+index+'個：'+item);
    alert(`第${index}個：${item}`);
});

filter

過濾。

let arr=[12, 88, 19, 27, 82, 81, 100, 107];
let arr2=arr.filter(item=>item%2==0);
console.log(arr);
console.log(arr2);

reduce

減少，多對 1。

// 求和
let arr=[12, 66, 81, 92];
let res=arr.reduce(function (tmp, item, index){
  alert(`第${index}次，${tmp}+${item}`);
  return tmp+item;
});

// 求平均數
let arr=[12, 66, 81, 92];
let res=arr.reduce((tmp, item, index)=>{
  if(index<arr.length-1){
    return tmp+item;
  }else{
    return (tmp+item)/arr.length;
  }
});

String

字符串模板。

let name = 'xixi';
let age = 27;

let info = `my name is ${name}, my age is ${age}. just a test ${1 + 10}!`;
console.log(info);// my name is xixi, my age is 27. just a test 11!

要了解的兩個函數。

let url='http://www.bing.com/a';

if(url.startsWith('http://') || url.startsWith('https://')){
  alert('是網址');
}else{
  alert('不是');
}

JSON

標準寫法

{"key": "aaa", "key2": 12}

JSON對象

// stringify 將一個json對象轉爲字符串(序列化)
let json={a: 12, b: 5, c: 'blue'};
let str=JSON.stringify(json);
console.log(str);	// {"a":12,"b":5,"c":"blue"}
// parse	將一個字符串 反序列化 爲json對象
let str='{"a":12,"b":5,"c":"blue"}';
let json=JSON.parse(str);
console.log(json);

異步處理

異步，多個操作可以一起進行，互不干擾。
同步，操作一個個進行。

ajax 異步處理方式

$.ajax({
  url: 'data/1.json',
  dataType: 'json',
  success(data1){
    $.ajax({
      url: 'data/2.json',
      dataType: 'json',
      success(data2){
        $.ajax({
          url: 'data/3.json',
          dataType: 'json',
          success(data3){
            console.log(data1, data2, data3);
          }
        });
      }
    });
  }
});

let data1=$.ajax('data/1.json');
let data2=$.ajax('data/2.json');
let data3=$.ajax('data/3.json');

promise

let p=new Promise(function (resolve, reject){
  $.ajax({
    url: 'data/1.json',
    dataType: 'json',
    success(data){
      resolve(data);
    },
    error(res){
      reject(res);
    }
  });
});

p.then(function (data){	// resolve
  alert('成功');
  console.log(data);
}, function (res){			// reject
  alert('失敗');
  console.log(res);
});


Promise.all([
  $.ajax({url: 'data/1.json', dataType: 'json'}),
  $.ajax({url: 'data/2.json', dataType: 'json'}),
  $.ajax({url: 'data/3.json', dataType: 'json'}),
]).then((arr)=>{
  let [data1, data2, data3]=arr;

  console.log(data1, data2, data3);
}, (res)=>{
  alert('錯了');
});

async / await

看起來是同步的方式，這是語法糖提供的方便，編譯渲染後還是異步的方式。

async function show(){
  let data1=await $.ajax({url: 'data/1.json', dataType: 'json'});
  let data2=await $.ajax({url: 'data/2.json', dataType: 'json'});
  let data3=await $.ajax({url: 'data/3.json', dataType: 'json'});
  console.log(data1, data2, data3);
}

<script src="jquery.min.js" charset="utf-8"></script>
<script>
async function show(){
  let data1=await $.ajax({url: 'data/1.json', dataType: 'json'});
  if(data1.a<10){
    let data2=await $.ajax({url: 'data/2.json', dataType: 'json'});
    alert('a');
  }else{
    let data3=await $.ajax({url: 'data/3.json', dataType: 'json'});
    alert('b');
  }
}
show();
</script>

##兼容 IE

使用 babel。

在線編譯

給瀏覽器的執行造成負擔。

使用： 在 https://babeljs.io/ 下載 browser.min.js 文件，引入。

注意： type="text/babel"

編譯出來

先安裝 node.js。

安裝 babel 包。

npm i @babel/core @babel/cli @babel/preset-env

首先在用之前，用一條命令來生成一個 node.js 的工程文件：

// 在工程文件下
npm init -y

然後會在本目錄下生成一個 package.json 文件：

{
  "name": "2",
  "version": "1.0.0",
  "description": "",
  "main": "browser.min.js",
  "scripts": {
    "build": "babel src -d dest"	// 源文件在哪，生成到哪裏去
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

然後在此目錄下新建一個.babelrc文件，裏面有：

{
  "presets": ["@babel/preset-env"]
}

在 html 代碼中引入 src/1.js 文件，然後使用npm run build，就可以生成一個 dest 目錄，裏面就有兼容 IE 的 ES6代碼。

---