Es6 常见新特性 - JavaScript 中的语法糖

最新推荐文章于 2024-05-02 10:57:41 发布

Master_hl

最新推荐文章于 2024-05-02 10:57:41 发布

阅读量925

点赞数

分类专栏：大前端文章标签： es6 前端 javascript

本文链接：https://blog.csdn.net/xaiobit_hl/article/details/131358396

版权

大前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. Es6 概述

Es6 全称为 ECMAScript, 它是一种由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言. 这种语言在万维网上应用广泛, 它往往被称为 JavaScript 或 JScript, 所以它可以理解为是 JavaScript 中的一个标准, 但实际上后两者是 ECMA-262 标准实现和扩展.

2. Es6 的语法

2.1 let 和 const 命令

1. 创建 let和const命令.html.

2. 浏览器访问, F2 查看控制台.

<script>
    // 传统定义变量和常量的方式 : 统一使用 var
    var name = "传统->去百度";
    var link = "https:www.baidu.com";
    var PI = Math.PI;
    console.log(name);
    console.log(link);
    console.log(PI);

    // Es6 定义的方式
    let name2 = "Es6->去百度"
    let link2 = "https:www.baidu.com";
    // 定义常量
    const PI2 = Math.PI;
    console.log(name2);
    console.log(link2);
    console.log(PI2);
</script>

2.1.1 let 和 const 的区别

let 和 const 解决 var 的两个问题 :

1. var 的变量穿透问题

2. 常量修改问题

变量穿透问题:

<script>
    for(var i = 0;i<5;i++) {
        console.log(i);
    }
    //变量穿透 : 打印出来 5
    console.log(i); // 使用 let , 此处就会报错
</script>

常量修改问题:

<script>
    var PI = Math.PI;
    PI = 100; // 可修改
    console.log(PI);

    const PI2 = Math.PI;
    PI2 = 100; // 报错
    console.log(PI2);
</script>

虽然 let 和 const 解决了 var 所带来的两个问题, 但是在实际开发和生产中, 如果是小程序, uniapp 或者一些脚手架中, 还是可以大胆的使用 let 和 const, 如果是 web 开发, 还是建议使用 var, 因为在一些低版本的浏览器中还是不支持 let 和 const.

2.2 模板字符串

以前字符串中需要加入变量时, 我们都是使用 '' 或者 "" 来把字符串套起来.

而在 Es6 语法中, 支持使用 `` 【反引号】来简化字符串拼接.

代码示例 :

<script>
    // 字符串牵涉到动态部分
    var person = {
        name: "张三",
        address: "学习通",
        link: "https:www.baidu.com"
    };
    // 传统字符串拼接 :
    let result = "我是"+person.name+",我在"+person.address+"上找到了考试答案, 网址在这:"+person.link;
    console.log(result);
    // Es6 模板字符串 : 
    let result2 = `我是${person.name},我在${person.address}上找到了考试答案, 网址在这:${person.link}`;
    console.log(result2);
    // Es6 自动换行
    let result3 = `我是${person.name},我在${person.address}上
            找到了考试答案, 网址在这:${person.link}`;
    console.log(result3);
</script>

result 和 result2 的输出结果一样, result3 结果显示支持换行.

2.3 函数默认参数与箭头函数

2.3.1 函数默认参数

代码示例 :

调用两个参数的 sum 函数, 只传一个参数, 会得到 NAN.

<script>
    // 函数默认参数
    function sum(a,b) {  // 默认值为 undefined
        return a + b;
    }
    let result = sum(100); // 只传一个参数
    console.log(result); // NAN
</script>

而 Es6 支持函数默认参数 (对象/数字/字符串....), 如果函数带上默认参数, 结果就不会是 NAN 了.

<script>
    // 函数默认参数
    function sum(a=100,b=100) {
        return a + b;
    }
    let result = sum(100); // 只传一个参数
    console.log(result); // 200
</script>

2.3.2 箭头函数

箭头函数的4个规律 :

1. 去掉 function

2. 在括号后面加箭头(=>)

3. 如果逻辑代码仅有 return, 可以直接省去大括号{} 和 return.

4. 如果参数只有一个, 可以把括号也省去.

示例 1 - 多参数

传统函数写法 :

<script>
let sum = function(a,b) {
    return a + b;
}
</script>

箭头函数写法 1

<script>
let sum2 = (a,b)=>{
    return a + b;
}
</script>

箭头函数写法 2

<script>
let sum3 = (a,b)=>a + b;
</script>

示例 2 - 单参数

传统函数写法 :

<script>
let sum = function(a) {
    return a + 1
}
</script>

箭头函数写法

<script>
let sum3 = a=>a + 1;
</script>

2.4 对象初始化简写

Es6 对象简写规律:

1. 因为对象是 key:value 形式, 但 key 和变量的名字一致时, 可以只定义一次即可.

2. 如果 value 是一个数, 可以 `: funcion` 全部去掉, 只剩下 () 即可.

