12-21 字符串的split()方法的理解和应用

vue-music的继续学习

为了贯彻模块化的思想，本项目把DOM操作封装到了dom.js里，部分代码如下：

//判断元素是否有该className
export function hasClass(el, className) {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
  return reg.test(el.className)
}
//给元素添加指定类名
export function addClass(el, className) {
  if (hasClass(el, className)) {
    return
  }

  let newClass = el.className.split(' ')
  newClass.push(className)
  el.className = newClass.join(' ')
}

1.这里创建了一个RegExp对象，该对象的属性和方法见
RegExp，廖雪峰的教程

2.字符串的split（）方法实质上是把字符串转换为字符串数组，
而数组的join()方法是将数组转换为字符串。这两个方法执行的操作是相反的

JavaScript split() 方法

所以addClass()方法主要的逻辑就是首先判断该元素有没有这个类，如果有的话，这个函数不做操作。
如果没有的话，将该元素现在的类名（字符串）先转换为字符串数组，因为可以方便使用push()方法把新类名进行加入，然后再转为正式的字符串即可。
添加指定的类名如此，删除也肯定同理。只不过要删除数组的元素操作而已。

let str = 'btn btn-large';
let arr = str.split(' ');
let strName = 'btn-default';
//将字符串转数组再转字符串  实现addClass的DOM操作
arr.push(strName);
let arr2 = arr.join(' ');
console.log(arr2);

//直接调用String对象的concat方法 较简单
let str3=str.concat(` ${strName}`)
console.log(str3)

上述是自己写的addClass（）用了两种方法，第二种较简单