有关分享 | |
---|---|
重新认识ES6中的语法糖 | ES6 小技巧语法糖 |
ES6 入门教程 |
用 export
把方法暴露出来:
/**
* 去除HTML tag
* @param {String} str 文本内容
*/
export function removeHTMLTag (str) {
str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag
str = str.replace(/\s+/g, ''); //去除多余空行
str = str.replace(/ /ig, '');//去掉
return str;
}
import { removeHTMLTag, randomMath } from '@/filters/index';
let aa = '<a href="http://XXX.com" style="display:none;">XXX.COM 1</a>  2'
console.log(removeHTMLTag(aa)) // 打印:XXX.COM1 2
/**
* 产生10位随机整数,包含下限值,包括上限值
* @return {Array} 返回一个10位的数组
*/
export function randomMath () {
var arr = [];
while(arr.length < 10) {//原数组长度为0,每次成功添加一个元素后长度加1,则当数组添加最后一个数字之前长度为9即可
var num = Math.floor(Math.random() * 100);//生成一个0-100的随机整数
if (arr.length === 0) {//如果数组长度为0则直接添加到arr数组
arr.push(num);
} else {
for (var i = 0; i < arr.length; i++) {//当新生成的数字与数组中的元素不重合时则添加到arr数组
if (arr.join(',').indexOf(num) < 0) {
arr.push(num);
}
}
}
}
return arr;
}
import { removeHTMLTag, randomMath } from '@/filters/index';
let deviceArr = randomMath(); // 生成十位随机数
let deviceJoin = deviceArr.join(); // 数组转字符串
let device = deviceJoin.replace(/,/g,''); // 去掉字符串逗号
一、Class 继承
用 class定义对象
的另一个巨大的好处是继承更方便了。
/*
* class 的定义包含了构造函数 constructor 和定义在原型对象上的函数 myAge()(注意没有 function关键字)
* 这样就避免了Student.prototype.hello = function () {...}这样分散的代码
*/
class Student {
// 父类的构造函数
constructor (name) {
this.name = name
}
hello () {
console.log('Hello ' + this.name)
}
}
class PrimaryStudent extends Student{
construct(name,age){
// 子类 PrimaryStudent 的构造函数中的 super(),代表调用父类的构造函数
super(name)
this.age = age
}
myAge(){
console.log('my age is ' + this.age)
}
}
// 当子类 PrimaryStudent 被实例化时,它指向的是子类 PrimaryStudent 的构造函数,而不是父类 Student 的构造函数。
// 所以说,“ super() 内部的 this 指向子类 ”
let xiaohong = new PrimaryStudent('小红',18);
console.log(xiaohong.name)//小红
xiaohong.myAge()//my age is 18
- (1)
PrimaryStudent
的定义也是 class关键字 实现的,而extends
则表示原型链对象来自Student。 - (2)子类的构造函数可能会与父类不太相同,例如: PrimaryStudent 需要 name 和 grade 两个参数,并且需要通过 super(name) 来调用父类的构造函数,否则父类的 name属性 无法正常初始化。
super() 关键字
super()
虽然代表了父类的构造函数,但是返回的却是子类的实例,内部this的指向是子类的实例,因此这里的 super() 相当于 Student.prototype.constructor.call(this)。
链接- super 大介绍
构造函数生成实例的执行过程:
- 1、当使用了构造函数,并且 new 构造函数(),后台会隐式执行 new Object() 创建对象;
- 2、将构造函数的作用域给新对象,(即new Object() 创建出的对象),而函数体内的 this 就代表new Object() 出来的对象;
- 3、执行构造函数的代码‘’
- 4、返回新对象(后台直接返回);
二、箭头函数
(1)、没有原型
。因为不能通过new关键字调用,没有构造原型的需求,所以箭头函数不存在 prototype 属性。
(2)、不可以改变 this 的绑定
。函数内部的 this 值不可改变,在函数生命周期保持一致。并且 this值 指向由外围最近一层非箭头函数决定。
(3)、不支持 arguments 对象
。箭头函数没有 arguments 绑定,所以你必须通过命名参数和不定参数两种形式访问函数的参数。指向 arguments
(4)、不能通过 new 关键字调用。
详细
(1)、箭头函数中的this指向与普通函数的 this 相比已经发生了本质的变化。
(2)、箭头函数本身没有 this,但是在它声明的时候
,能够捕获此函数所在作用域中 this。
(3)、捕获成功后,this指向的对象始终保持不变。
三、数组处理
- 1、数组转字符串- join()
- 2、split()
-方法用于把一个字符串分割成字符串数组
var str = "hi=123456";
var strArray = new Array(); //定义一数组
strArray = str.split("="); //分割 split("=", 1) -可以打印出 hi
console.log(strArray) // 打印: [hi, 123456]
// 拿到数组的最后一个元素
let date = []
date = res.data.data;
let last = date.slice(-1);