JS編程題整理

目錄

• 生成隨機字符串
• 判斷迴文
• 實現簡單queryString
• 數組扁平化去重並升序
• JS全排列
• 節流和防抖
• 隱式類型轉換
• 合併數組並排序
• 更新中。。。

1. 生成隨機字符串

/**
 * 說明：生成一個指定長度（默認6位）的隨機字符，隨機字符包含小寫字母和數字。
 * 輸入：輸入隨機字符長度，無輸入默認6位
 * 輸出：隨機字符，如"6bij0v"
*/

方式一：

function idGenerator() {
    /* 功能實現 */
    var str = "abcdefghijklmnopqrstuvwxyz0123456789";
    var res = "";
    var len = arguments[0] ? arguments[0]:6;
    var strlen = str.length;
  	for(let i=0;i<len;i++){
        res += str.charAt(Math.floor(Math.random()*strlen));
    }
  	return res;
}

console.log(idGenerator());  // 0gtc7j
console.log(idGenerator(8)); // nfm9p1zb

方式二：

function idGenerator() {
    var len = arguments[0] ? arguments[0]:6;
    return Math.random().toString(36).slice(-len);  // 生成隨機數->轉換爲36進制->截取後len位
}

console.log(Math.random())
console.log(idGenerator());  // ybdhfk
console.log(idGenerator(8)); // t03acf5g

由於隨機數的不確定性，可能生成的比較短，就會產生問題;
方式三：

function idGenerator() {
    var len = arguments[0] ? arguments[0]:6;
    var res = "";
    for(let i=0;i<len;i++){
        res +=  Math.random().toString(36).slice(-1);
    }
    return res;
}
console.log(idGenerator());  // 7qp3wg
console.log(idGenerator(8)); // r4ajk5hw

2. 判斷迴文

/**
 * 迴文，給定一個字符串，驗證它是否是迴文串，只考慮字母和數字字符，可以忽略字母的大小寫。

輸入: "A man, a plan, a canal: Panama"
輸出: true

輸入: "race a car"
輸出: false
**/

方式一：

function isPalindrome(s) {
    /* 功能實現 */
    var arr = s.split("");
    var reg = /^[0-9a-zA-Z]+$/
  	var res = arr.filter(item =>{
    	return reg.test(item)  // 正則過濾出字母和數字
    })
    var res = res.map(item => {
    	return item.toUpperCase();  // 轉爲大寫字母
    })
  	var l = 0;
  	var r=res.length-1;
  	while(l!=r && l<r){
    	if(res[l]!=res[r]){
        	return false
        }
        l++;
        r--;
    }
  	return true;
}
console.log(isPalindrome("A man, a plan, a canal: Panama")) // true
console.log(isPalindrome("race a car"))  // false

3. 實現簡單queryString

/**
 * 簡單實現一個queryString，具有parse和stringify的能力，
 * parse，用於把一個URL查詢字符串解析成一個鍵值對的集合。
 * 輸入：查詢字符串 'foo=bar&abc=xyz&abc=123'
 * 輸出：一個鍵值對的對象
 * {
 *   foo: 'bar',
 *   abc: ['xyz', '123'],
 * }
 * stringify，相反的，用於序列化給定對象的自身屬性，生成URL查詢字符串。
 * 輸入：一個鍵值對的對象
 * {
 *   foo: 'bar',
 *   abc: ['xyz', '123'],
 * }
 * 輸出：查詢字符串 'foo=bar&abc=xyz&abc=123'
 */

方式一：

const queryString = {
    parse() {
        /* 功能實現 */
        let arg = arguments[0];
        let obj = {}
        let arr = arg.split("&")
        arr = arr.map(item => {
            return item.split("=");
        })
        for(let i=0,len=arr.length;i<len;i++){
            let item = arr[i][0];
            if(obj[item]){
                obj[item] = [obj[item]].concat([arr[i][1]])
            }else{
                obj[arr[i][0]]=arr[i][1]
            }
        }
        return obj;
    },
    stringify() {
        /* 功能實現 */
        let obj = arguments[0]
        let str = ""
        var arr = []
        for(let item in obj){
            if(Array.isArray(obj[item])){
                let m= obj[item].map(i=>{
                    return item+"="+i
                })
                arr = arr.concat(m)    
            }else{
                arr.push(item+"="+obj[item])
            }
        }
        str += arr.join("&")
        return str
    },
};

