2. 程式人生 > >學習ES6的課堂筆記（一）

學習ES6的課堂筆記（一）

阿新 • • 發佈：2018-11-10

2018.10.08 星期一

總的前端內容：

1.頁面重構
1）axure
2）html
3）css
4）js基礎

2.dom框架
1）dom/bom
2） jQuery
3）bootstrap
4）H5 API(H5新增標籤)

3.企業級開發（前端核心）
1）mvvm框架
2） ES6
ES5的升級版，linux
vim 編輯器
node 執行程式碼
3）JavaScript
瀏覽器端：Firefox Opera Chrome
node伺服器端：v8
es6應用場景：
node 伺服器端開發，指令碼開發
瀏覽器 網頁開發（es6–>es5,打包）
4） Vue體系(尤玉溪) 、react、angularJS
vue
vueRouter
vuex
elementui
axios
…
5） 評教系統

4.伺服器端技術：
mysql
nodeJS
小程式
swagger ：javaEE NodeJS PHP C#

ES6

一、搭建開發環境（node） es5–>在瀏覽器中執行

  1. linux

  2. node

  3. es6如何轉換為es5？需要在node中安裝以下兩個外掛：
    babel (做語法上的轉換)
    babel-preset-latest

  4. es6
    安裝webpack外掛:
    webpack(bundle.js) //打包。把所有檔案都指令碼化，最終打包成一個js檔案
    weex

es6的模組化和工程化是與es5的最大的區別。
commonJS

二、node中如何安裝依賴

babel: js的外掛，nodejs的外掛，es6->es5
程式設計師在開發過程中使用的工具，在產品階段不需要
環境依賴

jQuery: js的外掛，封裝DOM。在產品階段需要
產品依賴（qs,jQuery,vue,vuex,vueRouter,axios）

一個工具：npm
全稱是node package manager，是node的包管理（模組）

1.工程的初始化
     $ mkdir app01
     $ cd app01
     $ npm init -y  (表示一切預設)   
   會在當前專案的根目錄中建立一個檔案package.json。該檔案是當前專案的核心檔案。記錄了專案的資訊，依賴的資訊，指令碼的資訊。   

2.呼叫第三方依賴(步驟)
   1）安裝依賴
       $ npm install qs --save
        在當前目錄中的node_modules中安裝依賴，如果不存在，則新建該檔案。
        將依賴資訊記錄在package.json中。

   2）匯入依賴
       reques('qs');
       該函式用於匯入其它模組，引數可以為：
       1.模組名稱
          系統將會按照如下的地址去尋找qs模組
          ./node_modules -> ../node_modules -> ../../node_modules/
       2.路徑

   3）使用依賴    
        如果是第三方API，需要參照文件來進行使用qs
        官網：npmjs.com

3.自定義模組
   任何一個js檔案，都可以看做是一個子模組，每個模組內部都有一個物件module。
   module.exports
   exports屬性表示當前模組對外暴露的介面。

三、npm 安裝依賴

$ npm install [email protected] --save-dev
     本地安裝，該依賴僅僅在開發時使用，在打包時不會被打包。

  $ npm install [email protected] --save
    本地安裝，一般安裝的是產品依賴，例如jQuery,qs,vue。
    將依賴安裝到當前專案的node_modules中。

  $ npm install [email protected] --global  
    全域性安裝，一般安裝的是環境依賴(命令列工具)，例如babel-cli,webpack。
    將依賴安裝到node的家目錄中：下載node；將node解壓到/home/licy/opt/node-v8

四、babel

   1) 安裝babel命令列工具
      $ npm install babel-cli --gloabl

   2) 安裝babel-preset預設
       es6->es5
      $ npm install babel-preset-latest --save-dev
      本地安裝，僅僅在開發的時候使用

   3) 在專案中新增配置檔案
      .babelrc
      {
         "preset":["latest"]
      }

五、webpack的應用

  1.安裝webpack和webpack-cli
      $ npm install webpack webpack-cli --save-dev

  2.新增配置檔案 webpack.config.js
      const path = require('path');
      module.exports = {
         entry: './index.js',
         output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname,'dist')
         } 
      }

  3.修改package.json
      "scripts":{
         "build":"webpack"
      }

  4.執行打包操作
    npm run build
 	npm init
 	npm install xxx
 	npm uninstall xxx      
 	npm config list
 	npm config get

2018.10.09 星期二

複習：

一、npm

