day01-ES6新特性以及ReactJS入门

课程介绍

• ES6新特性
• ReactJS入门学习

1、ES6 新特性

1.2、let 和 const 命令

var

之前，我们写js定义变量的时候，只有一个关键字： var
var 有一个问题，变量作用域的问题，作用域不可控，就是定义的变量有时会莫名奇妙的成为全局变量。
例如这样的一段代码：

<script>
    for (var i = 0; i < 5; i++) {
        console.log(i);
    }
    console.log("循环外："+i)
</script>

运行打印的结果是如下：

可以看出，在循环外部也可以获取到变量i的值，显然变量i的作用域范围太大了，在做复杂页面时，会带来很大的问题 

let

let 所声明的变量，只在 let 命令所在的代码块内有效。我们把刚才的 var 改成 let 试试： 

<script>
    for (let i = 0; i < 5; i++) {
        console.log(i);
    }
    console.log("循环外："+i)
</script>

这样，就把变量的i的作用域控制在了循环内部。

const

const 声明的变量是常量，不能被修改，类似于java中final关键字 

<script>
    const a = 1;
    console.log("a = ", a);
    //给a重新赋值
    a = 2;
    console.log("a = ", a);
</script>

可以看到，变量a的值是不能修改的。

1.3、字符串扩展

在ES6中，为字符串扩展了几个新的API：

• includes() ：返回布尔值，表示是否找到了参数字符串。
• startsWith() ：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith() ：返回布尔值，表示参数字符串是否在原字符串的尾部。

实验一下：

<script>
    let str = "hello word";
    console.log(str, " 中是否包含了word => ", str.includes("word"));
    console.log(str, " 中是否包含了baima => ", str.includes("baima"));
    console.log(str, " 中是否以h开头 => ", str.startsWith("h"));
    console.log(str, " 中是否以a开头 => ", str.startsWith("a"));
    console.log(str, " 中是否以a结束 => ", str.endsWith("a"));
    console.log(str, " 中是否以h结束 => ", str.endsWith("h"));
</script>

字符串模板

ES6中提供了`来作为字符串模板标记。我们可以这么玩：

<script>
    let str = `
            hello
            itheima
            itcast
            `;
    console.log(str);
</script>

 在两个`之间的部分都会被作为字符串的值，可以任意换行。

1.3、解构表达式

什么是解构？ -- ES6中允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构 (Destructuring)。

1.3.1、数组解构

比如有一个数组：

let arr = [1,2,3]

之前，我想获取其中的值，只能通过角标。ES6可以这样：

<script>
    let arr = [1,2,3]
    const [x,y,z] = arr;// x，y，z将与arr中的每个位置对应来取值
    // 然后打印
    console.log(x,y,z);
    const [a] = arr; //只匹配1个参数
    console.log(a)
</script>

结果：

1.3.2、对象解构

例如有个person对象：

    const person = {
        name:"jack",
        age:21,
        language: ['java','js','css']
    }

我们可以这么做：

    // 解构表达式获取值
    const {name,age,language} = person;
    // 打印
    console.log(name);
    console.log(age);
    console.log(language);

结果：

如过想要用其它变量接收，需要额外指定别名：

• {name:n} ：name是person中的属性名，冒号后面的n是解构后要赋值给的变量。 

1.4、函数优化

在ES6中，对函数的操作做了优化，使得我们在操作函数时更加的便捷。

1.4.1 函数参数默认值

在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：

function add(a , b) {
// 判断b是否为空，为空就给默认值1
b = b || 1;
return a + b;
}
// 传一个参数
console.log(add(10));

现在可以这么写：

function add(a , b = 1) {
return a + b;
}
// 传一个参数
console.log(add(10));

1.4.2 箭头函数

箭头函数 - JavaScript | MDN

ES6中定义函数的简写方式：

一个参数时：

