ES6-扩展(字符串、函数、解构、rest参数、箭头函数、扩展运算符、数组、链判断)

一、字符串的扩展

常用api
indexOf()；返回字符串中检索指定字符第一次出现的位置
slice();提取字符串的片段，并在新的字符串中返回被提取的部分
split();分割成子字符串数组
toLowerCase();转换为小写
toUpperCase();转换为大写
substr()；起始提取指定数量的字符
substring();两个指定的索引之间的字符
扩展
includes();返回布尔值，是否找到
startWith();返回布尔值，是否在头部
endWith();布尔值，是否在尾部
repeat();一个新字符串，原字符串重复n次
padStart();头部补全
padEnd();尾部补全

二、函数的扩展

函数默认参数
ES5

function fun(x,y){
  y = y || 'zs';
  console.log(x,y)
};
fun('ls')
// ES6
function fun(x,y='zs'){
  console.log(x,y)
}
fun('ls')

rest参数
ES6 引入 rest参数(…变量名)，用于获取函数的多余参数，arguments对象的替代者

// rest 参数搭配的变量是一个数组，将多余的参数放入数组中
function fun(...values){
  console.log(values)
};
fun(1,2,3,4)
// 获取具体值通过 values[2]

注意，只能作为最后一个参数使用，否则会报错

箭头函数
基本用法

var f = v=>v;

参数为空

let f= ()=>{}

多个参数 返回对象

let f = (n1,n2)=>({})

解构中使用

let f= ({x=0,y=0} = {})=>{
	return [x,y]
};
f({x:3,y:3})
f()

rest参数

const fun = (...item)=>[item];
fun('天','行','九','歌')；

几个注意点，
1.函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
2.不可以当做构造函数
3.不存在arguments对象。
4.apply(),bind(),call()对this毫无影响

扩展运算符

扩展运算符形式是 三个点(…)

可以是rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。
主要用于函数调用还可以用于数组的合并

let arr1 = [0,1,2];
let arr2 = [3,4,5];
let arr3 = [...arr1,...arr2]
//或者直接arr1.push(...arr2)

参数

function add(x,y){
  return x + y;
}
const numbers = [4,5];
add(...numbers)

扩展运算符与正常的函数参数可以结合使用，很灵活

function f(...items){
  console.log(items);
  console.log(...items)
}
const args = ['zs','ww'];
f(0,...args,2,...[3])

扩展运算符可以与解构赋值结合起来，用于生成数组

const [first,...rest] = [1,2,3,4,5];
first
rest 

在字符串中的应用
扩展运算符还可以将字符串转为真正的数组

//ES5
var s1 = 'hello';
console.log(s1.split(''));
//ES6
[...'hello']

对象中的运用

let obj1 = {id:1};
let obj2 = {name:2};
let obj3 = {...obj1,...obj2}

对象中合并函数

let fun = ()=>{123};
let obj4 = {...obj3,fun};

数值的扩展

parseInt();//解析一个字符串，并返回一个整数
parseFloat();// 解析字符串，并返回一个浮点数
Number.isInteger();//用来判读一个数值是否为整数
Math.ceil();// 返回大于或等于一个给定数字的最小整数
Math.floor();// 返回小于或等于一个给定数字的最大整数
Math.rount();// 返回一个数字四舍五入后最接近的整数
Math.trunc();// 用于去除一个数的小数部分，返回整数部分
Math.sign();// 方法用来判断一个数到底是正数、负数、还是零、对于非数值，会先将其转换为数值

数组的扩展
Array.of()
定义：用于将一组值，转换为数组

Array.of();
Array.of(1);
Array.of(1,2,3);
Array.of(4,5).length;

copyWithin()
定义：将指定位置的成员复制到其他位置，会覆盖，返回当前数组，会修改当前数组，接收三个参数copyWithin(target,start,end)

find()
用于找出第一个符合条件的数组成员。参数为回调函数，一次执行该回调函数，直到找出第一个返回值为true的成员，返回该成员，如果无，返回undefined.
三个参数，一次是当前的值、当前的位置和原数组
findIndex()
返回首个符合条件的数组成员的位置，如无，返回-1
fill()
用于将一个固定的值替换数组的元素

array.fill(value,start,end)

includes()
返回一个布尔值，是否包含给定的值，

[1,2,3].includes(2);//true

flat()
将嵌套数组‘拉平’，变成一维数组，返回一个新数组

[1,2,[22,33,44],[]].flat()

默认只会拉平一层，拉平多层，可以传入整数，如果不管多少层，可以传入 Infinity关键字

链判断运算符
读取对象内部的某个属性时，往往需要判断该对象是否存在，比较麻烦，链判断的引入 简化了代码 ?.的形式

// 不严谨的写法
const result = data.message.body.user;
// 严谨的写法 但是 较麻烦
const result = (data && data.message && data.message.body && data.message.body.user) || 'default';
// 链判断
const result = data?.message?.body?.user || 'default';