ES6笔记（一）

switchMiao
203 阅读5分钟

ES6

一、搭建开发环境（node）es5->在浏览器中运行 

  1. linux
  2. node
  3. es6如何转换为es5？需要在node中安装以下两个插件：
  • babel（做语法上的转换）
  • babel-preset-latest

es6:

  • 安装webpack插件
  • webpack（bundle.js）//打包。把所有的文件都脚本化，最终打包成一个js文件
  • weex

es6的模块化和工程化是与es5最大的区别

commonJs

二、node中如何安装依赖

babel：js插件，nodejs的插件，es6->es4

程序员在开发过程中使用的工具，在产品阶段不需要

环境依赖

jQuery：js的插件，封装DOM。在产品阶段需要

产品依赖（qs，jQuery，vue，vuex，vueRouter，axios）

一个工具：npm

全称是node package manager，是node的包管理（模块）

npm是随着node的安装而安装

1、工程的初始化

  • $ mkdir app01

  • $ cd app01

  • $ npm init -y（表示一切默认）

  • 会在当前项目的根目录中创建一个package.json。该文件是当前项目的核心文件，记录了项目信息，依赖的信息，脚本的信息。

2、调用第三方依赖（步骤）

1）安装依赖

  • $ npm install qs --save
  • 在当前目录中的node_modules中安装依赖，如果不存在，则新建该文件
  • 将依赖的信息记录在package.json中

2）导入依赖

  • require('qs')
  • 该函数用于导入其他模块，参数可以为：
  1. 模块名称：系统将会按照如下的地址如寻找qs模块  ./node_modules -> ../node_modules -> ../../node_modules/
  2. 路径

3）使用依赖

  • 如果是第三方API，需要参照文档来使用qs
  • 官网：npmjs.com

3、自定义模块

  • 任何一个js文件，都可以看做是一个子模块，每个模块内部都有一个对象module
  • module.exports
  • exports属性表示当前模块对外暴露的接口

三、npm安装依赖

$ npm install xxx@xx.x.x --save-dev

  • 本地安装，该依赖仅仅在开发时使用，在打包时不会被打包

$ npm install xxx@xx.x.x --dev

  • 本地安装，一般安装的是产品的依赖，例如jquery，qs，vue
  • 将依赖安装到当前项目的node_modules中

 $ npm install xxx@x.x.x --global

  • 全局安装，一般安装的是环境依赖（命令行工具），例如babel-cli，webpack
  • 将依赖安装到node的家目录中：下载node；将node解压到/html/jen/opt/node-v8

四、babel

1、安装babel命令工具

  • $ npm install babel-cli --global

2、安装babel-preset预设

  • es6 -> es5
  • $ npm install babel-preset-lateset --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 init -y:在当前目录下，生成package.json，记录了产品信息，依赖，以及脚本信息）
  • npm install xxx（$ npm install xxx@x --save ,产品依赖，依赖会被安装到node_modules，并在package.json中记录dependencies,产品在打包时依赖会被打包）
  • npm uninstall xxx
  • npm config list
  • npm config get（$ npm config get prefix 获取node的安装前缀）

二、ES6中的模块化机制

1、commonJS

1）模块定义：
    module.exports
    模块可以为js文件，也可以为目录文件
2）模块引用：
    require()
    参数为路径
    参数为模块名称
        .node_modules
        ../node_modules
        ../../node_modules
3）模块分类：
    A、自定义模块
    B、第三方模块
        （1）安装npm install
        （2）引用require/import
        （3）使用$() qs.xx
    C、系统内置模块
        直接引用
        path
4）打包：
    模块打包机制在浏览器不支持。需要构建：
    打包：a.js b.js c.js -> bundle.js
    转换：es6->es5 .vue->.html .css .js

    a）安装插件webpack
        $npm install webpack webpack-cli --save-dev
    b）添加配置文件 webpack.config.js
        var path = require('path');
        {
            "entry":"./index.js",
            "output":{
                filename:"bundle.js",
                path:path.resolve(_dirname,'dist')
            }
        } 
    c）修改package.json
        "scripts":{
            "build":"webpack"
        }
    d）执行打包
        $npm run build

tips:

1、模块定义：export

2、模块引用：import

三、babel转换

一、步骤

  1. 安装babel
  2. 安装预设babel-preset-latest
  3. 在项目中添加配置文件 .babelrc {"preset":["latest"]}
  4. $babel a.js -o b.js

二、babel集成到webpack中：

1）安装开发依赖
    $npm install babel-core babel-loader --save-dev
2）安装预设
    $npm install babel-preset-latest --save-dev
3）.babelrx
4）集成
    webpack.config.js
        entry
        output
        module:{
            rules:[{
            
            }]
        }

三、模块优化

app01
    自定义模块 article category
    第三方模块 jquery

缺点：

  • 文件比较大
  • 打包速度慢
  • 不便于管理
  • 网络延迟加大

四、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] = ['jennie','jisoo','rose'];
    let [a,b,c,d] = ['jennie','jisoo','rose'];
    let [a,b,c='cc',d='dd'] = ['jennie','jisoo','rose']    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
            moudle.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:'jennie',
                age:24
            }
        let {name:a,age:24} = {name:'jennie',age:24}
        let {name:name,age:age} = {name:'jennie',age:24}
        let {name,age} = {name:'jennie',age:24}
        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 = 'jennie';
    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.getPrototypeOf(obj);//读取一个对象的原型对象
    6.Object.keys(obj); //获取所有属性名组成的数组
    7.Object.values(obj); //获取所有属性值组成的数组
    8.Object.entries(obj);//获取所有键值对组成的数组的数组[[key1,val1],[key2,val2]]


练习：
    数组解构： 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;
    对象扩展：
        简写：
        let name = 'jennie';
        var obj = {
            name,
            age:12,
            sayName(){}
        }
        Object API扩展
            object.keys()
            object.values()
            object.entries()
            object.is()
            object.assign()

实例：webpack应用操作步骤

1.新建app01: mkdir app01
2.初始化app01为模块化项目：npm init -y //package.json
3.新建入口文件：vi index.js
4.新建文件夹，用来存放子模块：mdkir 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
13.npm run build //dist(打包)
14.ls dist/ //bundle.js
15.下载bundle.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
20.vi .babelrc
21.集成 vi webpack.config.js
22. npm run build
23.安装 npm install babel-loader@7
24.more packeage.json
25.npm run build

函数的扩展：

1、参数的默认值

function foo(url,methods='get',async=true){}
foo("","post");

function foo(url,{methods='get',async=true}){}
foo("http://...",{methods:'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();
avatar
文章
阅读
粉丝