一些 ES6的擴展

一些 ES6的擴展

es6部分

let，const

1.var 定義的變量：全局變量和局部變量（函數）

function fn(){
    var num = 10;
    alert(num)
}
fn();
alert(num); //num is not define

for(var i=1;i<=10;i++){ //i是全局的
    
}
alert(i); //11

es6中新增了let命令，用來聲明變量，它的用法相似於var，可是所聲明的變量，只在let命令所在的代碼塊內{}有效

​ 即let所聲明的變量就「綁定」這個區域，再也不受外部的影響

​ es6中還新增了const命令，它用來聲明常量，通常被const聲明的變量不可改變

​ var 和let的區別：

​ 1.let聲明的不存在變量提高

​ 2.let不容許在相同做用域內，重複聲明同一個變量

​ 3.ES6中容許塊級做用域的任意嵌套，外層沒法讀取內層做用域的變量，反之能夠

案例：

{
    alert(a); //a is not define
    let b = 10;
    {
        let a = 10;
        alert(b);   //10
    }
}

解構賦值

變量的結構賦值 -- 快速的給變量賦值

1.解構賦值：數組，對象，字符串

let arr = [1,2,3,4,5];

//通常咱們賦值
//let a = arr[0];
//let b =arr[1]

//解構賦值 賦值
let [a,b,c,d,e] = arr // a = 1 ，b =2 ....

對象解構賦值

對象解構賦值，變量名和屬性名保持一致，若是修改的話，獲得的值是後者

let {name:xingming,age:nianling} = {name:'zhangsan',age:100};
console.log(xingming,nianling); //zhangsan,100

擴展運算符

擴張運算符用三個點表示（...）,功能是把數組或類數組對象展開成一系列用逗號隔開的值

let arr=[1,2,3,4,5];
console.log(arr);
console.log(...arr); //1 2 3 4 5  用console.log輸出看不到‘，’號

let arr=[1,6,7,3,5,6,8,9,0];
console.log(Math.max(...arr)) //9

至關於 console.log(Math.max(1,6,7,3,5,6,8,9,0)) //這裏證實是用‘，’隔開

擴展運算符還能夠用於數組的合併

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [7,8,9];

console.log([...arr1,...arr2,...arr3]) //[1,2,3,4,5,6,7,8,9]

擴展運算符還能夠用於引用傳遞淺拷貝

let arr1 = [1,2,3];
let arr2 = arr1;
arr2.push(4);
console.log(arr1);  //[1,2,3]
console.log(arr2);  //[1,2,3,4]


//對象淺拷貝
//obj1複製給obj2
const obj1 = {a: 1};
const obj2 = {...obj1};

字符串的擴展 --模板字符串

//1.模板字符串
let obj={
    name：'zxh',
    age:20,
    sex:'男'
}

document.body.innerHTML = '個人姓名是'+obj.name+',我今年'+.....等很麻煩
document.body.innerHTML = `個人姓名是${obj.name}，我今年${obj.age}`  結果同樣

字符串的擴展 --字符串新加的方法

// repeat(n)方法返回一個新字符串，表示將原字符串重複n次
let str = 'hello';
console.log(str.repeat(10)); //輸出10次hello

//includes():返回布爾值，表示是否找到了參數字符串
let str = 'javascript';
console.log(str.includes('ava'))  //返回true

//startsWith():放回布爾值，表示參數字符串是否在源字符串頭部
let str = 'javascript';
console.log(str.startsWith('java')) //true

//endsWith():放回布爾值，表示參數字符串是否在源字符串尾部
let str = 'javascript';
console.log(str.endsWith('java')) //false
console.log(str.endsWith('t')) //true
console.log(str.endsWith('pt')) //true

函數

1.函數的默認參數

2.箭頭函數

<script>
    const sum = function(n1,n2){
        return n1+n2;
    }
    console.log(sum()) //NaN
    console.log(sum(1,2)) //3
</script>


//函數參數默認值

//在之前這樣設置
const sum = function(){
    n1 = n1 || 10;
    n2 = n2 || 20;
    return n1+n2
}

//如今
const sum = function(n1=10，n2=10){
    return n1+n2
}

2.箭頭函數

特色:簡潔

const sum = function(a,b){
    return a+b
}

//用箭頭函數表示
const sum1 = (a,b) => n1 + n2

重要：箭頭函數裏面的this是定義的時候肯定的，this一旦肯定沒法改變

總結：1.箭頭函數最吸引最吸引人的地方是簡潔。同時函數體內this對象，就是定義時所在的 對象，而不是使用時所在的對象，this不會改變了

​ 2.不能夠當作構造函數，也就是說不可使用new命令，不然會拋出一個錯誤

​ 3.不可使用arguments對象，該對象在函數體內不存在

​ 4.箭頭函數必定是匿名函數

​ 5.箭頭函數適合於無複雜邏輯或者無反作用的純函數場景下，例如map，reduce， filter的回調函數（函數看成參數）定義中；

​ 6.不要在最外層定義箭頭函數，由於在函數內部操做this會容易污染全局做用域。最起 碼在箭頭函數外部包一層普通函數，將this控制在可見的範圍內

數組和對象的擴展

1.數組的擴展

​ 1.Array.from()方法用於將對象轉爲真正的數組（類數組轉數組）

let obj={
    0:'zhangsan',
    1:'lisi',
    2:'wangwu',
    length:3
}
//須要固定的對象格式纔可使用Array.from()方法轉成數組，不然無效
console.log(Array.from(obj))    //['zhangsan','kisi','wangwu']

​ 2.Array.of()方法用於將一組值，轉換爲數組

console.log(Array.of('zhangsan','lisi','wangwu')) //['zhangsan','lisi','wangwu']

​ 3.fill()方法使用給定值，填充一個數組

var a = [1,2,3,4,5]
console.log(a.fill('hello')) //['hello','hello','hello','hello','hello']

console.log(a.fill('hello',2,3)) //[1,2,'hello',4,5]

2.對象的擴展

對象的簡介表示

var num = 100
var obj = {
    num:100,
    shownum:function(){
        return this.num;
}
}

//當屬性和屬性名重名的時候能夠省略  //方法能夠省略function
var obj = {
    num，
    shownum(){
        return this.num;
}
}