ES6有哪些新特性

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

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

HTTP状态码有哪些?分别代表是什么意思?

1.背景介绍

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

2.知识剖析

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

箭头函数
ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。箭头函数最直观的三个特点。不需要函数关键字来创建函数,有时可以省略返回关键字,继承当前上下文的这个关键字。


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


//等同于:
    [1,2,3] .MAP((函数(X){
        返回X + 1

    })。结合(本))

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


   let people = 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,对象简写使用?

函数f(x,y){
  return {x,y};
}


//等同于


函数f(x,y){
  return {x:x,y:y};
}


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



今天的分享就到这里啦,欢迎大家点赞,转发,留言,拍砖〜

技能树-IT修真院

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

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

所有任务均是从真实项目中提炼出来的技能点,

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

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

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

猜你喜欢

转载自blog.csdn.net/jnshu_it/article/details/80913529