ES6语法

2021/6/14 18:22:54

编程Tag： ES6 title script var console name 语法 log

本文主要是介绍ES6语法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1、ES6的概述

小结：

ECMAScript是前端js的语法规范；可以应用在各种js环境中。如：浏览器或者node.js环境。它有很多版本：es1/2/3/5/6，很多新特性，可以在js环境中使用这些新特性。

2、ES6的语法：let和const命令

变量和常量的严格区分。

核心代码：

新建espro6\demo01.html如下

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#981a1a"><!</span><span style="color:#000000">DOCTYPE</span> <span style="color:#000000">html</span><span style="color:#981a1a">></span>
<span style="color:#981a1a"><</span><span style="color:#000000">html</span> <span style="color:#000000">lang</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"en"</span><span style="color:#981a1a">></span>
<span style="color:#981a1a"><</span><span style="color:#000000">head</span><span style="color:#981a1a">></span>
    <span style="color:#981a1a"><</span><span style="color:#000000">meta</span> <span style="color:#000000">charset</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"UTF-8"</span><span style="color:#981a1a">></span>
    <span style="color:#981a1a"><</span><span style="color:#000000">meta</span> <span style="color:#000000">name</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"viewport"</span> <span style="color:#000000">content</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#981a1a">></span>
    <span style="color:#981a1a"><</span><span style="color:#000000">meta</span> <span style="color:#000000">http</span><span style="color:#981a1a">-</span><span style="color:#000000">equiv</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"X-UA-Compatible"</span> <span style="color:#000000">content</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"ie=edge"</span><span style="color:#981a1a">></span>
    <span style="color:#981a1a"><</span><span style="color:#000000">title</span><span style="color:#981a1a">></span><span style="color:#000000">Document</span><span style="color:#981a1a"><</span><span style="color:#ff5500">/title></span>
<span style="color:#981a1a"><</span><span style="color:#ff5500">/head></span>
<span style="color:#981a1a"><</span><span style="color:#000000">body</span><span style="color:#981a1a">></span>
    <span style="color:#981a1a"><</span><span style="color:#000000">script</span><span style="color:#981a1a">></span>
         <span style="color:#aa5500">// 1： 在javascrit定义数据类型只有一种标识 - var</span>
         <span style="color:#aa5500">// 灵活拷问：js有数据类型吗？</span>
         <span style="color:#aa5500">// 有，string,number,Object, boolean, undefined</span>
         <span style="color:#aa5500">// 什么是语言：电脑内存中，人通过代码和电脑沟通。</span>
         <span style="color:#770088">let</span> <span style="color:#000000">name</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"zhangsan"</span>;
         <span style="color:#770088">let</span> <span style="color:#0000ff">age</span> <span style="color:#981a1a">=</span> <span style="color:#116644">100</span>;
         <span style="color:#770088">let</span> <span style="color:#0000ff">flag</span> <span style="color:#981a1a">=</span> <span style="color:#221199">false</span>;   
         <span style="color:#aa5500">//js被骂没常量</span>
         <span style="color:#770088">const</span> <span style="color:#0000ff">PI</span> <span style="color:#981a1a">=</span> <span style="color:#000000">Math</span>.<span style="color:#000000">PI</span>;
         <span style="color:#aa5500">// 修改会报错</span>
         <span style="color:#aa5500">//PI = 1245;</span>
         <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">PI</span>)

         <span style="color:#aa5500">//var或造成变量穿透  也就是循环中的变量作用域外可以用</span>
         <span style="color:#770088">for</span>(<span style="color:#770088">let</span> <span style="color:#0000ff">i</span><span style="color:#981a1a">=</span><span style="color:#116644">0</span>;<span style="color:#000000">i</span><span style="color:#981a1a"><</span><span style="color:#116644">5</span>;<span style="color:#000000">i</span><span style="color:#981a1a">++</span>){
             <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">i</span>);
         };
         <span style="color:#aa5500">//console.log("===这里就是变量穿透===>" + i)  如果用var定义i可以打印出5</span>

    <span style="color:#981a1a"><</span><span style="color:#ff5500">/script></span>
<span style="color:#981a1a"><</span><span style="color:#ff5500">/body></span>
<span style="color:#981a1a"><</span><span style="color:#ff5500">/html></span></span></span>

