let , const关键字

var

看习惯了java, 看js真的是忍不住想笑,比如说这个var,它太自由了,自由到{}根本限制不住它的生命周期

js的var关键字,无论在何处声明,都会被视为声明在函数的最顶部,不在函数里面的就被视为在全局的最顶部,这就是所谓的变量提升

function aa(bool) {if (bool) {var test = "hello";} else {console.log(test);}
}
aa(false);

比如上面的代码, 他就不会报错,而是说undifined, 因为var的变量提升, 相当于下面那样:

function aa(bool) {var test;if (bool) {test = "hello";} else {console.log(test);}
}
aa(false);

let

换成let关键字,就会普通变量, 它的生命周期被限制在 { }

function aa(bool) {if (bool) {let test = "hello";} else {console.log(test);}
}

const

const 声明常量, 值不允许被修改,而且必须初始化

function aa() {let a = 'abc';const test = a;a = "world";alert('a=='+a);alert('test=='+test);
}
aa();

结果就是 abc world

如果尝试直接对test赋值, 编译器会报错的

模板字符串的拼接

这样取值完全没问题, 但是js的设计者认为他 + 太多了,low爆了

console.log(name1 + "喜欢" + name2); 

于是: ${} , 注意啊, 是esc下面的键位

console.log(`${name1}喜欢${name2}`); 

方法入参的默认值

如果我们不给入参传值, 默认就是空, 一用就报错, 所以参数需要默认值是很有必要的

这时候, 用户传递进来值了,使用的就是用户传递进来的值, 在java中想干这个事,得在参数位置加老长的注解

function sayName(name = "张三") {alert(name);
}

箭头函数

es6的箭头函数和java8的lambda表达式如出一辙, 因为学了java8, 所以es6的箭头函数也是秒上手了, 包括流式的操作也如出一辙

对象的简写和解构

原来,如果方法想返回一个对象,需要这样写

function people(name, age) {
return {name: name,age: age
}
}

在es6中,如果属性和值相同 ,就变成了这样

function people(name, age) {return {name,age}
}

动态的添加属性, 在java想都别想,

let p = {name: '张三', age: 680};
alert(p.name);
alert(p.age);
  • 添加属性
p.address = '山东';
  • 添加函数
p.add = () => {};

其实js这么自由也不一定是好事, 起码不能乱点了, 它也不给报错, 一不留神就多了个属性

组装对象或数组SpreadOperator ...

const color = ['red', 'blue'];
const colorful = [...color, 'green']
// 现在 colorful数组就是 三个颜色的数组 , 同样换成{}  也一样

Import 和 export

这个特性vue用的最多, 模块化的感觉很强烈

let fun = function () {console.log("fun")
}
export {fun}// 在第二个文件 导入
import fun from "./fun";
// 然后使用
fun()

面向对象的编程模式-类

class person {// 构造函数constructor(name) {this.name = name; // 不提前定义变量? 不存在的,直接点就行了老铁}// 方法sayHello() {console.log("hello");}
}// 类的继承
class Student extends person {constructor(name) {super(name);}sayHaha() {console.log("haha");}
}

使用:

它并不能写 父类引用指向子类对象

//person stu = new Student('zhangsan');
var stu = new Student('zhangsan');
stu.sayHaha();

转载于:https://www.cnblogs.com/ZhuChangwu/p/11314200.html

