ECMAScript6 学习笔记

　　1、let和const

　　在《JavaScript(9)：var、let、const》中总结了var、let、const的用法与区别。

　　总结起来就那么几点：

　　⑴　let和const在同一作用域当中是不能重复声明的。
　　⑵　let、const属于块级作用域，一对{}就是一个块。
　　⑶　let声明的变量是可以改变的；const声明的变量则不行。如果将一个对象定义为const，那么这个对象就不能重新赋值（对象为引用类型），但是对象的属性和方法是可以改变的。

　　2、变量的解构

　　⑴　数组的解构不成功，则变量的值就是 undefined。
　　⑵　对象的解构，对象的解构赋值是先找到同名属性，然后再付给对应的变量。
　　⑶　数组和对象解构时可以赋予初始默认值。

//数组的解构
let [x,y,k]=[5,'111',true];
console.log(x);
console.log(y);
console.log(k);
let [m=1,n=2]=[,99];
console.log(m);
console.log(n);
//对象的解构
const obj={
    name:'KKK',
    age:undefined,
    SayHello:function(){
        console.log(`我是${name},今年${age}岁。`);
    }
};
let {name='123',age=12,SayHello}=obj;
console.log(name);
console.log(age);
SayHello();
 
 
输出结果：
5
111
true
1
99
KKK
12
我是KKK,今年12岁。

　　3、模版字符串

console.log( `第一行的\n第二行的`);
let str=`第一行的描述
        第二行的描述。`
console.log(str);
let sname="poly";
let iage=12;
console.log(`名字是${sname+"COM"},今年${iage+11}岁。`);
 
输出结果：
第一行的
第二行的
ES6_1.html:35 第一行的描述
                第二行的描述。
ES6_1.html:38 名字是polyCOM,今年23岁。

　　4、对象的简化写法

　　在描述对象的大括号里面，直接写变量和函数作为对象的属性和方法。

const obj={
       name:'123',
       age:12,
       SayHello(){
          console.log(this);
          console.log(`我是${this.name},今年${this.age}岁。`)
          console.log(`我是${obj.name},今年${obj.age}岁。`)
    }
}
 
obj.name="Json";
obj.age=9;
obj.SayHello();
 
输出结果：
{name: 'Json', age: 9, SayHello: ƒ}
我是Json,今年9岁。
我是Json,今年9岁。

　　5、rest参数

　　ECMAScript5的函数内部可以通过arguments来获取参数，arguments是对象而不是数组。
　　对于ECMAScript6而言：
　　⑴　函数内部可以通过args来获取参数，args是数组。
　　⑵　ECMAScript6引入rest参数也是为了方便获取函数的参数，注意rest参数一定要放在参数列表的最后。

console.log("---------ECMAScript5 函数传参与获取参数-------------------------");
function func(){
    console.log(arguments);
    console.log("参数类型：" + typeof arguments);
    console.log(arguments instanceof Array);//不是数组类型
    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
    console.log("参数类型：" + arguments.length);
 
    //转换为数组
    // let args = [];
    // for (let i = 0; i < arguments.length; i++) {
    //          args.push(arguments[i]);
    // }
    
    //转换为数组
    args=Array.prototype.slice.apply(arguments);// args=Array.prototype.slice.call(arguments);
    console.log(args);
}
 
func(1,"abc");
 
console.log("---------ECMAScript6 rest参数-------------------------");
function es6func(...args){
    console.log(args);
    console.log("参数类型：" + typeof args);
    console.log(args instanceof Array);//是数组类型
    args.forEach( (item , index ) => {
            console.log( item, index )
    })            
}
 
es6func("XML","JSON","TXT");
 
let tools=["VSCode","HBuilder","Idea"];
es6func(...tools);
 
function add(a,b,...args){
    console.log(args);
}
 
add(1,2,3,4,5);

　　输出结果：

 　　6、...扩展运算符

　　⑴　通过...扩展运算符将伪数组的对象转换为数组。

function func(){
    console.log(arguments instanceof Array);//不是是数组类型
    console.log(...arguments);
    let argsArr=[...arguments];//转换为数组
    console.log(argsArr);
    console.log(argsArr instanceof Array);//是数组类型
}
 
func(1,2,3,4);
 
const selectP=document.querySelectorAll("p");
const ArrP=[...selectP];//转换为数组
console.log(ArrP);
for (let i = 0; i < ArrP.length; i++) {
        console.log(ArrP[i].outerText);
}

　　输出结果：

　　可以将字符串转换为数组。

let str="123";
console.log([...str]);
 
输出结果：
(3) ['1', '2', '3']

　　⑵　可以用于数组的合并。

let arr1=[1,2,3];
let arr2=['a','b2','c3'];
let arr3=[...arr1,"JavaScript",...arr2];
console.log(arr3);
 
输出结果：
(7) [1, 2, 3, 'JavaScript', 'a', 'b2', 'c3']