在实际的开发和生产中,如果是小程序,uniapp或者一些脚手架中的,可以大胆的使用let和const

如果是web开发.建议使用var, 因为在一些低版本的浏览器还是不支持let和const

3、ES6的语法：模板字符串

以前：我们都是使用 ‘’ 或者 “” 来把字符串套起来

现在： `` 【反引号】

第一个用途：基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">//es5    </span>
<span style="color:#770088">let</span> <span style="color:#0000ff">name</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'itcast'</span>    
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#aa1111">'hello '</span> <span style="color:#981a1a">+</span> <span style="color:#000000">name</span>)    <span style="color:#aa5500">//es6    </span>
<span style="color:#770088">const</span> <span style="color:#0000ff">name</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'itcast'</span>    
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#ff5500">`hello ${</span><span style="color:#000000">name</span><span style="color:#ff5500">}`</span>) <span style="color:#aa5500">//hello itcast</span></span></span>

第二个用途：在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

新建一个espro6\demo02.html如下：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#981a1a"><!</span><span style="color:#000000">DOCTYPE</span> <span style="color:#000000">html</span><span style="color:#981a1a">></span>
<span style="color:#981a1a"><</span><span style="color:#000000">html</span> <span style="color:#000000">lang</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"en"</span><span style="color:#981a1a">></span>
<span style="color:#981a1a"><</span><span style="color:#000000">head</span><span style="color:#981a1a">></span>
    <span style="color:#981a1a"><</span><span style="color:#000000">meta</span> <span style="color:#000000">charset</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"UTF-8"</span><span style="color:#981a1a">></span>
    <span style="color:#981a1a"><</span><span style="color:#000000">meta</span> <span style="color:#000000">name</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"viewport"</span> <span style="color:#000000">content</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#981a1a">></span>
    <span style="color:#981a1a"><</span><span style="color:#000000">meta</span> <span style="color:#000000">http</span><span style="color:#981a1a">-</span><span style="color:#000000">equiv</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"X-UA-Compatible"</span> <span style="color:#000000">content</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"ie=edge"</span><span style="color:#981a1a">></span>
    <span style="color:#981a1a"><</span><span style="color:#000000">title</span><span style="color:#981a1a">></span><span style="color:#000000">模板字符串</span><span style="color:#981a1a"><</span><span style="color:#ff5500">/title></span>
<span style="color:#981a1a"><</span><span style="color:#ff5500">/head></span>
<span style="color:#981a1a"><</span><span style="color:#000000">body</span><span style="color:#981a1a">></span>
    <span style="color:#981a1a"><</span><span style="color:#000000">script</span><span style="color:#981a1a">></span>
        <span style="color:#770088">var</span> <span style="color:#000000">username</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"张三"</span>;
        <span style="color:#770088">var</span> <span style="color:#0000ff">age</span> <span style="color:#981a1a">=</span> <span style="color:#116644">30</span>;
        <span style="color:#aa5500">// 1: 原始的做法就是去拼接字符串</span>
        <span style="color:#770088">var</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"我名字叫 "</span> <span style="color:#981a1a">+</span> <span style="color:#000000">username</span><span style="color:#981a1a">+</span><span style="color:#aa1111">",年龄是: "</span><span style="color:#981a1a">+</span><span style="color:#000000">age</span>;
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>);  
        <span style="color:#aa5500">// 2:用模板字符串来拯救 注意：这里是 `（飘键） (tab键盘的上面那个键)</span>
        <span style="color:#aa5500">// jdk1.9 </span>
        <span style="color:#770088">var</span> <span style="color:#0000ff">str2</span> <span style="color:#981a1a">=</span> <span style="color:#ff5500">`我名字叫 ${</span><span style="color:#000000">username</span><span style="color:#ff5500">},年龄是: ${</span><span style="color:#000000">age</span><span style="color:#ff5500">}`</span>;
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str2</span>);
    <span style="color:#981a1a"><</span><span style="color:#ff5500">/script></span>
<span style="color:#981a1a"><</span><span style="color:#ff5500">/body></span>
<span style="color:#981a1a"><</span><span style="color:#ff5500">/html></span></span></span>

4、ES6的语法：函数默认参数与箭头函数

