ES6有哪些新特性

家好,我是IT修真院郑州分院第8期学员,一枚正直善良的web程序员。html

今天给你们分享一下,修真院官网JS-8任务中可能会使用到的知识点:git

HTTP状态码有哪些?分别表明是什么意思?程序员

1.背景介绍
github

ECMAScript 6.0(如下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。 它的目标,是使得 JavaScript 语言能够用来编写复杂的大型应用程序,成为企业级开发语言。
web

2.知识剖析
数组

下面是介绍几个ES6的新特性函数

箭头函数
ES6颇有意思的一部分就是函数的快捷写法。也就是箭头函数。箭头函数最直观的三个特色。 不须要 function 关键字来建立函数, 有时能够省略 return 关键字, 继承当前上下文的 this 关键字。


//例如:
    [1,2,3].map(x => x + 1)


//等同于:
    [1,2,3].map((function(x){
        return x + 1
学习

    }).bind(this))this

当你的函数有且仅有一个参数的时候,是能够省略掉括号的。 当你函数返回有且仅有一个表达式的时候能够省略{} 和 RETURN;例如:


   let people = name => 'hello' + name
编码

    //参数name就没有括号

解构赋值
ES5咱们提取对象中的信息形式以下:


const people = {
        name: 'lux',
        age: 20
    }
    const name = people.name
    const age = people.age

            

使用ES6
如今,解构能让咱们从对象或者数组里取出数据存为变量,例如


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

    console.log(second) //'blue'

函数参数默认值


不使用ES6 为函数的参数设置默认值


function foo(height, color)
{
    var height = height || 50;
    var color = color || 'red';
    //...
}
            
可是,当参数的布尔值为false时,是会出事情的!好比,咱们这样调用foo函数: foo(0, "")

由于0的布尔值为false,这样height的取值将是50。同理color的取值为‘red’。

使用ES6


function foo(height = 50, color = 'red')
{
    // ...
}

     模板字符串
不使用ES6




var name = 'Your name is ' + first + ' ' + last + '.'

使用ES6,将变量放在大括号之中:


var name = `Your name is ${first} ${last}.`

            

多行字符串
不使用ES6 使用“\n\t”将多行字符串拼接起来:


var roadPoem = 'Then took the other, as just as fair,\n\t'
    + 'And having perhaps the better claim\n\t'
    + 'Because it was grassy and wanted wear,\n\t'
    + 'Though as for that the passing there\n\t'

    + 'Had worn them really about the same,\n\t'

使用ES6
将多行字符串放在反引号之间就行了:


var roadPoem = `Then took the other, as just as fair,
    And having perhaps the better claim
    Because it was grassy and wanted wear,
    Though as for that the passing there
    Had worn them really about the same,`

            

对象属性简写
不使用ES6 对象中必须包含属性和值,显得很是多余:


  function people(name, age) {
        return {
            name: name,
            age: age
        };
    }
         使用ES6
键值对重名,ES6能够简写以下


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

        

3 常见问题

Spread Operator展开运算符有什么用途?

4.解决方法

视频

PPT

5.编码实战

ES6中另一个好玩的特性就是SPREAD OPERATOR 也是三个点儿...接下来就展现一下它的用途。
组装对象或者数组:




               //数组
    const color = ['red', 'yellow']
    const colorful = [...color, 'green', 'pink']
    console.log(colorful) //[red, yellow, green, pink]


    //对象
    const alp = { fist: 'a', second: 'b'}
    const alphabets = { ...alp, third: 'c' }
    console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"


有时候咱们想获取数组或者对象除了前几项或者除了某几项的其余项




               //数组
    const number = [1,2,3,4,5]
    const [first, ...rest] = number
    console.log(rest) //2,3,4,5
    //对象
    const user = {
        username: 'lux',
        gender: 'female',
        age: 19,
        address: 'peking'
    }
    const { username, ...rest } = user

    console.log(rest) //{"address": "peking", "age": 19, "gender": "female"


对于 Object 而言,还能够用于组合成新的 Object 。 (ES2017 stage-2 proposal) 固然若是有重复的属性名,右边覆盖左边




              const first = {
        a: 1,
        b: 2,
        c: 6,
    }
    const second = {
        c: 3,
        d: 4
    }
    const total = { ...first, ...second }

    console.log(total) // { a: 1, b: 2, c: 3, d: 4 }


6.扩展思考

7.参考文献

10个最佳ES6特性
ES6这些就够了

ECMAScript 6 入门

8 更多讨论

1,什么是块级做用域

let实际上为 JavaScript 新增了块级做用域。

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

上面的函数有两个代码块,都声明了变量n,运行后输出 5。这表示外层代码块不受内层代码块的影响。若是两次都使用var定义变量n,最后输出的值才是 10。

2.const用法?

const声明一个只读的常量。一旦声明,常量的值就不能改变。const的做用域与let命令相同:只在声明所在的块级做用域内有效。

3,对象简写使用?

function f(x, y) {
  return {x, y};
}


// 等同于


function f(x, y) {
  return {x: x, y: y};
}


f(1, 2) // Object {x: 1, y: 2}



今天的分享就到这里啦,欢迎你们点赞、转发、留言、拍砖~

技能树-IT修真院

IT修真院是一个免费的线上IT技术学习平台 。

每一个职业以15个左右的task为初学者提供更快速高效的学习方式 ;

全部task均是从真实项目中提炼出来的技能点,

强调实战演练+自学优先+师兄辅导的学习方式,

严格的日报体系,欢乐的交流讨论学习气氛,更有无数师兄师姐帮你解疑!

点击官网注册  官网 ,使用师兄邀请连接有优惠。