传统定义对象 :

<script>
// 传统定义对象
let info = {
    title:'三国演义',
    link:'https:www.baidu.com',
    go:function() {
        console.log("三英战吕布");
    }
};
<script>

Es6 定义对象:

<script>
// Es6 定义对象 - 简化
var title = '三国演义';
var link = 'https:www.baidu.com';
var info2 = {
    title:title,
    link:link,
    go:function() {
        console.log("三英战吕布");
    }
}
// Es6 定义对象 - 进一步简化
var info3 = {
    title,
    link,
    go() {
        console.log("三英战吕布");
    }
}
</script>

对象简写的应用场景 : 前端通过点击事件发送 ajax 请求

<form action="">
    <p>账号: <input type="text" id="account"></p>
    <p>密码: <input type="text" id="password"></p>
    <p><input type="button" value="登录" id="loginbtn"></p>
</form>

<script>
    jQuery("#loginbtn").on("click", function(){
        let account = jQuery("account").val();
        let password = jQuery("password").val();
        // 对象简写
        // let params = {account:account,password:password};
        let params = {account,passwrod};
        // 执行异步请求
        jQuery.ajax({
            type:'post',
            url:'xxx',
            data:params,
            // 箭头函数应用
            // success: function() {

            // }
            success(){

            }
        })
    });
</script>

2.5 对象解构

Es6 中对象解决其实就是快速获取属性和方法的一种形式.

【案例】

<script>
    var title = '三国演义';
    var link = 'https:www.baidu.com';
    var info = {
        title,
        link,
        go() {
            console.log("三英战吕布");
        }
    }
</script>

对于上述对象, 传统的获取对象属性和方法的方式有两种 :

1. 通过 . 来获取;

2. 通过 [] 来获取.

<script>
// 通过 . 的方式来获取
console.log(info.title);
console.log(info.link);
info.go();

// 通过 [] 的方式来获取
console.log(info['title']);
console.log(info['title']);
info['go']();
</script>

上述获取对象的属性相比于 Es6 中的方式来说还是比较繁琐的

Es6 获取对象属性 :

<script>
    var {title,link} = info;
</script>

上述 Es6 获取对象属性的代码等同于以下两行代码 :

<script>
    var title = info.title;
    var link = info.link;
</script>

2.6 传播操作符【...】

传播操作符可以快速的把一个对象中的一些属性或方法给到另一个对象中, 相当于继承一样, 非常方便.

【代码示例】

<script>
    // 对象传播操作符 ...
    var title = '三国演义';
    var address = "广东";
    var link = 'https:www.baidu.com';
    var info = {
        title,
        address,
        link,
        go() {
            console.log("三英战吕布");
        }
    }
    // 解构属性 title,address, 剩下的传递给 info2 对象
    var {title,address,...info2} = info;
    console.log(title);
    console.log(address);
    console.log(info2);
</script>

2.7 数组 map 和 reduce 方法使用

2.7.1 map 方法的使用

【代码示例 1】 - 处理数组中的数据

<script>
    // 对原数组每个元素 * 2
    let arr = [1,2,3,4,5,6,7];
    // 传统的方式
    let newarr = [];
    for(let i=0;i<arr.length;++i) {
        newarr.push(arr[i]*2);
    }
    console.log(newarr);
    
    // map -- 自带的循环，并且会把处理的值回填对应的位置
    var newarr2 = arr.map(function(ele){
        return ele * 2;
    });
    console.log(newarr2);
</script>

上述对数组每个元素 * 2 的 map 方法写法还可以根据箭头函数简写：

var newarr2 = arr.map(ele=>ele * 2);
console.log(newarr2);

【代码示例 2】 - 处理对象的数据

<script>
var users = [{age:10,name:"小张"},{age:12,name:"小王"},{age:14,name:"小雨"}];
var newusers = users.map(ele=>{
    ele.age = ele.age + 1;
    ele.check = true; // 给对象增加一个属性
    return ele;
});
console.log(newusers);
</script>

2.7.2 reduce 方法的使用

用法 : reduce (function(), 初始值(可选))

接收一个函数(必须) 和一个初始值(可选), 该函数会接收两个参数:

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

reduce 函数会从左到右依次把数组中的元素用 reduce 处理, 并把处理的结果作为 reduce 的第一个参数, 如果是第一次. 会把前两个元素作为计算参数. 或者把用户指定的初始值作为起始参数.

【代码示例】

<script>
    var arr = [1,2,3,4,5,6,7,8,9,10];
    // a = 1, b = 2 => 3
    // a = 3, b = 3 => 6
    // a = 6, b = 4 ....
    var result = arr.reduce(function(a,b) {
        return a + b;
    });
    console.log("result = ",result);
</script>

由于 nodejs 是基于服务端运行的 JavaScript, 那么这些语法糖是否可以运用在 nodejs 中呢 ?

毫无疑问是可以的, 大家可以自己尝试.