React搭建百度前端技术学院习题演示SPA

百度前端技术学院提供了很多前端编程练习题,大概看了一些,觉得对于初学者是有很大帮助的,非初学者也可以学习巩固一下基础。毕竟书上的练习题可能比较乏味。

在离职时间内,时间充裕的时候搭建了该SPA,无聊的时候刷刷题。访问地址:http://ife.giscafer.com

PC端预览

Github源码:https://github.com/giscafer/ife-course-demo

React 与 Redux 实践 —— 城市筛选面板

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。Redux的出现,可以让你构建一致化的应用,运行与不同的环境。

要点

  • 应用中所有的 state 都以一个对象树的形式存储在一个单一的 store 中;
  • 唯一改变 store 的办法是触发 action,一个描述发生什么的对象;
  • 为了描述 action 如何改变 state 树,你需要编写 reducers;
  • 为了UI组件 components 状态无关,你需要编写 containers 来负责管理数据和业务逻辑。

所以,关于组件部分,明智的做法是在最外层上使用 Redux ,然后通过 Props 方式传值给内部子组件,使得components UI组件仅仅是pure render(纯展示)

继续阅读全文 »

1.Two Sum

原题地址:https://leetcode.com/problems/two-sum/

Given an array of integers, return indices of the two numbers such that they add up to a specific target.

You may assume that each input would have exactly one solution.

Example:
Given nums = [2, 7, 11, 15], target = 9,

Because nums[0] + nums[1] = 2 + 7 = 9,
return [0, 1].

方法一

正常两次循环,循环次数可能多,只要数组不是很大,效率还是很高的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* @param {number[]} nums
* @param {number} target
* @return {number[]}
*/
var twoSum = function(nums, target) {
console.time('twoSum')
for(var i=0;i<nums.length;i++){
for (var j = 0; j < nums.length&& i!=j; j++) {
if(nums[j]+nums[i]===target){
console.timeEnd('twoSum')
var result=[i,j].sort();
return result
}
};
}
};

方法二

边循环边使用对象存储

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var twoSum2 = function(nums, target) {
console.time('twoSum2')
var obj={};
for(var i=0;i<nums.length;i++){
if(obj[nums[i+'']]!==null && obj[nums[i+'']]!==undefined){
var result=[obj[nums[i]],i];
console.timeEnd('twoSum2')
return result;
}
obj[target-nums[i]]=i;
}
var result2=[];
return result2;
};

测试结果,建议使用更大的数组测试,才会看到twoSum2方法效率高

1
2
3
4
var nums = [2, 7, 11, 15], target = 9;
// var nums = [11, 15, 9,1,1,3,1,11, 15, 9,1,1,3,1,1,1,1,1,2,7,3], target = 9;
twoSum(nums,target);
twoSum2(nums,target);

经测试,在小数组时,twoSum方法twoSum2快很多,当数组变大时,twoSum2算法更快