es6簡單介紹

時間  2019-11-08
標籤 es6 簡單 介紹 欄目 JavaScript 简体版
原文   原文鏈接

es6簡單介紹

目錄：javascript

　　一、ECMAScript 6 簡介html

　　二、let,var和const命令vue

　　三、變量的解構賦值java

　　四、字符串的擴展之模板字符串es6

　　五、函數的擴展ajax

　　六、數組的擴展編程

　　七、對象的擴展json

　　八、類數組

　　九、維護學生信息的一個小示例app

　　十、import 和 export

 

一、ECMAScript 6 簡介

ECMAScript 6.0（如下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在 2015 年 6 月正式發佈了。

它的目標，是使得 JavaScript 語言能夠用來編寫複雜的大型應用程序，成爲企業級開發語言。

ECMA：國際標準組織

 

二、let,var和const命令

const：是用來定義一個常量的

  const a ='hello'  //const就是定義一個常量
                    //常量是不能修改的

let：是用來定義一個塊級做用域的變量

let和val都是用來聲明變量的，可是兩者又有不一樣

let 先聲明後使用，不存在變量提高
let 不能重複定義,可是能夠修改
var 既能夠先聲明後使用，也能夠先使用後聲明，這樣不會報錯，會打印undified,而let必須是先聲明後使用，若是沒有聲明就會報錯

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
</head>
<body>
    <script>


//        const PI = 3.14;
//        const a='hello';
////        a = 'word' ; //這樣會出錯,常量是不能夠被修改的
//        s = a.split("l");  //js中字符串的切割方法
//        console.log(a);
//        console.log(s);

//        ==============================
        //變量提高，
//
//        console.log(b);  //會打印undefined,先使用後聲明，可是不會報錯
//        var b=123456;


//        var b;
//        console.log(b);   //undefined   先聲明後使用
//        b=123456;
//
//        =================================
        let c=100;    //let不存在變量提高
        if (10>9){
            let c=200;
            console.log(c)  //200
        }
        console.log(c)  //100
    </script>
</body>
</html>

const-let示例
例子

 

三、變量的解構賦值

 數組解構賦值，就是把數組元素的值按照順序依次賦值

 解構變量就是賦值，用更少的代碼來解決更多的事情

數據的解構和賦值

let ary = [1,2,3]

解構：

let [a, b, c] = ary

let obj = {

username: 'xxx'，

age:23

}

let {username, age}= obj; # 沒有賦值是默認二者相同

let {username:新的名字, age:新的名字}= obj;

  • 解構的左右兩端爲相同的數據類型

let a=1;

let b=2;

[a, b] = [b, a]

  • 交換數據的賦值須要放入數組中

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
</head>
<body>
<script>
//    ==============通常的操做================
//    let arr = [11,22,55,444];
//    let a = arr[0];
//    let b = arr[1];
//    let c = arr[2];
//    let d= arr[3];
//    console.log(a,b,c,d)  //11 22 55 444

//    ===============升級版的操做============
//    let[a,b,c] = [88,55,77];   //解構賦值的目的就是縮減代碼，吧上面幾行顯示的用一行來替代
//    console.log(a,b,c)  //88 55 77
//
//     let[a,b,c,[d]] = [88,55,77,100];  //會報錯
//     let[a,b,c,[d]] = [88,55,77,[100]];  //左邊和右邊的格式定義成同樣的
//     console.log(a,b,c,d) ; //88 55 77 100
//
//    let obj={
//        al:"json",
//        a2:23,
//        a3:666
//    };
//    let {aa,bb}=obj;
//    console.log(aa,bb);  //undified


    let obj2={
        a5:"dddff",
        "a4":"jggz",
        a2:[11,22],
        a3:666,
        a1:'jaas'
    };
    let {a1,a2,a3,a4,a5}=obj2;   //注意格式是一致的，而且和裏面的鍵對應
    console.log(a2,a1,a3,a4,a5);  //undified
</script>
</body>
</html>

變量的解構賦值
例子

 

四、字符串的擴展之模板字符串

經過反引號來使用，字符串當中可使用變量。能夠當作普通字符串來處理，可使用多行字符串

傳統的 JavaScript 語言，輸出模板一般是這樣寫的。

上面這種寫法至關繁瑣不方便，ES6 引入了模板字符串解決這個問題。

