ECMAScript 6 笔记（二）

ES6中的基本扩展

一、字符串的扩展

　　1. 字符的Unicode表示法

　　用两个双字节的形式表达字符时，如果直接在\u后面跟上超过0xFFFF的数值（比如\u20BB7），JavaScript会理解成\u20BB+7。由于\u20BB是一个不可打印字符，所以只会显示一个空格，后面跟着一个7。

　　ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。

"\u{20BB7}"
// "??"

"\u{41}\u{42}\u{43}"
// "ABC"

　　2. codePointAt()

　　JavaScript内部，字符以UTF-16的格式储存，每个字符固定为2个字节。对于那些需要4个字节储存的字符（Unicode码点大于0xFFFF的字符），JavaScript会认为它们是两个字符。

var s = "??";

s.length // 2
s.charAt(0) // ‘‘
s.charAt(1) // ‘‘
s.charCodeAt(0) // 55362
s.charCodeAt(1) // 57271

　　对于这种4个字节的字符，JavaScript不能正确处理，字符串长度会误判为2，而且charAt方法无法读取整个字符，charCodeAt方法只能分别返回前两个字节和后两个字节的值。

　　ES6提供了codePointAt方法，能够正确处理4个字节储存的字符，返回一个字符的码点。

var s = ‘??a‘;

s.codePointAt(0) // 134071
s.codePointAt(1) // 57271

s.codePointAt(2) // 97

　　codePointAt方法的参数，是字符在字符串中的位置（从0开始）。上面代码中，JavaScript将“??a”视为三个字符，codePointAt方法在第一个字符上，正确地识别了“??”，返回了它的十进制码点134071（即十六进制的20BB7）。在第二个字符（即“??”的后两个字节）和第三个字符“a”上，codePointAt方法的结果与charCodeAt方法相同。

　　codePointAt方法会正确返回32位的UTF-16字符的码点。对于那些两个字节储存的常规字符，它的返回结果与charCodeAt方法相同。

　　codePointAt方法返回的是码点的十进制值，如果想要十六进制的值，可以使用toString方法转换一下。

　　codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。

function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}

is32Bit("??") // true
is32Bit("a") // false

　　3. String.fromCodePoint()

　　ES5提供String.fromCharCode方法，用于从码点返回对应字符，但是这个方法不能识别32位的UTF-16字符（Unicode编号大于0xFFFF）。

　　ES6提供了String.fromCodePoint方法，可以识别0xFFFF的字符

String.fromCodePoint(0x20BB7)
// "??"
String.fromCodePoint(0x78, 0x1f680, 0x79) === ‘x\uD83D\uDE80y‘
// true

　　4. 字符串的遍历器接口

