ES6 扩展运算符、模板字符串

扩展运算符

...、Array.from()、find()、findindex()、includes()

扩展运算符（展开语法）。可以将数组或对象转化为用逗号分隔的参数序列。

let arr = [10,20,30,40,50,60];
console.log(...arr);	

• 扩展运算符可以应用于合并数组。

//方法一
let arr1 = [10,20,30];
let arr2 = ['a','b'.'c'];
let arr3 = [...arr1 + ...arr2];
console.log(arr3);	//[10,20,30,'a','b'.'c']
//方法二
arr1.push(...arr2);

• 将伪数组（类数组或可遍历对象）转换为真正的数组。

var divs = document.querySelectorAll('div');
var newDivs = [...divs]; 
newDivs.push('465');
var newDivs = [...divs]; 

• 构造函数方法Array.from()。接受第二个参数作用类似数组map()方法，用来对每个元素进行处理，将处理后的结果返回给新数组。

var arr = {
	'0':'1',
    '1':'2',
    'length':2
}
var a = Array.from(arr);	//['1','2']
var a = Array.from(arr,item => item * 2);	//[2,4]
console.log(a);

• 实例方法：find()。用于找出第一个符合条件的数组成员,若没有就返回undefined。

let arr1 = [{
    id:1,
    name:'zhangsan'
},{
	id:2,
    name:'lisi'
}];
let target1 = arr1.find((item,index) => item.id == 2);
console.log(target1);	//{id:2,name:'lisi'}
let target2 = arr1.find((item,index) => item.id == 3);
console.log(target2);	//undefined

• 实例方法：findindex()。用于找出第一个符合条件的数组成员位置,若没有就返回-1。

let arr1 = [10,20,30,40,50,60];
let target1 = arr1.findindex(item => item > 30);
console.log(target1);	//3

• 实例方法：includes()。查看某个数组是否包含给定的元素值，返回布尔值。

var a = [10,20,30].includes(20);
console.log(a);	//true

模板字符串

• 模板字符串中解析字符串。

var a = `张三`;
var b = `你好啊，我叫${a}`;
console.log(b);

• 模板字符串中可以换行。

var a = `
	<div>
		<p></p>
	</div>
`;

• 模板字符串科院调用函数。

function fn () {
    return '派大星';
}
console.log(`我是模板字符串${fn()}`);	//我是模板字符串派大星

• 实例方法：startsWith()、endsWith()

  • startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值。
  • endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值。

  var a = 'Hello World!';
  console.log(a.startsWith('hello'));	//true
  console.log(a.endsWith('0'));	//false
  

• 实例方法：repeat()。表示字符串重复多少次。

console.log('哈'.repeat(5));