ES6-----字符串和数组扩展

一、字符串的扩展

目前常用的字符串方法有:
1）charAt(index)：返回当前位的字符
2）charCodeAt()：返回当前位的Unicode编码
3）slice(start=0,end=this.length)：截取从start到end位（不包含end位[start,end) ）的字符串
4）substr(from,length)：从from位开始截取长度为length的字符串
5）substring(start,end=length)：从start开始截取，截取到end(不含end位)
6）toUpperCase()、toLowerCase() 大小写转换
7）split(val)：把字符串按照val拆分成数组
8）indexOf(str,start=0)：从start位开始，匹配str是否在字符串中。如果存在则返回匹配到的当前子串的首位位置，不存在则返回-1。
有时候检验子串是否在字符串中，我们期望所得到的结果并不是索引而是true或false，但是目前的indexOf方法需要我们再继续做判断。故而，ES6又对字符串的方法进行了扩展，首先是字符串中子串的识别：
1. includes(str,start=0)：从start位开始查找str，如果找到就返回true，否则返回false

//includes(str,start=0)  从start位开始查找str,找到就返回true,否则返回false
let str = 'Today is a wonderful day';
console.log(str.includes('a'));//true
console.log(str.includes('a', 6));//true
console.log(str.includes('to', 5));//false

2. startsWith(str,pos=0)：判断从第pos位置开始的字符串是否以str开头

//startsWidth(str,pos=0) 如果在字符串的位置pos检测到str,返回true,否则放回false
console.log(str.startsWith('T'));//true
console.log(str.startsWith('is', 6));//true
console.log(str.startsWith('Tt'));//false

3. endsWith(str,pos=this.length)：判断在pos位之前(不包含pos位)的字符串是否以str结尾

//endsWidth(str,pos=length) 在pos位之前的字符串是否以str结尾
console.log(str.endsWith('day'));//true
console.log(str.endsWith('day', 5));//true

4. repeate(number)：返回重复了number次的新字符串

console.log('*'.repeat(5));//*****

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

//模板字面量 
let name = 'Caroline';
let msg = `Hello,${name}`;
console.log(msg);//Hello,Caroline

//保留空格和换行
let newStr = `<p>
                <span>${msg}</span>    
              </p>`;

//如果在模板字符串中需要使用反引号，则前面要用反斜杠转义
console.log(`\`Yo\` World!`);//`Yo` World!

${}被称为插值语法，大括号内可以放原始值、引用值（{}会使里面的值调用自身的toString方法）。也可以放表达式，函数执行。

//放表达式
function count(a,b){
   return `${a}x${b}=${a*b}`;
}
console.log(count(1,2));//1x2=2

//放函数执行
function fn() {
   return "Hello World";
}
console.log(`foo ${fn()} bar`);//foo Hello World bar

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

alert`123`
// 等同于
alert(123)

如果函数后是包含插值语法的字符串，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。
1）按照模板${}进行拆分,把拆分后的字符放到一个数组里,作为第一个参数
2）有几个模板${},就把这几个模板中的值作为剩下的参数传入

//标签模板
function print(arr, ...arg) {
    console.log(arr);//["12", "45", ""]
    console.log(arg);//["a", "b"]
}
let a = 'a', b = 'b';
print`12${a}45${b}`;

利用标签模板我们可以过滤 HTML 字符串，防止注入(xss攻击)

function saferHtml(arr, ...arg) {
    let resultStr = '';
    for (let i = 0, len = arg.length; i < len; i++) {
        resultStr += arr[i];
        resultStr += arg[i].replace(/&/g, '&amp;')
                           .replace(/</g, '&lt;')
                           .replace(/>/g, '&gt;');
    }
    resultStr += arr[arr.length - 1];
    return resultStr;
}
let name = '<script>while(true){alert("haha")}<script>';
document.write(saferHtml`<p>Hello,${name}</p>`);

二、数组的扩展

目前创建数组的方法有：

var arr = [1, 3, 2];
var arr1 = new Array(4);//长度为4的数组
var arr2 = new Array('4');//['4']
var arr3 = new Array(1, 3, 2);//[1,3,2]

当使用new Array的方式创建数组时，如果只传入一个数字型参数，那么这个参数就会被认为是数组的长度。但是这种方式容易造成混乱。ES6增加了Array.of方法，传入的参数都将作为数组中的值。
1. Array.of：传入的参数都将作为数组中的值

console.log(Array.of(3));//[3]
console.log(Array.of(1, 3, '4'));//[1, 3, "4"]

2. Array.from：将类数组转成数组
以前我们想要把类数组转成数组，需要使用Array.prototype.slice.call等方法。ES6提供了更加简洁的方式来进行转换。

function change() {
    let arr = Array.from(arguments);
    return arr;
}
console.log(change(1, 4, 5, 6));//[1, 4, 5, 6]

3. find(fn)和findIndex(fn)：根据条件查找

let arr = [4, 1, 5, 3, 6, 4];
console.log(arr.find(x => x > 7));//undefined
console.log(arr.find(x => x > 4));//5
console.log(arr.findIndex(x => x > 4));//2
console.log(arr.findIndex(x => x > 7));//-1

1）find(fn)：根据条件查找，如果找到满足条件的值就立即返回该值，如果没找到就返回undefined
2）findIndex(fn)：根据条件查找，如果找到满足条件的值，就返回该值的索引；如果没有找到返回-1

4.fill(value,start=0,end=length)： 从start到end(不包含end位)使用给定值填充一个数组

let arr = [4, 1, 5, 3, 6, 4];
console.log(arr.fill('*'));//["*", "*", "*", "*", "*", "*"]
console.log(arr.fill('%',4));//["*", "*", "*", "*", "%", "%"]
console.log(arr.fill('&',2,4));//["*", "*", "&", "&", "%", "%"]

//start和end可以为负数，表示倒数第几位，但是只有end要比start大才会填充
console.log(arr.fill('+',-2));// ["*", "*", "&", "&", "+", "+"]
console.log(arr.fill('!',-3,-2));//["*", "*", "&", "!", "+", "+"]