node的包管理機制，npm是隨著node的安裝而安裝
1.專案初始化：
$ npm init -y
在當前目錄下，生成package.json，記錄了產品資訊，記錄依賴資訊，記錄指令碼資訊。

2.安裝依賴：
$ npm install [email protected] --save
產品依賴，依賴會被安裝到node_modules，並且在package.json中記錄dependencies，產品在打包的時候依賴會被打包。
例如：jquery,qs,vue,vueRouter,axios都是產品依賴。

   $ npm install [email protected] --save-dev
     開發依賴， 依賴會被安裝到node_modules，並且在package.json中記錄devDependencies，產品在打包的時候該依賴不會被打包。
   例如：babel-core,babel-loader,webpack,webpack-cli。

   $ npm install [email protected] --global
     環境依賴（全域性依賴），依賴會被安裝到node的家目錄中，這個依賴專案會被所有專案呼叫，不會被記錄到packag.json中。

3.解除安裝依賴：
$ npm uninstall [email protected] --save

4.獲取npm相關配置：
$ npm config list
$ npm config get prefix
獲取node的安裝字首

二、es6中的模組化機制

1.commomJS

	1）模組定義： 
	module.exports
	模組可以為js檔案，也可以為目錄
    2）模組引用：
        require()
        引數為路徑
        引數為模組名稱
            .node_modules
            ../nde_modules
            ../../node_modules

    3）模組分類：
       A、自定義模組：

       B、第三方模組：
          (1)安裝 npm install
          (2)引用 require/import
          (3)使用 $() qs.xxx

       C、系統內建模組：
            直接引用
            path   

    4）打包：
       模組化機制在瀏覽器不支援。需要構建：
       打包：a.js b.js c.js -> bundle.js
       轉換：es6 ->es5   .vue -> .html .css .js  

      1)安裝外掛webpack
         $ npm install webpack webpack-cli --save-dev

      2)新增配置檔案 webpack.config.js
         var path = require('path');
         {
            "entery":"./index.js",
            "output":{
                filename:"bundle.js",
                path:path.resolve(__dirname,'dist')
            }
         }

      3)修改package.json       
         "scripts":{
           "build":"webpack"
         }

      4)執行打包
         $ npm run build

2.ES6
1) 模組定義: export
2) 模組引用: import

二、babel轉換

1）安裝babel
2）安裝預設babel-preset-latest
3）在專案中新增配置檔案 .babelrc
  {
     "preset":["latest"]
  }
4）$ babel a.js -o b.js

2.babel整合到webpack中：

 1）安裝開發依賴
      $ npm install babel-core babel-loader --save-dev
 2）安裝預設
      $ npm install babel-preset-latest --save-dev
 3）.babelrc
 4）整合
     webpack.config.js
        entry
        output
        module:{
           rules:[{

           }]
        }

3.模組優化

 app01 
    自定義模組  article category
    第三方模組  jquery

缺點：
檔案比較大
打包速度慢
不便於管理
網路延遲加大

4.JS開發流程
純JS開發不適用於DOM開發

VUE
  .vue
  <template></template> 
  <script></script>
  <style></style>

1)初始化專案工程
npm init(腳手架)
2)使用模組化程式設計
user.js
category.js
article.js
3)構建 build
轉換，打包
4)部署
在apache伺服器中
webpack-server
npm run build

es6 基本語法

1.var

1) 變數宣告的提升
console.log(b);
var b = 1;
2) 沒有區域性作用域
if(true){
var a = 3;
}
console.log(a);
3) 變數可以重複宣告
var a = 3;
var a = true;

2.let

1)不存在變數提升。

2)具有區域性作用域。適用於for迴圈

 if(true){
      let a = 3;
   } 
   console.log(a);  //無法訪問

   for(let i=1; i<=10; i++){

   }
   console.log(i);  //無法訪問

3) 不允許重複宣告。變數在同一作用域中只能被宣告一次。

4) 暫時性死區。在當前作用域中，變數宣告前無法使用變數。

 let a = 1;
   if(true){
        //在變數宣告前無法使用該變數
        let a = 2;
   }

3.const

用於宣告常量，不會改變的變數，只能初始化一次，並顯示初始化。 具備let的所有特性。

const a = 3;
const a = undefined;

4.解構
對於變數宣告的拓展，在一個表示式中為多個變數賦值。解構的本質是模式匹配。

