ES6中的字符串API.md

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}!`;

在解析带标签的模板字符串时，‘$...’可以看成一个分隔符，而函数中的第一个形参接受由‘${…}’分隔开的字符串组成的数组（如上述‘$...’将字符串分割为了"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" }]注意：因为填充的是同一个引用值，因此一改全改