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 ...
随机推荐
- 2019牛客多校第四场J free 最短路
free 题意 给出一个带权联通无向图,你需要从s走到t,你可以选择k条变让他们的权值为0问从s到t的最小权值是多少? 分析 思考一下,如果不带k条白嫖这个条件,那么这就是一个简单的dji就搞定了,我 ...
- 牛客多校第一场 A Equivalent Prefixes 单调栈(笛卡尔树)
Equivalent Prefixes 单调栈(笛卡尔树) 题意: 给出两个数组u,v,每个数组都有n个不同的元素,RMQ(u,l,r)表示u数组中[l,r]区间里面的最小值标号是多少,求一个最大的m ...
- fader
fader在音频处理中是比较基础的处理.通常用于平滑的调节音量,或是音频的渐入和渐出效果. 比较常见的fader有line和cubic线型的fader. line fader即fader的渐变过程是线 ...
- 苹果公司以注重客户隐私闻名世界,但为什么Siri泄露了我的秘密?
编辑 | 于斌 出品 | 于见(mpyujian) 苹果的Siri因为其作为智能语音助手,方便人们打电话.发信息等功能,被人们所喜爱,但是最近,Siri好像有一些问题,让我们怀疑这位"小伙伴 ...
- UVA 11520 Fill the Square(模拟)
题目链接:https://vjudge.net/problem/UVA-11520 这道题我们发现$n\leq 10$,所以直接进行暴力枚举. 因为根据字典序所以每个位置试一下即可,这样的复杂度不过也 ...
- python项目虚拟环境搭建
一. 虚拟环境搭建目的 一个项目一个环境,防止各个项目互相干扰,项目更加简洁,利于打包.... 二.使用 pip install virtualenv 安装 创建虚拟环境 cd my_project_ ...
- 思科ISE配置专题–ISE部署方式
ISE部署方式有三种: 1.Standalong Deployment 所谓Standalong部署就是只有一台ISE,所有的组件都安装在这一台上面.一台ISE装好的时候默认是“Standalong” ...
- 503,display:none;与visibility:hidden;的区别
联系:他们都能让元素不可见 区别: display:none:会让元素从渲染树中消失,渲染的时候不占据任何空间: visibility:hidden:不会让元素从渲染树中消失,渲染时袁旭继续占据空间, ...
- 陆金所退出市场,我说:趁现在,抓紧离开P2P市场,你赞同吗?
编辑 | 于斌 出品 | 于见(mpyujian) 18日,也就是前天,陆金所退出P2P市场的消息就像颗"重磅炸弹"一样,一波激起千层浪,陆金所作为全国最大财富平台之一,这次退出, ...
- 69-for和if的嵌套使用
#include <stdio.h> int main (void) { int i; ; ; i<=; ++i) { == )//%3==0 这个意思是i除以3,余数是0!说普通点 ...