前端必备知识|ES6学习笔记（4）——字符串\正则\数值\数组\函数\对象的扩展前端必备知识|es6

字符串的扩展 ES6 加强了对 Unicode 的支持，并且扩展了字符串对象
方法

codePointAt()
String.fromCodePoint()
at()：ES5对字符串对象提供charAt方法，返回字符串给定位置的字符，但不能识别码点大于0xFFFF的字符。这个可以
normalize()
includes(), startsWith(), endsWith()：是否找到了参数字符串|是否在源字符串的头部|是否在源字符串的尾部
repeat()：返回一个新字符串，表示将原字符串重复n次
padStart()，padEnd()：字符串补全长度的功能，一个用于头部补全，一个用于尾部

'1'.padStart(10, '0') // "0000000001"
String.raw()：返回一个斜杠都被转义的字符串

其他

码点放入大括号解读字符

//以前：表示法只限于码点在\u0000~\uFFFF之间的字符 "\uD842\uDFB7" // ""

//现在：码点放入大括号解读字符 "\u{20BB7}"// ""

字符串遍历接口(Iterator) 字符串可以被for...of循环遍历，

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

模板字符串

//以往： $('#result').append( 'There are ' + basket.count + ' ' + 'items in your basket, ' + '' + basket.onSale + ' are on sale!' ); //现在： $('#result').append(` There are ${basket.count} items in your basket, ${basket.onSale} are on sale! `);

标签模板标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）

var a = 5; var b = 10; //tag是一个函数，整个表达式的返回值，就是tag函数处理模板字符串后的返回值。 tag`Hello ${ a + b } world ${ a * b }`; // 等同于 tag(['Hello ', ' world ', ''], 15, 50);

正则的扩展字符串的正则方法字符串对象共有4个方法可以使用正则表达式：match()、replace()、search()和split()。ES6将这4个方法全都定义在RegExp对象上:

String.prototype.match 调用 RegExp.prototype[Symbol.match]
String.prototype.replace 调用 RegExp.prototype[Symbol.replace]
String.prototype.search 调用 RegExp.prototype[Symbol.search]
String.prototype.split 调用 RegExp.prototype[Symbol.split]

举例–以replace为例：替换符合正则表达式的字符

var str="小明睡懒觉了" ==>将睡懒觉替换成起床//es5写法: str=str.replace(/睡懒觉/,"起床")//es6写法 /睡懒觉/[Symbol.replace](str, '起床');

修饰符 u修饰符
含义为“Unicode模式”，用来正确处理大于\uFFFF的Unicode字符
y 修饰符
y修饰符叫做“粘连”（sticky）修饰符。作用与g修饰符类似，也是全局匹配。但y修饰符确保匹配必须从剩余的第一个位置开始
s 修饰符：dotAll 模式
引入/s修饰符，使得.可以匹配任意单个字符

//以前 /foo.bar/.test('foo\nbar') // false//现在 /foo.bar/s.test('foo\nbar') // true

属性

sticky属性：表示是否设置了y修饰符
flags属性：返回正则表达式的修饰符
dotAll属性，返回一个布尔值，表示该正则表达式是否处在dotAll模式

数值的扩展方法

Number.isFinite(你要检测的值)：检查一个数值是否为有限
Number.isNaN()：检查一个值是否为NaN
Number.parseInt(),Number.parseFloat()：ES6将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变
Number.isInteger()：判断一个值是否为整数
Number.EPSILON：一个常量
安全整数和Number.isSafeInteger()

Math对象的扩展

Math.trunc方法用于去除一个数的小数部分，返回整数部分

Math.trunc(4.9) // 4 Math.trunc(-4.1) // -4 Math.trunc(-0.1234) // -0
Math.sign方法用来判断一个数到底是正数、负数、还是零

Math.sign(-5) // -1 Math.sign(5) // +1 Math.sign(0) // +0 Math.sign(-0) // -0 Math.sign(NaN) // NaN
Math.cbrt方法用于计算一个数的立方根

Math.cbrt(2)// 1.2599210498948734
Math.expm1(x)即Math.exp(x) - 1

Math.expm1(1)// 1.718281828459045
Math.log1p(x)方法返回1 + x的自然对数，即Math.log(1 + x)。如果x小于-1，返回NaN

