ES6中的字符串扩展与数组扩展
#字符串扩展
includes
用于判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false
语法:str.includes(searchString[, position])
searchString——要在此字符串中搜索的字符串;position——可选。从当前字符串的哪个索引位置开始搜寻子字符串,默认值为0
let str = 'to be, or not to be, that is a question';
console.log(str.includes('not to be'));//true
console.log(str.includes('not to be', 11));//false
该方法区分大小写
let str = 'UpperCase and LowerCase';
console.log(str.includes('upperCase'));//false
console.log(str.includes('UpperCase'));//true
startsWith
用来判断当前字符串是否是以参数给定的子字符串“开头”的,根据判断结果返回true/false
语法:str.startsWith(searchString [, position])
searchString——要搜索的子字符串;position——在 str 中搜索 searchString 的开始位置,默认值为 0,也就是真正的字符串开头处
var str = "To be, or not to be, that is the question.";
console.log(str.startsWith("To be")); // true
console.log(str.startsWith("not to be")); // false
console.log(str.startsWith("not to be", 10)); // true
该方法大小写敏感
endsWith
用来判断当前字符串是否是以参数给定的子字符串“结尾”的,根据判断结果返回true/false
语法:str.endsWith(searchString [, position])
不包含position位置的字符,如下:
var str = "To be, or not to be, that is the question.";
console.log(str.endsWith("be", 19)); // true,不包含19处的字符','
console.log(str.endsWith("be", 18)); // false
repeat
语法:str.repeat(count)
count只能为[0,+无穷)
重复原字符串
var str = 'abc'.repeat(3);//"abcabcabc"
var str1 = 'abc'.repeat(0);//""
模板字符串
######语法及简单使用:
语法:
- 模板字符串使用‘``’来代替普通字符串中的双引号或单引号
- 模板字符串使用‘${expression}’来插值
简单使用:
let obj1 = '国家';
let obj2 = '我们';
let str = `${obj1}是伟大的,${obj2}热爱她`;
console.log(str);//"国家是伟大的,我们热爱她"
用‘’…’’包围的一组字符串会被解释为模板字符串,其中‘${expression}会被立即解析求值’
模板字符串能更方便创建多行字符串
var str = '纸上得来终觉浅
绝知此事要躬行';//由于会自动加分号,因此此种构建多行字符串的方式会报错
var str = '纸上得来终觉浅\n\
绝知此事要躬行';//此种换行方式成功
但是有了模板字符串,则
var str = `纸上得来终觉浅
绝知此事要躬行`;//在书写代码时直接换行即可
template1.png
更常用的,我么可以用它来书写html结构
let div = document.getElementById('div');
let html = `<ul>
<li>
<div><span>span1</span></div>
</li>
<li>
<div><span>span2</span></div>
</li>
</ul>`;
div.innerHTML = html;
在书写模板字符串代码时,书写在其中的换行会被保留在模板字符串中。所以能用模板字符串语法创建多行字符串
转义
如果你要在模板字符串中使用‘``’则需要进行转义
let str = `qwe\`nihao\`kn`;
当然,像其他时候一样,使用‘\’等字符也要转义
‘${expression}’中的expression
expression只要是一个合法的表达式就行
let a = undefined;
let b = null;
let c = [1,2,3];
let d = {name:'德洛丽丝'};
let e = name => name;
let str = `${a}与${b}与${c}与${d}与${e('伯纳德')}与${3%5}`;
//"undefined与null与1,2,3与[object Object]与伯纳德与3"
######带标签的模板字符串
带标签的模板字符串是指——模板字符串前面有一个函数的引用
let obj1 = '大家';
let obj2 = '贝尔格里尔斯';
function test(){};
let str = test`${obj1}好!我是${obj2}`;
//模板字符串前面有一个函数的引用——test,这便是带标签的模板字符串
那么,带标签的模板字符串是怎么运行的呢?
function foo(strings, ...values) {
console.log( strings );//["Everything is ", "!"]
console.log( values );//["awesome"]
}
var desc = "awesome";
foo`Everything is ${desc}!`;
在解析带标签的模板字符串时,‘ . . . ’ 可 以 看 成 一 个 分 隔 符 , 而 函 数 中 的 第 一 个 形 参 接 受 由 ‘ {...}’可以看成一个分隔符,而函数中的第一个形参接受由‘ ...’可以看成一个分隔符,而函数中的第一个形参接受由‘{…}’分隔开的字符串组成的数组(如上述‘ . . . ’ 将 字 符 串 分 割 为 了 " E v e r y t h i n g i s " 与 " ! " 两 部 分 , 而 s t r i n g s 正 是 由 这 两 个 字 符 串 组 成 的 数 组 ) ; 函 数 的 第 二 个 参 数 接 受 , 由 所 有 ‘ {...}’将字符串分割为了"Everything is "与"!"两部分,而strings正是由这两个字符串组成的数组);函数的第二个参数接受,由所有‘ ...’将字符串分割为了"Everythingis"与"!"两部分,而strings正是由这两个字符串组成的数组);函数的第二个参数接受,由所有‘{…}’的运算结果(只不过这儿用了rest运算符,固结果被收集为了一个数组)
再看一个例子
function foo(strings, ...values) {
console.log( strings );//["Thanks for your purchase, ", "! Your product cost was ", ", which with taxcomes out to ", "ok!"]
console.log( values );//["Jack", 11, 22]
}
let name = "Jack";
let amt1 = 11;
let amt2 = 22;
foo`Thanks for your purchase, ${name}! Your product cost was ${amt1}, which with taxcomes out to ${amt2}ok!`;
#数组扩展
Array.of(…)
Array.of(…)取代了Array(…),用于创建一个数组
为什么要用of而不用Array了呢?——因为,Array(…) 构造器有一个众所周知的陷阱,就是如果只传入一个参数,并且这个参数是数字的话,那么不会构造一个值为这个数字的单个元素的数组,而是构造一个空数组,其length 属性为这个数字
而of就没有这种特殊行为
let arr1 = Array.of(5);
let arr2 = new Array(5);
console.log(arr1, arr2);[5] [empty x 5]
Array.from(…)
该方法用于将类数组转换为数组。使我们更方便的使用数组中的方法
let obj = {
0: '德洛丽丝',
1: '伯纳德',
2: '黑尔',
length: 3
}
let arr = Array.from(obj);//["德洛丽丝", "伯纳德", "黑尔"]
注意:
var arrLike = {
length: 4,
2: "foo"
};
Array.from( arrLike );//[undefined, undefined, "foo", undefined]
由此可见,from方法的本质就是循环遍历类数组
除了通过更标准的from方法将类数组转换为数组之外。还有几种野生的方式:
- 通过数组中的slice方法
let obj = {
0: '德洛丽丝',
1: '伯纳德',
2: '黑尔',
length: 3
}
let arr = Array.prototype.slice.call(obj);//["德洛丽丝", "伯纳德", "黑尔"]
注意:此时slice中不传任何参数
######Array.prototype.find()
语法:arr.find(callback[, thisArg])
callback:
在数组每一项上执行的函数,接收 3 个参数:
element(当前遍历到的元素)、index(当前遍历到的元素的索引)、array(数组本身)
thisArg:
用于改变callback中的this指向
返回值:
find 方法对数组中的每一项元素执行一次 callback 函数,直至有一个 callback 返回真值。当找到了这样一个元素后,该方法会立即返回这个元素的值,否则返回 undefined。(一旦callback返回了true,那么就会停止对数组的遍历)
let arr = [
{
name: '德洛丽丝',
age: 30
},
{
name: '伯纳德',
age: 32
},
{
name: '黑尔',
age: 30
}
];
let result = arr.find((item) => {
return item.name === '伯纳德';
});
Array.prototype.findIndex()
语法:arr.findIndex(callback[, thisArg])
callback:
在数组每一项上执行的函数,接收 3 个参数:
element(当前遍历到的元素)、index(当前遍历到的元素的索引)、array(数组本身)
thisArg:
用于改变callback中的this指向
返回值:
findIndex方法对数组中的每个元素执行一次callback函数,直到找到一个callback函数返回真值,如果找到这样的元素,findIndex会立即返回该元素的索引。如果没有符合要求的元素,或者数组的length为0,则findIndex返回-1
Array.prototype.fill()
语法:arr.fill(value[, start[, end]])
value
用来填充数组元素的值
start 可选
起始索引,默认值为0
end 可选
终止索引,默认值为 this.length
返回值:
fill方法用value填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。然后返回更改后的原数组(该方法会改变原数组)
当start/end为负数时,会被自动计算为length+start/end
[1, 2, 3].fill(4); // [4, 4, 4]
[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3); // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5); // [1, 2, 3]
Array(3).fill(4); // [4, 4, 4]
[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}
// Objects by reference.
var arr = Array(3).fill({}) // [{}, {}, {}];
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]注意:因为填充的是同一个引用值,因此一改全改