es6添加删除class_ES6中常用的10个新特性讲解
ECMAScript 6(ES6) 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中绝大多数的特性。
下面逐一为大家详解常用的ES6新特性:
1.不一样的变量声明:const和let
ES6推荐使用let声明局部变量,相比之前的var(无论声明在何处,都会被视为声明在函数的最顶部)
let和var声明的区别:
var x = '全局变量';
{let x = '局部变量';console.log(x); // 局部变量
}
console.log(x); // 全局变量
let表示声明变量,而const表示声明常量,两者都为块级作用域;const 声明的变量都会被认为是常量,意思就是它的值被设置完成后就不能再修改了:
const a = 1
a = 0 //报错
如果const的是一个对象,对象所包含的值是可以被修改的。抽象一点儿说,就是对象所指向的地址没有变就行:
const student = { name: 'cc' }student.name = 'yy';// 不报错
student = { name: 'yy' };// 报错
有几个点需要注意:
1、let 关键词声明的变量不具备变量提升(hoisting)特性
2、let 和 const 声明只在最靠近的一个块中(花括号内)有效
3、当使用常量 const 声明时,请使用大写变量,如:CAPITAL_CASING
4、const 在声明时必须被赋值
2.模板字符串
在ES6之前,我们往往这么处理模板字符串:
通过“”和“+”来构建模板
$("body").html("This demonstrates the output of HTML
content to the page, including student's
" + name + ", " + seatNumber + ", " + sex + " and so on.");
而对ES6来说
- 基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定;
- ES6反引号(``)直接搞定;
$("body").html(`This demonstrates the output of HTML content to the page,
including student's ${name}, ${seatNumber}, ${sex} and so on.`);
3.箭头函数(Arrow Functions)
ES6 中,箭头函数就是函数的一种简写形式,使用括号包裹参数,跟随一个 =>,紧接着是函数体;
箭头函数最直观的三个特点。
1、不需要 function 关键字来创建函数
2、省略 return 关键字
3、继承当前上下文的 this 关键字
// ES5
var add = function (a, b) {return a + b;
};
// 使用箭头函数
var add = (a, b) => a + b;// ES5
[1,2,3].map((function(x){return x + 1;
}).bind(this));// 使用箭头函数
[1,2,3].map(x => x + 1);
细节:当你的函数有且仅有一个参数的时候,是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return;
4. 函数的参数默认值
在ES6之前,我们往往这样定义参数的默认值:
// ES6之前,当未传入参数时,text = 'default';
function printText(text) {text = text || 'default';console.log(text);
}// ES6;
function printText(text = 'default') {console.log(text);
}printText('hello'); // hello
printText();// default
5.Spread / Rest 操作符
Spread / Rest 操作符指的是 ...,具体是 Spread 还是 Rest 需要看上下文语境。
当被用于迭代器中时,它是一个 Spread 操作符:
function foo(x,y,z) {console.log(x,y,z);
}let arr = [1,2,3];
foo(...arr); // 1 2 3
当被用于函数传参时,是一个 Rest 操作符:当被用于函数传参时,是一个 Rest 操作符:
function foo(...args) {console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]
6.二进制和八进制字面量
ES6 支持二进制和八进制的字面量,通过在数字前面添加 0o 或者0O 即可将其转换为八进制值:
let oValue = 0o10;
console.log(oValue); // 8let bValue = 0b10; // 二进制使用 `0b` 或者 `0B`
console.log(bValue); // 2
7.对象和数组解构
// 对象
const student = {name: 'Sam',age: 22,sex: '男'
}
// 数组
// const student = ['Sam', 22, '男'];// ES5;
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name + ' --- ' + age + ' --- ' + sex);// ES6
const { name, age, sex } = student;
console.log(name + ' --- ' + age + ' --- ' + sex);
8.对象超类
ES6 允许在对象中使用 super 方法:
var parent = {foo() {console.log("Hello from the Parent");}
}var child = {foo() {super.foo();console.log("Hello from the Child");}
}Object.setPrototypeOf(child, parent);
child.foo(); // Hello from the Parent// Hello from the Child
9.for...of 和 for...in
for...of 用于遍历一个迭代器,如数组:
let letters = ['a', 'b', 'c'];
letters.size = 3;
for (let letter of letters) {console.log(letter);
}
// 结果: a, b, c
for...in 用来遍历对象中的属性:
let stus = ["Sam", "22", "男"];for (let stu in stus) {console.log(stus[stu]);}
// 结果: Sam, 22, 男
10.ES6中的类
ES6 中支持 class 语法,不过,ES6的class不是新的对象继承模型,它只是原型链的语法糖表现形式。
函数中使用 static 关键词定义构造函数的的方法和属性:
class Student {constructor() {console.log("I'm a student.");}study() {console.log('study!');}static read() {console.log("Reading Now.");}
}console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."
类中的继承和超集:
class Phone {constructor() {console.log("I'm a phone.");}
}class MI extends Phone {constructor() {super();console.log("I'm a phone designed by xiaomi");}
}let mi8 = new MI();
extends 允许一个子类继承父类,需要注意的是,子类的constructor 函数中需要执行 super() 函数。
当然,你也可以在子类方法中调用父类的方法,如super.parentMethodName()。
在 这里 关于类的介绍。
有几点值得注意的是:
- 类的声明不会提升(hoisting),如果你要使用某个 Class,那你必须在使用之前定义它,否则会抛出一个 ReferenceError 的错误
- 在类中定义函数不需要使用 function 关键词
es6添加删除class_ES6中常用的10个新特性讲解相关推荐
- es6添加删除class_es6中class类的使用
在es5中我们是使用构造函数实例化出来一个对象,那么构造函数与普通的函数有什么区别呢?其实没有区别,无非就是函数名称用首字母大写来加以区分,这个不用对说对es5有了解的朋友都应该知道. 但是es5的这 ...
- es6添加删除class_ES6 class(基本语法+方法)
静态属性与静态方法 1. 不会被类实例所拥有的属性与方法 只是类自身拥有 2. 只能通过类调用 静态方法与普通方法重名,不会冲突 static 关键字(静态方法) 静态属性 类名.属性名 = 属性值; ...
- es6添加删除class_ES6 class类的创建和模板字符串
1. class类的创建function ren(){ this.name = '名字'; this.age = '年龄'; this.sex = '性别'; //行为用函数来表示 this.run ...
- 隐藏添加删除程序中的程序在控制面板中的“添加/删除程序”项
隐藏添加删除程序中的程序在控制面板中的"添加/删除程序"项是我们要卸载程序一个程序最彻底的地方.但很多时候为了防止自己安装的程序不被别人卸载,我们希望能够在"添加/删除程 ...
- 7-2 删除字符串中指定字符 (10分)
7-2 删除字符串中指定字符 (10分) 删除字符串中的指定字符,字符串和要删除的字符均由键盘输入. 输入格式: 在第一行中输入一个长度不超过20的字符串.并以回车结束:在第二行中输入待删除的一个字符 ...
- JavaScript的ES6、ES7、ES8、ES9、ES10新特性
ES6.ES7.ES8.ES9.ES10新特性 ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript版本为ECMA-41 ...
- android p preview_细数 Android P 开发者预览版中最不能错过的新特性
原标题:细数 Android P 开发者预览版中最不能错过的新特性 2018年安卓巴士全球开发者论坛-重庆站 [线下活动]春天到了 跟小编一起去重庆嗨皮吧~ Android P 应用适配新特性1.Pr ...
- Java 10的10个新特性,将彻底改变你写代码的方式
转载自 Java 10的10个新特性,将彻底改变你写代码的方式 Java 9才发布几个月,很多玩意都没整明白,现在Java 10又要来了.. 这时候我真尼玛想说:线上用的JDK 7 甚至JDK 6,J ...
- 《精通ArcGIS Server 应用与开发》——1.3 ArcGIS 10 Mobile新特性1
本节书摘来自异步社区<精通ArcGIS Server 应用与开发>一书中的第1章,第1.3节,作者: 何正国 , 杜娟 , 毛海亚 更多章节内容可以访问云栖社区"异步社区&quo ...
最新文章
- 年入近1亿,曾被20家VC拒绝,如今电商是他大客户,数据处处有黄金
- springboot创建项目2 开发环境的搭建
- 如何为你的博客园添加到百度统计
- 【jQuery】jQuery操作input的聚焦与全选其内容
- springMVC简易学习笔记一
- linux 更新目录时间戳,修改linux 文件的时间戳
- android实现应用商店开发,基于Android平台的应用商店客户端的设计与实现
- 对于离散行业如何选型MES系统,你知道吗?
- java 修改pdf_使用Java编辑PDF文本
- c语言九宫格的递归算法,九宫格 数独 求解 算法 栈实现
- HihoCoder - 1370 快乐数字
- 安装ADOBE READER时无法将数值写入键
- linux unlink 函数,linux – unlink和rm有什么区别?
- JavaScript中栈内存与堆内存分别是什么?
- Java 将word文档转成html内容,输出到富文本
- 自己尝试使用简单数据集实现决策树 代码——《机器学习实战》
- 极限思想在计算机中的应用,数学极限思想的应用论文(共2篇)
- FTP指的是什么协议?由什么组成?有什么作用?
- [na]office 2010 2013卸载工具
- 如何卸载Oracle
热门文章
- SAP WebClient UI的会话重启原理
- SAP CRM Product hierarchy,Category和Application的三个问题
- 一个有用的Chrome扩展应用:SAP UI5 Inspector
- 如何使用ABAP把数字转换成单词
- Hybris服务器启动日志分析
- UI binding render - how to check
- 使用application log 分析navigation target解析错误
- 使用maven的一个最简单的例子
- Product change时关于change_log的讨论
- SAP CRM BSP URL 302 redirect