函数默认参数 在方法的参数后面加上一个默认值即可 核心代码 双击espro6/demo03.html运行如下：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#981a1a"><!</span><span style="color:#000000">DOCTYPE</span> <span style="color:#000000">html</span><span style="color:#981a1a">></span>
<span style="color:#981a1a"><</span><span style="color:#000000">html</span> <span style="color:#000000">lang</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"en"</span><span style="color:#981a1a">></span>
<span style="color:#981a1a"><</span><span style="color:#000000">head</span><span style="color:#981a1a">></span>
    <span style="color:#981a1a"><</span><span style="color:#000000">meta</span> <span style="color:#000000">charset</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"UTF-8"</span><span style="color:#981a1a">></span>
    <span style="color:#981a1a"><</span><span style="color:#000000">meta</span> <span style="color:#000000">name</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"viewport"</span> <span style="color:#000000">content</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#981a1a">></span>
    <span style="color:#981a1a"><</span><span style="color:#000000">meta</span> <span style="color:#000000">http</span><span style="color:#981a1a">-</span><span style="color:#000000">equiv</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"X-UA-Compatible"</span> <span style="color:#000000">content</span><span style="color:#981a1a">=</span><span style="color:#aa1111">"ie=edge"</span><span style="color:#981a1a">></span>
    <span style="color:#981a1a"><</span><span style="color:#000000">title</span><span style="color:#981a1a">></span><span style="color:#000000">Document</span><span style="color:#981a1a"><</span><span style="color:#ff5500">/title></span>
<span style="color:#981a1a"><</span><span style="color:#ff5500">/head></span>
<span style="color:#981a1a"><</span><span style="color:#000000">body</span><span style="color:#981a1a">></span>
    <span style="color:#981a1a"><</span><span style="color:#000000">script</span><span style="color:#981a1a">></span>
        <span style="color:#aa5500">// 默认参数 给参数列表设定初始值</span>
        <span style="color:#770088">function</span> <span style="color:#0000ff">add</span>(<span style="color:#0000ff">a</span> <span style="color:#981a1a">=</span><span style="color:#116644">100</span>,<span style="color:#0000ff">b</span><span style="color:#981a1a">=</span><span style="color:#116644">100</span>) {
            <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#0055aa">a</span>,<span style="color:#0055aa">b</span>);    
        }
        <span style="color:#aa5500">// 执行方法，会用默认值填充，打印出来100,200</span>
        <span style="color:#000000">add</span>();
        <span style="color:#aa5500">// 覆盖默认值打印  结果是1，2      </span>
        <span style="color:#000000">add</span>(<span style="color:#116644">1</span>,<span style="color:#116644">2</span>);
    <span style="color:#981a1a"><</span><span style="color:#ff5500">/script></span>
<span style="color:#981a1a"><</span><span style="color:#ff5500">/body></span>
<span style="color:#981a1a"><</span><span style="color:#ff5500">/html></span></span></span>

==箭头函数==

箭头函数简化函数的定义，可以让我们不用使用function关键字