模板字符串（template string）是加強版的字符串，用反引號（`）標識。它能夠看成普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>

</head>
<body>
    <div>
        <h1>asdasd</h1>
        <ul id="qwe"></ul>
    </div>

<script>
        let name=`瞎耍`;
        console.log("他的名字叫"+name);
        console.log(`他的名字叫${name}`);  //反引號，不是單引號

        let ele = document.getElementById("qwe");
        console.log(ele);
        ele.innerHTML=`
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li> `
    </script>
</body>
</html>

反引號示例
例子

 

五、函數的擴展

function foo(x, y){

let number = y || 10;

return number

}

foo(1, 2)

foo(1)

foo(1, 0)

function foo(x, y=10){}

  • ES6有了默認值參數

  • 箭頭函數

    • 一個參數

    • v => v;

      let foo = v => v;
      ret = foo(10);
      console.log(ret); 10

    • 0和或者多個參數

    • let bar = (x, y)=>{return x + y;}

  • 箭頭函數的使用規則

    • 定義的時候在什麼地方，未來就不會改變了

    • 箭頭函數的this指向定義時的做用域

    • 普通函數的this指向調用者的做用域

能夠給函數設置默認參數

剩餘參數：function func(a,...b){}
func(11,22,33)
則：b=[22,33]

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script>
//        function func1(x) {
//            alert(x)
//        }
//        func1(12306);

//        function func2(x=12,y=90,z=6) {   //默認參數
//            alert(x+y+z)  //108
//        }
//       func2()
//
//        function func3(x) {   //默認參數
//            console.log(x)  //11
//        }
//       func3(11,22,33,44)
//
//        function func4(x,...y) {   //默認參數
//            console.log(y)
//        }
//       func4(11,22,33.22,44);  //多餘的參數給了y
//
        function func4(x,...y) {   //默認參數
            console.log(x,y)//{a: 22, b: 33}  []
        }
//       func4({a:22,b:33});
       func4(x=2,y=300);  //2,300
    </script>
</head>
<body>

</body>
</html>

函數的擴展
例子

 

模塊化編程

對象的單體模式

let obj = {
   naem : 'xxx'.
   foo(){
       console.log(this.name);
   }
}
obj.foo() # xxx

  • 解決了箭頭函數的this指向問題

 

六、數組的擴展

 一、判斷數組當中是否存在某個數值
      console.log(arr.indexOf(1000))
      console.log(arr.includes(201))
   二、對數組的遍歷
      forEach()：範圍比map廣，他能作的事情map不必定能作
      map()：map能作的事情forEach必定能作

      arr.forEach(function (value,index) {
            console.log(value);
      })

      //也能夠不用map,在forEach裏面就能作操做，爲了簡單用一個map也能夠解決，具體見示例
      var arr2 = arr.map(function (value,index) {
            return value+1
      })
    3)對數組的過濾
     var arr4 = arr.filter(function (value,index) {
                return value > 50
            })
            console.log(arr4);

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script>
//        var arr=[77,88,99,44];
//        //若是對數組進行循環，用for循環
//        var arr2=[];
//        for (var i=0;i<arr.length;i++){
//            arr2.push(arr[i]+1);
//        }
//        console.log(arr2);

//        ===============================
//        var arr=[77,88,99,44];
//        //在es6中的循環以下，對裏面的元素都加1
//        arr.forEach(function (value,index,arr) {
//            console.log(value);// 77 88 99 44
//            console.log(index); //0 1 2 3
//        });
//        var arr2=arr.map(function (value,index) {  //map是一個循環生成一個新的數組
//            return value+1
//        });
//        console.log(arr2);//78 89 100 45


//        //查詢一下90在不在arr裏面,通常可用於判斷
//        var arr2=[11,22,33,44];
//        console.log(arr2.indexOf(44));  //3  根據值取索引,若是有就顯示索引，沒有就顯示-1
//        console.log(arr2.indexOf(1000)) ; //-1 根據值取索引,若是有就顯示索引，沒有就顯示-1
//
//        console.log(arr2.includes(33)) ; // true 看包含不包含，若是包含返回true，不包含返回false

//==============================================
//        let arr3=[11,22,33];
//        for (var i in arr3){
//            console.log(i) ; //打印的是索引
//            console.log(arr3[i]);  //打印值
//        }
//        for (var j of arr3) {
//            console.log(j); //打印的是值
//        }

//       過濾 =====================================
        arr = [51,2,14,845];
//        var arr4 = arr.filter(function (value,index){
//            console.log(value);
//            if (value>50){
//                return value   //[51, 845]
//            }
//        });
//        console.log(arr4)

         var arr4 = arr.filter(function (value,index) {
                return value>50  //和map同樣，必定要有個返回值
        })
        console.log(arr4)
    </script>
</head>
<body>

</body>
</html>

對數組的擴展
對數組的擴展

 

七、對象的擴展

對象當中的屬性能夠簡寫，對象當中的方法也能夠簡寫

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script>

//        let username="海燕";
//        function fun() {
//            alert(888)
//        }
//        let obj={username,fun};  //若是上面定義的變量和對象的key的名字同名，就不用寫value了，直接把變量賦值給了對象的value
//        console.log(obj.username); //海燕
//        obj.fun();  //alert(888)



        //對函數的簡寫
//        let username="海燕";
//        console.log(obj.username) ;
//        let obj={username,fun(){console.log(123)}};
//        obj.fun();  //123/海燕

        //發送ajax請求的簡寫
        var username=$("#text1").val();
        var password=$("#text2").val();
        $.get(
            url,
            {username, password},
            function () {})

    </script>

</head>
<body>

</body>
</html>

對象的擴展
例子

 

八、類

 

類的擴展

 

<script>
 # ES5
 function Person(){
       this.username = 'xxx';
       this.age = 20;
 }
 Person.prototype.showInfo = function(){
      console.log(this.username);   
 }
 let xxx = new Person();
</script>
ES6
​
class Person{
   constructor (username, age, mind){
       this.username = username;
       this.age = age;
       this.mind = mind;
   }
   showInfo(){
       console.log(this.username, this.age. this.mind)
   }
}
let xxx = new Person('xxx', 18, '000);
xxx.showInfo()
​

  • class關鍵字定義一個類

    • 必須有constructor方法（構造方法，若是沒有，constructor{}

    • 必須使用new來實例化

  • 類的繼承

    • 必須在子類的constructor方法中寫super方法

​
class Peiqi extends Person{
 constructor (username, age){
  super()
       this.username = username;
       this.age = age;
   }    
}
​
let peiqi = new Peiqi('peiqi', 73)
peiqi.shoeInfo() # 繼承了父類

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script>
        var age2 = 99;
        Object.prototype.age2=age2;

        function Person(name,age) {   //建立一我的類
            this.name = name;  //屬性
            this.age = age;
            this.run = function () {
//                alert(this.name+"跑起來")
                alert(`${this.name}跑起來`)
            };
            this.sing = function () {
                alert(`${this.name}能唱歌能條`)
            }  //會執行裏面的sing方法,若是這裏沒有，執行外面的sing
        }
        Person.prototype.sing = function () {  //對函數進行擴展，增長了一個方法
               alert(`${this.name}能唱歌`)
        };

        let man = new Person('小妹',19);
        console.log(man.name);
        console.log(man.age);
        man.run();
        man.sing();
    </script>
</head>
<body>

</body>
</html>

類的示例
類的實例

 

九、維護學生信息的一個小示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        .box{
            position: absolute;
            top: 250px;
            left: 600px;
            border: 1px solid black;
            background-color: slategray;
            width: 200px;
            height: 180px;
        }
    </style>
</head>
<body>
<div id="app">
    <p><input type="text" v-model="username"></p>
    <p><input type="text" v-model="age"></p>
    <p><input type="submit" value="添加" @click="add"></p>

    <table border="1" cellpadding="0">
        <tr v-for="(item,index) in arr">
            <td>{{item.username}}</td>
            <td>{{item.age}}</td>
            <td><input type="submit" value="刪除" @click="del(index)"></td>
            <td><input type="submit" value="編輯" @click="edit(index)"></td>
        </tr>
    </table>
    <div class="box" v-show="isshow">
        <p><input type="text" placeholder="姓名" v-model="n_username"></p>
        <p><input type="text" placeholder="年齡" v-model="n_age"></p>
        <p>
            <input type="submit" value="肯定" @click="save">
            <input type="submit" value="取消" @click="quxiao">
        </p>

    </div>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            username:"",
            age :"",
            arr:[],
            isshow:false ,  //默認是隱藏的
            n_username:"",
            n_age:"",
            n:0
        },
        methods:{
            add:function () {
                this.arr.push({"username":this.username, "age":this.age})
            },
            del:function (index) {
                this.arr.splice(index,1)
            },
            edit:function (index) {
//                this.isshow = true   //這是一種表現方式，也能夠按照下面的這種方式
                this.isshow = !this.isshow;
                this.n = index;
                this.n_username = this.arr[index].username;
                this.n_age = this.arr[index].age;
                console.log(this.n_username)

            },
            save:function () {
                this.arr[this.n].username = this.n_username;
                this.arr[this.n].age = this.n_age;
                this.isshow = false
            },
            quxiao:function () {
                this.isshow = false
            }
        },
        
    })
</script>
</body>
</html>
代碼

 十、import 和 export

import 導入模塊、export導出模塊

// main.js
// 導出多個聲明
export var name = "gaoxin"
export var age = "18"
export function aa() {
    return 1
}
// 批量導出
export {name, age, aa}

// test.js
import {name, age, aa} from "./main"
console.log(name)
console.log(age)
console.log(aa())
// 整個模塊導入 把模塊當作一個對象
// 該模塊下全部的導出都會做爲對象的屬性存在
import * as obj from "./main"
console.log(obj.name)
console.log(obj.age)
console.log(obj.aa())

複製代碼 
// main.js
// 導出多個聲明
export var name = "gaoxin"
export var age = "18"
export function aa() {
    return 1
}
// 批量導出
export {name, age, aa}

// test.js
import {name, age, aa} from "./main"
console.log(name)
console.log(age)
console.log(aa())
// 整個模塊導入 把模塊當作一個對象
// 該模塊下全部的導出都會做爲對象的屬性存在
import * as obj from "./main"
console.log(obj.name)
console.log(obj.age)
console.log(obj.aa())
複製代碼 
// 一個模塊只能有一個默認導出
// 對於默認導出 導入的時候名字能夠不同
// main.js
var app = new Vue({

});
export default app
// test.js
// import app from "./main"
import my_app from "./main"

複製代碼 
// 一個模塊只能有一個默認導出
// 對於默認導出 導入的時候名字能夠不同
// main.js
var app = new Vue({

});
export default app
// test.js
// import app from "./main"
import my_app from "./main"
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程