当前位置: 首页 > 编程日记 > 正文

三,ES6中需要注意的特性(重要)

-----书接上文,前文中我们总结了关于JS的组成部分以及如何快速开展学习JS,相信已经有很多朋友掌握到这些方法。接下来就从更深的ECMAScript开始说起。



1.什么是ES6?

ECMAScript(European Computer Manufacturers Association) 6: 是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。
简单来说ES6在JS中的作用就是语言的标准。它里面定义了如何去定义变量,如何写函数,如何写数组....
相对于ES5来讲ES6中多出来几点新特性,而且普及速度相对于ES5来讲要快很多,现在主流版本的浏览器如Chrome 和 Firefox 浏览器可以支持ES6中绝大多数特性。
接下来围绕ES6的新特性开始说起。

2.ES6特性---量的声明(let and const)

(1)使用Let声明变量

前面说到,JS中声明变量是通过 var 来声明 var 是variable的简写。 variabel是变化的意思。
而在ES6中推荐使用let声明局部变量,相比于之前的var声明的全局变量
使用Let声明变量不会使变量提升:

console.log(b);
let b = 666;  // b is not defined
复制代码

使用Let不能重复声明

let a =1;
let a =1; //Identifier 'a' has already been declared
复制代码

Let可以形成一个块级作用域

if (true){var a = 100;
}
console.log(a);// a = 100
复制代码
if (true){let a = 100;
}
console.log(a);// a is not defined
复制代码

(2)使用Const声明常量

使用Const声明常量不会使常量提升:

console.log(PI);
const PI = 3.14;// PI is not defined
复制代码

使用Const不能重复声明

const PI = 3.14;
PI = 666;//Assignment to constant variable
复制代码

Const可以形成一个块级作用域

{const PI = 3.14;
}
console.log(PI);//PI is not defined
复制代码

总结一下:
相同点:Let与Const不会使量提升不能重复声明都能形成块级作用域
不同点:Let声明变量Const声明常量

3.ES6特性---箭头函数(Arrow Functions)

箭头函数是函数的简写,是ES6中非常强大的简写形式。不需要 function 关键字来创建函数。省略 return 关键字。继承当前上下文的 this 关键字(没有自己的this)。

var f = function(a){console.log(a);
}
//?
var f = (a)=>{console.log(a);
}
//?
var f = a =>{console.log(a);
}// 当参数只有一个的时候,()是可以省略的
复制代码

箭头函数没有自己的this,所以使用的时候要格外小心。

var obj = {name: 'wsq',getName() {console.log(this.name);}}obj.getName(); // wsqvar obj = {name: 'wsq',getName: () => {console.log(this.name);}}obj.getName(); //  undefined复制代码

4.ES6特性---模板字符串(Template Literals)

允许嵌入表达式的字符串字面量,可以使用多行字符串和字符串插值功能。

1.用${}来将表达式嵌入字符串中进行拼接。
2.使用(``)进行包裹。

var name = 'wsq';
var aa = `test ${name} `;
console.log(aa); // test wsq
复制代码

5.ES6特性---函数的参数默认值

在ES6中,函数的参数默认值定义要更加简单:

function print(key = 'hello') {console.log(key);
}print('f'); // f
print();// hello
复制代码

这说明了,在ES6中,JS的形参是可以有默认值的。

6.ES6特性---For...of

新的循环方式,代替之前的 for...in 和 forEach 方法。 可在可迭代对象(包括 Array,Map,Set,String,arguments 对象等等)进行迭代循环
for...of 遍历数组:

let root = ['a', 'b', 'c'];
for (let x of root) {console.log(x);
} //a,b,c复制代码

7.ES6特性---ES6中的类

前面我们都是创建构造器,然后去new构造器,构造器就相当于一个类,在ES6中,就可以使用Class来创建对象了。

不使用Class,去创建一个类,如下:

