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() ：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：

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

reduce() 会从左到右依次把数组中的元素用 reduce 处理，并把处理的结果作为下次 reduce 的第一个参数。如果

是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

举例：

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

没有初始值：

 

指定初始值：

这里需要注意，如何设置了默认值，那么第一个元素就是默认值，第二个元素是数组的值，如a为-1，b为1

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 ：