本来是不想写的,但是感觉这一块写的时候就是不够熟练,尤其是写正则的时候,感觉贼难受,所以做个简单的总结吧。
es6
一.解构赋值
解构赋值应该是es6用得比较多的情况了,就连引入方式import实际上也是解构的过程。
//不完全数组解构let [a,b,c,d] = [1,2,3];//a = 1 b = 2 c = 3 d = undefinedlet [a,[b],c] = [1,[2,3],4]//a = 1 b =2 c = 4复制代码
以上都是正常的解构方式,如果左右不匹配会不完全数组解构。
//对象解构let {a,b} = {a:1,b:2}//a = 1;b = 2;复制代码 其实上述写法是简写,完全写法如下:
let {a:a,b:b} ={a:1,b:2};复制代码 如上可以看出来,{a:a,b:b}中第一个a只是个key,真正被赋值的是后面那个a。所以我们可以写成下面这样
let {a:c,b:d} ={a:1,b:2};// c = 1 ; d = 2复制代码 可以看出,被赋值的是c和d。复杂的解构:
const demo = { yfch:{ name:'aaa', age:17, work:{ name:'it', old:3 } }}//比方这是接口返回的数据,我们想得到'yfch'的内容,应该这样写let { yfch:data } = demo;//如果向得work下的name属性可以这样写:let { yfch: { name,age,work:{name:name1}},} = demo//因为demo有两个name属性,所以不能简写复制代码 二.字符串扩展实例方法
a.includes()
const demo = 'abch';demo.includes('a') // true 判断是否含有该字符与es5 indexOf相似复制代码 b.repeat()
const str = 'a';str.repeat(3) //'aaa'复制代码
c.padStart()，padEnd()
这两个方法会接受两个参数,第一个参数表示字符串补全长度,第二个参数代表补全的字符串。
'a'.padStart(3,b) // bba'abc'.padStart(3,d) //abc 小于长度返回原字符串'ab'.padStart(4,'1234') //ab12 会截取到该位数补全复制代码
d.trimStart()，trimEnd()
返回的字符串头部和尾部会去掉空格。
三.函数扩展方法
a.name
function demo(){}demo.name // "demo"复制代码 返回函数本身的名字。
b.箭头函数
箭头函数顾名思义,就是一个函数。就是说在es6中可以使用=>作为函数
var f = v => v+2等同于var f = function(v){ return v+2 }复制代码 箭头函数需要注意的点有
- 箭头函数内的
this不是根据谁调用就指向谁,而是指向定义时的对象。
function foo() { setTimeout(() => { console.log('id:', this.id) }, 100) setTimeout(function () { console.log('id:', this.id) },100) console.log('id:', this.id)}var id = 21foo.call({ id: 42 }) // 42 42 21复制代码 foo函数执行call方法,实际上就是将foo函数的this变成了对象{id:42},所以直接打印this.id的结果就是42。然而加了setTimeOut方法之后,箭头函数则是指向定义时的this,所以输出42,而普通函数是在foo.call执行完之后的100ms后才输出this.id,所以输出的是21。