function man (name,age,height){this.name = name;this.age = age;this.height = height;
}
man.prototype.say = function(){console.log(`我是${this.name}`)
}
var p = new man("wsq","22","180");console.log(p);
复制代码

使用Class,去创建一个类,如下:

class Man{constructor(name,age,height){this.name = name;this.age = age;this.height = height;}say(){console.log(`我是${this.name}`)}
}var p1 = new Man("wsq","22","180");
console.log(p1.say());
复制代码

8.ES6特性---对象超类与继承

ES6 允许在对象中使用 super 方法并使用Extends来实现继承

class Man{constructor(name,age,height){this.name = name;this.age = age;this.height = height;}say(){console.log(`我是${this.name}`)}
}class MVP extends Man{constructor(name,age,height,year){super(name,age,height)this.year = year;}showMVP(){console.log(`我是${this.name},我是${this.year}年的MVP`)}
}
var mvp1 = new MVP("wsq","22","180",2016);
mvp1.say();
mvp1.showMVP();
复制代码

9.ES6特性---对象扩展

(1)Obect.getOwnProertyDescriptor();

获取一个对象中某个属性的详细信息。

var a =1;
console.log(Object.getOwnPropertyDescriptor(window,"a"));//{value: 1, writable: true, enumerable: true, configurable: false}
复制代码

(2)Object.defineProperty();

精细化设置一个对象的属性。

(3)Object.defineProperties() ;

直接在一个对象上定义新的属性或修改现有属性,并返回该对象。

var obj = {}
Object.defineProperties(obj,{"name":{configurable:false,Writable:false,enumerable:false,value:"wsq"},"age":{configurable:false,Writable:false,enumerable:false,value:"66"}
});
console.log(obj.name,obj.age);//wsq 66
复制代码

(4)getOwnPropertyNames();

获取自的属性,以数组的格式返回。

var obj = {name : "wsq",age : 88
};
console.log(Object.getOwnPropertyNames(obj));//["name", "age"]
复制代码

(5)Object.keys();

使用Object.getOwnPropertyNames()和Object.keys()都可以得到一个对象的属性名,属性名是放在一个数组中的。

var obj = {name : "wsq",age : 88
};
console.log(Object.keys(obj));//["name", "age"]
复制代码

(6)Object.values();

获取对象的值,放到数组中。

var obj = {name : "wsq",age : 88
};
console.log(Object.values(obj));//["wsq", 88]
复制代码

10.ES6特性---其他补充

(1)Set与Map

set和数据差不多,也是一种集合,区别在于:它里面的值都是唯一的,没有重复的。

const s = new Set();
arrSet.add(1); // Set(1) {1}
arrSet.add(2); // Set(2) {1, 2}
arrSet.add(2); // Set(2) {1, 2}
复制代码

map类似于对象,里面存放也是键值对,区别在于:对象中的键名只能是字符串,如果使用map,它里面的键可以是任意值。

    var m = new Map([["a","hello"],[1,"123"]]);m.set(false,"abc")m.set([1,2,3]),{name:"wsq"}console.log(m);//Map(4){"a" => "hello", 1 => "123", false => "abc", Array(3) => undefined}
复制代码

(2)Trim

除去字符串空格的。

trim 左右空格去掉
trimLeft 左空格去掉
trimRight 右空格去掉

var str = " a abn abc "
str.trim();
/* "a abn abc"
str.trimLeft();
"a abn abc "
str.trimRight();
" a abn abc" */
复制代码

(3)Repeat

构造并返回一个新字符串,该字符串包含被连接在一起的指定数量的字符串的副本。

var str = "12345"
console.log(str.repeat(5));//1234512345123451234512345
复制代码

(4)Includes

用来判断一个字符串是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。

/* var str = "abc dde";str.includes("a")truestr.includes("z")falsestr.includes("c d")true
*/
复制代码

(5)StrartsWith

用来判断一个字符串是否是以指定内容开头,根据情况,如果包含则返回 true,否则返回false。

