javascript 學習記錄 -- 程式設計題集合

小呆瓜coco發表於2018-03-23
JavaScript程式設計

自我學習記錄（一直會更新?）

1.js獲取URL中引數值（自己寫的）

function getUrl(url) {
    let arr = url.slice(url.indexOf('?') + 1).split('&')
    let cc = arr.map(item => {
        let obj = {}
        obj[item.split('=')[0]] = item.split('=')[1]
        return obj
    })
    return cc
}
var newurl = 'http://dev.cekid.com:9018/r/products?store_code=8002&citycode=320100&cityname=%E5%90%88%E8%82%A5%E5%B8%82&cityid=340100&entityid=8029&entityname=%E5%90%88%E8%82%A5%E7%BE%8E%E6%B8%B8'
getUrl(newurl) // (6) [{…}, {…}, {…}, {…}, {…}, {…}]
複製程式碼

URL中的查詢引數解析成字典物件?

var newurl = 'http://dev.cekid.com:9018/r/products?store_code=8002&citycode=320100&cityname=%E5%90%88%E8%82%A5%E5%B8%82&cityid=340100&entityid=8029&entityname=%E5%90%88%E8%82%A5%E7%BE%8E%E6%B8%B8'
function parseUrl(url) {
	var arr = url.slice(url.indexOf('?') + 1).split('&')
	var newArr = arr.reduce((prev, next) => {
		let _item = next.split('=')
		prev[_item[0]] = _item[1]
		return prev
	}, {})
	return newArr
}

console.log(parseUrl(newurl))
// {store_code: "8002", citycode: "320100", cityname: "%E5%90%88%E8%82%A5%E5%B8%82", cityid: "340100", entityid: "8029", …}
複製程式碼

2.物件變陣列

var data = {a: 1, b: 2, c: 3}
function objToArr(obj) {
    var arr = []
    for (let i in obj) {
        arr.push(obj[i])
    }     
    return arr
}
objToArr(data)
//結果： [1, 2, 3]
複製程式碼

3.一維陣列變二維陣列

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
function toDoubleArr(arr, i) {
	var newArr = []
	arr.forEach((item, index) => {
		if (index % i === 0) {
			newArr.push([])
		}
		newArr[newArr.length - 1][index % i] = item
	})
	return newArr
}
toDoubleArr(a, 4)
複製程式碼
var arr = [1, 2, 3, 4, 5, 6, 7]
function toDoubleArrs(arr, i) {
	var newArr = arr.reduce((prev, next, index) => {
    	if (index % i === 0) {
      	prev.push([])
    	}
    	prev[Math.floor(index / i)].push(next)
    	// prev[prev.length - 1].push(next)
    	return prev
  	}, []) 
	return newArr
}
toDoubleArrs(arr, 5)
複製程式碼

4. 一維陣列變三維陣列

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
let newArr = arr.reduce((prev, next, index, tmp) => {
    if(index % 10 === 0) {
        prev.push([])
    }
    if(index % 5 === 0) {
        prev[prev.length - 1].push([])
    }
    prev[prev.length-1][prev[prev.length-1].length-1].push(next)
    return prev;
 }, [])
newArr
複製程式碼

5.陣列去重（好同學問的一個問題，自己就回答了前兩個，得??）

1.ES6方法: 利用Array.from()將Set結構轉化為陣列
Set資料結構，他類似於陣列，其特點就是成員值都是唯一的

var arr = [1, 2, 3, 4, 5, 3, 2, 2, '123', '123']
var newArr = Array.from(new Set(arr))
console.log(newArr)
複製程式碼

補充：擴充運算子(...)內部使用for...of迴圈

var arr = [1, 2, 3, 4, 5, 3, 2, 2, '123', '123', '1']
var newArr = [...new Set(arr)]
console.log(newArr)
複製程式碼

2.indexOf()查詢新陣列中有沒有當前這個值，沒有就push
indexof結合forEach、map、filter

var a = [1, 2, 3, 4, 5, 3, 2, 2, '123', '123']
function distinct(arr) {
	var arrs = []
	arrs.push(arr[0])
	arr.forEach((item, index) => {
		if (arrs.indexOf(item) === -1) {
			arrs.push(item)
		}
	})
	return arrs
}
distinct(a)
複製程式碼

3.利用物件的屬性不能相同的特點進行去重 錯誤的寫法，沒區別字串'1'和數字1：