1）陣列結構 

    let [a,b,c] = ['terry','larry','tom'];

    let [a,b,c,d] = ['terry','larry','tom'];

    let [a,b,c='cc,d='dd'] = ['terry','larry','tom'];

    let [head,...tail] = [1,2,3,4,5];

交換兩個變數的值:
  let a = 1;
  let b = 2;

方法1：
     let temp = a;
     a = b;
     b = temp;
方法2：  
    [a,b] = [b,a]

2）物件解構
  
   例子：
      a.js
        module.exports = {
          save(){},
          delete(){},
          update(){},
          findAll(){}
        }

      b.js
        var {save,update} = require('./a');
        save()
        update()
    ----------------------------------
      
      let {a,b,c=1} = {a:1,b:2}
      =>
      function foo({a,b,c=1}){
        console.log(a,b,c);
      }
      foo({a:1,b:2});
    --------------------

        var obj = {
             name:'terry',
             age:12
        };
    
    let {name:a,age:12} = {name:'terry',age:12};

    let {name:name,age:age} = {name:'terry',age:12};

    let {name,age} = {name:'terry',age:12};

    let {findAllCategory} = {require(./category);}

    $.getJSON(url,function({status,data}){
         if(status==200){
             console.log(data);
         }else{
             console.log('介面異常');
         }
    })

   
3）字串解構

  陣列解構，字元獲取：
    let [a,b,c] = 'hello';  //['h','e','l','l','o'] 
    let [a...b] = 'hello'; 

  物件解構，獲取String.prototype.*：
    let {length} = 'hello';
    let {substring,substr} = 'hello'
       將String.prototype中的substring函式賦值給substring，將substr函式賦值給substr變數。
       substring === String.prototypesubstring; //true

4）數字和布林值解構  
  let {toString} = 0;//Number.prototype.toString

5.物件拓展

1)簡寫

var name = 'terry';
 var age = 12;
 var obj = {
     name:name,
     age:age
     sayName:function(){}
 }
 -->
 var obj = {
   name, //變數名作為屬性名，變數值作為屬性值
   age,
   sayName(){}
 }

2)Object建構函式 API擴充套件

  1.Object.is(value1,value2);//同值相等，與===類似。不同之處在於：+0 != -0；NaN = NaN

		"12" === 12; 			false
			+0 -0 	 	true
			NaN NaN 	false
		Object.is("12",12) 	false
			+0 -0 	 	false
			NaN NaN 	true

  2.Object.assign(target,obj1,obj2) //合併物件，將obj1,obj2合併到target中

  3.__proto__屬性  //本質上屬於內部屬性，指向當前物件的prototype物件，一般不直接使用。

		4.Object.setPrototypeOf(obj,prototype)//設定一個物件的prototype物件，返回引數物件本身。

		5.Object.getProtytpeOf(obj);//讀取一個物件的原型物件。

  6. Object.keys(obj);//獲取所有屬性名組成的陣列

		7.Object.values(obj);//獲取所有屬性值組成的陣列

		8.Object.entries(obj);//獲取所有鍵值對組成的陣列的陣列[[key1,val1],[key2,val2]]

課堂案例：webpack應用的操作步驟：

1.新建app01: mkdir app01
2.初始化app0為模組化專案: npm init -y     //package.json
3.新建入口檔案：vi index.js
4.新建資料夾，用來存放子模組：mkdir src
5.在src中構建子模組：vi article.js
                     mkdir category
6.cd category
     初始化：npm init -y      //資料夾當做子模組時都需要初始化    
     新建入口檔案，編寫：vi index.js  
7.在app01下，vi index.js，引用子模組
8. node index.js
9.安裝jquery：npm install jquery --save   
10.安裝：npm install webpack webpack-cli --save-dev
11.建立配置檔案：vi webpack.config.js
12.修改： vi package.json
9. npm run build   //dist（打包）
10. ls dist/       //bundle.js
15.下載bundale.js
16.打包核心程式碼。引入min.js。npm uninstall jquery
17.執行index.js 

18.安裝：npm install babel-core babel-loader --save-dev
19.安裝預設：npm install babel-preset-latest --save-dev
11. vi .babelrc
21.整合。vi webpack.config.js

12. npm run build
23.安裝。npm install [email protected]
13. more package.json
14. npm run build

2018.10.10 星期三

複習：

es6語法:
1.var

2.let

4.const

