一、模板字符串
在我们的变成过程中,有时候我们需要在字符串中编写大量的HTML结构代码:
const obj = {
img: 'http://www.baidu.com/test.png',
title: '离思',
subTitle: '取次花丛懒回顾,半缘修道半缘君。',
mess: ['唐','元稹']
};
let el = '<div>'+
'<img src="'+ obj.img +'">'+
'<h3>'+ obj.title +'</h3>'+
'<p>'+obj.subTitle+'</p>'+
'<div><span>'+ obj.mess[0] +'</span><span>'+ obj.mess[1] +'</span></div>'+
'</div>';
这种写法相当繁琐不方便,ES6引入了模板字符串解决这个问题:
const obj = {
img: 'http://www.baidu.com/test.png',
title: '离思',
subTitle: '取次花丛懒回顾,半缘修道半缘君。',
mess: ['唐','元稹']
};
let el = `
<div>
<img src="${obj.img}">
<h3>${obj.title}</h3>
<p>${obj.subTitle}</p>
<div>
<span>${obj.mess[0]}</span>
<span>${obj.mess[1]}</span>
</div>
</div>
`;
模板字符串是增强版的字符串,用反引号(``)标识,它可以当做普通字符串,也可以用来定义多行字符串,或者在字符串中嵌入变量。
注:
- 如果模板字符串中要使用反引号,那么需要使用反斜杠转义。
- 如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出中。
- 在模板字符串中嵌入变量,需要将变量名写在${}中。
- ${}的大括号中可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。
- 如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。
- 模板字符串甚至还能嵌套。
字符串的新增方法
传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
- includes():返回布尔值,表示是否找到了参数字符串。
- startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
- endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!';
s.startsWith('Hello');
s.endsWith('!');
s.includes('o');
这三个方法都支持第二个参数,表示开始搜索的位置。
let s = 'Hello world!';
s.startsWith('world', 6);
s.endsWith('Hello', 5);
s.includes('Hello', 6);
拓展: 为String类添加一个loIncludes()函数,实现和includes()一样的效果。
String.prototype.loIncludes = function(str, i) {
const newStr = this.substr(i);
const currI = newStr.indexOf(str);
if(currI < 0 || newStr == '') return false;
return true;
};
let testStr = 'hello world';
const res = testStr.loIncludes('o');
二、字符串的实例方法
1. repeat()返回一个新字符串,表示将原来的字符串重复了若干次。
'x'.repeat(3); // "xxx"
'hello'.repeat(2); // "hellohello"
'na'.repeat(0); // ""
'na'.repeat(2.9); // "nana"
'na'.repeat(Infinity); // RangeError
'na'.repeat(-1); // RangeError
2. 实例方法:trimStart(),trimEnd()。
const s = ' abc ';
s.trim(); // "abc"
s.trimStart(); // "abc "
s.trimEnd(); // " abc"
数组的拓展
一、拓展运算符
扩展运算符(spread)是三个点(…),将一个数组转为用逗号分隔的参数序列(用非循环的代码方式展开一个数组)。
console.log(...[1, 2, 3]); // 1 2 3
console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5
[...document.querySelectorAll('div')]; // [<div>, <div>, <div>]
拓展运算符的应用
1. 当函数形参不确定时,可以代替函数内部的arguments对象。
如封装一个求若干number的和的函数。
// 在旧的语法中,我们会使用arguments对象去接受数量不定的形参
function getSum() {
let sum = 0;
for(let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
getSum(40, 2, 39); // 81
getSum(88, 4); // 92
这样处理可以完成效果,但是arguments对象本身不是数组,不能调用数组的函数,只能去循环它,如果代码需求中需要数组处理,那么arguments对象不能调用数组的代码,代码的逻辑处理就会很麻烦。所以ES6建议用拓展运算符(…)代替对于arguments对象的使用。并且把由拓展运算符声明的形参称为rest参数。
// 求若干个数的和
function getSum(...arr) {
let sum = 0;
for(let i = 0; i < arr.length; i++) {
sum += arr[i];
}
return sum;
}
getSum(40, 2, 39); // 81
getSum(88, 4); // 92
注意: 虽然利用rest参数有时候代码和效果都和arguments没什么区别,但是rest参数是数组,可以调用数组相关函数,arguments是个对象,不能调用数组相关函数。
2. 数组复制。
数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组。
const a1 = [1, 2];
const a2 = a1;
ES5 只能用变通方法来复制数组:
const a1 = [1, 2];
const a2 = a1.concat();
扩展运算符提供了复制数组的简便写法:
const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a3] = a1;
3. 合并数组。
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
// ES5 的合并数组
const newArr1 = arr1.concat(arr2, arr3);
// ES6 的合并数组
const newArr2 = [...arr1, ...arr2, ...arr3];
4. 与解构赋值结合使用。
const [a, ...b] = [1, 2, 3, 4, 5];
const [c, ...d] = [];
const [e, ...f] = ["foo"];
// 如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。
const [...g, h] = [1, 2, 3, 4, 5]; // 报错
const [i, ...j, k] = [1, 2, 3, 4, 5]; // 报错
5. 将字符串展开成一个数组。
const list = [...'hello'];
二、Array.from()函数
Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
实际应用中,常见的类似数组的对象是 DOM 操作返回的 NodeList 集合,以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。
Array.from方法还支持类似数组的对象。所谓类似数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过Array.from方法转为数组,而此时扩展运算符就无法转换。
Array.from({ length: 3 }); // [ undefined, undefined, undefined]
Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组:
let obj = {
'0': 4,
'1': 30,
'2': 9,
length: 3
};
Array.from(obj, (x) => x * x); // [16, 900, 81]
三、Array.of()函数
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.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
Array.of总是返回参数值组成的数组。如果没有参数,就返回一个空数组。
四、数组实例的copyWithin()
数组实例的copyWithin()方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。
Array.prototype.copyWithin(target, start = 0, end = this.length);
它接受三个参数:
- target(必需):从该位置开始替换数据。如果为负值,表示倒数。
- start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
- end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。
这三个参数都应该是数值,如果不是,会自动转为数值。
[1, 2, 3, 4, 5].copyWithin(0, 3); //[4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, -2, -1); // [4, 2, 3, 4, 5]
五、数组实例的 find() 和 findIndex()
数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
[1, 4, -5, 10].find((n) => n < 0); // -5
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}); // 10
数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}); // 2
这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。
六、数组实例的 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']
七、数组实例的 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开始。
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
没有该方法之前,我们通常使用数组的indexOf方法,检查是否包含某个值。indexOf方法有两个缺点,一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观。二是,它内部使用严格相等运算符(===)进行判断,这会导致对NaN的误判。
[NaN].indexOf(NaN); // -1
[NaN].includes(NaN); // true
八、数组实例的 flat(),flatMap()
数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。
[1, 2, [3, 4]].flat(); // [1, 2, 3, 4]
flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数
[1, [2, [3]]].flat(Infinity); // [1, 2, 3]
flatMap()方法对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2]); // [2, 4, 3, 6, 4, 8]
flatMap()只能展开一层数组。
// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]]
flatMap()方法的参数是一个遍历函数,该函数可以接受三个参数,分别是当前数组成员、当前数组成员的位置(从零开始)、原数组。
arr.flatMap(function callback(currentValue[, index[, array]]) {
// ...
}[, thisArg]);
flatMap()方法还可以有第二个参数,用来绑定遍历函数里面的this。
九、数组的空位
ES6 明确会将数组中的空位转为undefined。
对象的拓展和对象的新增方法
一、属性的简洁表示法
ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值。
const foo = 'bar';
const baz = {foo};
// 等同于
// const baz = {foo: foo};
除了属性简写,方法也可以简写。
const o = {
method() {
return "Hello!";
}
};
// 等同于
/* const o = {
method: function() {
return "Hello!";
}
}; */
二、属性名表达式
JavaScript 定义对象的属性,有两种方法。
// 方法一
obj.foo = true;
// 方法二
// obj['a' + 'bc'] = 123;
但是,如果使用字面量方式定义对象(使用大括号),在 ES5 中只能使用方法一(标识符)定义属性。
var obj = {
foo: true,
abc: 123
};
ES6 允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内。
let propKey = 'foo';
let obj = {
[propKey]: true,
['a' + 'bc']: 123
};
表达式还可以用于定义方法名。
let obj = {
['h' + 'ello']() {
return 'hi';
}
};
obj.hello() // hi
三、super关键词
我们知道,this关键字总是指向函数所在的当前对象,ES6 又新增了另一个类似的关键字super,指向当前对象的原型对象。
const proto = {
foo: 'hello'
};
const obj = {
foo: 'world',
find() {
console.log(this.foo);
console.log(super.foo);
}
};
// 设置obj的新原型为proto
Object.setPrototypeOf(obj, proto);
obj.find(); // this.foo: 'world', super.foo: 'hello'
上面代码中,对象obj.find()方法之中,通过super.foo引用了原型对象proto的foo属性,但是this.foo返回的依旧是当前对象的foo属性。
注意,super关键字表示原型对象时,只能用在对象的方法之中,用在其他地方都会报错。
// 报错
const obj = {
foo: super.foo
}
// 报错
const obj = {
foo: () => super.foo
}
// 报错
const obj = {
foo: function () {
return super.foo
}
}
四、对象的解构赋值
对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有可遍历的(enumerable)、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
上面代码中,变量z是解构赋值所在的对象。它获取等号右边的所有尚未读取的键(a和b),将它们连同值一起拷贝过来。
由于解构赋值要求等号右边是一个对象,所以如果等号右边是undefined或null,就会报错,因为它们无法转为对象。
let { ...z } = null; // 运行时错误
let { ...z } = undefined; // 运行时错误
解构赋值必须是最后一个参数,否则会报错。
let { ...x, y, z } = someObject; // 句法错误
let { x, ...y, ...z } = someObject; // 句法错误
对象的拓展运算符
对象的扩展运算符(…)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。
let z = { a: 3, b: 4 };
let n = { ...z };