var print = function (obj) {
console.log(obj);

// 简写为：
var print2 = obj => console.log(obj);

多个参数：

// 两个参数的情况：
var sum = function (a , b) {
return a + b;
}
// 简写为：
var sum2 = (a,b) => a+b;

没有参数：

// 没有参数时，需要通过()进行占位，代表参数部分
let sayHello = () => console.log("hello!");
sayHello();

代码不止一行，可以用 {} 括起来。

var sum3 = (a,b) => {
return a + b;

// 多行，没有返回值
let sayHello = () => {
console.log("hello!");
console.log("world!");
}

sayHello();

1.4.3 对象的函数属性简写

比如一个Person对象，里面有eat方法

let person = {
	name: "jack",
	// 以前：
    eat: function (food) {
    console.log(this.name + "在吃" + food);
    },
	// 箭头函数版：
	eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this
	// 简写版：
    1eat3(food){
    console.log(this.name + "在吃" + food);
        }
}

1.4.4 箭头函数结合解构表达式

比如有一个函数：

const person = {
    name:"jack",
    age:21,
    language: ['java','js','css']
}

function hello(person) {
	console.log("hello," + person.name)
}

//如果用箭头函数和解构表达式
var hi = ({name}) =>  console.log("hello," + name);
hi(person)

1.5 map和reduce

ES6中，数组新增了map和reduce方法。

1.5.1 map

map()接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

举例：有一个字符串数组，我们希望转为int数组

let arr = ['1','20','-5','3'];
console.log(arr)
let newArr = arr.map(s => parseInt(s));
console.log(newArr)

1.5.2、*

• 第一个参数是上一次reduce处理的结果
• 第二个参数是数组中要处理的下一个元素

const arr = [1,20,-5,3]

没有初始值：

1.6、扩展运算符

扩展运算符 (spread) 是三个点 (...) ， 将一个 数组转为用逗号分隔的参数序列 。

也可以将字符串转为数组

用法

    console.log (...[1, 2, 3]); //1 2 3
    console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5
    function add(x, y) {
        return x + y;
    }
    var numbers = [1, 2];
    console.log(add(...numbers)); // 3
    // 数组合并
    let arr = [...[1,2,3],...[4,5,6]];
    console.log(arr); //[1, 2, 3, 4, 5, 6]
    // 与解构表达式结合
    const [first, ...rest] = [1, 2, 3, 4, 5];
    console.log(first, rest) //1 [2, 3, 4, 5]
    //将字符串转成数组
    console.log([...'hello']) //["h", "e", "l", "l", "o"]

1.7、Promise

所谓 Promise ，简单说就是一个容器， 里面保存着某个未来才会结束的事件 （通常是一个异步操作）的结果。从语 法上说， Promise 是一个对象，从它可以获取异步操作的消息。 Promise 提供统一的 API ，各种异步操作都可以用 同样的方法进行处理。

我们可以通过 Promise 的构造函数来创建 Promise 对象，并在内部封装一个异步执行的结果。

语法：

    const promise = new Promise(function(resolve, reject) {
// ... 执行异步操作
        if (/* 异步操作成功 */){
            resolve(value);// 调用resolve，代表Promise将返回成功的结果
        } else {
            reject(error);// 调用reject，代表Promise会返回失败结果
        }
    });

这样，在 promise 中就封装了一段异步执行的结果。

如果我们想要等待异步执行完成，做一些事情，我们可以通过 promise 的 then 方法来实现 , 语法：

promise.then(function(value){
// 异步执行成功后的回调
});

如果想要处理 promise 异步执行失败的事件，还可以跟上 catch ：

promise.then(function(value){
// 异步执行成功后的回调
}).catch(function(error){
// 异步执行失败后的回调
})

示例：

    const p = new Promise((resolve, reject) => {
        setTimeout(()=>{
            let num = Math.random();
            if (num<0.5){
                resolve("成功了:"+num);
            }else {
                reject("失败了:"+num)
            }
        })
    });

    console.log("ok")

    p.then(value => {
        console.log(value)
    }).catch(reason => {
        console.log(value)
    })

    console.log("因为是异步，所以不影响我这行输出")

结果：

1.8、set和map

ES6 提供了 Set 和 Map 的数据结构。

Set ，本质与数组类似。不同在于 Set 中只能保存不同元素，如果元素相同会被忽略。和 java 中的 Set 集合非常相似。

构造函数：

    // Set构造函数可以接收一个数组或空
    let set = new Set();
    set.add(1);// [1]
    // 接收数组
    let set2 = new Set([2,3,4,5,5]);// 得到[2,3,4,5]

方法：

set.add(1);// 添加
set.clear();// 清空
set.delete(2);// 删除指定元素
set.has(2); // 判断是否存在
set.forEach(function(){})//遍历元素
set.size; // 元素个数。是属性，不是方法

map ，本质是与 Object 类似的结构。不同在于， Object 强制规定 key 只能是字符串。而 Map 结构的 key 可以是任意

对象。即：

• object是 <string,object>集合
• map是<object,object>集合

构造函数：

    // map接收一个数组，数组中的元素是键值对数组
    const map = new Map([
        ['key1','value1'],
        ['key2','value2'],
    ])
    // 或者接收一个set
    const set = new Set([
        ['key1','value1'],
        ['key2','value2'],
    ])
    const map2 = new Map(set)
    // 或者其它map
    const map3 = new Map(map);

方法：

    map.set(key, value);// 添加
    map.clear();// 清空
    map.delete(key);// 删除指定元素
    map.has(key); // 判断是否存在
    map.forEach(function(key,value){})//遍历元素
    map.size; // 元素个数。是属性，不是方法
    map.values() //获取value的迭代器
    map.keys() //获取key的迭代器
    map.entries() //获取entry的迭代器
    用法：
for (let key of map.keys()) {
    console.log(key);
}
    或：
console.log(...map.values()); //通过扩展运算符进行展开

1.9、class（类）的基本语法

JavaScript 语言的传统方法是通过构造函数定义井生成新对象。 ES6 中引入了 class 的概念，通过 class 关键字自定义

类。

基本用法

    class User{
        constructor(name, age = 20){ // 构造方法
            this.name = name; // 添加属性并且赋值
            this.age = age;
        }
        sayHello(){ // 定义方法
            return "hello";
        }
        static isAdult(age){ //静态方法
            if(age >= 18){
                return "成年人";
            }
            return "未成年人";
        }
    }
    let user = new User("张三");
    // 测试
    console.log(user); // User {name: "张三", age: 20}
    console.log(user.sayHello()); // hello
    console.log(User.isAdult(20)); // 成年人

类的继承：

    class User{
        constructor(name, age = 20){ // 构造方法
            this.name = name; // 添加属性并且赋值
            this.age = age;
        }
        sayHello(){
            return "hello"; // 定义方法
        }
        static isAdult(age){ //静态方法
            if(age >= 18){
                return "成年人";
            }
            return "未成年人";
        }
    }
    class ZhangSan extends User{
        constructor(){
            super("张三", 30); //如果父类中的构造方法有参数，那么子类必须通过super调用父类的构造方
            法
            this.address = "上海";//设置子类中的属性，位置必须处于super下面
        }
    }
    // 测试
    let zs = new ZhangSan();
    console.log(zs.name, zs.address);
    console.log(zs.sayHello());
    console.log(ZhangSan.isAdult(20));

1.10、Generator函数

Generator 函数是 ES6 提供的 一种异步编程解决方案，语法行为与传统函数完全不同 。

Generator 函数有两个特征 : 一是 function 命令与函数名 之间有一个星号 : 二是 函数体内部使用 yield 吾句定义不同的内部状态。

用法：

    function* hello () {
        yield "hello";
        yield "world";
        return "done";
    }
    let h = hello();
    console.log(h.next()); //{value: "hello", done: false}
    console.log(h.next()); //{value: "world", done: false}
    console.log(h.next()); //{value: "done", done: true}
    console.log(h.next()); //{value: undefined, done: true}

1.10.1、for...of循环

通过 for...of 可以循环遍历 Generator 函数返回的迭代器。

用法：

    function* hello () {
        yield "hello";
        yield "world";
        return "done";
    }
    let h = hello();
    for (let obj of h) {
        console.log(obj);
    }

    // 输出：
    hello
    world

1.11、修饰器(Decorator)

修饰器 (Decorator) 是一个函数， 用来修改类的行为。 ES2017 引入了这项功能， 目前 Babel 转码器己经支持。

使用

    @T //通过@符号进行引用该方法，类似java中的注解
    class User {
        constructor(name, age = 20){
            this.name = name;
            this.age = age;
        }
    }

    //执行User 时先执行修饰器，用来修改类的行为
    function T(target) { //定义一个普通的方法
        console.log(target); //target对象为修饰的目标对象，这里是User对象
        target.country = "中国"; //为User类添加一个静态属性country
    }
    console.log(User.country); //打印出country属性值

运行报错：

//转码前
input .map(item =>item + 1);
//转码后
input.map(function (item) {
return item + 1;
})

1.12.2、部署安装

# 首先，需要安装 Node.js

# 在资料中，找到 node-v8.12.0-x64.msi ，一路下一步安装

# 安装完成后，通过 node -v 命令查看其版本号

F:\code\itcast-es6>node -v

v8.12.0

# 接下来，开始安装 yarn ，其中 tyarn 使用的是 npm.taobao.org 的源，速度要快一些

# 可以把 yarn 看做了优化了的 npm

npm i yarn tyarn -g #-g 是指全局安装

tyarn -v # 进行测试，如果能够正常输出版本信息则说明安装成功了

# 如果安装失败，是由于将 yarn 添加到环境变量中导致，参见

http://www.easysb.cn/index.php/2017/06/04/11/

# 下面开始安装 umi

tyarn global add umi

umi # 进行测试

 1.12.3、快速入门

# 通过初始化命令将生成 package.json 文件，它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件。

tyarn init -y

# 通过 umi 命令创建 index.js 文件

umi g page index # 可以看到在 pages 下创建好了 index.js 和 index.css 文件

# 将下面内存拷贝到 index.js 文件中进行测试

    @T //通过@符号进行引用该方法，类似java中的注解 ， 这个注解需要转码才能生效
    class User {
        constructor(name, age = 20){
            this.name = name;
            this.age = age;
        }
    }

      
    function T(target) { //定义一个普通的方法
        console.log(target); //target对象为修饰的目标对象，这里是User对象
        target.country = "中国"; //为User类添加一个静态属性country
    }
    console.log(User.country); //打印出country属性值

# 通过命令行启动 umi 的后台服务 , 用于本地开发

umi dev

# 通过浏览器进行访问： http://localhost:8000/ ，查看效果

# 值得注意的是，这里访问的是 umi 的后台服务，不是 idea 提供的服务

可以看到，将我们写的代码进行的编码 

1.13、模块化

1.13.1.什么是模块化

class Util {
    static sum = (a, b) => a + b;
}
//导出该类
export default Util;

//Index.js
//导入Util类
import Util from './Util'
//使用Util中的sum方法
console.log(Util.sum(1, 2));

 阶段三：前端MVC阶段

 有些框架提出了MVVM模式，用 View Model 代替 Controller。Model 拿到数据以后，View Model 将数据处理成 视图层（View）需要的格式，在视图层展示出来。

阶段四：SPA阶段

2.2、ReactJS简介

 2.3、搭建环境

2.3.1、创建项目

我们依然选择使用 UmiJS 作为构建工具。

创建工程：

tyarn init -y

在命令输入如下命令：

 tyarn add umi --dev #项目中添加umi的依赖

2.3.2、编写HelloWorld程序

第一步，在工程的根目录下创建 config 目录，在 config 目录下创建 config.js 文件。

在umi中，约定的目录结构如下：  

 在config.js文件中输入以下内存，以便后面使用：

// 导出一个对象，暂时设置为空对象，后面再填充内容

export default {};

第二步，创建 HelloWorld.js 页面文件

 在HelloWorld.js文件中输入如下内容：

export default () => {
    return <div>hello world</div>;
}

# 启动服务

umi dev

添加成功：

接下来，在config.js文件中引入该插件：

//导出一个对象，暂时设置为空对象，后面再填充内容
export default {
    plugins: [
        ['umi-plugin-react', {
//暂时不启用任何功能
        }]
    ]
};

2.3.4、构建和部署

umi build

可以看到，已经生成了index.html和umi.js文件。我们打开umi.js文件看看。  

const div1 = < div > hello world < /div> / / 正确

const div2 = < div > hello < /div> <div>world</ div > // 错误

在JSX语法中，如果想要在html标签中插入js脚本，需要通过{}插入js脚本。

2.4.2、组件

import React from 'react'; //第一步，导入React
    class HelloWorld extends React.Component { //第二步，编写类并且继承 React.Component
        render(){ //第三步，重写render()方法，用于渲染页面
            return <div>hello world!</div> //JSX语法
        }
    }
    export default HelloWorld; //第四步，导出该类

查看效果：

2.4.2.1 、导入自定义组件

创建 Show.js 文件，用于测试导入组件：

import React from 'react'
    import HelloWorld from './HelloWorld' //导入HelloWorld组件
    class Show extends React.Component{
        render(){
            return <HelloWorld/>; //使用HelloWorld组件
        }
    }
    export default Show;

测试：

2.4.2.2 、组件参数

组件是可以传递参数的，有 2 种方式传递，分别是属性和标签包裹的内容传递，具体使用如下：

import React from 'react'
import HelloWorld from './HelloWorld' //导入HelloWorld组件
class Show extends React.Component{
    render(){
        return <HelloWorld name="zhangsan">shanghai</HelloWorld>; //使用HelloWorld组件
    }
}
export default Show;

其中， name="zhangsan" 就是属性传递， shanghai 就是标签包裹的内容传递。

那么，在 HelloWord.js 组件中如何接收参数呢？

对应的也是 2 种方法：

属性： this.props.name 接收；

标签内容： this.props.children 接收；

使用如下：

import React from 'react'; //第一步，导入React
class HelloWorld extends React.Component { //第二步，编写类并且继承 React.Component
    render(){ //第三步，编写render()方法，用于渲染页面
        return <div>hello world! name={this.props.name}, address={this.props.children}
        </div> //JSX语法
    }
}
export default HelloWorld; //第四步，导出该类

测试：

2.4.2.3 、组件的状态

每一个组件都有一个状态，其保存在 this.state 中，当状态值发生变化时， React 框架会自动调用 render() 方法，重

新渲染页面。

其中，要注意两点：

        一： this.state 值的设置要在构造参数中完成；

        二：要修改this.state 的值，需要调用 this.setState() 完成，不能直接对 this.state 进行修改；

下面通过一个案例进行演示，这个案例将实现：通过点击按钮，不断的更新 this.state ，从而反应到页面中。

import React from 'react'
class List extends React.Component{
    constructor(props){ // 构造参数中必须要props参数
        super(props); // 调用父类的构造方法
        this.state = { // 初始化this.state
            dataList : [1,2,3],
            maxNum : 3
        };
    }
    render(){
        return (
            <div>
                <ul>
                    {
// 遍历值
                        this.state.dataList.map((value,index) => {
                            return <li key={index}>{value}</li>
                        })
                    }
                </ul>
                <button
                    onClick={()=>{ //为按钮添加点击事件
                        let maxNum = this.state.maxNum + 1;
                        let list = [...this.state.dataList, maxNum];
                        this.setState({ //更新状态值
                            dataList : list,
                            maxNum : maxNum
                        });
                    }}>
                    添加
                </button>
            </div>
        );
    }
}
export default List;

初始状态：

当点击 “ 添加 ” 按钮：

过程分析：

2.4.2.4、生命周期

 组件的运行过程中，存在不同的阶段。React 为这些阶段提供了钩子方法，允许开发者自定义每个阶段自动执行的

生命周期示例： 初始化，更新，销毁文章来源地址https://www.toymoban.com/news/detail-685410.html

import React from 'react'; //第一步，导入React
class LifeCycle extends React.Component {
    constructor(props) {
        super(props);
        //构造方法
        console.log("constructor()");
    }
    componentDidMount() {
//组件挂载后调用
        console.log("componentDidMount()");
    }
    componentWillUnmount() {
//在组件从 DOM 中移除之前立刻被调用。
        console.log("componentWillUnmount()");
    }
    componentDidUpdate() {
//在组件完成更新后立即调用。在初始化时不会被调用。
        console.log("componentDidUpdate()");
    }
    shouldComponentUpdate(nextProps, nextState){
// 每当this.props或this.state有变化，在render方法执行之前，就会调用这个方法。
// 该方法返回一个布尔值，表示是否应该继续执行render方法，即如果返回false，UI 就不会更新，默
// 认返回true。
// 组件挂载时，render方法的第一次执行，不会调用这个方法。
        console.log("shouldComponentUpdate()");
    }
    render() {
        return (
            <div>
                <h1>React Life Cycle!</h1>
            </div>
        );
    }
}
export default LifeCycle;

到了这里，关于day01-ES6新特性以及ReactJS入门的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！