for (let codePoint of ‘foo‘) {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

　　除了遍历字符串，这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点。

var text = String.fromCodePoint(0x20BB7);

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

for (let i of text) {
  console.log(i);
}
// "??"

　　上面代码中，字符串text只有一个字符，但是for循环会认为它包含两个字符（都不可打印），而for...of循环会正确识别出这一个字符。

　　5. at()

　　ES5对字符串对象提供charAt方法，返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符。

　　ES6字符串at方法

‘abc‘.charAt(0) // "a"
‘??‘.charAt(0) // "\uD842"

‘abc‘.at(0) // "a"
‘??‘.at(0) // "??"

　　6. normalize()

　　7. includes(), startsWith(), endsWith()

　　JavaScript只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。

  • includes()：返回布尔值，表示是否找到了参数字符串。
  • startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
  • endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

　　这三个方法都支持第二个参数，表示开始搜索的位置。

var s = ‘Hello world!‘;

s.startsWith(‘world‘, 6) // true
s.endsWith(‘Hello‘, 5) // true
s.includes(‘Hello‘, 6) // false

　　使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

　　8. repeat()

　　repeat方法返回一个新字符串，表示将原字符串重复n次。

　　参数如果是小数，会被取整。

　　如果repeat的参数是负数或者Infinity，会报错。

　　但是，如果参数是0到-1之间的小数，则等同于0，这是因为会先进行取整运算。0到-1之间的小数，取整以后等于-0，repeat视同为0。

　　参数NaN等同于0。

　　如果repeat的参数是字符串，则会先转换成数字。

‘x‘.repeat(3) // "xxx"
‘hello‘.repeat(2) // "hellohello"
‘na‘.repeat(0) // ""

　　9. padStart()，padEnd()

　　　ES7推出了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart用于头部补全，padEnd用于尾部补全。

‘x‘.padStart(5, ‘ab‘) // ‘ababx‘
‘x‘.padStart(4, ‘ab‘) // ‘abax‘

‘x‘.padEnd(5, ‘ab‘) // ‘xabab‘
‘x‘.padEnd(4, ‘ab‘) // ‘xaba‘

　　10. 模板字符串

//传统JavaScript语言
$(‘#result‘).append(
  ‘There are <b>‘ + basket.count + ‘</b> ‘ +
  ‘items in your basket, ‘ +
  ‘<em>‘ + basket.onSale +
  ‘</em> are on sale!‘
);

//es6引入了模板字符串

$(‘#result‘).append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

　　模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`In JavaScript ‘\n‘ is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

　　如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

var greeting = `\`Yo\` World!`;

　　如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。比如<ul>标签前面会有一个换行。如果你不想要这个换行，可以使用trim方法消除它。

$(‘#list‘).html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

　　模板字符串中嵌入变量，需要将变量名写在${}之中。

function authorize(user, action) {
  if (!user.hasPrivilege(action)) {
    throw new Error(
      // 传统写法为
      // ‘User ‘
      // + user.name
      // + ‘ is not authorized to do ‘
      // + action
      // + ‘.‘
      `User ${user.name} is not authorized to do ${action}.`);
  }
}

　　大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。

　　模板字符串之中还能调用函数。

　　如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。

　　模板字符串甚至还能嵌套。

var x = 1;
var y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// 3

//调用函数
function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

　　11. 模板编译

　　比较复杂，用到时查阅相关例子

二、正则的扩展

　　在ES5中，RegExp构造函数的参数有两种情况。

　　第一种情况是，参数是字符串，这时第二个参数表示正则表达式的修饰符（flag）。

　　flag：

g ---表示全局模式，及模式将应用与所有字符串，而非发现的第一个匹配项的大小写

i ---表示不区分别大小写模式，即在确定匹配时忽略模式与字符串的大小写

m---表示多行模式，即在到达一行文本末尾时还会继续查找下一行中是否存在模式匹配的项

　　未完待续。。。

三、数值的扩展

　　1. 二进制和八进制表示法

　　ES6提供了二进制和八进制数值的新的写法，分别用前缀0b（或0B）和0o（或0O）表示。

0b111110111 === 503 // true
0o767 === 503 // true

　　如果要将0b和0o前缀的字符串数值转为十进制，要使用Number方法。

Number(‘0b111‘)  // 7
Number(‘0o10‘)  // 8

　　2. Number.isFinite(), Number.isNaN()

　　ES6在Number对象上，新提供了Number.isFinite()和Number.isNaN()两个方法。

　　Number.isFinite()用来检查一个数值是否为有限的（finite）。

Number.isFinite(15); // true
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite(-Infinity); // false
Number.isFinite(‘foo‘); // false
Number.isFinite(‘15‘); // false
Number.isFinite(true); // false

　　Number.isNaN()用来检查一个值是否为NaN。

Number.isNaN(NaN) // true
Number.isNaN(15) // false
Number.isNaN(‘15‘) // false
Number.isNaN(true) // false
Number.isNaN(9/NaN) // true
Number.isNaN(‘true‘/0) // true
Number.isNaN(‘true‘/‘true‘) // true

　　它们与传统的全局方法isFinite()和isNaN()的区别在于，传统方法先调用Number()将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效，非数值一律返回false。

isFinite(25) // true
isFinite("25") // true
Number.isFinite(25) // true
Number.isFinite("25") // false

isNaN(NaN) // true
isNaN("NaN") // true
Number.isNaN(NaN) // true
Number.isNaN("NaN") // false

　　3. Number.parseInt(), Number.parseFloat()

　　ES6将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。

// ES5的写法
parseInt(‘12.34‘) // 12
parseFloat(‘123.45#‘) // 123.45

// ES6的写法
Number.parseInt(‘12.34‘) // 12
Number.parseFloat(‘123.45#‘) // 123.45

　　4. Number.isInteger()

　　Number.isInteger()用来判断一个值是否为整数。需要注意的是，在JavaScript内部，整数和浮点数是同样的储存方法，所以3和3.0被视为同一个值。

　　5. Number.EPSILON

　　ES6在Number对象上面，新增一个极小的常量Number.EPSILON。

Number.EPSILON
// 2.220446049250313e-16
Number.EPSILON.toFixed(20)
// ‘0.00000000000000022204‘

　　引入一个这么小的量的目的，在于为浮点数计算，设置一个误差范围。

　　但是如果这个误差能够小于Number.EPSILON，我们就可以认为得到了正确结果。Number.EPSILON的实质是一个可以接受的误差范围。

5.551115123125783e-17 < Number.EPSILON
// true

　　6. 安全整数和Number.isSafeInteger()

　　用来判断一个整数是否落在-2^53到2^53之间

　　7. Math对象的扩展

　　Math.trunc():用于去除一个数的小数部分，返回整数部分。

　　对于非数值，Math.trunc内部使用Number方法将其先转为数值。

　　对于空值和无法截取整数的值，返回NaN。

　　Math.sign():判断一个数到底是正数、负数、还是零。

　　它会返回五种值:

  • 参数为正数，返回+1；
  • 参数为负数，返回-1；
  • 参数为0，返回0；
  • 参数为-0，返回-0;
  • 其他值，返回NaN。

　　Math.cbrt():计算一个数的立方根

　　未完待续。。。

　　8. 指数运算符

　　ES7新增了一个指数运算符（**），目前Babel转码器已经支持。

　　指数运算符可以与等号结合，形成一个新的赋值运算符（**=）。

2 ** 2 // 4
2 ** 3 // 8

let a = 2;
a **= 2;
// 等同于 a = a * a;

let b = 3;
b **= 3;
// 等同于 b = b * b * b;

三、数组的扩展

　　1. Array.from()

　　用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

　　2.Array.of()

　　将一组值，转换为数组

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

　　这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

　　上面代码中，Array方法没有参数、一个参数、三个参数时，返回结果都不一样。只有当参数个数不少于2个时，Array()才会返回由参数组成的新数组。参数个数只有一个时，实际上是指定数组的长度。Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。

　　Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

　　3. 数组实例的copyWithin()

　　4. 数组实例的find()和findIndex()

　　数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

　　5. 数组实例的fill()

　　fill方法使用给定值，填充一个数组。

[‘a‘, ‘b‘, ‘c‘].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

　　fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。

　　fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

[‘a‘, ‘b‘, ‘c‘].fill(7, 1, 2)
// [‘a‘, 7, ‘c‘]

　　6. 数组实例的entries()，keys()和values()

for (let index of [‘a‘, ‘b‘].keys()) {
  console.log(index);
}
// 0
// 1

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"

　　如果不使用for...of循环，可以手动调用遍历器对象的next方法，进行遍历。

let letter = [‘a‘, ‘b‘, ‘c‘];
let entries = letter.entries();
console.log(entries.next().value); // [0, ‘a‘]
console.log(entries.next().value); // [1, ‘b‘]
console.log(entries.next().value); // [2, ‘c‘]

　　7. 数组实例的includes()

　　Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, NaN].includes(NaN); // true

　　该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

　　下面代码用来检查当前环境是否支持该方法，如果不支持，部署一个简易的替代版本。

const contains = (() =>
  Array.prototype.includes
    ? (arr, value) => arr.includes(value)
    : (arr, value) => arr.some(el => el === value)
)();
contains(["foo", "bar"], "baz"); // => false

　　8. 数组的空位

　　数组的空位指，数组的某一个位置没有任何值。比如，Array构造函数返回的数组都是空位。

Array(3) // [, , ,]

　　注意，空位不是undefined，一个位置的值等于undefined，依然是有值的。空位是没有任何值，in运算符可以说明这一点。

0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false

　　由于空位的处理规则非常不统一，所以建议避免出现空位。

　　9. ES6 中的 Set、Map 和 WeakMap

　　set

　　Set 是 ES6 新增的有序列表集合，它不会包含重复项。之前我们通常用对象（Object）或者数组（Array）来实现没有重复项的集合。

　　Set 支持 add(item) 方法，用来向 Set 添加任意类型的元素，如果已经添加过则自动忽略；has(item) 方法用来检测 Set 中是否存在指定元素；delete(item) 方法用来从 Set 中删除指定元素；clear() 用来清空 Set；获取 Set 集合长度用 size 属性

var set = new Set();
set.add(window);
set.has(window); // true
set.size; // 1
set.add(window);
set.add(1);
set.size; // 2
set.delete(window);
set.has(window); // false
set.clear();
set.size; // 0

　　map

　　Map 是 ES6 新增的有序键值对集合。键值对的 key 和 value 都可以是任何类型的元素。通过 set(key, value) 方法为 Map 设置新的键值对，如果设置的 key 已经存在则用新的 value 覆盖，Map 在比较 key 时也不做类型转换，跟 Set 类似；Map 的 get(key) 方法用来获取指定 key 的值；Map 的 has(key) 、 delete(key) 、clear() 这些方法和 size 属性，与 Set 类似

　　

var map = new Map();
var key1 = {toString : function() { return 2}};
var key2 = 2;
map.set(key1, 1);
map.set(key2, 2);

map.has(key1); // true
map.has(‘2‘); // false，类型不同
map.delete(2);
map.size; // 1
map.get(key2); // undefined

　　迭代

　　可以用 ES6 提供的新方法 for...of 来遍历它们。

　　Set 和 Map 有几个方法会返回可迭代对象（Iterator Objects），分别是 entries()、keys() 和 values()。直接遍历 Set/Map，等同于遍历 entries()；keys() 和 values() 则分别返回 key 和 value 的集合；对于 Set，key 和 value 是一样的。这些方法和 for...of 现阶段都只有 Firefox 支持，下面的例子需要在 Firefox 下运行

　　

var set = new Set();
set.add(‘this is a demo.‘);
set.add(window);
set.add(top);

for(let item of set) {
    console.log(item);
}
时间： 2024-10-13 23:16:29

ECMAScript 6 笔记（二）的相关文章

老男孩培训视频听课笔记二（在51cto上听的）

centos 5.8 文本安装过程    引导采用默认,引导不用设置密码    网络配置,根据实际情况配置,网关是网络出口的地址,一般为wlan出口的路由器的地址或者是代理服务器的内网IP    DNS简单解说图:      主机名--时区--root密码    选择自定义系统安装包--最小化(安全方便工作,建议安装以下的组)      ·base-- 基础      ·editors-编辑器      ·development librarays--开发库      ·development

《卓有成效的程序员》----读书笔记二

六大方面对比Launchy和TypeAndRun(TAR) 对于快速启动工具,很多人都有自己的偏好,多次听到朋友介绍Launchy的好,虽然自己一直在使用着TAR,还是克制不住对于好软件的渴求,下载Launchy进行试用.很多软件都是有一个试用期的,也许新的软件确实不错,但是你习惯了以前使用的那个软件.今天就比较客观的将Launchy和TAR进行一下对比,从界面.上手速度到功能.自定义,以及软件的稳定性.占用资源进行详细的比较. [界面美观]Launchy:毫无疑问这是它的强项.1.0正式版自带

Caliburn.Micro学习笔记(二)----Actions

Caliburn.Micro学习笔记(二)----Actions 上一篇已经简单说了一下引导类和简单的控件绑定 我的上一个例子里的button自动匹配到ViewModel事件你一定感觉很好玩吧 今天说一下它的Actions,看一下Caliburn.Micro给我们提供了多强大的支持 我们还是从做例子开始 demo的源码下载在文章的最后 例子1.无参数方法调用 点击button把textBox输入的文本弹出来 如果textbox里没有文本button不可点,看一下效果图 看一下前台代码 <Stac

《逻辑思维简易入门》（第2版） 阅读笔记二

<逻辑思维简易入门>(第2版) 阅读笔记二 本周阅读的是<逻辑思维简易入门>的第三章,也就是说,本书的第一部分就已经读完了. 第三章.信念的优点 信念和负信念是人们在接受一个事物时一种心理态度,延伸来说也就是对事物的认知态度.因为我们在研究 逻辑思维的时候,都有一个前提:“以正常情况以及说话者真诚”,所以有人如果对于一件事物不做回应,我们可以认为这是一种既不相信,也不怀疑的的态度. 信念的优缺点有很多,在书中主要介绍了下面几种: 1.准确性 好的信念实在准确的表达事实,同样真的信念

2. 蛤蟆Python脚本学习笔记二基本命令畅玩

2. 蛤蟆Python脚本学习笔记二基本命令畅玩 本篇名言:"成功源于发现细节,没有细节就没有机遇,留心细节意味着创造机遇.一件司空见惯的小事或许就可能是打开机遇宝库的钥匙!" 下班回家,咱先来看下一些常用的基本命令. 欢迎转载,转载请标明出处:http://blog.csdn.net/notbaron/article/details/48092873 1.  数字和表达式 看下图1一就能说明很多问题: 加法,整除,浮点除,取模,幂乘方等.是不是很直接也很粗暴. 关于上限,蛤蟆不太清楚

Emacs 笔记二

Emacs 笔记二 Table of Contents 1. 前言 2. emacs基本操作(常用快捷键) 3. emacs模式讲解 4. emacs缓冲区 5. org mode 5.1. 列表 5.2. 快键键 5.3. 内嵌元素(插入代码什么的) 5.4. 表格 1 前言 最近在学着写博客,发现MarkDown真乃神器,于是去找了很多markdown的工具,发现作业部落 最好的那个,而无意间又发现了org-mode火爆到极致 非常被人推崇,其实作业部落 已经是能很完美的满足我的需求了,但是

《Programming in Lua 3》读书笔记(二十二)

日期:2014.8.6 PartⅣ The C API 26 Extending Your Application 使用Lua很重要的一点是用来做配置语言.配合主语言做一些功能的配置. 26.1 The Basics 有的时候程序需要配置一些功能信息,很多时候可能有许多别的方法比用lua做配置要更简单:如使用环境变量或者读取文件,读取文件涉及到文件的解析.如果使用Lua进行配置的话,相当于用lua文件替代了要读取的如csv.txt文件等. 使用Lua进行配置的时候,就需要使用Lua API去控制

小猪的数据结构学习笔记(二)

小猪的数据结构学习笔记(二) 线性表中的顺序表 本节引言: 在上个章节中,我们对数据结构与算法的相关概念进行了了解,知道数据结构的 逻辑结构与物理结构的区别,算法的特性以及设计要求;还学了如何去衡量一个算法 的好坏,以及时间复杂度的计算!在本节中我们将接触第一个数据结构--线性表; 而线性表有两种表现形式,分别是顺序表和链表;学好这一章很重要,是学习后面的基石; 这一节我们会重点学习下顺序表,在这里给大家一个忠告,学编程切忌眼高手低,看懂不代表自己 写得出来,给出的实现代码,自己要理解思路,自己

JavaScript--基于对象的脚本语言学习笔记(二)

第二部分:DOM编程 1.文档象模型(DOM)提供了访问结构化文档的一种方式,很多语言自己的DOM解析器. DOM解析器就是完成结构化文档和DOM树之间的转换关系. DOM解析器解析结构化文档:将磁盘上的结构化文档转换成内存中的DOM树 从DOM树输出结构化文档:将内存中的DOM树转换成磁盘上的结构化文档 2.DOM模型扩展了HTML元素,为几乎所有的HTML元素都新增了innerHTML属性,该属性代表该元素的"内容",即返回的某个元素的开始标签.结束标签之间的字符串内容(不包含其它

马哥学习笔记二十四——分布式复制快设备drbd

DRBD: 主从 primary: 可执行读.写操作 secondary: 文件系统不能挂载 DRBD: dual primay, 双主(基于集群文件系统的高可用集群) 磁盘调度器:合并读请求,合并写请求: Procotol:drbd数据同步协议 A: Async, 异步  数据发送到本机tcp/ip协议栈 B:semi sync, 半同步  数据发送到对方tcp/ip协议 C:sync, 同步  数据到达对方存储设备 DRBD Source: DRBD资源 资源名称:可以是除了空白字符外的任意