React开发管理后台0

React开发需要用ES6语法,ES6是在2015年发布的,对Javascript语法进行了重大扩充,所以直到现在还不是所有的浏览器都支持ES6语法,React使用Babel来支持ES6语法。
在这里我们先来熟悉一下ES6的语法,为今后进行React开发打下基础。

变量扩展

块作用域

在老版本的Javascript中,只有全局和函数作用域,没有块作用域,如下代码所示:

function t1() {
    var i = 1;
    if (1 == i) {
        let n1 = 'n1 block';
        alert(`n1=${n1}!`);
        n1 = 'new n1';
        alert(`new n1=${n1}!`);
    }
    alert(n1);
}

在第4行定义变量n1,在第5行可以正确显示其结果。在第6行可以改变n1的值,第7行也可以正确显示出来(与其他很多语言不同,let这里表示块作用域变量,而不是常量)。

常量

ES6中引入常量概念,用const开头:

const n2 = 'abc';
n2 = 'def';

这时就会报错,因为不能向常量赋值。

模板字符串

ES6引入模板字符串,就是将变量嵌入到字符串中,而无需使用+来拼接字符串,使代码更易懂。实际中模板字符串有两种主要用途,一种是在字符串中嵌入变量,另一种是输入多行字符串,如下所示:

var name = '王一';
console.log(`欢迎${name}光临!`);
console.log('欢迎' + name + '光临!');
var message = `

这里是多行文本

`;

注意上述代码中第2行使用的是Tab键上边的反引号,不是单引号。其效果和第3行相同。第4行定义的多行文本也是可以直接显示为多行文本的,同时也需要注意,其使用的是Tab键上面的反引号而不是单引号。

函数扩展

Lambda表达式

ES6中引入Lambda表达式又称之为简头函数,可以用另一种方式来定义函数:

function add(a, b) {
    return a + b;
}

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

alert(`a+b=${add(1, 2)}!`);
alert(`a+b=${addNew(3, 2)}!`);

setTimeout(()=>{ alert('timeout'); }, 2000);

function onTimeout() {
    alert('timeout2');
}
setTimeout(onTimeout, 1000);

我们首先定义了普通函数add和箭头函数addNew,在后面可以看到,他们无论调用方式还是执行效果都是完全一样的。
接下来我们设置timeout执行的函数,通过箭头函数或普通函数作为setTimeout函数的第一个参数,效果都是一样的。而使用箭头函数,可以使代码更简洁。

默认参数

默认参数就是可以给函数中的参数赋默认值,当函数调用时,如果不给这个参数赋值,就使用默认值,如果给参数赋值,则使用传入的值,如下所示:

function increase(a, b=1) {
    return a + b;
}

alert(`increase 1:${increase(3)}!`);
alert(`increase 100:${increase(3, 100)}!`);

运行上面的代码,第一次输入为4,因为此时没有给b赋值,系统使用默认值1;第二次输入为103,此时b使用传入值100。

扫描二维码关注公众号,回复: 3036033 查看本文章

展开符

展开符为…,可以将数组元素取出,去掉中括号,如下所示:

function sum(a, b) {
    return a + b;
}
var vals = [1, 2];
alert(`老方法:sum=${sum.apply(null, vals)}!`);
alert(`新方法:sum=${sum(...vals)}!`);

在老Javascript中,需要使用apply函数,而ES6中可以在数组前面加展开符…,直接将数组变为元素的列表。

对象扩展

对象属性

ES6在对象中增加了keys、values、entries方法,可以返回对象的属性、值和键值对,如下所示:

let user = {name: '王一', age: 55, gender: '男'};
console.log(Object.keys(user));
console.log(Object.values(user));
console.log(Object.entries(user));
let v1 = Object.entries(user);
console.log(`${v1[0][0]}=${v1[0][1]}!`);

猜你喜欢

转载自blog.csdn.net/Yt7589/article/details/82287518