变量的解构赋值


解构

ES6允许按照一定模式从数组和对象中提取值,对变量进行复制,这被称为解构赋值

1.数组的解构

const F4 = ['11','22','33','44']
let [xiao,liu,zhao,song] = F4
console.log(xiao)  //11
console.log(liu)  //22
console.log(zhao)  //33
console.log(song)  //44

2.对象的解构

const zhao = {
    name:'赵本山',
    age:'不详',
    xiaopin:function(){
        console.log('我可以演小品')
    }
}

let {name,age,xiaopin} = zhao

模板字符串

  • ES6引入新的声明字符串的方式``` `

1.声明

let str = `我也是字符串`
console.log(str,typeof str)   
//我也是字符串  String

2.内容中可以直接出现换行符

let str = '<ul><li>1</li><li>2</li><li>3</li></ul>'   //无法换行
let str = `<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			</ul>`

3.变量拼接

let lovest = '魏翔'
let out = `${lovest}是我心目中最搞笑的演员`
console.log(out)  //魏翔是我心目中最搞笑的演员

对象的简化方法

ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。

这样的书写更加简洁

let name = '尚硅谷'
let change = function(){
    console.log('我们可以改变')
}
const school = {
    name,
    change,
    improve(){
        console.log("我们可以提升你的技能")
    }
}

箭头函数以及声明特点

ES6允许使用箭头(=>)定义函数

声明一个函数

let fn = function(){
    
}
let fn = (a,b)=>{
    return a+b
}
//调用函数
let result = fn(1,2)
console.log(result)  //3

1.this是静态的,this始终指向函数声明时所在作用域下的this的值

function getName(){
    console.log(this.name)
}
let getName2 = () =>{
    console.log(this.name)
}
//设置window对象的name属性
window.name = '尚硅谷'
const school = {
    name:'ATGUIGU'
}
//直接调用
getName();   尚硅谷
getName2();  尚硅谷
 
//call方法调用
getName.call(school)   //ATGUIGU
getName2.call(school)  //尚硅谷

2.不能作为构造实例化对象

let Person = (name,age) =>{
    this.name = name
    this.age = age
}
let me = New Person('xiao',30);
console.log(me)  //报错

3.不能使用arguments变量

let fn = ()=>{
    console.log(arguements)
}
fn(1,2,3)     //报错

4.箭头函数的简写

省略小括号,当形参有且只有一个的时候

let add = n =>{
    return n+n
}
console.log(add(9))  //18

省略花括号,当代码体只有一条语句的时候,此时return必须省略

而且语句的执行结果就是函数的返回值

let pow = (n)=> n *n
console.log(pow(9))  //81

文章作者: Daniel Lin
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Daniel Lin !
  目录