码迷,mamicode.com
首页 > 其他好文 > 详细

ES6语法

时间:2019-07-11 23:19:01      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:assign   das   ssi   报错   简写   sign   action   取字符串   clu   

1、变量声明const和let

es6之前,变量声明使用var关键字;无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升

es6中通常使用const和let来声明变量,let表示变量、const表示常量。let和const都是块级作用域。

技术图片

let的作用域是在它所在当前代码块,但不会被提升到当前函数的最顶部。(如下代码)

[javascript] view plain copy
function aa() {  
    if(bool) {  
       let test = ‘hello man‘  
    } else {  
        //test 在此处访问不到  
        console.log(test)  
    }  
  }  

const定义的是常量,也就是说,一旦常量被定义赋值,就不能再改变。

const name = ‘lux‘  
name = ‘joe‘  //再次赋值会报错  

2、模板字符串

第一个用途,基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定

//es5   
var name = ‘lux‘  
console.log(‘hello‘ + name)  
//es6  
const name = ‘lux‘  
console.log(`hello ${name}`) //hello lux  

第二个用途,在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

// es6  
const template = `<div>  
    <span>hello world</span>  
</div>`  

es6提供的字符串方法

// 1.includes:判断是否包含然后直接返回布尔值  
    let str = ‘hahay‘  
    console.log(str.includes(‘y‘)) // true  
    // 2.repeat: 获取字符串重复n次  
    let s = ‘he‘  
    console.log(s.repeat(3)) // ‘hehehe‘  
    //如果你带入小数, Math.floor(num) 来处理  

ES6为参数提供了默认值。在定义函数时便初始化了这个参数,以便在参数没有被传递进去时使用。

function action(num = 200) {  
    console.log(num)  
}  
action() //200  
action(300) //300  

箭头函数

 

ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。

箭头函数最直观的三个特点。

  • 不需要function关键字来创建函数
  • 省略return关键字
  • 继承当前上下文的 this 关键字
  • //例如:  
        [1,2,3].map( x => x + 1 )  
          
    //等同于:  
        [1,2,3].map((function(x){  
            return x + 1  
        }).bind(this))  

    注意:当你的函数有且仅有一个参数的时候,是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{};

  • var people = name => ‘hello‘ + name  
    //参数name就没有括号  
    var people = (name, age) => {  
        const fullName = ‘h‘ + name  
        return fullName  
    }   
    //如果缺少()或者{}就会报错  

    4、扩展的对象功能

    对象初始化简写

  • function people(name, age) {  
        return {  
            name,  
            age  
        };  
    }  

    为对象添加方法

  • //es6为对象添加方法  
        const people = {  
            name: ‘lux‘,  
            getName () {  
                console.log(this.name)  
            }  
        }  

    es6中提供了object.assign()方法来实现浅复制,object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象,然后返回目标对象,第一参数即为目标对象,在实际开发中,我们为了不改变源对象,一般会把目标对象传为{}

  • const obj = Object.assign({}, objA, objB)

    5、更方便的数据访问——解构

  • //对象
        const people = {
            name: ‘lux‘,
            age: 20
        }
        const { name, age } = people
        console.log(`${name} --- ${age}`)
        //数组
        const color = [‘red‘, ‘blue‘]
        const [first, second] = color
        console.log(first) //‘red‘
        console.log(second) //‘blue‘

     

ES6语法

标签:assign   das   ssi   报错   简写   sign   action   取字符串   clu   

原文地址:https://www.cnblogs.com/yuer20180726/p/11173376.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!