ES6学习笔记二:各种扩展
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7242967.html
一:字符串扩展
1:字符串遍历器
for (let char of str) {
//
}
这个遍历器最大的优点是可以识别大于0xFFFF
的码点,传统的for
循环无法识别这样的码点。
2:确定一个字符串是否包含在另一个字符串中
- includes():返回布尔值,表示是否找到了参数字符串。
- startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
- endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
3:字符串重复n次
str.repeat(n) //strstrstr...重复n次
如果repeat
的参数是负数或者Infinity
,会报错。
4:字符串补全到所需长度
padStart(n,sub)
用于头部补全,padEnd(n,sub)
用于尾部补全。
用sub把字符串在头/尾补全到n长度。
如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。
如果省略第二个参数,默认使用空格补全长度。
5:模版字符串
在js代码中,可以用 反引号 定义模版字符串,模版字符串中可以使用 ${变量、调用函数、js表达式} 来插入值。
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${fn()}</em>
are on sale!
`);
6:标签模版
是一种特殊的函数调用形式:模版字符串跟在一个函数名后面,“标签”指的就是函数,紧跟在后面的模板字符串就是函数的参数。
如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。
var a = 5;
var b = 10; tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);
7:raw()
String.raw
方法,用来充当模板字符串的处理函数,对模版字符串中每一个斜杠都转义(即斜杠前面再加一个斜杠),然后返回替换原模板字符串。
String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"
如果原字符串的斜杠已经转义(即:已经有\转义),那么String.raw
不会做任何处理。
二:正则的扩展
1:正则表达式的创建:第一个参数是模式字符串,这时第二个参数表示正则表达式的修饰符(flag)。
var regex = new RegExp('xyz', 'i');
修饰符:
g:全局修饰符
u:unicode修饰符
y
修饰符,叫做“粘连”(sticky)修饰符:后一次匹配都从上一次匹配成功的下一个位置开始,y
修饰符确保匹配必须从剩余的第一个位置开始,这也就是“粘连”的涵义。
s修饰符:dotall模式,使得 . 可以匹配包括行终止符在内的一切内容。
2:字符串对象共有4个方法,可以使用正则表达式:match()
、replace()
、search()
和split()
。
3:返回修饰符
新增了flags
属性,会返回正则表达式的修饰符。
/abc/ig.source
// "abc" // 返回正则表达式的修饰符
/abc/ig.flags
// 'gi'
三:Number的扩展
1:二进制和八进制表示法:
分别用前缀0b
(或0B
)和0o
(或0O)跟数字 来表示二进制和八进制数据。
0b111110111 == 503
0o767 == 503
如果要将0b
和0o
前缀的字符串数值转为十进制,要使用Number
方法:
Number('0b111') //
2:检查数据是否有效、是否非数
Number.isFinite(number)
用来检查一个数值是否为有限的(finite)。
Number.isNaN(number)
用来检查一个值是否为NaN
。
3:字符串数字转化为数字
Number.parseInt('12.34') //
Number.parseFloat('123.45#') // 123.45
4:Number.isInteger()
用来判断一个值是否为整数。
5:极小值
新增一个极小的常量Number.EPSILON
。
引入一个这么小的量的目的,在于为浮点数计算,设置一个误差范围,如果这个误差能够小于Number.EPSILON
,我们就可以认为得到了正确结果。
6:整数范围
JavaScript能够准确表示的整数范围在-2^53
到2^53
之间(不含两个端点)。
ES6引入了Number.MAX_SAFE_INTEGER
和Number.MIN_SAFE_INTEGER
这两个常量,用来表示这个范围的上下限。
Number.isSafeInteger(number)
则是用来判断一个整数是否落在这个范围之内。
7:Math新增方法
Math对象上新增了17个与数学相关的方法。所有这些方法都是静态方法,只能在Math对象上调用。
1)取小数的整数部分
Math.trunc
方法用于去除一个数的小数部分,返回整数部分。
2)判断正负
Math.sign
方法用来判断一个数到底是正数、负数、还是零。
它会返回五种值。
- 参数为正数,返回+1;
- 参数为负数,返回-1;
- 参数为0,返回0;
- 参数为-0,返回-0;
- 其他值,返回NaN。
3)立方根
Math.cbrt
方法用于计算一个数的立方根。
4)求参数平方和的平方根
Math.hypot()
方法返回所有参数的平方和的平方根。
5)Math.log10(x)
返回以10为底的x
的对数。如果x
小于0,则返回NaN。
6)Math.log2(x)
返回以2为底的x
的对数。如果x
小于0,则返回NaN。
7)6个双曲函数方法。
Math.sinh(x)
返回x
的双曲正弦(hyperbolic sine)Math.cosh(x)
返回x
的双曲余弦(hyperbolic cosine)Math.tanh(x)
返回x
的双曲正切(hyperbolic tangent)Math.asinh(x)
返回x
的反双曲正弦(inverse hyperbolic sine)Math.acosh(x)
返回x
的反双曲余弦(inverse hyperbolic cosine)Math.atanh(x)
返回x
的反双曲正切(inverse hyperbolic tangent)
8)指数运算符(**
):a**b=a的b次幂
四:函数扩展
1)函数在定义时,可以为参数指定默认值(同python一样,默认值参数要放在参数列表后面部分)
2)调用函数时,可以通过解构赋值来传参
3)多余参数:
ES6 引入 rest 参数(形式为...变量名
),用于获取函数的多余参数。
rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
function add(...values) {
let sum = 0; for (var val of values) {
sum += val;
} return sum;
}
rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。
4)箭头函数:参数=>函数体
简单的箭头函数:var f=(参数)=>返回值
var sum = (num1, num2) => num1 + num2;
复杂的箭头函数:函数体多于一个语句,则用{}括起来,用return返回结果
var sum = (num1, num2) => { ......;return num1 + num2; }
箭头函数使得表达更加简洁。
5)尾调用优化
尾调用(Tail Call)是函数式编程的一个重要概念,指某个函数的最后一步是调用另一个函数。【最后一步不等于最后一条语句,而是在return语句的最末尾处】
尾调用由于是函数的最后一步操作,所以不需要保留外层函数的调用帧,因为调用位置、内部变量等信息都不会再用到了,所以可以删除外部函数调用帧,只保留内层尾调用的函数帧即可。
这就叫做“尾调用优化”(Tail call optimization),即只保留内层函数的调用帧。如果所有函数都是尾调用,那么完全可以做到每次执行时,调用帧只有一项,这将大大节省内存。这就是“尾调用优化”的意义。
6)尾递归:优化递归溢出的方法
函数调用自身,称为递归。如果尾调用自身,就称为尾递归。
递归非常耗费内存,因为需要同时保存成千上百个调用帧,很容易发生“栈溢出”错误(stack overflow)。但对于尾递归来说,由于只存在一个调用帧,所以永远不会发生“栈溢出”错误。
尾递归的实现,往往需要改写递归函数,确保最后一步只调用自身。做到这一点的方法,就是把所有用到的内部变量改写成函数的参数。
函数式编程有一个概念,叫做柯里化(currying),意思是将多参数的函数转换成单参数的形式:
function currying(fn, n) {//定义currying函数:在函数内部调用参数函数
return function (m) {
return fn.call(this, m, n);
};
} function tailFactorial(n, total) {
if (n === 1) return total;
return tailFactorial(n - 1, n * total);
} const factorial = currying(tailFactorial, 1);
7)尾递归优化:把递归转化为循环
function tco(f) {
var value;
var active = false;
var accumulated = []; return function accumulator() {
accumulated.push(arguments);
if (!active) {
active = true;
while (accumulated.length) {
value = f.apply(this, accumulated.shift());
}
active = false;
return value;
}
};
} var sum = tco(function(x, y) {
if (y > 0) {
return sum(x + 1, y - 1)
}
else {
return x
}
}); sum(1, 100000)
tco
函数是尾递归优化的实现,奥妙就在于状态变量active
。默认情况下,这个变量是不激活的。一旦进入尾递归优化的过程,这个变量就激活了。然后,每一轮递归sum
返回的都是undefined
,所以就避免了递归执行;而accumulated
数组存放每一轮sum
执行的参数,总是有值的,这就保证了accumulator
函数内部的while
循环总是会执行。这样就很巧妙地将“递归”改成了“循环”,而后一轮的参数会取代前一轮的参数,保证了调用栈只有一层。
五:数组扩展
1)扩展运算符
扩展运算符(spread)是三个点(...
)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
function push(array, ...items) {
array.push(...items);
}
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f(...args);
扩展运算符的应用:
合并数组:
// ES6的合并数组
var combine=[...arr1, ...arr2, ...arr3]
把字符串转化为字符数组:
[...'hello']
// [ "h", "e", "l", "l", "o" ]
拆分任何可迭代对象成为数组:
let arr = [...可迭代对象];
2)将对象转为数组
Array.from
方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}; let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
常见的类似数组的对象是DOM操作返回的NodeList集合,以及函数内部的arguments
对象。Array.from
都可以将它们转为真正的数组。
Array.from
还可以接受第二个参数(处理函数),作用类似于数组的map
方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
Array.from(arrayLike, x => x * x);
3)将一组离散值转化为数组
Array.of
方法用于将一组值,转换为数组。
Array.of(3, 11, 8)
4)数组对象的内部复制
copyWithin
方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。
Array.prototype.copyWithin(target, start = , end = )
它接受三个参数:
- target(必需):从该位置开始替换数据。
- start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
- end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
5)数组查找方法
find
方法:用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个回调函数返回值为true
的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined
。
[1, 4, -5, 10].find((n) => n < 0)
findIndex
方法的用法与find
方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) //
6)数组填充
fill
方法使用给定值,填充(覆盖)一个数组。【相当于memset】
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
fill
方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
7)数组遍历
entries()
,keys()
和values():
返回一个遍历器对象,可以用for...of
循环进行遍历:
keys()
是对键名(下标)的遍历、values()
是对键值的遍历,entries()
是对键值对的遍历。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
//
// for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b' for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
8)是否包含
includes
方法返回一个布尔值,表示某个数组是否包含给定的值:
[1, 2, 3].includes(2)
第二个参数表示搜索的起始位置,默认为0
。如果第二个参数为负数,则表示倒数的位置:
[1, 2, 3].includes(3, -1); // true
六:对象扩展
1)属性简写
ES6允许在对象之中,把外面定义的变量作为自己的属性:属性名为变量名, 属性值为变量的值。
var foo = 'bar';//定义变量
var baz = {foo};//把变量作为对象属性
2)方法简写
对象内定义方法,可以不加function前缀:
var o = {
method() {
return "Hello!";
}
};
// 等同于
var o = {
method: function() {
return "Hello!";
}
};
3)属性的getter和setter:用get、set声明函数
const obj = {
get foo() {},
set foo(x) {}
};
4)对象的值相等比较
ES6提出“Same-value equality”(同值相等)算法,Object.is
就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。
Object.is(obj1, obj2)
5)对象合并
Object.assign
方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。
第一个参数是目标对象,后面的参数都是源对象:
var target = { a: 1, b: 1 }; var source1 = { b: 2, c: 2 };
var source2 = { c: 3 }; Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
Object.assign
方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用,这个对象的任何变化,都会反映到目标对象上面。
6)对象属性的遍历
ES6 一共有5种方法可以遍历对象的属性。 (1)for...in for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。 (2)Object.keys(obj) Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)。 (3)Object.getOwnPropertyNames(obj) Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)。 (4)Object.getOwnPropertySymbols(obj) Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性。 (5)Reflect.ownKeys(obj) Reflect.ownKeys返回一个数组,包含对象自身的所有属性,不管属性名是 Symbol 或字符串,也不管是否可枚举。
7)Object.keys(),Object.values(),Object.entries()
Object.keys
方法:返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。
Object.values
方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。
Object.entries
方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。
8)对象的扩展运算符
扩展运算符 ... 不仅可以作用于数组,也可以作用于对象。
对象的解构赋值:用于从一个对象取值,相当于将所有可遍历的、但尚未被读取的属性,分配到指定的对象上面。
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
ES6学习笔记二:各种扩展的更多相关文章
- ES6学习笔记(二)——字符串扩展
相信很多人也和我一样,不喜欢这样循规蹈矩的逐条去学习语法,很枯燥乏味.主要是这样学完一遍之后,没过一段时间就忘到九霄云外了.不如实际用到的时候研究它记得牢靠,所以我就整理成笔记,加深记忆的同时便于复习 ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- ES6学习笔记二
字符串遍历 var str = 'hello'; for(let s of str){console.log(s += ' ')} //h e l l o 字符串查找:添加了include(str,i ...
- ES6学习笔记(二)
Set 和 Map 数据结构 1.set 基本用法 ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值 Set本身是一个构造函数,用来生成Set数据结构 const s ...
- es6学习笔记二:生成器 Generators
今天这篇文章让我感到非常的兴奋,接下来我们将一起领略ES6中最具魔力的特性. 为什么说是“最具魔力的”?对于初学者来说,此特性与JS之前已有的特性截然不同,可能会觉得有点晦涩难懂.但是,从某种意义上来 ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
- ES6学习笔记<三> 生成器函数与yield
为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...
- ES6学习笔记<一> let const class extends super
学习参考地址1 学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...
随机推荐
- java如何直接返回excel到客户端
既然是web项目首先你得拿到响应才能向外部写出,你得拿到响应对象response,1.添加如下两行代码response.setContentType("application/vnd..ms ...
- Shape 各种属性详解
本文来自:http://blog.csdn.net/brokge/article/details/9713041 简介: 作用:XML中定义的几何形状 位置:res/drawable/文件的名称.xm ...
- PHP开发微信被动回复消息遇到的大坑
最近开始做CMS后台与微信公众号的整合,在做被动回复消息时,按照官方文档的XML格式回复消息,总是提示"该公众号提供的服务出现故障,请稍后再试".但是通过微信提供的接口调试工具看我 ...
- 零基础写python爬虫之使用Scrapy框架编写爬虫
网络爬虫,是在网上进行数据抓取的程序,使用它能够抓取特定网页的HTML数据.虽然我们利用一些库开发一个爬虫程序,但是使用框架可以大大提高效率,缩短开发时间.Scrapy是一个使用Python编写的,轻 ...
- qt.qpa.plugin: Could not find the Qt platform plugin "windows" in ""
转载:https://forum.qt.io/topic/97484/qt-5-12-make-mingw-32-release/12 I build Qt 5.12 with MinGW 7.3.0 ...
- Three.js中如何显示帧速【转】
https://blog.csdn.net/hannahlwh1988/article/details/36876295 Step1:src中添加: <script src="js/s ...
- FileStream 的FileShare一点小认识
C#读写文本文件一般都是用StreamWriter来实现(读书的时候就这样用,毕业后这几年基本也是这样干的),通常代码如下: using (StreamWriter sw = new StreamWr ...
- 如何解决在Windows Server 2008 R2 上安装证书服务重启后出现 CertificationAuthority 91错误事件
很久都没写什么博客了,前一段时间学习2008 R2时,在自己的电脑上同时安装AD 和证书 往往会出现一个CertificationAuthority错误,如下: 产生问题的主要原因是: 证书服务器与D ...
- 《Hadoop大数据架构与实践》学习笔记
学习慕课网的视频:Hadoop大数据平台架构与实践--基础篇http://www.imooc.com/learn/391 一.第一章 #,Hadoop的两大核心: #,HDFS,分布式文件系统 ...
- 高德地图JS-API (超简单Get新技能√)
上几章我们研究了百度地图SDK的用法,虽然不难但是配置起来也是相当的繁琐,现在高德LBS开放平台推出了基于HTML5的地图组件,我们可以通过WebView直接用URL 以GET方式进行请求就可以实现位 ...