ES6中let,const,模板字面量,默认参数,rest参数,展开运算符,对象,解构赋值

一.块级作用域Let和Const

1.let

　　var 声明的变量,无论在哪里声明,都会当成在当前作用域顶部声明的变量,这个就是变量的提升机制

　　let声明的变量,不会提升,可以将变量的作用域声明在当前的代码块中

　　let声明的变量,防止变量的重复声明

var a  = 10 ;
let a  = 20 ;
报错a已经声明过了

　　同一作用域下,不能使用let重复声明已经存在的变量,但如果在不同的作用域下,则是可以的

let a = 10 ;
{
    let a = 20       
}

没问题,在不同作用域下

 

2.const声明

　　const声明的是常量,必须在声明的同时初始化

const a = 10 ;   //没问题,有初始化也就是有赋值

const a;
a=10
//报错

　　同一作用域下,不能使用const重复声明已经存在的变量(不论是let,还是var声明过的变量)

　　如果使用const声明对象,对象本身的绑定不能修改,但是对象的属性和值是可以修改的

const person = {
      name : '海贼王',
      age : 15        
}

person = {
      name : '鲁夫',
      age : 15        
}
//报错了,对象本身的绑定不能修改

person.name = '鲁夫'
//可以,对象的值是可以修改的

person.sex = '男'
//可以,对象的属性可以修改

 

3.全局块作用域绑定

使用var声明的变量或对象,将作为浏览器环境中的window对象的属性,这就意味着var声明的很有可能会覆盖掉一个已经存在的全局属性

var get = 20 ;
console.log(window.get) // 20

使用let或const,则会在全局作用域下创建一个新的绑定,该绑定不会成功window对象的属性

总结 :  如果你不想覆盖window对象的属性,那么你就使用let 和 const 声明变量和常量

 

二.模板字面量　　

` ` 

1.如果需要再字符串中添加新的一行,只需要在代码中直接换行即可

let title = `你好,
中国欢迎您`

你好中国欢迎您

2.字符串占位符:合法嵌入 ${ }

let age = 10 
let allName = `海贼王:${age}`
//海贼王:10

 

三.默认参数

　　使用默认参数 undefined

　　不使用默认参数 null

function urlName(url='/home',name='abc',callback){}

//使用url和那么的默认参数
urlName();

//使用name的默认参数
urlName('/index');

//使用某一个的默认参数,传入undefined
//使用url和name的默认参数
urlName(undefined,undefined,function(){});

//不使用某一个的默认参数,传入null
//不使用name的默认参数,使用url的默认参数
urlName(undefined,null,function(){});

 

四.rest参数

函数有一个特别的地方,就是无论函数定义了多少个形参,都可以传入任意数量的实参;

函数内部还可以通过arguments对象得到传入的参数

在函数命名前添加三点,那么就是一个rest参数  ...opt , 用于获取多余的参数

注意:每个函数只能有一个rest参数,并且只能是最后的一个参数

function ( a, ...opt){}

// opt可以做循环,表示除了a,之后得到的所以参数
//argument,表示包括 a 和 opt的所以参数

 

五.展开运算符

展开运行符和rest参数相似,都是三个点. 展开运算符可以将 一个数组转换为各个独立的参数, 也可用于 取出对象的所有可遍历属性,而rest参数是指多个独立的参数,并通过整合后的数组来访问

function sum(a,b,c){
   return a+b+c
}

let arr = [1,2,3]
sum(...arr);

//便是的是arr中的每个值分别传入sum函数中

展开运算符可以用来复制数组,得到的是深克隆(互不影响,互补干扰)

let arr1 = [1,2,3];

let arr2 = arr1;        //arr2 和  arr1 是同一个数组 (浅克隆)

let arr3 = [...arr1];  //arr3 和  arr1 是不同数组 (深克隆)

arr1[0] = 4;

//arr2[0]  ,  得到4  (浅克隆)
//arr3[0]  ,  得到1  (深克隆)

展开运算符可用来合并数组

let arr1 = ['a'] ;
let arr2 = ['b','c'] ;
let arr3 = ['d','e'] ;

console.log([...arr1,...arr2,arr3])
//['a','b','c','d','e']

展开运算符还可以取出对象的所有可遍历属性,复制到当前对象中

let person = {
    name : '鲁夫',
    age : 13
}

let persons = { ...person , sex:'男'}

//  let person = {
//      name : '鲁夫',
//      age : 13
//      sex : '男'
//  }

六.对象字面量语法扩展

1.对象中有同名的参数,只写属性名即可 ; 有相同的本地变量,只写属性名即可

2.定义对象方法时,可以省略冒号和function关键字

function first(firtst){
     let  section = '第二'
     return{
          firtst : first,      
          section : section,   
          three:function(){
               console.log(first)
          }
    }
}     

function first(firtst){
     let  section = '第二'
     return{
          firtst,    //相同参数,只写属性名
          section,   //相同本地参数,只写属性名
          three(){   //省略冒号和function
               console.log(first)
          }
    }
}    

3.ES6新增了,可以再对象中使用可计算的属性名称 ; 如果属性名包括特殊字符或中文,或可计算的属性名,则只能使用[ ]

let syf = name

let person = {}
person["last  name"] = '鲁夫'        //属性名有空格
person["first" + syf]  = '蒙奇D'     // 属性名通过计算得到
person.age = 13                     //常规,用.访问

//得到 : 
//{
//     'last name' : '鲁夫',
//     'first name' : '蒙奇D',
//     'age' : 13
//}

 

七.解构赋值

1.对象解构  {  }

let person = {
    name:'鲁夫',
    age:13,
    sex:'男',
}

let {name,age,sex} = person

console.log(name,age,sex)
// 鲁夫,13,男

 

let person = {
    name : ' 鲁夫'
    age : 13,
    sex : '男',
    message:{
        id:1,
        firstName : '蒙奇D'
    }
}

let {name,age,sex,message:{firstName:message}} = person

//console.log(name)鲁夫
//console.log(age)13
//console.log(sex)男
//console.log(message)蒙奇D

2.数组解构 [ ]  逗号是占位符

let arr = [1,2,3]
ler [,,c] = arr
// c = 3