Math.log1p(1)// 0.6931471805599453 Math.log1p(-1) // -Infinity Math.log1p(-2) // NaN
Math.log10(x)返回以10为底的x的对数。如果x小于0，则返回NaN

Math.log10(100000) // 5
Math.log2(x)返回以2为底的x的对数。如果x小于0，则返回NaN

Math.log2(3)// 1.584962500721156 Math.log2(2)// 1
Math.sinh(x) 返回x的双曲正弦（hyperbolic sine）
Math.cosh(x) 返回x的双曲余弦（hyperbolic cosine）
Math.tanh(x) 返回x的双曲正切（hyperbolic tangent）
Math.signbit()：判断一个值的正负，但是如果参数是-0，它会返回-0

其他

二进制和八进制表示法
指数运算符（**）和赋值运算符（**=）

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

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

数组的扩展静态方法

Array.from（）：用于将两类对象转为真正的数组：

1.类似数组的对象（array-like object）：所谓类似数组的对象，本质特征只有一点，即必须有length属性
2.可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）

//类似数组的对象 let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; let arr= Array.from(arrayLike); // ['a', 'b', 'c']

//可遍历对象 Array.from({ length: 3 }); // [ undefined, undefined, undefined ]

Array.from（）接受第二个参数，作用类似于数组的map方法

Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]
Array.of()：将一组值，转换为数组。基本上可以用来替代Array()或new Array()

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

数组实例的方法

copyWithin()：在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组，即会修改当前数组

//语法:---(开始替换的位置，开始读取的位置[可选]，停止读取的位置[可选]) Array.prototype.copyWithin(target, start = 0, end = this.length)

[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5] 从3号位复制到0号位
find()：用于找出第一个符合条件的数组成员,它的参数是一个回调函数

[1, 4, -5, 10].find((n) => n < 0) // -5
findIndex()：返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1
fill()：使用给定值，填充一个数组

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

//接受第二个和第三个参数，用于指定填充的起始位置和结束位置 ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']
entries()：遍历数组-对键值对的遍历

for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem); } // 0 "a" // 1 "b"
keys()：遍历数组-对键名的遍历

for (let index of ['a', 'b'].keys()) { console.log(index); } // 0 // 1
values()：遍历数组-对键值的遍历

for (let elem of ['a', 'b'].values()) { console.log(elem); } // 'a' // 'b'
includes()：返回一个布尔值，表示某个数组是否包含给定的值。第二个参数表示搜索的起始位置，默认为0

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

数组的空位数组的空位指，数组的某一个位置没有任何值。

Array(3) // [, , ,]

ES5对空位的处理大多数情况下会忽略空位

1. forEach(), filter(), every() 和some()会跳过空位 2. map()会跳过空位，但会保留这个值 3. join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串

// forEach方法 [,'a'].forEach((x,i) => console.log(i)); // 1// filter方法 ['a',,'b'].filter(x => true) // ['a','b']// every方法 [,'a'].every(x => x==='a') // true// some方法 [,'a'].some(x => x !== 'a') // false// map方法 [,'a'].map(x => 1) // [,1]// join方法 [,'a',undefined,null].join('#') // "#a##"// toString方法 [,'a',undefined,null].toString() // ",a,,"

ES6则是明确将空位转为undefined

//Array.from方法 Array.from(['a',,'b']) // [ "a", undefined, "b" ]//扩展运算符（...）也会将空位转为undefined [...['a',,'b']]// [ "a", undefined, "b" ]//copyWithin()会连空位一起拷贝 [,'a','b',,].copyWithin(2,0) // [,"a",,"a"]//fill()会将空位视为正常的数组位置 new Array(3).fill('a') // ["a","a","a"]//for...of循环也会遍历空位 let arr = [, ,]; for (let i of arr) { console.log(1); } // 1 // 1

entries()、keys()、values()、find()和findIndex()会将空位处理成undefined

// entries() [...[,'a'].entries()] // [[0,undefined], [1,"a"]]// keys() [...[,'a'].keys()] // [0,1]// values() [...[,'a'].values()] // [undefined,"a"]// find() [,'a'].find(x => true) // undefined// findIndex() [,'a'].findIndex(x => true) // 0

函数的扩展函数参数的默认值

//1. 如何设置默认值 function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World

//2. 参数变量是默认声明的，所以不能用let或const再次声明 function foo(x = 5) { let x = 1; // error const x = 2; // error }