/*var str = "abc dde";str.strartsWith("abc")truestr.strartsWith("abdc")false
*/
复制代码

(6)EndsWidth

用来判断一个字符串是否是以指定内容结尾,根据情况,如果包含则返回 true,否则返回false。

/*var str = "abc dde";str.endsWith("dde")truestr.endsWith("abdc")false
*/
复制代码

(7)PadStart

如果这个字符串不够指定长度,会在头部补全。

/*var str = "abc def"str.padStart(15,"*")"********abc def"
*/
复制代码

(8)PadEnd

如果这个字符串不够指定长度,会在尾部补全。

/*var str = "abc def"str.padStart(15,"*")"abc def********"
*/
复制代码

关于ES6中的特性还有很多,本文仅仅是列举出较为有特点的一部分来说,有不足之处欢迎大家在评论里留言讨论,仅 此以为谢。

转载于:https://juejin.im/post/5b6ea8d3e51d451728322da5

相关文章:

【SVN】在阿里云上创建svn服务器

1、创建用户及相关设置 阿里云搭建ubuntu18.04工作台,默认只有root超级用户。为了安全起见,我们使用普通用户来创建svn: useradd hello // 创建用户hello mkdir -p /home/hello // 在hello用户的根目录 cd /home/hello chown hello . // 设…

【转】on delete cascade

关系表的级联更新: on update cascade on delete cascade 是级联删除的意思 意思是 当你更新或删除主键表时,那么外键表也会跟随一起更新或删除 CREATE TABLE Countries(CountryId INT PRIMARY KEY) INSERT INTO Countries (CountryId) VALUES (1) INSER…

倒计时1天!CTA核心技术及应用峰会报名通道即将关闭(附参会攻略)

全球智能化趋势当前,人工智能技术正蓬勃发展。为了直击开发者在机器学习与人工智能技术研究与落地过程中的痛点与瓶颈,深入解析机器学习和知识图谱技术在行业中的实践和落地。2019 年 5 月 26 - 27 日,由中国 IT 社区 CSDN 与数字经济人才发展…

【Qt】在QtCreator中使用Ctrl+Shift+f快捷键打开高级查找窗口失效的解决方法

1、问题描述 Win10操作系统环境下,在QtCreator中使用Ctrl+Shift+f快捷键打开高级查找窗口失效。 2、原因分析 Ctrl+Shift+f快捷键在各种输入法中,常用来做中文简体和繁体输入的切换。QtCreator中该快捷键失效的的原因,多半是因为和输入法的快捷键冲突。可以在输入法的快捷…

Python修行之字符串(一):连接、切割、大小写、排版

字符串:1.是由一个个字符组成有序的序列,是字符的集合2.字符串是不可变对象3.使用单引号、双引号、三引号引住的字符序列4.python3中、字符串就是unicode类型、在2中分两种一种unicode一种非unicode字符串元素访问--下标:1.字符串支持使用索引访问2.有序的字符集合&…

UI自动化测试随笔

昨天给开发的同事讲我们正在做的自动化测试,同事问了句:为什么API的测试不需要写代码了,而UI的测试还需要写那么多代码呢? 能不写代码么? 目前我们的自动化测试的现状: 目前主要覆盖两个部分:A…

【跃迁之路】【554天】程序员高效学习方法论探索系列(实验阶段311-2018.08.13)...

(跃迁之路)专栏 【跃迁之路】奖励金计划正式开始 从2018.7.1起,【跃迁之路】奖励金计划正式起航,从今以后,, 每月1日,我会将自己个人上月收入的1%计入【跃迁之路】奖励金池,积累到足够金额后,将…

TensorFlow 2.0来了,为什么他却说“深度学习框架之争,现在谈结果为时尚早”?...

记者 | 琥珀出品 | AI科技大本营(ID:rgznai100)半个多世纪前,浙江大学老校长竺可桢曾有两个非常经典的教育问题:“诸位在校,有两个问题应该自己问问,第一,到浙大来做什么?第二&#…