5.解構
  陣列解構：let [a,b,c] = [1,2,3]
            let [a,...b] = [1,2,3]
  物件解構：let {a,b,c} = {a:1,b:2}
  其他解構：
     字串：let [a,b,c] = "hello"
             let {length,substr} = "";
     數字: let {toString} = 0;
     布林值: let {} = true;

6.物件擴充套件
   簡寫：
     let name = 'terry';
     var obj = {
     name,
     age:12,
     sayName(){}
     }
   Object API 擴充套件
     object.keys()  
     object.values()  
     object.entries()  
     object.is()  
     object.assign()

一、函式的擴充套件：

1.引數預設值

  function foo(url,method='get',async=true){}
   foo("","post");
 =>
   function foo(url, {method='get',async=true}){}
   foo("http://...",{method:'get'});		
-------------------
   function foo({a,b=1}){}
   foo{}

   function({a,b=1}){}
   foo{{a:1,b:2}}

2.rest引數…

可以用於實參，可以用在物件、陣列中。

  將字串轉換為陣列： [...'hello']
  物件合併：
     {
       sayName(){},
       sayAge(){},
       ...{
         save(){},
         delete(){}
       }
     }

  function foo(a,b,c){}
  var param = [1,2,3];
  foo(...param);
  foo.apply({},param);
  =>
  foo(param[0],param[2],param[3]);

3.箭頭函式
一般用於回撥函式中。

  $.get('',(result)=>{
  console.log();
  });

  [1,2,3,4].every((item,index)=>{
  return item>0;
  });

當要使用this的時候，要將箭頭函式定義在一個外部函式中，此時箭頭函式中的this指向外部函式的this。

  function foo(){
     setTimeout(()=>{console.log(this)},1000);
  }
  foo.call({});

二、陣列的擴充套件：

1.Array api

1) Array.from(v);//v為類陣列物件、可迭代物件(for-of)。例如：String/Array/set/map  

 2) Array.of(10);// [10]
    Array.of(10,1);// [10,1]

2.Array.prototype API

 1) Array.prototype.some();

 2) Array.prototype.find();
    [1,2,3,4].find((item)=>{return item>2;});

 3) Array.prototype.findIndex();

 4) Array.prototype.includes();

 5) Array.prototype.fill();
     new Array(10).fill(1);

 6) Array.prototype.keys();

 7) Array.prototype.values();

 8) Array.prototype.entries();

相關推薦

學習ES6的課堂筆記（一）

2018.10.08 星期一 總的前端內容： 1.頁面重構 1）axure 2）html 3）css 4）js基礎 2.dom框架 1）dom/bom 2） jQuery 3）bootstrap 4）H5 API(H5新增標籤) 3.企業級開發（前端核心） 1）mvvm框架

學習js的課堂筆記（一）---基礎

一、程式語言 c語言 是一種編譯語言 hello.c無法直接執行在作業系統上 編寫-> 編譯 ->執行（直接執行在作業系統上） Java語言（跨平臺） 編寫-> 編譯 ->執行（執行在jvm） js語言（nodeJS） 解釋性語言

Django重新開始學習--環境搭建 筆記（一）

nbsp url對應 tin art admin set pla base default 環境 ： 　　python2.7 　　django 1.9.8 　　使用工具pycharm 　　Mysql =====================================

朗科學習期間心得筆記（一）

網絡運維基礎（一）1.完整的操作系統由內核（kernel）和應用（application）組成。 linux內核版本由 主版本號+此版本號+小改動（註：在2.X的版本奇數代表測試版偶數代表穩定版） 可在 http：//www.kernel.org 此網站內獲取內核源代碼。內核的主要功能有：驅動硬件、資源

ng機器學習視頻筆記（一）——線性回歸、代價函數、梯度下降基礎

info 而且 wid esc 二維 radi pan 圖形 clas ng機器學習視頻筆記（一） ——線性回歸、代價函數、梯度下降基礎 （轉載請附上本文鏈接——linhxx） 一、線性回歸 線性回歸是監督學習中的重要算法，其主要目的在於用一個函數表

《機器學習實戰》 筆記（一）：K-近鄰演算法

一、K-近鄰演算法 1.1 k-近鄰演算法簡介 簡單的說，K-近鄰演算法採用測量不同特徵值之間的距離的方法進行分類。 1.2 原理 存在一個樣本資料集合，也稱作訓練樣本集，並且樣本集中每個資料都存在標籤，即我們知道樣本集中每一資料 與所屬分類的對應關係。輸入沒有標籤的新資料

Python機器學習基礎教程筆記（一）