<span style="background-color:#f8f8f8"><span style="color:#333333">/*
箭头函数最直观的三个特点。
    1不需要function关键字来创建函数,在括号后面加箭头
    2省略return关键字,(如果里面是逻辑体,就不能省略)  去掉return的同时去掉{}
    3继承当前上下文的 this 关键字
    4.如果参数只有一个,可以把()也省去
*/</span></span>

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">var</span> <span style="color:#0000ff">arr</span> <span style="color:#981a1a">=</span> [<span style="color:#116644">1</span>,<span style="color:#116644">2</span>,<span style="color:#116644">3</span>,<span style="color:#116644">4</span>,<span style="color:#116644">5</span>]      <span style="color:#aa5500">//原型</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">newarr</span> <span style="color:#981a1a">=</span> <span style="color:#000000">arr</span>.<span style="color:#000000">map</span>(<span style="color:#770088">function</span>(<span style="color:#0000ff">obj</span>){
    <span style="color:#770088">return</span> <span style="color:#0055aa">obj</span> <span style="color:#981a1a">*</span> <span style="color:#116644">2</span>;
})
<span style="color:#aa5500">//改变</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">newarr</span> <span style="color:#981a1a">=</span> <span style="color:#000000">arr</span>.<span style="color:#000000">map</span>((<span style="color:#0000ff">obj</span>)<span style="color:#981a1a">=></span>{   <span style="color:#aa5500">//去掉function变为=></span>
    <span style="color:#770088">return</span> <span style="color:#0055aa">obj</span> <span style="color:#981a1a">*</span> <span style="color:#116644">2</span>;
})
<span style="color:#770088">var</span> <span style="color:#0000ff">newarr</span> <span style="color:#981a1a">=</span> <span style="color:#000000">arr</span>.<span style="color:#000000">map</span>((<span style="color:#0000ff">obj</span>)<span style="color:#981a1a">=></span><span style="color:#0055aa">obj</span> <span style="color:#981a1a">*</span> <span style="color:#116644">2</span>)   <span style="color:#aa5500">//去掉return和{}</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">newarr</span> <span style="color:#981a1a">=</span> <span style="color:#000000">arr</span>.<span style="color:#000000">map</span>(<span style="color:#0000ff">obj</span><span style="color:#981a1a">=></span><span style="color:#0055aa">obj</span> <span style="color:#981a1a">*</span> <span style="color:#116644">2</span>)     <span style="color:#aa5500">//只有一个参数,去掉()</span></span></span>

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#555555"><!DOCTYPE html></span>
<span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">http-equiv</span>=<span style="color:#aa1111">"X-UA-Compatible"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"ie=edge"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>箭头函数<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
        <span style="color:#aa5500">// 箭头函数</span>
        <span style="color:#aa5500">// 它也是一种函数的定义，它简化定义仅此而已。</span>
        <span style="color:#aa5500">// 步骤：1：去掉function  2: 括号后面加箭头。</span>
        <span style="color:#aa5500">// 1:声明式的定义</span>
        <span style="color:#770088">function</span> <span style="color:#0000ff">add</span> (){
        };
        <span style="color:#aa5500">// 2:表达式的定义</span>
        <span style="color:#770088">var</span> <span style="color:#0000ff">add2</span> <span style="color:#981a1a">=</span> <span style="color:#770088">function</span>(){
        }     
        <span style="color:#aa5500">// 3:箭头函数的定义</span>
        <span style="color:#770088">var</span> <span style="color:#0000ff">sum</span> <span style="color:#981a1a">=</span> (<span style="color:#0000ff">a</span> <span style="color:#981a1a">=</span> <span style="color:#116644">100</span>,<span style="color:#0000ff">b</span> <span style="color:#981a1a">=</span> <span style="color:#116644">300</span>)<span style="color:#981a1a">=></span>{
            <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#0055aa">a</span><span style="color:#981a1a">+</span><span style="color:#0055aa">b</span>);
        };
        <span style="color:#aa5500">// 这里执行箭头函数</span>
        <span style="color:#000000">sum</span>(<span style="color:#116644">50</span>,<span style="color:#116644">50</span>);
        <span style="color:#aa5500">// 这里执行箭头函数</span>
        <span style="color:#000000">sum</span>();
        <span style="color:#aa5500">// 这里执行箭头函数</span>
        <span style="color:#000000">sum</span>(<span style="color:#116644">400</span>);
    <span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

5、ES6的语法：对象初始化简写

核心代码

它是指：如果一个对象中的key和value的名字一样的情况下可以定义成一个。

<span style="background-color:#f8f8f8"><span style="color:#333333">    <span style="color:#981a1a"><</span><span style="color:#000000">script</span><span style="color:#981a1a">></span>
        <span style="color:#770088">let</span> <span style="color:#000000">info</span> <span style="color:#981a1a">=</span> {
            <span style="color:#000000">title</span>:<span style="color:#aa1111">"前端学习"</span>,
            <span style="color:#000000">link</span>:<span style="color:#aa1111">"http://www.kuangstudy.com"</span>,
            <span style="color:#000000">go</span>:<span style="color:#770088">function</span>(){
                <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#aa1111">"我骑着小蓝车去上班！"</span>);
            }
        };
        <span style="color:#aa5500">// ES6简写</span>
        <span style="color:#770088">var</span> <span style="color:#0000ff">title</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"前端学习"</span>;
        <span style="color:#770088">var</span> <span style="color:#0000ff">link</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"http://www.kuangstudy.com"</span>
        <span style="color:#770088">let</span> <span style="color:#0000ff">info2</span> <span style="color:#981a1a">=</span> {
            <span style="color:#000000">title</span>,
            <span style="color:#000000">link</span>,
            <span style="color:#000000">go</span>(){
                <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#aa1111">"我骑着小蓝车去上班！"</span>);
            }
        };
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">info2</span>.<span style="color:#000000">title</span>);
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">info2</span>.<span style="color:#000000">link</span>);
        <span style="color:#000000">info2</span>.<span style="color:#000000">go</span>();
    <span style="color:#981a1a"><</span><span style="color:#ff5500">/script></span></span></span>

