十分钟带你看一遍ES6新特性
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新特性的更多相关文章
- 轻松学会ES6新特性之生成器
生成器虽然是ES6最具魔性的新特性,但也是最难懂得的一节,笔者写了大量的实例来具体化这种抽象的概念,能够让人一看就懂,目的是希望别人不要重复或者减少笔者学习生成器的痛苦经历. 在说具体的ES6生成器之 ...
- 必须掌握的ES6新特性
ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...
- 前端入门21-JavaScript的ES6新特性
声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...
- 34.js----JS 开发者必须知道的十个 ES6 新特性
JS 开发者必须知道的十个 ES6 新特性 这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数 模版表达式 多行字符串 拆包表达式 改进的对象表达式 箭头函数 =&> ...
- ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- ES6新特性(函数默认参数,箭头函数)
ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
- ES6新特性简介
ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...
- 你不知道的JavaScript--Item24 ES6新特性概览
ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...
- javascript ES6 新特性之 扩展运算符 三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
随机推荐
- 关于java中构造方法、实例初始化、静态初始化执行顺序
在Java笔试中,构造方法.实例初始化.静态初始化执行顺序,是一个经常被考察的知识点. 像下面的这道题(刚刚刷题做到,虽然做对了,但是还是想整理一下) 运行下面的代码,输出的结果是... class ...
- UESTC 1324:卿学姐与公主(分块)
http://acm.uestc.edu.cn/#/problem/show/1324 题意:…… 思路:卿学姐的学习分块例题. 分块是在线处理区间问题的类暴力算法,复杂度O(n*sqrt(n)),把 ...
- 为什么Java只有值传递?
形参和实参 形式参数,是在方法定义阶段,是定义某个函数时使用的参数,用于接收实参传入.例f(x,y)中x和y是形参. 实际参数,是在方法调用阶段,是主调函数调用有参函数时,实际传递的内容.例f(3,7 ...
- 基于C#的机器学习--微基准测试和激活功能
本章我们将学习以下内容: l 什么是微基准测试 l 如何将它应用到代码中 l 什么是激活函数 l 如何绘制和基准测试激活函数 每个开发人员都需要有一个好的基准测试工具.质量基准无处不在;你们每 ...
- windows登陆suse虚拟机
vmware我还是比较偏向7.1.4版本,其他版本装在win7上似乎有点问题. windows平台下,使用vmware + opensuse的网络配置过程如下: 装完vm后,会在本地连接新创建两个新连 ...
- 你可能不知道的github的秘密
github也可以使用快捷键 先举例子,如何快速查找项目中的文件? 只需要进入项目,并按下T键 在浏览代码时,如何快速跳到指定行? 只需要进入项目,并按下L键 下面是一些常用的快捷键 聚焦搜索栏 按下 ...
- jmeter_遍历转换浮点时间戳
概述 近期帮朋友解决了一个浮点时间戳转换的问题,在这里记录一下. 具体场景是有一个十位浮点时间戳的list,需要遍历转换为当前的标准时间. list如下: 实现步骤 实现步骤其实很简单,只需要一个fo ...
- Ubuntu安装Sublime Text 3
终端命令行安装: Install the GPG key: wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo a ...
- 个人永久性免费-Excel催化剂功能第105波-批量调整不规范的图形对象到单一单元格内存储
在日常制表过程中,一个不得不面对的问题,许多的工作起点是基于其他人加工过的表格,无论自己多大的本领,面对不规范的其他人的制作的表格,经过自己的手,该擦的屁股还是要自己去亲手去擦,而带出来的也只会是一堆 ...
- C#中的Contains与IndexOf的区别
C#中要判断一个字符串是否包含另一个字符串,常用的两种方法是 str.Contains和str.IndexOf 这两个方法的区别是: Contains是找指定字符串是否包含一个字串,返回值的bo ...