description: 《Python機器學習基礎教程》的第一章筆記，書中用到的相關程式碼見github:https://github.com/amueller/introduction_to_ml_with_python ，筆記中不會記錄。 為何選擇機器學習 人為制訂決

RxJava學習並理解筆記（一）

作為菜鳥來講，看了好多的rxjava操作符，弄得我怕怕的，就怕自己堅持不住學習，所以，還是一步步來學習它吧，文章主要是記錄一下我學習rxjava的過程。 重點:rxjava的觀察者模式 程式中基於使用者的操作，資料的改變等因素，UI都會發生相應的變化 rxjava是一種非同步變化思想

斯坦福CS224N_自然語言處理NLP深度學習DL課程筆記（一）

Lecture 1: Introduction pdf 本節課是對自然語言處理的定義介紹和應用介紹，還順帶說了NLP的難點； 本節課使用深度學習作為NLP的主要處理工具。 傳統的機器學習技術，需要人為地去做特徵工程，將這些的特徵餵給機器學期演算法；然後機器學習演

【Redis學習】Redis筆記（一）——特點、基礎命令和資料結構

更新時間：2018-10-13 Redis的特性 速度快 持久化（斷電不丟資料） 多種資料結構 支援多種客戶端語言 功能豐富 操作簡單 主從複製 高可用，分散式 Redis的通用命令 key

《好好學習》閱讀筆記（一）內容大綱

書中對於知識體系的建立與整理提出了一套非常好的實用方法，整部書閱讀下來覺得收穫很多。重點推薦可以強力研讀的一本~ 對於主要內容總結成二十四字：打通阻塞，建立連線；系統思考，抽象規律；積極反思，學以致用

Shell指令碼學習指南讀書筆記（一）

第1章 背景知識略 第2章 入門 編譯型語言 優點：高效 缺點：多半運作於底層，處理位元組、整數或其他機器層級的物件（C++中就很難將一個目錄所有檔案複製到另一個目錄中） 指令碼程式語言 通常是解釋型的

應用數學課堂筆記（一）——尤拉方程

教材 《變分法及其應用——物理、力學、工程中的經典建模》歐斐君 高等教育出版社 有限維到無限維 向量中有有限個元素，它們可以進行加法、數乘、定義範數、定義內積、定義夾角。比如，對於向量 a

ES6學習筆記（一）——擴展運算符和解構賦值

st3 com 布爾 nts 實參 之前 script hello let 前言 隨著前端工程化的快速推進，在項目中使用ES6甚至更高的ES7等最近特性早已不是什麽新鮮事。之前還覺得既然瀏覽器支持有限，那了解一下能看懂就好，然而僅僅了解還是不夠的，現在放眼望去，那些成熟框架

學習ES6的課堂筆記（二）

2018.10.11 星期四 複習： 一、集合： 陣列 arr = [1,2,3,2,1] set: 無序不可重複的集合、容器 **1)例項化** let set = new Set(); let set = new Set([1,2,3,3,2]

ES6學習筆記（一）（整理阮一峰大神入門）

一、ES6宣告變數的六種方法 ES5 只有兩種宣告變數的方法：var命令和function命令。ES6除了新增let和const命令，另外兩種宣告變數的方法：import命令和class命令。所以，E

ES6學習筆記（一）——字串的擴充套件

預備知識 utf-16：把Unicode字符集的抽象碼位對映為16位長的整數（即碼元）的序列，Unicode字元的碼位，需要1個或2個16位的碼元來表示。 utf-32：使用32個位元對每個Unicode碼位進行編碼，編碼長度是固定的，即32位。 js

ES6學習筆記（一）新的變量定義命令let和const

undefined object 這樣的 保存 全局對象 mic 變量 tps != 1.一些歷史 ES6（ECMAScript 6.0）是 JavaScript 語言的新一代標準，於2015 年 6 月正式發布，距今已經4年了，它的目標，是使得 JavaScript 語

python框架之 Tornado 學習筆記（一）

tornado pythontornado 一個簡單的服務器的例子：首先，我們需要安裝 tornado ，安裝比較簡單： pip install tornado 測試安裝是否成功，可以打開python 終端，輸入： import tornado.https

Scala學習筆記（一）編程基礎

大數據 上一個 extends 移除 condition api arr 調用方法 tab 強烈推薦參考該課程：http://www.runoob.com/scala/scala-tutorial.html 1. Scala概述 1.1. 什麽是Scala Scala