规律：因为对象是key:value存在

如果key和变量名字一致，可以定义一次即可
如果value是一个函数，可以把:function去掉，只剩下()即可

双击espro6\demo06.html

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#555555"><!DOCTYPE html></span>
<span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">http-equiv</span>=<span style="color:#aa1111">"X-UA-Compatible"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"ie=edge"</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>对象简写<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
    <span style="color:#770088">function</span> <span style="color:#0000ff">person</span>(<span style="color:#0000ff">name</span>, <span style="color:#0000ff">age</span>) {
        <span style="color:#aa5500">//return {name:name,age:age};</span>
        <span style="color:#aa5500">// 对象简写</span>
        <span style="color:#770088">return</span> { <span style="color:#000000">name</span>, <span style="color:#000000">age</span> };
    };
    <span style="color:#aa5500">// 调用和执行</span>
    <span style="color:#770088">var</span> <span style="color:#0000ff">json</span> <span style="color:#981a1a">=</span> <span style="color:#000000">person</span>(<span style="color:#aa1111">"小花花美美"</span>, <span style="color:#116644">20</span>);
    <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">json</span>.<span style="color:#000000">name</span>, <span style="color:#000000">json</span>.<span style="color:#000000">age</span>);
    <span style="color:#aa5500">//========================= 实战应用 =========================</span>
    <span style="color:#aa5500">//<button onclick="login()">登录</button></span>
    <span style="color:#770088">function</span> <span style="color:#0000ff">login</span>() {
        <span style="color:#770088">var</span> <span style="color:#0000ff">username</span> <span style="color:#981a1a">=</span> <span style="color:#000000">$</span>(<span style="color:#aa1111">"#username"</span>).<span style="color:#000000">val</span>();
        <span style="color:#770088">var</span> <span style="color:#0000ff">password</span> <span style="color:#981a1a">=</span> <span style="color:#000000">$</span>(<span style="color:#aa1111">"#password"</span>).<span style="color:#000000">val</span>();
        <span style="color:#aa5500">// 发送ajax</span>
        <span style="color:#000000">$</span>.<span style="color:#000000">ajax</span>({
            <span style="color:#000000">type</span>: <span style="color:#aa1111">"post"</span>,
            <span style="color:#aa5500">// 对象简写</span>
            <span style="color:#000000">data</span>: { <span style="color:#000000">username</span>, <span style="color:#000000">password</span> },
            <span style="color:#aa5500">// 原始写分</span>
            <span style="color:#aa5500">//data:{username:username,password:password},</span>
            <span style="color:#000000">success</span>() {
            }
        });
    }
<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

6. 对象解构