【FFmpeg】ffmpeg工具源码分析(一):main函数

ffmpeg工具经常用来转换、生成媒体文件,下面是它的源码分析(一):main函数 ffmpeg版本:4.2.1 int main(int argc, char **argv) {int i, ret;BenchmarkTimeStamps ti; # 用于基准测试init_dynload(); # 初始化动态库加载路径,只在win3

Android之传感器(一)

传感器的种类:1. 动作传感器加速度传感器、重力传感器和陀螺仪(判断手机姿态)等2. 位置传感器方向传感器和磁力传感器3. 环境传感器温度传感器 、压力传感器和亮度传感器 使用传感器的方法:1. 获取SensorManager对象SensorManage…

【Qt】Qt单例模式三种实现

1、饿汉式 在头文件中:将构造函数私有化,并创建静态函数instance来获取实例 class A : public QObject {Q_OBJECT public:static A* instance(QObject *parent = nullptr);private:explicit A(QObject *parent = nullptr); }

程序员敲代码时,戴着耳机究竟在听什么?

今天,某妹子突然凑到我的耳边轻声说:“我们公司的程序员,清一色的戴着耳机,你说他们是不是故意不想听我们提的需求?”我很方,因为我也喜欢戴耳机。(思考ing)思考了一秒钟后&#xff…

关于Oracle.ManagedDataAccess数据库表加字段后,必须重启的问题

关于Oracle.ManagedDataAccess数据库表加字段后,必须重启的问题,解决方法如下:在数据库连接字串中,增加一个参数:Metadata Poolingfalse如“Data Source(DESCRIPTION(ADDRESS_LIST(ADDRESS(PROTOCOLTCP)(HOST1.1.6.200…

配置导出MOSS2010列表数据到Excel并根据列表记录自动刷新数据

第一章 简介 场景描述 根据最近客户的需求,他们需要自动维护MOSS2010列表数据导出到Excel的数据实时同步,就是列表添加记录后,导出的Excel列表自动同步数据过来。 第二章 配置方法 1. 打开MOSS2010站点http://moss:8001的要导出的列表 2. 点【…

一个让Python代码运行更快的最佳方式!

作者 | Serdar Yegulalp译者 | 姜松浩,责编 | 屠敏转载自 CSDN(ID:CSDNnews)Python因其强大、灵活且易于使用等特性,而赢得了声誉。这些优点使其在各种各样的应用程序、工作流程和领域中得到了广泛应用。但是就语言的设…

《Python基础教程第二版》第五章-条件、循环和其他语句(一)

print和import print打印多个表达式,用逗号,隔开 print abc:, 42, nonono #输出在每个参数之间添加空格 print在结尾处加上逗号,,接下来的语句会与前一条语句打印在同一行 print hello, print word! #hello word! import从模块中导入函数 import module from module…

【Qt】QStackedWidget:将多个窗口控件放入堆中,每次只显示一个窗口控件

1、简介 QStackedWidget可以容纳多个窗口控件,每次只显示其中一个。例如:登录页面、各种功能页面等不同时显示的窗口,可以放入QStackedWidget中。 2、demo // 创建三个页面 QWidget *firstPageWidget = new QWidget; QWidget *secondPageWidget = new QWidget; QWidget *…

Android模仿iPhone View旋转刷新数据动画详解

因为小马很喜欢在不同的页面之间跳转时加点好玩的动画,今天无意间看到一个动画效果感觉不错,几种效果图如下,既然好玩就写在博客中,直接说就是:该效果类似于iPhone中View的切换动画效果,今天就只介绍上面展…

【SQL】sql语句LEFT JOIN(拼接表)详解

1、语法 SELECT column_name(s) FROM table1 LEFT JOIN table2 ON table1.column_nametable2.column_name;2、说明 按照一定规则,将表table1和表table12拼接起来。下面以学生管理系统为例,学生管理系统数据库各表如下 课程表: 学生表 成绩…

找啊找啊找木偶,图灵奖得主G. Hinton第一篇论文曝光!

作者 | Geoffrey Hinton 译者 | 李倩编辑 | 一一出品 | AI科技大本营(ID:rgznai100)摘要针对在具有重叠结构的透明矩形中寻找木偶这一问题,Hinton大神想到使用松弛算法,通过从冲突局部解释网络中提取全局最佳图形的方式找木偶。介…

终于,「最近邻搜索」有通用方法了

作者:Kevin Hartnett 编译:Bing 如果你打算开一家咖啡馆,你一定想知道:“附近最近的一家咖啡馆在哪?”了解这些信息有助于应对商业竞争。 这种现象是计算机科学中广泛研究的问题,称为“最近邻搜索”。它的问…

tar自动打包指定文件夹中的文件到指定目录

这是我离开上一家公司,到XX人寿保险公司的第一个工作内容,很简单,可以减少每天重复的工作量。写一个脚本,将指定文件夹下的所有文件打包成以日期命名的格式并存放到其父目录中,自动检测该压缩包,保留时间为…

【SQL】sql语句GROUP BY

1、语法 SELECT column_name, aggregate_function(column_name) FROM table_name GROUP BY column_name;2、说明 先对数据集分组,再根据规则批量处理每组数据。 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组,所谓的分组就是将…

色情低俗、暴力恐怖内容...如何用AI“一网打尽”?

作者 | Rachel、Just出品 | AI科技大本营(ID:rgznai100)移动互联网时代催生了大量的多媒体数据,每天在社交平台、长短视频、直播平台、新闻资讯等内容平台产生了数以亿计的图片和视频,这些数据的内容审核面临严峻的挑战。人工审核…

想要学好Go语言的必须知道的一个小技巧

2019独角兽企业重金招聘Python工程师标准>>> 由于我转Go语言比较早,很多认识我的,转Go或学习Go的同学遇到问题,经常会过来问我,然后,我发现。 除了学习Go语言可以看那些资料,这个问题以外&#…

【CSS3教程】CSS3基础常用技巧实例集合

为什么80%的码农都做不了架构师?>>> CSS3常用技巧 CSS3下条纹&方格斜纹背景的实现 一、效果抢先:CSS3下的条纹背景demo 这些美丽的纹饰全部都是由CSS实现的,没有一点点的图片。 二、原理简述 主要是应用了两个CSS3的属性&…

【FFmpeg】ffmpeg工具源码分析(二):转码核心函数 transcode

1、转码流程 1)转码前初始化:打开输入输出文件,初始化编码器、解码器、过滤器,创建多线程,设置串口终端等; 2)while循环处理每一包数据,核心函数 transcode_step(稍后分析); 3)转码结束前收尾工作:关闭多线程,刷新编解码缓冲区,恢复串口终端设置,向输出文件写…

在CentOS7上部署Apache Mesos

概述 Apache Mesos是一款基于多资源(内存、磁盘、CPU、端口等)调度的开源集群管理套件,能使容错和分布式系统更加容易。 工作原理 Apache Mesos采用了Master/Slave结构来简化设计,将Master做得尽可能轻量级,仅保存了各…

CTA核心技术及应用峰会开幕!(附第二日参会攻略)

全球智能化趋势当前,人工智能技术正蓬勃发展。为了直击开发者在机器学习与人工智能技术研究与落地过程中的痛点与瓶颈,深入解析机器学习和知识图谱技术在行业中的实践和落地。2019 年 5 月 26 - 27 日,由中国 IT 社区 CSDN 与数字经济人才发展…

Sharepoint学习笔记—ECMAScript对象模型系列-- 8、组与用户操作(一)

这里总结一下关于使用ECMAscript对象模型来操作Goup与User的常用情况,因为内容较多,所以拆分为两个部分,这部分主要内容如下: 1、取得当前Sharepoint网站所有的Group 2、获取当前登录用户的Title与所属Group 3、获取指定Group下的…