綜述：數據結構和算法是高級前端的基礎知識，貴在總結
1.將數據中的數據轉成樹狀結構，實現前綴樹trie,前綴樹trie和tree之間的不同
var transObject = function(tableData,keys){
let hashTable = {}, res = []
for (let i = 0; i < tableData.length; i++) {
let arr = res, cur = hashTable
for (let j = 0; j < keys.length; j++) {
let key = keys[j], filed = tableData[i][key];
if (!cur[filed]) {
let pusher = {value:filed},tmp;
if (j !== (keys.length - 1)){
tmp = [];
pusher.children = tmp
}
cur[filed] ={$$pos: arr.push(pusher) - 1 };
cur = cur[filed];
arr = tmp;
} else {
cur = cur[filed];
arr = arr[cur.$$pos].children
}
}
}
return res
};
var data = [{
"province": "浙江",
"city": "杭州",
"name": "西湖"
}, {
"province": "四川",
"city": "成都",
"name": "錦裏"
}, {
"province": "四川",
"city": "成都",
"name": "方所"
}, {
"province": "四川",
"city": "阿壩",
"name": "九寨溝"
}];
var keys = ['province', 'city', 'name'];
console.log(transObject(data, keys));
2.使用js方法遍歷html結構？收集所有的標籤，使用數組存儲所有的標籤？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="renderer" content="webkit">
<title>基礎信息</title>
<!-- 瀏覽器標籤圖片 -->
<link rel="icon" type="image/x-icon" href="/img/sf.png" media="screen" />
<script src="//cdn.bootcss.com/redux/3.5.2/redux.min.js"></script>
</head>
<body>
<script>
var tags = document.getElementsByTagName('*');
var tagsArr = [];
function countTag(){
for (var i = 0; i < tags.length; i++) {
tagsArr.push((tags[i].tagName).toLowerCase());
}
// 獲取到頁面的所有標籤
console.log(tagsArr);
//定義一個數組用於存放相同的元素
var temp = [];
//定義一個空數組用於存放每一個標籤；
var tag =[];
for (var i = 0; i < tagsArr.length; i++) {
for (var j = i+1; j < tagsArr.length+1; j++) {
if (tagsArr[i] == tagsArr[j]) {
temp.push(tagsArr[j]);
tagsArr.splice(j,1);
j--;
}
if (j == tagsArr.length -i) {
temp.push(tagsArr[i]);
tagsArr.splice(i,1);
i--;
tag.push(temp);
temp = [];
}
}
}
return tag;
}
console.log(countTag());
</script>
</body>
</html>
3.redux的使用，最簡單的demo
function inc() {
return { type: 'INCREMENT' };
}
function dec() {
return { type: 'DECREMENT' };
}
function add10() {
return { type: 'ADD10' };
}
function reducer(state, action) {
// 首次調用本函數時設置初始 state
state = state || { counter: 0 }; //這裏是存儲的數據值
switch (action.type) {
case 'INCREMENT':
return { counter: state.counter + 1 };
case 'DECREMENT':
return { counter: state.counter - 1 };
case 'ADD10':
return { counter: state.counter+10};
default:
return state; // 無論如何都返回一個 state
}
}
var store = Redux.createStore(reducer);
console.log( store.getState() ); // { counter: 0 }
store.dispatch(inc());
console.log( store.getState() ); // { counter: 1 }
store.dispatch(inc());
console.log( store.getState() ); // { counter: 2 }
store.dispatch(dec());
console.log( store.getState() ); // { counter: 1 }
store.dispatch(add10());
console.log( store.getState() ); // { counter: 1 }
4.斐波那契數列，0,1,2,3,5,8......後一個數字是前兩個數字之和？
5.爬梯子問題，1,2,3,5,8,9。。。。和第4題十分的相似,分別的代碼如下
//斐波那契數列
var feibo=function(n){
if(n===0||n===1){
return n;
}else if(n>1){
// return feibo(n-2)+feibo(n-1);
return arguments.callee(n-2)+arguments.callee(n-1);
}
}
console.log(feibo(12)); //144
// 爬梯子問題
var climbStairs = function(n) {
if(n===1||n===2||n===3){
return n;
}else if(n>3){
return climbStairs(n-2)+climbStairs(n-1);
return arguments.callee(n-2)+arguments.callee(n-1);
}
};
console.log(climbStairs(45));
6.