es6提供一些获取快捷获取对象属性和行为方式

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#981a1a"><</span><span style="color:#000000">script</span><span style="color:#981a1a">></span>
        <span style="color:#770088">var</span> <span style="color:#000000">title</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"前端学习"</span>;
        <span style="color:#770088">var</span> <span style="color:#0000ff">link</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"http://www.kuangstudy.com"</span>
        <span style="color:#770088">let</span> <span style="color:#0000ff">info2</span> <span style="color:#981a1a">=</span> {
            <span style="color:#000000">title</span>,
            <span style="color:#000000">link</span>,
            <span style="color:#000000">go</span>(){
                <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#aa1111">"我骑着小蓝车去上班！"</span>);
            }
        };
        <span style="color:#aa5500">// 对象是key:value的存在，获取对象属性和方法的方式有两种</span>
        <span style="color:#aa5500">// 方式一：.</span>
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">info2</span>.<span style="color:#000000">title</span>);
        <span style="color:#aa5500">// 方式二：["属性或方法"]</span>
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">info2</span>[<span style="color:#aa1111">"link"</span>]);
        <span style="color:#000000">info2</span>[<span style="color:#aa1111">"go"</span>]();
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#aa1111">"======================="</span>);
        <span style="color:#aa5500">// es6:</span>
        <span style="color:#770088">var</span>{<span style="color:#0000ff">title</span>,<span style="color:#0000ff">link</span>,<span style="color:#0000ff">go</span>} <span style="color:#981a1a">=</span> <span style="color:#000000">info2</span>;
        <span style="color:#aa5500">// 代码还原</span>
        <span style="color:#aa5500">// var title = info2.title;</span>
        <span style="color:#aa5500">// var link = info2.link;</span>
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">title</span>,<span style="color:#000000">link</span>);
        <span style="color:#000000">go</span>();
    <span style="color:#981a1a"><</span><span style="color:#ff5500">/script></span></span></span>

7. 对象传播操作符

把一个对象的属性传播到另外一个对象中

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#981a1a"><</span><span style="color:#000000">script</span><span style="color:#981a1a">></span>
        <span style="color:#770088">var</span> <span style="color:#000000">person</span> <span style="color:#981a1a">=</span> {
            <span style="color:#000000">name</span>:<span style="color:#aa1111">"张三"</span>,
            <span style="color:#000000">add</span>:<span style="color:#aa1111">"广东"</span>,
            <span style="color:#000000">link</span>:<span style="color:#aa1111">"https://www.kuangstudy.com"</span>,
            <span style="color:#000000">tel</span>:<span style="color:#aa1111">"1234567"</span>,
            <span style="color:#000000">go</span>(){
                <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#aa1111">"上班！"</span>);
            }
        }
        <span style="color:#aa5500">// 解构</span>
        <span style="color:#770088">var</span> {<span style="color:#0000ff">name</span>,<span style="color:#0000ff">add</span>,<span style="color:#555555">...</span><span style="color:#0000ff">person2</span>} <span style="color:#981a1a">=</span> <span style="color:#000000">person</span>;
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">name</span>);
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">add</span>);
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">person2</span>);
    <span style="color:#981a1a"><</span><span style="color:#ff5500">/script></span></span></span>

