Make This Work (JavaScript)

[jasonliao]

some interview questions need to be implemented

• 重复数组内元素
• 选中下拉并在输入框中显示
• 数组置空
• 检验回文
• 检验素数
• 单词翻转
• getElementsByAttribute
• class 操作
• 转成驼峰
• 数组去重

[jasonliao]

duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]

• ES5

  function duplicate (arr) {
  return arr.concat(arr);
  }

• ES6

  const duplicate = arr => [...arr, ...arr];

[jasonliao]

改变下拉列表框的值时能显示当前选中的值在输入框

<form name="appform">
  <input type="text" name="app">
  <select size="1" name="selectedApp" onchange="changeApp()">
    <option selected value="jason">Jason</option>
    <option value="drake">Drake</option>
    <option value="shildon">Shildon</option>
  </select>
</form>

function changeApp () {
  var event = window.event,
      target = event.target || event.srcElement, // IE 6-8
      app = document.getElementsByName('app')[0];
  app.value = target.options[target.selectedIndex].text;
}

或者可以在 HTML 里的 onchange 函数中传入 this，就可以直接拿到 target

<select size="1" name="selectedApp" onchange="changeApp(this)">

function changeApp (target) {
  var app = document.getElementsByName('app')[0];
  app.value = target.options[target.selectedIndex].text;
}

[jasonliao]

有哪些方式可以把一个数组置空

var arraylist = [1, 2, 3];

1. arraylist = [];

   这种方法可以很简单地把 arraylist 置空，但只是重新指向了另一个空数组，要是在置空之前别的变量引用了这个数组，那么这个变量的值不同改变

   var arraylist = [1, 2, 3];
   var anotherArraylist = arraylist;
   arraylist = [];
   console.log(anotherArraylist); // [1, 2, 3]

2. arraylist.length = 0;

   用这种方式清空数组就会使所有其他的引用都变空

   var arraylist = [1, 2, 3];
   var anotherArraylist = arraylist;
   arraylist.length = 0;
   console.log(anotherArraylist); // []

3. arrayList.splice(0, arrayList.length);

   效果同方法2，splice 可以实现数组的删除，插入，替换

[jasonliao]

isPalindrome indicate whether or not a string is a palidrome

function isPalindrome (str) {
  str = str.replace(/\W/g, '').toLowerCase(); // 去掉字母和数字
  return str === str.split('').reverse().join('');
}

[jasonliao]

check prime number (查素数)

我们知道素数只能和 1 和它本身整除，所以我们可以循环作 % 运算

function isPrime (num) {
  var divisor = 2;

  while (num > divisor) {
    if (num % divisor === 0) {
      return false;
    } else {
      divisor++
    }
  }
  return true;
}

但是我们知道如果一个数可以被一个偶数整除，那么肯定可以被 2 整除，所以我们在 2 之后，就可以只与奇数运算

function isPrime (num) {
  var divisor = 2;

  while (num > divisor) {
    if (num % divisor === 0) {
      return false;
    } else {
      if (divisor === 2) {
        divisor++;
      } else {
        divisor += 2;
      }  
    }
  }
  return true;
}

进一步优化，如果一个数不能被 2 整除，那么也不能被大于它一半的数整除，如果一个数不能被 3 整除，那么也不能被大于它 1/3 的数整除。我们可以借此来减小我们循环的次数

function isPrime (num) {
  var divisor = 2,
      limit = num;

  while(limit > divisor) {
    if (num % divisor === 0) {
      return false;
    } else {
      limit = Math.ceil(num / divisor);
      if (divisor === 2) {
        divisor++;
      } else {
        divisor += 2;
      }
    }
  }
  return true;
}

[jasonliao]

实现 reverseInPlace

reverseInPlace('I am the good boy'); // 'I ma eht doog yob'

function reverseInPlace (str) {
  return str.split(' ').reverse().join(' ').split('').reverse().join('');
}

[jasonliao]

implement getElementsByAttribute

function getElementsByAttribute (attribute) {
  var allElements = document.getElementsByTagName('*');
      found = [],
      elm;
  for (var i = allElements.length; i >= 0; i--) {
    elm = allElements[i];
    if (elm.hasAttribute(attrubute) {
      found.push(elm);
    }
  }
  return found;
}

[jasonliao]

• addClass

  function addClass (elm, className) {
  if (elm.classList) { // IE10+
    elm.classList.add(className);
  } else {
    elm.className += ' ' + className;
  }
  }

• removeClass

  function removeClass (elm, className) {
  if (elm.classList) {
    elm.classList.remove(className);
  } else {
    var reg = new RegExp('(^| )' + className + '( |$)', 'gi');
    elm.className.replace(reg, ' ');
  }
  }

• toggleClass

  // IE8+
  function toggleClass (elm, className) {
  if (elm.classList) {
    elm.classList.toggle(className);
  } else {
    var classes = elm.className.split(' ');
    var existingIndex = -1;
    for (var i = classes.length; i >= 0; i--) {
      if (classes[i] === className) {
        existingIndex = i;
      }
    }
  
    if (existingIndex >=0) {
      classes.splice(existingIndex, 1);
    } else {
      classes.push(className);
    }
  
    elm.className = classes.join(' ');
  }
  }

  // IE9+
  function toggleClass (elm, className) {
  if (elm.classList) {
    elm.classList.toggle(className);
  } else {
    var classes = elm.className.split(' ');
    var existingIndex = classes.indexOf(className); // Array.indexOf IE9+
  
    if (existingIndex >=0) {
      classes.splice(existingIndex, 1);
    } else {
      classes.push(className);
    }
  
    elm.className = classes.join(' ');
  }
  }

• containsClass

  function containsClass (elm, className) {
  if (elm.classList) {
    return elm.classList.contains(className);
  } else {
    var reg = new RegExp('(^| )' + className + '( |$)', 'gi');
    return reg.test(elm.className);
  }
  }

[jasonliao]

数组去重

// 对原来的数组进行操作

Array.prototype.unique = function () {
  var exist = {},
      i;

  for (i = 0; i < this.length; i++) {
    if (exist[this[i]]) {
      this.splice(i--, 1);
    } else {
      exist[this[i]] = true;
    }
  }
};

// 返回一个新的数组

Array.prototype.unique = function () {
  var exist = {},
      result = [],
      i;

  for (i = 0; i < this.length; i++) {
    if (!exist[this[i]]) {
      exist[this[i]] = true;
      result.push(this[i]);
    }
  }
  return result;
};