ES6基础语法

ES6基础语法

free photos.

1

一、用let代替var声明变量

ES5中,我们可以在代码中任意位置声明变量,甚至可以重写已经声明的变量,ES6引入了一个let关键字,它是新的var。

let language = 'javascript';

let language = 'zj'; //此处会报错

console.log(language);

因为同一作用域中let已经声明过了,所以再次声明会报错

2

二、常量

ES6还引入了const关键字,和let用法一样,唯一的区别就是,const变量是只读的

3

三、模板字符串拼接

用反引号拼接字符串

let language = 'javascript';

console.log(language);

let lan = `此处写字符串 ${language}`;

console.log(lan) //此处写字符串 javascript

只要把变量写在${}里面就好了;模板字符串也可以识别空格,可可以用于多行的字符串,再也不用写\n了。

4

四、箭头函数

let circle = (x) => {

const PI = 3.14;

let area = PI * r * r;

return area;

}

可以省略掉关键字function,如果函数只有一条语句,可以连关键字都省略掉

let circle2 = (x) => 3.14 * r * r;

5

五、函数参数的默认值

let sum = (x = 1, y = 2, z = 3) => x + y + z;

console.log(sum());

可以声明函数参数的默认值

6

六、声明展开和剩余参数

ES6展开操作符 ...

let params = [1,2,3];

console.log(...params); //1 2 3

let pro = {

one:0,

two:1,

three:2,

};

console.log({...pro}); //{ one: 0, two: 1, three: 2 }

7

七、数组解构

var [a, b] = ['x', 'y'];

以上代码和下面的代码效果是一样的

a = 'x';

b = 'y';

数组解构也可以进行值的互换

[x, y] = [y, x];

8

八、使用面向对象biancheng

//ES5语法

function Book (title, page, isbn) {

this.title = title;

this.page = page;

this.isbn = isbn;

}

Book.prototype.printTitle = function () {

console.log(this.title);

};

//ES6语法

class Desk {

constructor (title, pages, isbn){

this.title = title;

this.page = page;

this.isbn = isbn;

}

printIsbn () {

console.log(this.isbn);

}

}

ES6只需要使用class关键字,声明一个有constructor函数和诸如printIsbn等其他函数的类;

我们可以用extends扩展一个类并继承它的行为

//ES6语法

class ITDesk extends Desk {

constructor (title, pages, isbn){

this.title = title;

this.page = page;

this.isbn = isbn;

}

printIsbn () {

console.log(this.isbn);

}

}

02.

Home

135editor

Pic from www.135editor.com

生活哪里是一层一层上台阶或下台阶,生活分明是踩着一块浮冰去另一块浮冰,却永不知岸在何处。

本文分享自微信公众号 - javascript艺术(gh_4e5484fd6b52),作者:javascript艺术

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-06-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES6基础语法之set

    十月梦想
  • ES6基础语法之proxy用法

    proxy(代理)简单理解为在对对象进行的'.'操作时,设定的一个过滤器,能够想象到的比较适合的使用场景是做单元测试时,验证对对象的操作。

    十月梦想
  • ES6基础语法之模块化

    比如我希望在a.js中使用b.js的变量或者函数,那么ES6就中模块化就帮到咱们啦!

    十月梦想
  • ES6基础语法之export default方法

        前面说了前端模块化export和import的导入导出,但是你要必须了解到导出的变量名称保持一致!

    十月梦想
  • ES6基础语法之箭头函数

    ES6直接在参数中=默认值就解决,上述中只是出一个参数的默认值,多个参数下ES6的便利性毋庸置疑!

    十月梦想
  • ES6——Class基础语法

      而在ES6中,引入了Class这个概念来作为对象的模板。而class只是一个语法糖写法,还是基于ES5封装而来的。上面的例子用class来改写如下:

    流眸
  • ES6基础语法之新增字符串方法

    十月梦想
  • 从零开始学 Web 之 ES6(五)ES6基础语法三

    在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

    Daotin
  • 从零开始学 Web 之 ES6(六)ES6基础语法四

    在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

    Daotin
  • 从零开始学 Web 之 ES6(四)ES6基础语法二

    Promise是一个对象,代表了未来某个将要发生的事件(,这个事件通常是一个异步操作)

    Daotin
  • ES6基础语法之变量解构赋值(其他)

    十月梦想
  • ES6基础语法之变量解构赋值(对象)

    昨天简单看了并且了解了数组的解构赋值,今天进一步看一下对象的解构赋值,并逐渐深入看一些复杂的对象结构赋值是怎么样子的!!!

    十月梦想
  • 【ES6基础】展开语法(Spread syntax)

    今天是元宵佳节,在此小编祝大家元宵佳节快乐!今天小编在这里给大家继续介绍ES6的语法糖——展开语法(Spread syntax)。

    前端达人
  • 【ES6基础】展开语法(Spread syntax)

    展开语法用"..."进行表示,展开语法将可迭代的对象拆分成独立的值(语法层面展开)。扩展语法通常用于将可迭代的对象的值传递到函数的参数中。今天小编将从以下方面进...

    前端达人
  • ES6语法基础之const用法

    在特殊情况下呢,const声明的不是一个常规的量或者字符串而是一个对象情况会怎么样呢?

    十月梦想
  • ES6语法基础之let用法

    简单讲解一些ES6语法基础!了解一些es6新特性!当然下一步需要学习的vue框架也是基于es6的,因此很有必要学习下es6语法,接下来几次简单讲解es6语法!

    十月梦想
  • ES6语法基础之变量解构赋值(数组)

    ES6变量解构赋值,看下数组与es5等区别,ES6的新特性大大节省了代码量,使代码可读性大大提高!

    十月梦想
  • ES6基础-ES6 class

    面向对象,即万物皆对象,面向对象是我们做开发一种的方式,开发思维,面向对象的思维中万物皆对象,以人作为例子,它的特性有哪些。比如有姓名,性别,出生年月,身高等,...

    达达前端
  • ES6之class基本语法

    类这个概念对于做后台的应该是非常熟悉,JavaScript的类对于其他面向对象的语言差异很大,只能使用构造函数生成实例对象。为了接近传统语言,ES6引入了cla...

    wade

扫码关注云+社区

领取腾讯云代金券