ES6新特性以及一些规范
1.let:使变量成为块级变量,类似于C++,java类的变量
b = 2
if (b == 2) {
let c = 2;
}
console.log(c) // 报错,因为c是一个块级变量,只存在if块里,我觉得这点特别棒
2.Object
2.1 使用字面量语法来创建对象
a = new Array() // bad
a = {} // good
2.2 简写对象方法
//新特性
a = {
sayHello() {
console.log("hello")
}
}
//旧写法
a = {
sayHello: funtion() {
console.log("Hello")
}
}
a.sayHello();//都有效
es6增加这个功能真的是!感天动地,省去了很多步骤
2.3 简写对象属性值方法
name = "CJG"
a = {
name
}
console.log(a.name) // CJG
只要你那个变量的名字和你想定义的属性的名字一样,就可以用这种方法简写!很方便吧
不过呢,如果想用这个的话,就把所有的简写对象属性都放在前面,方便阅读,如
a = {
name,
age,
school: "SYSU"
}
3.Array
3.1数组复制
var s1 = [1,2,3,4]
//bad
var s2 = []
for (let i = 0; i < s1.length; i++)
s2[i] = s1[i]
//good
s2 = [...s1]
用这种方法复制的话,少写了很多额外的代码,感觉特别好用
3.2在插入数组的时候,用push
//bad
array[length] = newitem
//good
array.push(newitem)
3.3使用Array.from将类数组对象转化为数组

4.String
4.1 用''符号而不要用""符号来创建字符串
4.2 当字符串过长的时候,分成果断,并用+号连接起来
//bad
const errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowherefast.';
// bad
const errorMessage = 'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.';
// good
const errorMessage = 'This is a super long error that was thrown because ' +
'of Batman. When you stop to think about how Batman had anything to do ' +
'with this, you would get nowhere fast.';
4.3 模板字符串
let str = "CJG"
let name
//bad
name = "My name is " + str
//good
name = `My name is ${str}`
这样看起来更直观一点,插入什么变量一目了然
4.4 不要用eval()!!!!
4.5 尽量不要用转义符
//bad
const foo = '\'this\' \i\s \"quoted\"';
//good
const foo = `'this' is "quoted"`
5.Function
5.1不要用arguments,而用我们前面那种将类数组转化为数组的方法
//bad
function Hello(name) {
console.log(`Hello, ${arguments[0]});
}
//good
function Hello(...args) {
console.log(`Hello, ${args[0]});
}
5.2不要用function的构造函数去构造函数,因为用它就等于用eval(),可能会带来安全问题
6.Class & Constructors
6.1 在创建类的时候,用class关键字来创建,使用constructor来定义构造函数 // 更加直接
class Student {
constructor(name, age, school) {
this.name = name;
this.age = age;
this.school = school;
}
sayName() {
console.log(this.name);
}
saySchool() {
console.log(this.school)
}
}
let stu = new Student("ZHT", 20, "SYSU");
stu.sayName() // ZHT
stu.saySchool() // SYSU
6.2 要继承的时候,使用extends
` class goodStudent extends Student {
sayAge() {
console.log(this.age)
}
}
let goodStu = new goodStudent("CJG", 20, "SYSU);
goodStu.sayAge() // 20
6.3方法可以通过返回this来实现方法链式调用
class Person {
setName(name) {
this.name = name;
return this;
}
sayName() {
console.log(this.name);
return this
}
}
这样,我们就可以直接链式调用它的方法了
let p = new Person()
b.setName("cjg").sayName().setName("zht").sayName()
6.4使用class的时候,如果你没有声明构造函数的话,它会自己提供默认的构造函数,如果你不需要在构造函数做额外的事情(例如给某个变量赋值等),就没必要主动声明构造函数
//bad,没有必要,这是系统默认的
class goodStudent extends Student {
constructor(...args) {
super(...args);
}
}
//good 如果需要在构造函数做额外的工作,则主动声明构造函数
class goodStudent extends Student {
constructor(...args) {
super(...args);
this.age = 22;
}
}
7.Iterators
7.1在遍历数组的时候,使用javascript一些内置的函数,不要用for-in,防止你在遍历的时候,可能不小心修改了某些值,或者导致一些副作用
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
//bad
for (let i = 0; i < numbers.length; i++)
sum += numbers[i]
//good
numbers.forEach(number => sum += number)
8.Properties
8.1用.方法来访问对象的属性
const test = {
name: "test"
}
console.log(test.name)
8.2当用变量来访问属性的时候,用[]
let n = "name"
console.log(test[n])
ES6新特性以及一些规范的更多相关文章
- ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
- 你不知道的JavaScript--Item24 ES6新特性概览
ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...
- 前端入门21-JavaScript的ES6新特性
声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...
- ES6新特性概览1
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- ES6新特性之模板字符串
ES6新特性概览 http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串 http://www.infoq.c ...
- ES6新特性:Proxy代理器
ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...
- ES6新特性(函数默认参数,箭头函数)
ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
- ES6新特性简介
ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...
随机推荐
- 通过扩展让ASP.NET Web API支持JSONP -摘自网络
同源策略(Same Origin Policy)的存在导致了“源”自A的脚本只能操作“同源”页面的DOM,“跨源”操作来源于B的页面将会被拒绝.同源策略以及跨域资源共享在大部分情况下针对的是Ajax请 ...
- 实体框架 (EF) 入门 => 二、在全新的数据库中使用 Code First
学习资料:http://msdn.microsoft.com/zh-cn/data/jj193542 视频建立的控制台应用程序,我在这里使用MVC. 一.非常有磁性的,非常优雅 很喜欢看这个人的视频, ...
- 60分钟内从零起步驾驭Hive实战学习笔记
本博文的主要内容是: 1. Hive本质解析 2. Hive安装实战 3. 使用Hive操作搜索引擎数据实战 SparkSQL前身是Shark,Shark强烈依赖于Hive.Spark原来没有做SQL ...
- 【MySql】性能优化之分析命令
一 当发现程序运行比较慢的时候,首先排除物力资源问题之后,就将注意力转向mysq数据库: 1.首先确定运行慢的sql语句: mysql> show full processlist; 2.确认低 ...
- TcxDBTreeList导出EXCEL
function ExportExcel(tree: TcxDBTreeList; const fileName: string = '1.xls'): Boolean;var sd: TSave ...
- oracle学习 一 (持续更新中)
首先你需要创建一个表空间,然后,再创建一个用户名,用户名要给他指定一个表空间,并且给这个用户赋予权限, DBA: 拥有全部特权,是系统最高权限,只有DBA才可以创建数据库结构. RESOURCE:拥有 ...
- 解决远程连接mysql错误1130
Mysql远程连接Mysql服务器的数据库,错误代码是1130,ERROR 1130: Host xxx.xxx.xxx.xxx is not allowed to connect to this ...
- magento目录结构精编版
1 /app – 程序根目录 2 3 /app/etc – 全局配置文件目录 4 5 /app/code – 所有模块安装其模型和控制器的目录 6 7 /app/code/core – 核心代码或经过 ...
- Java获取IP地址:request.getRemoteAddr()注意
在JSP里,获取客户端的IP地址的方法是:request.getRemoteAddr() ,这种方法在大部分情况下都是有效的.但是在通过了Apache,Squid等反向代理软件就不能获取到客户 ...
- 使用Office-Word的博客发布功能(测试博文)
本人打算在博客园开博,但平时收集和整理资料都在OneNote中,又不想在写博客时还要进行复制粘贴操作,于是就想到了Microsoft Office自带的博客发布功能.在此做了一下测试,发布了此博文. ...