var a = ['a', 2, 3, 2, 1, 3, 4, '1']
function distinct(arr) {
	var obj = {}
	var newArr = []
	arr.forEach((item, index) => {
	 	if (!obj[item] ) { 	// 如果obj中能夠查到的話，說明item在newArr陣列中已存在，所以取反
	 	// 查不到情況下，執行陣列push，obj記錄
	 		obj[item] = 1
			newArr.push(item)
		}
	})
	return newArr
}
console.log(distinct(a))
複製程式碼

正確寫法：

var a = ['a', 2, 3, 2, 1, 3, 4, '1']
function distinct(arr) {
	var obj = {}
	var newArr = []
	arr.forEach((item, index) => {
	 	if (!obj[typeof item + item] ) { 	// 如果obj中能夠查到的話，說明item在newArr陣列中已存在，所以取反
	 	// 查不到情況下，執行陣列push，obj記錄
	 		obj[typeof item + item] = 1
			newArr.push(item)
		}
	})
	return newArr
}
console.log(distinct(a))
複製程式碼

6.去掉字串前後所有空格

var str = '  12 123  1212  '
function trim(str) {
	return str.replace(/(^\s*)|(\s*$)/g, '') // 前後都去除
	// return str.replace(/(^\s*)/g, '')
	// return str.replace(/\s*$/g, '')
}
trim(str) // "12 123  1212"
複製程式碼

str.trim(), str.trimLeft(),str.trimRight()

var str = '  12 123  1212  '
str.trim()
複製程式碼

1.1js預處理機制

var c = 1;  
function c(c) {  
    console.log(c);  
    var c = 3;  
}  
console.log(c) // 1  
console.log(typeof c) // number  
c(2) //  c is not a function
複製程式碼

js語言本身具有預處理機制，js引擎在預處理期對所有宣告的變數和函式進行處理，就是先把變數進行宣告並讀到記憶體裡。
預處理時，變數和函式的優先順序，先變數後函式。當變數名和函式名一致時後者會覆蓋前者

1.2請補充程式碼，使mySort()能將傳入的引數按從小到大的順序顯示出來。

var result = mySort(23,44,56,98,1,2,33);//傳入的引數不定
console.log(result);//顯示結果
複製程式碼

解答：

function mySort(){
   var args = new Array();//使用陣列作為引數儲存容器
   args = Array.from(arguments);
   args.sort(function(a,b) {
        return a-b;
    })
   return args;//返回已經排序的陣列
 }
var result = mySort(23,44,56,98,1,2,33);//傳入的引數不定
console.log(result);//顯示結果 [1, 2, 23, 33, 44, 56, 98]
複製程式碼

解析： 1.arguments:物件的長度是由實參個數而不是形參個數決定的。
js將傳入這個函式的全部引數儲存在一個arguments類陣列物件中，arguments.callee這個屬性裡面儲存著當前呼叫的函式的全部程式碼
2.Array.from():將類似於陣列的引數的值轉化為真正的陣列。
3.array.sort(): 這個是陣列排序

1.3 字串轉駝峰寫法，例：'border-bottom-color' --> borderBottomColor

var str = 'border-bottom-color'
function toNewStr(str) {
	let _newStr = str.split('-').reduce((prev, next) => {
		return prev + next.charAt(0).toUpperCase() + next.substring(1)	
	})
	return _newStr
}
toNewStr(str) // "borderBottomColor"
複製程式碼

?得看看陣列、字串的一些方法

1.陣列方法：reduce
2.字串常見方法：split、charAt()、toUpperCase()、substring()

1.4 找出字串中出現最多的字元和個數

物件遍歷for(var i in obj){ // 執行操作 }

var str = '123sdada31213cscadada'
function getStr(str) {
    // 獲取字串和其對應的個數
	var obj = {}
	str.split('').forEach((item , index) => {
		if (obj[item]){
			obj[item] = obj[item] + 1
		} else {
			obj[item] = 1
		}
	})
	return obj
}
function getMax(obj) {
    // 從獲得的物件中找到最大的值
	var maxValue = 0
	var maxIndex = 0
	for(var i in obj) {
		if (maxValue < obj[i]) {
			maxValue = obj[i]
			maxIndex = i
        }
	}
	return '第' + maxIndex + '個值最大為' + maxValue 
}
function getStrMax(str) {
    // 執行函式
    let _str = getStr(str)
    let str_ = getMax(_str)
    return str_
}
getStrMax(str)
複製程式碼

相關文章