name和add已经被取出来了,所以剩下的全部给person2

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#555555"><!DOCTYPE html></span>
<span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">http-equiv</span>=<span style="color:#aa1111">"X-UA-Compatible"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"ie=edge"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>ES6的语法：传播操作符【...】<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
        <span style="color:#aa5500">// 1： 定义一个对象</span>
        <span style="color:#770088">var</span> <span style="color:#0000ff">person1</span> <span style="color:#981a1a">=</span> {
            <span style="color:#000000">name</span>: <span style="color:#aa1111">'小飞飞'</span>,
            <span style="color:#000000">age</span>: <span style="color:#116644">16</span>,
        };
        <span style="color:#aa5500">// 2： 对象解构</span>
        <span style="color:#770088">var</span> {<span style="color:#0000ff">name</span>,<span style="color:#0000ff">age</span>} <span style="color:#981a1a">=</span> <span style="color:#000000">person1</span>;
        <span style="color:#aa5500">// =========================== ... 对象融合=====================</span>
        <span style="color:#770088">var</span> <span style="color:#0000ff">person2</span> <span style="color:#981a1a">=</span> {
            <span style="color:#555555">...</span><span style="color:#000000">person1</span>,
            <span style="color:#000000">gender</span>:<span style="color:#116644">1</span>,
            <span style="color:#000000">tel</span>:<span style="color:#116644">13478900</span>
        };
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">person2</span>);
        <span style="color:#aa5500">// =========================== ... 对象取值=====================</span>
        <span style="color:#aa5500">// ... 对象取值</span>
        <span style="color:#770088">var</span> <span style="color:#0000ff">person3</span> <span style="color:#981a1a">=</span> {
            <span style="color:#000000">name</span>:<span style="color:#aa1111">"李四"</span>,
            <span style="color:#000000">gender</span>:<span style="color:#116644">1</span>,
            <span style="color:#000000">tel</span>:<span style="color:#aa1111">"11111"</span>,
            <span style="color:#000000">address</span>:<span style="color:#aa1111">'广州'</span>
        };
        <span style="color:#aa5500">// ...person4 把剩下没取走给我。</span>
        <span style="color:#770088">var</span> {<span style="color:#0000ff">name</span>,<span style="color:#0000ff">gender</span>,<span style="color:#555555">...</span><span style="color:#0000ff">person4</span>} <span style="color:#981a1a">=</span> <span style="color:#000000">person3</span>;
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">name</span>)
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">age</span>)
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">person4</span>)
        <span style="color:#aa5500">// =================场景分析 -----伪代码========================</span>
        <span style="color:#aa5500">// 模拟后台：异步查询返回用户数据 如下：</span>
        <span style="color:#770088">function</span> <span style="color:#0000ff">findUsers</span>(){
            <span style="color:#000000">$</span>.<span style="color:#000000">get</span>(<span style="color:#aa1111">"xxxxx"</span>,<span style="color:#770088">function</span>(<span style="color:#0000ff">res</span>){
                <span style="color:#770088">var</span> <span style="color:#0000ff">res</span> <span style="color:#981a1a">=</span> {
                    <span style="color:#000000">pages</span>:<span style="color:#116644">11</span>,
                    <span style="color:#000000">pageSize</span>:<span style="color:#116644">10</span>,
                    <span style="color:#000000">pageNo</span>:<span style="color:#116644">1</span>,
                    <span style="color:#000000">firstFlag</span>:<span style="color:#221199">true</span>,
                    <span style="color:#000000">lastFlag</span>:<span style="color:#221199">false</span>,
                    <span style="color:#000000">total</span>:<span style="color:#116644">123</span>,
                    <span style="color:#000000">data</span>:[{},{},{},{}],
                };
                <span style="color:#aa5500">// ==========================对象 ... 取值===============</span>
                <span style="color:#770088">var</span> {<span style="color:#000000">data</span>:<span style="color:#0000ff">users</span>,<span style="color:#555555">...</span><span style="color:#0000ff">pagesjon</span>} <span style="color:#981a1a">=</span> <span style="color:#0055aa">res</span>;
                <span style="color:#aa5500">//等价于</span>
                <span style="color:#aa5500">/*  var users = res.data;</span>
<span style="color:#aa5500">                   var pagesjon = {</span>
<span style="color:#aa5500">                    res = {</span>
<span style="color:#aa5500">                        pages:11,</span>
<span style="color:#aa5500">                        pageSize:10,</span>
<span style="color:#aa5500">                        pageNo:1,</span>
<span style="color:#aa5500">                        firstFlag:true,</span>
<span style="color:#aa5500">                        lastFlag:false,</span>
<span style="color:#aa5500">                        total:123,</span>
<span style="color:#aa5500">                    }; */</span>
            })
        }
    <span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

8、ES6的语法：数组map和reduce方法使用(了解)