分分钟带你欣赏ES6语法糖相关推荐

  1. ES6 语法糖(一)

    一.为什么要学习ES6? ES6是JavaScript的下一代标准,解决了es5中存在的问题. 二.语法 1.let  const let      1.只在所处的块级有效,而var 不具有块级作用域 ...

  2. 华为手机自带浏览器不支持 ES6 语法

    原文地址:https://caochangkui.github.io/huawei-es6/ 华为手机自带浏览器对 es6 语法的支持度极差,哪怕最新的荣耀10 手机也有该毛病!所以,移动端项目开发中 ...

  3. python数列求和-加强版_ES6深入浅出-3 三个点运算 新版字符串-1.函数与对象的语法糖...

    主要讲的内容 时间充裕的话就讲,模板字面量 默认参数值 首先讲es6之前,我们是怎么做的.例如我们要写一个求和的函数, 请两个参数的和,但是如果有的人就是穿一个参数呢? 那么b没有传值,b的值是多少呢 ...

  4. 为什么说ES6的class是语法糖?

    0. 前言 我们带着问题去阅读本文: 为什么说ES6的class是语法糖? class是原型的语法糖吗? 那又是如何使用原型来实现class这一语法糖的呢? 1. 基于Prototype的OOP 先来 ...

  5. JavaScript 精选:哪些能提高开发效率的es6 新语法糖

    文章目录 一 ECMAScript 相关介绍 1 什么是 ECMA 2 什么是 ECMAScript 3 什么是 ECMA-262 4 谁在维护 ECMA-262 5 为什么要学习 ES6 6 ES6 ...

  6. ES6新特性_ES6语法糖class介绍与初体验_就是个语法糖而已---JavaScript_ECMAScript_ES6-ES11新特性工作笔记033

    然后我们看es6中的class,es6中引入这个class这个概念,为了让js的写法更加的 面向对象,写起来方便好理解一些. 其实就是个语法糖而已,他的这个功能,es5的语法都能实现. . 可以看看e ...

  7. python语法糖怎么用_Python中语法糖及带参语法糖

    在python中,@符号常被称作语法糖(装饰器),在某函数定义时,用以包装该函数,以达到截取,控制该函数的目的. def d(f): print('d...') k=f #此处保留了传进来的原函数 f ...

  8. 语法糖是什么?(ES6的一些小笔记)

    专业的解释 在计算机科学中,语法糖(syntactic sugar)是指编程语言中可以更容易的表达一个操作的语法,它可以使程序员更加容易去使用这门语言:操作可以变得更加清晰.方便,或者更加符合程序员的 ...

  9. ES6+mocha+istanbul,针对ES6语法的带覆盖率检查的mocha测试

    安装 mocha, chai,mochawesome,istanbul npm install mocha chai mochawesome istanbul@1.0.0-alpha.2 --save ...

最新文章

  1. python 把元组转为列表
  2. linux 查询wwid命令,linux肿么查看硬盘的wwid
  3. oracle数据库视图:定义、查询与更新 实践学习报告
  4. 常识:佛前三炷香是什么意思
  5. Python2.x还是3.x?
  6. 2020年天猫双11官宣:分两波购买 比往年多3天
  7. python自动压图贴图到Excel小工具
  8. 1 月以来 Tether 增发 47 亿 USDT,美元都去哪儿了?
  9. 浅析指针(pointer)与引用(reference)
  10. 计蒜客 2016计蒜之道比赛 初赛第四场 记录
  11. 情感驿站005:为什么大多数人永远不会真正成功?
  12. 【 第一章:初识 ts】
  13. 智能家居系列之智能家居平台设计
  14. Ameba 博客 词汇语法句型 20141101
  15. Android开发规范
  16. 「京东白条」的数据架构进化之路
  17. 数据挖掘经典书籍推荐
  18. 基于MSP430F5529的后驱四轮小车
  19. SpringBoot + Spring Cloud +Vue 管理系统后台搭建(七、业务代码通用CURD实现)
  20. matlab离散点范围外云图,matlab利用m_map工具包画中国地图及散点云图

热门文章

  1. 解决执行go get时报错的问题:dial tcp: lookup xxx.com on 8.8.8.8:53: no such host
  2. sonarqube中,分析maven聚合工程时,不必分析parent工程,只需分析下面的module子工程即可
  3. maven项目打包插件:将maven项目打包成一个可执行的jar(瘦jar)
  4. cnpm install -g @vue/cli
  5. Python报错:IndentationError: unindent does not match any outer indentation level解决办法
  6. Hadoop 分布式集群搭建步骤
  7. sonar的安装以及使用
  8. Qt C++属性类型提供给 QML调用(二)
  9. python(numpy,pandas10)——pandas 合并数据 concat,append
  10. switch两个账号合并_国行Nintendo Switch账号常见问题解答