//3. 使用参数默认值时，函数不能有同名参数 function foo(x, x, y = 1) { // ... }

//4. 如果参数默认值是变量,那么每次都重新计算默认值表达式的值。参数默认值是惰性求值的 let x = 99; function foo(p = x + 1) { console.log(p); }foo()// 100 foo() //还是100//默认值重新赋值才会改变 x = 100; foo() // 101

1. 与解构赋值默认值结合使用

function foo({x, y = 5}) { console.log(x, y); }foo({}) // undefined, 5 foo({x: 1}) // 1, 5 foo() // TypeError: Cannot read property 'x' of undefined

function fetch(url, { body = '', method = 'GET', headers = {} }) { console.log(method); } fetch('http://example.com', {}) // "GET" fetch('http://example.com') // 报错//上面的写法不能省略第二个参数，如果结合函数参数的默认值，就可以省略第二个参数 function fetch(url, { method = 'GET' } = {}) { console.log(method); }fetch('http://example.com')// "GET"

区别

// 写法一:函数参数的默认值是空对象，但是设置了对象解构赋值的默认值 function m1({x = 0, y = 0} = {}) { return [x, y]; }// 写法二:函数参数的默认值是一个有具体属性的对象，但是没有设置对象解构赋值的默认值 function m2({x, y} = { x: 0, y: 0 }) { return [x, y]; }

2. 函数的 length 属性
函数的length属性，将返回没有指定默认值的参数个数

(function (a) {}).length // 1 (function (a = 5) {}).length // 0 (function (a, b, c = 5) {}).length // 2

3. 作用域
一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）
对比：

var x = 1; function f(x, y = x) {console.log(y)} f(2) // 2 //解析：作用域里，默认值变量x指向第一个参数x，而不是全局变量x，所以输出是2

let x = 1; function f(y = x) {let x = 2; console.log(y); } f() // 1 //解析：作用域里，变量x本身没有定义，所以指向外层的全局变量x。函数调用时，函数体内部的局部变量x影响不到默认值变量x；但如果全局变量x不存在，就会报错

4. rest参数
ES6 引入 rest 参数（形式为“…变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中

function add(...values) { let sum = 0; for (var val of values) { sum += val; } return sum; }add(2, 5, 3) // 10

扩展运算符扩展运算符（spread）是三个点（...）,好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列

console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5

1. 应用：函数调用

function add(x, y) { return x + y; }var numbers = [4, 38]; add(...numbers) // 42

2. 替代数组的apply方法

// ES5的写法 function f(x, y, z) {// ...} var args = [0, 1, 2]; f.apply(null, args); // ES6的写法 function f(x, y, z) {// ... } var args = [0, 1, 2]; f(...args);

// ES5的写法 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; Array.prototype.push.apply(arr1, arr2); // ES6的写法 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; arr1.push(...arr2);

3. 应用：合并数组

var arr1 = ['a', 'b']; var arr2 = ['c']; // ES5的合并数组 arr1.concat(arr2); // ES6的合并数组 [...arr1, ...arr2]

4. 应用：与解构赋值结合

const [first, ...rest] = [1, 2, 3, 4, 5]; first // 1 rest// [2, 3, 4, 5]

5. 应用：函数的返回值

var dateFields = readDateFields(database); var d = new Date(...dateFields); //解析：上面代码从数据库取出一行数据，通过扩展运算符，直接将其传入构造函数Date

6. 应用：字符串转数组

[...'hello'] // [ "h", "e", "l", "l", "o" ]

7. 应用：实现了Iterator接口的对象

var nodeList = document.querySelectorAll('div'); var array = [...nodeList]; //任何Iterator接口的对象，都可以用扩展运算符转为真正的数组。扩展运算符可以将其转为真正的数组，原因就在于NodeList对象实现了Iterator接口

8.应用：Map和Set结构，Generator函数

//扩展运算符内部调用的是数据结构的Iterator接口，因此只要具有Iterator接口的对象，都可以使用扩展运算符，比如Map结构let map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]); let arr = [...map.keys()]; // [1, 2, 3]

严格模式《ECMAScript 2016标准》做了一点修改，规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错
name属性

//函数的`name`属性，返回该函数的函数名 function foo() {} foo.name // "foo"

箭头函数

var f = v => v; //等价于 var f = function(v) { return v; };

1. 要点

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分