map — 自带的循环

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#981a1a"><</span><span style="color:#000000">script</span><span style="color:#981a1a">></span>
        <span style="color:#770088">let</span> <span style="color:#000000">arr</span> <span style="color:#981a1a">=</span> [<span style="color:#116644">1</span>,<span style="color:#116644">2</span>,<span style="color:#116644">3</span>,<span style="color:#116644">4</span>,<span style="color:#116644">5</span>,<span style="color:#116644">6</span>,<span style="color:#116644">7</span>];
        <span style="color:#aa5500">// 让数组中每一个元素都乘以2</span>
        <span style="color:#aa5500">// 传统方式</span>
        <span style="color:#770088">let</span> <span style="color:#0000ff">newarr</span> <span style="color:#981a1a">=</span> [];
        <span style="color:#770088">for</span>(<span style="color:#770088">let</span> <span style="color:#0000ff">i</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>; <span style="color:#000000">i</span> <span style="color:#981a1a"><</span> <span style="color:#000000">arr</span>.<span style="color:#000000">length</span>; <span style="color:#000000">i</span><span style="color:#981a1a">++</span>){
            <span style="color:#000000">newarr</span>.<span style="color:#000000">push</span>(<span style="color:#000000">arr</span>[<span style="color:#000000">i</span>] <span style="color:#981a1a">*</span> <span style="color:#116644">2</span>);
        }
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">newarr</span>);
        <span style="color:#aa5500">// map -- 自带的循环，并且会把处理的值回填对应的位置</span>
        <span style="color:#770088">let</span> <span style="color:#0000ff">arr2</span> <span style="color:#981a1a">=</span> <span style="color:#000000">arr</span>.<span style="color:#000000">map</span>(<span style="color:#770088">function</span>(<span style="color:#0000ff">ele</span>){
            <span style="color:#770088">return</span> <span style="color:#0055aa">ele</span> <span style="color:#981a1a">*</span> <span style="color:#116644">2</span>;
        });
        <span style="color:#aa5500">//使用箭头函数省略形式</span>
        <span style="color:#770088">var</span> <span style="color:#0000ff">arr2</span> <span style="color:#981a1a">=</span> <span style="color:#000000">arr</span>.<span style="color:#000000">map</span>(<span style="color:#0000ff">ele</span><span style="color:#981a1a">=></span> <span style="color:#0055aa">ele</span> <span style="color:#981a1a">*</span> <span style="color:#116644">2</span>);
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">arr2</span>);
        <span style="color:#aa5500">// map处理对象的数据</span>
        <span style="color:#770088">let</span> <span style="color:#0000ff">users</span> <span style="color:#981a1a">=</span> [{<span style="color:#000000">age</span>:<span style="color:#116644">10</span>,<span style="color:#000000">name</span>:<span style="color:#aa1111">"小学"</span>},{<span style="color:#000000">age</span>:<span style="color:#116644">12</span>,<span style="color:#000000">name</span>:<span style="color:#aa1111">"小相"</span>},{<span style="color:#000000">age</span>:<span style="color:#116644">13</span>,<span style="color:#000000">name</span>:<span style="color:#aa1111">"小学"</span>}];
        <span style="color:#770088">let</span> <span style="color:#0000ff">newusers</span> <span style="color:#981a1a">=</span> <span style="color:#000000">users</span>.<span style="color:#000000">map</span>(<span style="color:#770088">function</span>(<span style="color:#0000ff">ele</span>){
            <span style="color:#aa5500">// 简写：let newusers = users.map(ele => {})</span>
            <span style="color:#aa5500">// 过了一年</span>
            <span style="color:#0055aa">ele</span>.<span style="color:#000000">age</span><span style="color:#981a1a">++</span>;
            <span style="color:#770088">return</span> <span style="color:#0055aa">ele</span>;
        });
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">newusers</span>);
    <span style="color:#981a1a"><</span><span style="color:#ff5500">/script></span></span></span>

接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：第一个参数是上一次reduce处理的结果第二个参数是数组中要处理的下一个元素 reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">//map --自带循环,并且会把处理的值回填到对应的位置</span>
<span style="color:#981a1a"><</span><span style="color:#000000">script</span><span style="color:#981a1a">></span>
        <span style="color:#770088">let</span> <span style="color:#000000">arr</span> <span style="color:#981a1a">=</span> [<span style="color:#116644">1</span>,<span style="color:#116644">2</span>,<span style="color:#116644">3</span>,<span style="color:#116644">4</span>,<span style="color:#116644">5</span>,<span style="color:#116644">6</span>,<span style="color:#116644">7</span>,<span style="color:#116644">8</span>,<span style="color:#116644">9</span>,<span style="color:#116644">10</span>];
        <span style="color:#770088">let</span> <span style="color:#0000ff">result</span> <span style="color:#981a1a">=</span> <span style="color:#000000">arr</span>.<span style="color:#000000">reduce</span>(<span style="color:#770088">function</span>(<span style="color:#0000ff">a</span>,<span style="color:#0000ff">b</span>){
            <span style="color:#770088">return</span> <span style="color:#0055aa">a</span> <span style="color:#981a1a">+</span> <span style="color:#0055aa">b</span>;
        });
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">result</span>);
    <span style="color:#981a1a"><</span><span style="color:#ff5500">/script></span>
<span style="color:#aa5500">//1+2   3+3   6+4   10+5</span></span></span>

javaScrip代码可以直接放在node.js中运行

学习笔记: 来自b站狂神说学习笔记

遇见狂神说的个人空间_哔哩哔哩_Bilibili

这篇关于ES6语法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！