ES6 简单语法:

  变量声明

    ES5 var 声明变量为全局变量 会变量提升
    ES6 let 声明的变量为块级变量 且不能重复声明 不存在变量提升 # {}一个大括号为一个作用域
    ES6 const 声明一个只读的常量,一旦声明,常量的值就不能改变,且一旦声明必须立即初始化

  解构赋值(解包)

例如:
  数组
let [a,b,c] = [1,2,3]
a = 1
b = 2
c = 3

  默认赋值
let[a=3,b] = [2]
a=2
b=undifind

 
let c
let [a=2] = [c]
a = 2   对象
    

    let {a,b} = {a:"111",b:"222"}
      a=111
      b=222

    let {a:b} = {a:111}
      a=111
      b=111

    let {a,b=5} = {a:1}
      a=1
      b=5

 

  强转字符串

     ['内容'+xxx] # 中括号中的内容会被强转为str类型 如果为数组则转化为类似json格式的内容 可以实现字符串的拼接

  模板字符串:

    # 模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。
    # 如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。
    用 `包裹字符串${变量}`

  

  箭头函数:

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

    var f = a => a 等价于 var f = function(a){return a}

//无形参
var f = () => 5;
// 等同于
var f = function () { return 5 }; //多个形参
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};

# 补充this

  es5普通函数 this指向的是调用者
  箭头函数 this指向调用者所在的父类

***使用箭头函数需要注意的几点

  1.函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象;

# 例如 vue中
created(){
function(){console.log(this)} # 此处this指向的是window对象
} created(){()=>{console.log(this)}} # 此处this指向的是vue对象

  2.不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

对象的单体模式:

  # 用于解决箭头函数 this使用定义对象而不是当前所在对象
  fav(){} 等价于 fav:function(){} # this 为当前函数的this

自执行函数:

  (function(){})(); # 自执行的this 是window

面向对象

  JavaScript 语言中,生成实例对象的传统方法是通过构造函数

function Animal(name,age){ # 首字母大写表名声明类
this.name = name;
this.age = age;
}
Animal.prototype.showName = function(){ # 添加类方法 相当于继承所有Animal类都有showName方法
console.log(this.name);
console.log(this.age);
}
var a = new Animal('小黄',5); # new方法创建类对象
a.showName()

es6 创建类的方法

class Classname{
  constructor(name,age){ # 相当于python中初始化 __init__方法
    this.name = name;
    this.age = age
  }
  classdef(){}
 }

调用:
var xxx = new Classname()
xxx.classdef()

 

es6 生成器

function* xxx(){  // function* 创建生成器函数
yiled xxx
yiled xxx
return xxx
}

获取值
var f = xxx
f.next() # 如果next传参表示上一次yiled的值

set结构

  let set = new Set([1,2,3,4,4,]) //构造函数,值不重复 相当于set集合

扩展运算符

  [...set] # 将set打散成列表

for循环

  for (let i of set){console.log(i)} # 循环

set属性

  set.size #长度
  set.add('xxx') 增
  set.delete('xxx') 删
  set.has('xxx') 查
  set.clear('xxx') 清空
  set.entries 枚举

ES6简单语法的更多相关文章

  1. 10.1 ES6 的新增特性以及简单语法

    ES6 的新增特性以及简单语法  let 和 const 模板字符串 箭头函数 对象单体模式 es6面向对象 模块化  let 和 const 之前一直用 var 来声明变量,ES6 新增 let 和 ...

  2. ES6常用语法

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...

  3. vue(2)—— vue简单语法运用,常用指令集

    按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue  安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...

  4. ES6最新语法

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...

  5. ES6新语法之let关键字;有别于传统关键字var的使用

    ES6新语法于2015年发布:而我这个前端小白在17年才接触到.惭愧惭愧!!不过到目前为止,似乎只有FireFox和Chrome对ES6的支持相对良好.不过既然人家ES6已经出来了,还是要跟上技术的潮 ...

  6. Vue(1)- es6的语法、vue的基本语法、vue应用示例,vue基础语法

    一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...

  7. ES6常用语法简介import export

    ES6常用语法简介import export let与var用法区别 //var var a = []; for (var i = 0; i < 10; i++) { a[i] = functi ...

  8. es6基本语法,vue基本语法

    一.es6基本语法 0.es6参考网站 http://es6.ruanyifeng.com/#README 1.let 和 const (1)const特点: 只在局部作用域起作用 不存在变量提升 不 ...

  9. ES5与ES6常用语法教程之 ②解构语法糖、声明变量异同

    js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语法教程(3) es5与es6常用语法教程(4) es5与es6常用语法教程(5) es ...

随机推荐

  1. codeforces div2 603 D. Secret Passwords(并查集)

    题目链接:https://codeforces.com/contest/1263/problem/D 题意:有n个小写字符串代表n个密码,加入存在两个密码有共同的字母,那么说这两个密码可以认为是同一个 ...

  2. IntelliJ IDEA 2017.3尚硅谷-----设置字体大小行间距

  3. webpack-高级-发布策略

    webpack的发布策略 在实际开发中,一般会有两套项目方案: 一套是开发期间的项目,包含了测试文件.测试数据.开发工具.测试工具等相关配置,有利于项目的开发和测试,但是这些文件仅用于开发,发布项目时 ...

  4. buuctf 基础破解

    首先下载压缩包 解压之后发现是另一个压缩包 另一个压缩包上写着基础破解 然后用暴力破解的方法破解 然后搜了一下 暴力破解一般的长度是多少 然后搜到的结果是 长度为8的时候电脑都要破解好几年 所以我猜测 ...

  5. bugku 你必须让他停下

    首先打开链接会发现一个不断刷新的网页 然后使用抓包工具burpsuit抓网页 然后右键点击跳转到repeater 然后点击go一直点击 注意黄色区域的变化然后在点击过程中会发现flag 然后拿到答案

  6. 一起学Netty(一)之HelloWorld,可以聊天的小程序哦

    转自于:http://blog.csdn.net/linuu/article/details/51306480

  7. Educational Codeforces Round 76 (Rated for Div. 2) A. Two Rival Students

    You are the gym teacher in the school. There are nn students in the row. And there are two rivalling ...

  8. 2019新生赛 %%%xxh

    笔记.md                                                                                                ...

  9. Git - 06. git checkout

    1. 概述 已经学会查看 提交记录 尝试在 提交记录 之间做跳转 2. 命令 跳转到提交 概述 跳转到 日志 里的某次提交 命令 # 撤销 工作区的所有改动, 返回 当前分支 的 上一个提交 > ...

  10. [PHP]新版的mongodb扩展安装和使用

    旧版的mongo扩展已经不推荐使用了,在php7以上一般是安装和使用新版的mongodb扩展 ubuntu下 apt-get install php-mongodb 例如下面的代码进行了查询和插入集合 ...