console.log(queryString.parse('foo=bar&abc=xyz&abc=123')); // { foo: 'bar', abc: [ 'xyz', '123' ] }
var res = {
    foo: 'bar',
    abc: ['xyz', '123'],
}
console.log(queryString.stringify(res))  // foo=bar&abc=xyz&abc=123

4. 數組扁平化去重並升序

方式一：

var arr = [13,2,[3,61,[3,[1,2]]],6];
var arr1 =Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{
  return a-b;
})
console.log(arr1) // [1, 2, 3, 6, 13, 61]

方式二：

var arr = [13,2,[3,61,[3,[1,2]]],6];
function flat(arr){   // 自己編寫flat函數，全部扁平化
    while(arr.some(item => Array.isArray(item))){
        arr = [].concat(...arr)
    }
    return arr;
}
var arr1 = Array.from(new Set(flat(arr))).sort((a,b)=>a-b);
console.log(arr1) // [ 1, 2, 3, 6, 13, 61 ]

5. JS全排列

輸入：3
輸出：[123, 132, 213, 231, 312, 321]

function f(num){ 
  var str = "";
  for(let i=1;i<=num;i++){
    str+=i;
  }
  return f1(str).map(item => parseInt(item)) // 數組裏的字符元素轉換爲數值元素
}

function f1(str){
  var res = [];
  if(str.length>1){
    for(let j=0,len=str.length;j<len;j++){
      var left = str[j];
      var rest = str.slice(0,j)+str.slice(j+1,str.length);
      var preF = f1(rest);
      for(let m=0,preL=preF.length;m<preL;m++){
        var tmp = left+preF[m];
        res.push(tmp)
      }
    }
  }else if (str.length==1){
    res.push(str);
  }
  return res;
}
console.log(f(3)) // [123, 132, 213, 231, 312, 321]

6. 節流和防抖

// 防抖
function debounce (func,time){
    let timer = null;
    return () => {
        clearTimeout(timer);
        timer = setTimeout(()=>{
            func.apply(this,arguments);
        },time)
    }
}

// 節流
function throtte(func,time){
    let activeTime;
    return ()=>{
        let current = Date.now();
        if(activeTime === undefined || current-activeTime > time){
            func.apply(this,arguments);
            activeTime = Date.now();
        }
    }
}

7. 隱式類型轉換

// 下面代碼在什麼情況下會打印1？
var a = ?;
if(a==1 && a==2 && a==3){
	console.log(1);
}

引用類型在比較運算符的時候，隱式轉換會調用toString或valueOf方法：

var a = {
  i:1,
  toString(){
    return a.i++
  }
}
if(a==1 && a==2 && a==3){
    console.log(1);
}

var a = {
  i:1,
  valueOf(){
    return a.i++;
  }
}
if(a==1 && a==2 && a==3){
    console.log(1);
}

var a = [1,2,3];
a.join=a.shift;
if(a==1 && a==2 && a==3){
    console.log(1);
}

對象的Symbol.toPrimitive屬性。指向一個方法。該對象被轉化爲原始類型的值時，會調用這個辦法，返回該對象對應的原始類型值。

var a = {[Symbol.toPrimitive]:((i)=>()=>++i)(0)};
if(a==1 && a==2 && a==3){
    console.log(1);
}

8. 合併數組並排序

題目：請把兩個數組['A1','A2','B1','B2','C1','C2','D1','D2']和['A','B','C','D']合併爲["A1", "A2", "A", "B1", "B2", "B", "C1", "C2", "C", "D1", "D2", "D"]

let a = ['A1','A2','B1','B2','C1','C2','D1','D2'];
let b = ['A','B','C','D'];
b = b.map((item)=>{
  return item+3;
})
let c = [...a,...b].sort().map((item)=>{
  if(item.includes('3')){
    return item.split('')[0]
  }
  return item;
})
console.log(c)