ES6简单语法
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简单语法的更多相关文章
- 10.1 ES6 的新增特性以及简单语法
		
ES6 的新增特性以及简单语法 let 和 const 模板字符串 箭头函数 对象单体模式 es6面向对象 模块化 let 和 const 之前一直用 var 来声明变量,ES6 新增 let 和 ...
 - ES6常用语法
		
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...
 - vue(2)—— vue简单语法运用,常用指令集
		
按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue 安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...
 - ES6最新语法
		
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...
 - ES6新语法之let关键字;有别于传统关键字var的使用
		
ES6新语法于2015年发布:而我这个前端小白在17年才接触到.惭愧惭愧!!不过到目前为止,似乎只有FireFox和Chrome对ES6的支持相对良好.不过既然人家ES6已经出来了,还是要跟上技术的潮 ...
 - Vue(1)- es6的语法、vue的基本语法、vue应用示例,vue基础语法
		
一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...
 - ES6常用语法简介import export
		
ES6常用语法简介import export let与var用法区别 //var var a = []; for (var i = 0; i < 10; i++) { a[i] = functi ...
 - es6基本语法,vue基本语法
		
一.es6基本语法 0.es6参考网站 http://es6.ruanyifeng.com/#README 1.let 和 const (1)const特点: 只在局部作用域起作用 不存在变量提升 不 ...
 - ES5与ES6常用语法教程之 ②解构语法糖、声明变量异同
		
js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语法教程(3) es5与es6常用语法教程(4) es5与es6常用语法教程(5) es ...
 
随机推荐
- LED Decorative Light Manufacturer - LED Neon Rope: 5 Advantages
			
In the past 100 years, lighting has come a long way. Nowadays, the decorative LED lighting design ca ...
 - HTML学习(3)基础
			
*开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag). *虽然有时候忘记写结束标签有的浏览器也能正常显示内容,但有时候会出现不可预料的结果或错误,所以 ...
 - linux deploy---旧手机变废为宝
			
前几天朋友送了我一部红米Note 1s,本来不想要,转念一想,不要白不要,就收了. 拿到之后我就想,这么一个1+8的手机能做什么呢? 翻遍了CSDN和简书,找到了一个性价比不错的方法:给旧手机装上一个 ...
 - 关于我 & 关于这个博客
			
关于我 OIer,初一在读,蒟蒻,普及组选手,只拿过两次PJ2=,实乃菜也 喜欢数学,OI,OI 上主要研究高级数据结构(如平衡树)和一些不那么暴力的算法(如分块) 打不动 CF . 关于这个博客 是 ...
 - nmon+Java Nmon Analyser进行nmon监控数据可视化分析
			
我们知道nmon是一款轻量级的系统占用极少,监控功能非常强大支持跨平台ARM,centos,ubuntu等等系统的工具下载地:centos7 wget http://sourceforge.net/p ...
 - 如何使用 idea提交svn代码
			
链接:https://jingyan.baidu.com/article/b2c186c80d81b1c46ff6ff59.html
 - 《C语言程序设计》王希杰 课后答案
			
仅供参考,好好学习,不要骗自己哦! 在线预览 预览链接: https://www.kdocs.cn/l/shOy4IgXl 下载: 链接1: http://t.cn/AiBK2mgJ 链接2: htt ...
 - 理解ASP.NET Core验证模型 Claim, ClaimsIdentity, ClaimsPrincipal
			
Claim, ClaimsIdentity, ClaimsPrincipal: Claim:姓名:xxx,领证日期:xxx ClaimsIdentity:身份证/驾照 ClaimsPrincipal: ...
 - jQuery+PHP+Ajax动态数字统计展示实例
			
jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中. 首先我们在#number放置要统计的数字: <div ...
 - 7、源与值(Source/Values)
			
学习目录:树莓派学习之路-GPIO Zero 官网地址:https://gpiozero.readthedocs.io/en/stable/source_values.html 环境:UbuntuMe ...