var f = () => 5; // 等同于 var f = function () { return 5 }; var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2) { return num1 + num2; };
如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回

var sum = (num1, num2) => { return num1 + num2; }
所以如果箭头函数直接返回一个对象，必须在对象外面加上括号

var getTempItem = id => ({ id: id, name: "Temp" });
箭头函数可以与变量解构结合使用

const full = ({ first, last }) => first + ' ' + last; // 等同于 function full(person) { return person.first + ' ' + person.last; }

2. 注意

在箭头函数中，this指向是固定的。函数体内的this对象，就是定义时所在的对象
不可以当作构造函数
不可以使用arguments对象，但可以用Rest参数代替
不可以使用yield命令，因此箭头函数不能用作Generator函数

3. 嵌套的箭头函数

const plus1 = a => a + 1; const mult2 = a => a * 2; mult2(plus1(5)) // 12

4. 绑定 this
箭头函数并不适用于所有场合，所以ES7提出了“函数绑定”（function bind）运算符，用来取代call、apply、bind调用。函数绑定运算符是并排的两个双冒号（::），双冒号左边是一个对象，右边是一个函数

foo::bar; // 等同于 bar.bind(foo); foo::bar(...arguments); // 等同于 bar.apply(foo, arguments);

对象的扩展简洁表示法

