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();

十分钟带你看一遍ES6新特性的更多相关文章

  1. 轻松学会ES6新特性之生成器

    生成器虽然是ES6最具魔性的新特性,但也是最难懂得的一节,笔者写了大量的实例来具体化这种抽象的概念,能够让人一看就懂,目的是希望别人不要重复或者减少笔者学习生成器的痛苦经历. 在说具体的ES6生成器之 ...

  2. 必须掌握的ES6新特性

    ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...

  3. 前端入门21-JavaScript的ES6新特性

    声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...

  4. 34.js----JS 开发者必须知道的十个 ES6 新特性

    JS 开发者必须知道的十个 ES6 新特性 这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数 模版表达式 多行字符串 拆包表达式 改进的对象表达式 箭头函数 =&> ...

  5. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  6. ES6新特性(函数默认参数,箭头函数)

    ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...

  7. ES6新特性简介

    ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...

  8. 你不知道的JavaScript--Item24 ES6新特性概览

    ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...

  9. javascript ES6 新特性之 扩展运算符 三个点 ...

    对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...

随机推荐

  1. [hdu-6395]Sequence 分块+矩阵快速幂

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6395 因为题目数据范围太大,又存在递推关系,用矩阵快速幂来加快递推. 每一项递推时  加的下取整的数随 ...

  2. .NET Core IdentityServer4实战 第六章-Consent授权页

    在identityServer4中登陆页面只要是成功了,就会注册一个Cookie在服务器资源上,像现在大部分的网站第三方授权,都是经过一个页面,然后选需要的功能,IdentityServer4也给我们 ...

  3. 生产力工具:shell 与 Bash 脚本

    生产力工具:shell 与 Bash 脚本 作者:吴甜甜 个人博客网站: wutiantian.github.io 注意:本文只是我个人总结的学习笔记,不适合0基础人士观看. 参考内容: 王顶老师 l ...

  4. Javascript中escape(), encodeURI()和encodeURIComponent()之精析与比较

    escape(), encodeURI()和encodeURIComponent()是在Javascript中用于编码字符串的三个常用的方法,而他们之间的异同却困扰了很多的Javascript初学者, ...

  5. 跟我学SpringCloud | 第九篇:服务网关Zuul初

    SpringCloud系列教程 | 第九篇:服务网关Zuul初探 前面的文章我们介绍了,Eureka用于服务的注册于发现,Feign支持服务的调用以及均衡负载,Hystrix处理服务的熔断防止故障扩散 ...

  6. 分享SQL,查询用户最近一次购买时间间隔

    (1)先创建一张测试表: CREATE TABLE `用户购买订单` ( `购买时间` datetime(6) NULL DEFAULT NULL, `用户` varchar(20) CHARACTE ...

  7. Atlassian In Action-Jira之指导思想(一)

    太上,不知有之:其次,亲而誉之:其次,畏之:其次,侮之.信不足焉,有不信焉.悠兮,其贵言.功成事遂,百姓皆谓"我自然". --<道德经> 研发管理或者系统工具的指导思想 ...

  8. centos 5.2 php升级

    # gedit /etc/yum.repos.d/utterramblings.repo [utterramblings] name=Jason's Utter Ramblings Repo base ...

  9. dockerfile 制作镜像

    # Set the base image to UbuntuFROM ubuntu # File Author chenghanMAINTAINER chenghan ################ ...

  10. 从零开始认识Dubbo

    目录 1.Dubbo是什么 2.Dubbo能做什么 3.Dubbo架构 4.Dubbo的使用方法 5.使用Dubbo可能遇到的问题 1.Dubbo是什么 http://dubbo.apache.org ...