var birth = '2000/01/01'; var Person = { name: '张三',//1. 属性简写----等同于birth: birth birth, //2. 方法简写---等同于hello: function ()... hello() { console.log('我的名字是', this.name); }};

属性名表达式

// 方法一：标识符做属性名 obj.foo = true; // 方法二：表达式做属性名 obj['a' + 'bc'] = 123;

ES5中，如果使用字面量方式定义对象，属性只能使用标识符定义

var obj = { foo: true, abc: 123 };

ES6中，如果使用字面量方式定义对象，属性可以使用表达式定义

let obj = { ['a' + 'bc']: 123 };

ES6中，方法名也可以用表达式定义

let obj = { ['h' + 'ello']() {return 'hi'; } }; obj.hello() // hi

对象方法的 name 属性

const person = { sayName() { console.log('hello!'); }, }; person.sayName.name// "sayName"

方法 1. Object.is()
背景：ES5比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===）。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。JavaScript缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等
Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致

Object.is('foo', 'foo') // true Object.is({}, {}) // false Object.is(+0, -0) // false Object.is(NaN, NaN) // true

2. Object.assign()
用于对象的合并。语法：Object.assign(target,source,source...)，第一个参数是目标对象，后面的参数都是源对象

var target = { a: 1 }; var source1 = { b: 2 }; var source2 = { c: 3 }; Object.assign(target, source1, source2); target // {a:1, b:2, c:3}

这里是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用

用途

为对象添加属性

class Point { constructor(x, y) { Object.assign(this, {x, y}); } }
为对象添加方法

Object.assign(SomeClass.prototype, { someMethod(arg1, arg2) {···}, anotherMethod() {···} }); // 等同于下面的写法 SomeClass.prototype.someMethod = function (arg1, arg2) {···}; SomeClass.prototype.anotherMethod = function () {···};
克隆对象

function clone(origin) { return Object.assign({}, origin); }//不过采用这种方法克隆，只能克隆原始对象自身的值，不能克隆它继承的值。如果想要保持继承链，可以采用下面的代码:function clone(origin) { let originProto = Object.getPrototypeOf(origin); return Object.assign(Object.create(originProto), origin); }
合并多个对象

//在原数组上合并 const merge = (target, ...sources) => Object.assign(target, ...sources); //合并成一个新数组 const merge = (...sources) => Object.assign({}, ...sources);
为属性指定默认值

const DEFAULTS = { logLevel: 0, outputFormat: 'html' }; function processContent(options) { options = Object.assign({}, DEFAULTS, options); console.log(options); // ... }//上面代码中，DEFAULTS对象是默认值，options对象是用户提供的参数。Object.assign方法将DEFAULTS和options合并成一个新对象，如果两者有同名属性，则option的属性值会覆盖DEFAULTS的属性值。 //注意：由于存在深拷贝的问题，DEFAULTS对象和options对象的所有属性的值，最好都是简单类型，不要指向另一个对象。否则，DEFAULTS对象的该属性很可能不起作用。比如： const DEFAULTS = { url: { host: 'example.com', port: 7070 }, }; processContent({ url: {port: 8000} }) // { //url: {port: 8000} // }

3. Object.keys()、Object.values()和Object.entries()
遍历一个对象的补充手段，供for...of循环使用

let {keys, values, entries} = Object; let obj = { a: 1, b: 2, c: 3 }; for (let key of keys(obj)) { console.log(key); // 'a', 'b', 'c' }for (let value of values(obj)) { console.log(value); // 1, 2, 3 }for (let [key, value] of entries(obj)) { console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3] }

Object.keys()：方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值

var obj = { foo: 'bar', baz: 42 }; Object.keys(obj) // ["foo", "baz"]
Object.values()：只返回对象自身的可遍历属性,会过滤属性名为 Symbol 值的属性; 如果Object.values方法的参数是一个字符串，会返回各个字符组成的一个数组

var obj = { foo: 'bar', baz: 42 }; Object.values(obj) // ["bar", 42]

Object.values('foo') // ['f', 'o', 'o']
Object.entries()：返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组

var obj = { foo: 'bar', baz: 42 }; Object.entries(obj)// [ ["foo", "bar"], ["baz", 42] ]

4. Object.getOwnPropertyDescriptors()
返回指定对象所有自身属性（非继承属性）的描述对象

const obj = { foo: 123, get bar() { return 'abc' } }; Object.getOwnPropertyDescriptors(obj) // { foo: //{ value: 123, //writable: true, //enumerable: true, //configurable: true }, //bar: //{ get: [Function: bar], //set: undefined, //enumerable: true, //configurable: true } }

属性的可枚举性 Object.getOwnPropertyDescriptor()：获取该属性的描述对象

let obj = { foo: 123 }; Object.getOwnPropertyDescriptor(obj, 'foo') //{ //value: 123, //writable: true, //enumerable: true, //configurable: true //}

enumerable属性，称为”可枚举性“；如果该属性为false，就表示某些操作会忽略当前属性。

ES5有三个操作会忽略enumerable的false的属性

for...in循环：只遍历对象自身的和继承的可枚举的属性

Object.keys()：返回对象自身的所有可枚举的属性的键名

JSON.stringify()：只串行化对象自身的可枚举的属性

ES6中，Object.assign()只拷贝对象自身的可枚举的属性

属性的遍历

for...in：循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）
Object.keys(obj)：返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）
Object.getOwnPropertyNames(obj)：返回一个数组，包含对象自身的所有属性（不含Symbol属性，但是包括不可枚举属性）
Object.getOwnPropertySymbols(obj)：返回一个数组，包含对象自身的所有Symbol属性
Reflect.ownKeys(obj)：返回一个数组，包含对象自身的所有属性，不管是属性名是Symbol或字符串，也不管是否可枚举

以上方法遍历对象的属性都遵守同样的属性遍历的次序规则：

首先遍历所有属性名为数值的属性，按照数字排序。

其次遍历所有属性名为字符串的属性，按照生成时间排序。

最后遍历所有属性名为Symbol值的属性，按照生成时间排序。

原型对象

Object.setPrototypeOf()：用来设置一个对象的prototype对象（原型对象），返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法

//1. 格式 Object.setPrototypeOf(object, prototype) //2. 用法 var o = Object.setPrototypeOf({}, null); //等同于 function (obj, proto) { obj.__proto__ = proto; return obj; } //3. 例子 let proto = {}; let obj = { x: 10 }; Object.setPrototypeOf(obj, proto); proto.y = 20; proto.z = 40; obj.x // 10 obj.y // 20 obj.z // 40
Object.getPrototypeOf()：该方法与Object.setPrototypeOf方法配套，用于读取一个对象的原型对象

//1. 格式 Object.getPrototypeOf(obj); //2. 例子 function Rectangle() {...} var rec = new Rectangle(); Object.getPrototypeOf(rec) === Rectangle.prototype// trueObject.setPrototypeOf(rec, Object.prototype); Object.getPrototypeOf(rec) === Rectangle.prototype// false

对象的扩展运算符 1. 解构赋值

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; x // 1 y // 2 z // { a: 3, b: 4 } //解析：从一个对象取值，相当于将所有可遍历的、但尚未被读取的属性，分配到指定的对象上面。所有的键和它们的值，都会拷贝到新对象上面

2. 拷贝属性