1、获取一个给定字符串中出现次数最多的字符及其出现次数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS实现找到某字符串中出现次数最多的字符，并统计次数</title>
</head>
<body>
<script type="text/javascript">
var str = "Hello World! I am SunnyWangwei.....lalalala";
//定义JSON格式的变量，备后用
var json = {};
//以下代码遍历str,将其中的字符和该字符出现的次数存放在json中
for(var i=0; i<str.length; i++) {
//判断json中是否存在当前str.charAt(i)的值
//charAt()返回指定位置的字符
if(!json[str.charAt(i)]) {
//如果不存在，则将其存放在json中，并且赋值为1，相当于出现的次数为1
json[str.charAt(i)] = 1;
}else {
//如果存在，则这个字符的值加1，相当于次数加1
json[str.charAt(i)]++;
}
}
//定义变量char存储出现次数最多的字符，number为该字符出现的次数
var charStr = '';
var num = 0;
// 遍历json,找到值最大的字符，值相当于次数
for(var key in json) {
//判断当前json中的键值（相当于当前键所在字符的次数）是否大于num
if(json[key] > num) {
//如果大于num,就将键（字符）存放在charStr中，键值存放在num中
charStr = key;
num = json[key];
}
}
//打印结果
// console.log(charStr);
// console.log(num);
document.write("字符串str中出现次数最多的字符为： "+ charStr + "<br>");
document.write("出现次数为： "+ num + "<br>");
</script>
</body>
</html>
2、数组去重
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>去除一个数组中重复的元素</title>
</head>
<body>
<script type="text/javascript">
/*
* 方法一：
*/
var arr = [1, 0, 2, 1, 8, 1, 0, 10, 8];
var obj = {};
var temp = [];
for(var i=0; i<arr.length; i++) {
if(!obj[arr[i]]) {
obj[arr[i]] = 1;
temp.push(arr[i]);
}
}
console.log(temp); //1,0,2,8,10
/*
* 方法二：
*/
var arr2= [1, 0, 2, 1, 8, 1, 0, 10, 8, 9, 11];
var arr3 = [];
for(var i=0; i<arr2.length; i++) {
//indexOf()方法从数组的开头（位 置 0）开始向后查找,返回索引号
if((arr3.indexOf(arr2[i])) < 0) {
arr3.push(arr2[i]);
}
}
console.log(arr3);//1,0,2,8,10,9,11
/*
* 方法三：
*/
//filter()：对数组中的每一项运行给定函数，返回该函数会返回 true的项组成的数组。
var arr4 = [0, 10, 22, 0, 10, 1, 2, 3, 1];
var arr5 = arr4.filter(function(element, index, arr4) {
return arr4.indexOf(element) == index;
});
console.log(arr5); //0,10,22,1,2,3
</script>
</body>
</html>
3、阶乘函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
* 在这个重写后的 factorial()函数的函数体内，没有再引用函数名 factorial。
* 这样，无论引用 函数时使用的是什么名字，都可以保证正常完成递归调用。
*/
function factorial(num) {
if(num <= 1) {
return 1;
}else {
return num * arguments.callee(num - 1);
}
}
var newName = factorial;
var result1 = newName(9);
document.write(result1); //362880
document.write("<br>");
factorial=function(num) {
return 0;
}
var result2 = factorial(9);
document.write(result2); //0
document.write("<br>");
var result3 = newName(9);
document.write(result3); //362880
</script>
</body>
</html>
4、生成五个不同的随机数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生成5个不同的随机数</title>
</head>
<body>
<script type="text/javascript">
//思路：5 个不同的数，每生成一次就和前面的所有数字相比较，
//如果有相同的，则放弃当前生成的数字,重新生成一个数
var num = [];
for(var i=0; i<5; i++) {
num[i] = Math.floor(Math.random()*(30-15+1) + 15); //此处生成[15,30]的随机数
// console.log(num[i]);
for(var j=0; j<i; j++) {
if(num[i] == num[j]) {
i--;
}
}
console.log(num);//此处可看见整个数组的生成过程
}
console.log(num);
</script>
</body>
</html>
5、将12345678转化成RMB形式12,345,678
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var num = 12345678;
//转化为字符串
num = num.toString();
// console.log(num); //"12345678"
//封装字符串反转方法
function rever(str) {
//先分割为数组再反转再合并为字符串
return str = str.split("").reverse().join("");
}
num = rever(num);
// console.log(num); //87654321
var result = ""; //定义一个空字符串，接收最终结果
for(var i=1; i<=num.length; i++) {
result += num[i-1]; //把字符串的每一项重新放到一个新的字符串里
if(i%3 == 0 && i!=num.length) { //字符串的索引是3 的倍数并且不是最后一项的时候添加
result += ",";
}
}
// console.log(result); //876, 543, 21
//最后调用上面定义的rever()方法反转回来
result = rever(result);
console.log(result); //12,345,678
</script>
</body>
</html>
6、LazyMan问题
实现一个LazyMan，可以按照以下方式调用:
LazyMan(“Hank”)输出:
Hi! This is Hank!
LazyMan(“Hank”).sleep(10).eat(“dinner”)输出
Hi! This is Hank!
//等待10秒..
Wake up after 10
Eat dinner~
LazyMan(“Hank”).eat(“dinner”).eat(“supper”)输出
Hi This is Hank!
Eat dinner~
Eat supper~
LazyMan(“Hank”).sleepFirst(5).eat(“supper”)输出
//等待5秒
Wake up after 5
Hi This is Hank!
Eat supper
以此类推。
这是典型的JavaScript流程控制，问题的关键是如何实现任务的顺序执行。在Express有一个类似的东西叫中间件，这个中间件和我们这里的吃饭、睡觉等任务很类似，每一个中间件执行完成后会调用next()函数，这个函数用来调用下一个中间件。
对于这个问题，我们也可以利用相似的思路来解决，首先创建一个任务队列，然后利用next()函数来控制任务的顺序执行：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
* 实现一个LazyMan，可以按照以下方式调用:
LazyMan(“Hank”)输出:
Hi! This is Hank!
LazyMan(“Hank”).sleep(10).eat(“dinner”)输出
Hi! This is Hank!
//等待10秒..
Wake up after 10
Eat dinner~
LazyMan(“Hank”).eat(“dinner”).eat(“supper”)输出
Hi This is Hank!
Eat dinner~
Eat supper~
LazyMan(“Hank”).sleepFirst(5).eat(“supper”)输出
//等待5秒
Wake up after 5
Hi This is Hank!
Eat supper
以此类推。
*/
function _LazyMan(name) {
this.tasks = [];
var self = this;
var fn =(function(n){
var name = n;
return function(){
console.log("Hi! This is " + name + "!");
self.next();
}
})(name);
this.tasks.push(fn);
setTimeout(function(){
self.next();
}, 0); // 在下一个事件循环启动任务
}
/* 事件调度函数 */
_LazyMan.prototype.next = function() {
var fn = this.tasks.shift();
fn && fn();
}
_LazyMan.prototype.eat = function(name) {
var self = this;
var fn =(function(name){
return function(){
console.log("Eat " + name + "~");
self.next()
}
})(name);
this.tasks.push(fn);
return this; // 实现链式调用
}
_LazyMan.prototype.sleep = function(time) {
var self = this;
var fn = (function(time){
return function() {
setTimeout(function(){
console.log("Wake up after " + time + "s!");
self.next();
}, time * 1000);
}
})(time);
this.tasks.push(fn);
return this;
}
_LazyMan.prototype.sleepFirst = function(time) {
var self = this;
var fn = (function(time) {
return function() {
setTimeout(function() {
console.log("Wake up after " + time + "s!");
self.next();
}, time * 1000);
}
})(time);
this.tasks.unshift(fn);
return this;
}
/* 封装 */
function LazyMan(name){
return new _LazyMan(name);
}
// LazyMan("Hank").sleep(10).eat("dinner");
LazyMan("Hank").sleepFirst(5).eat("dinner");
</script>
</body>
</html>
7、编写一个函数fn(Number n)，将数字转为大写输出，如输入123，输出一百二十三
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function fn(n){
if(!/^([1-9]\d*)/.test(n)){
return '非法数据';
}
var unit = '千百十亿千百十万千百十个';
if(n.length > unit.length){
return '数据过长';
}
var newStr = '';
var nlength = n.length;
unit = unit.substr(unit.length - nlength);
for(var i = 0; i < nlength; i++){
newStr += '零一二三四五六七八九'.charAt(n[i]) + unit.charAt(i);
}
newStr = newStr.substr(0,newStr.length-1);
newStr = newStr.replace(/零(千|百|十)/g,'零').replace(/(零)+/g,'零').replace(/零(亿|万)/g,'$1');
return newStr;
}
console.log(fn('20540200213'));//二百零五亿四千零二十万零二百一十三
</script>
</body>
</html>
8、获取URL参数
有这样一个 URL： http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，
请写一段 JS 程序提取 URL 中的各个 GET 参数(参数名和参数个数不确定)，
将其 按 key-value 形式返回到一个 json 结构中，
如{a:’ 1′, b:’ 2′, c:” , d:’ xxx’, e:undefined}。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
有这样一个 URL： http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，
请写一段 JS 程序提取 URL 中的各个 GET 参数(参数名和参数个数不确定)，
将其 按 key-value 形式返回到一个 json 结构中，
如{a:’ 1′, b:’ 2′, c:” , d:’ xxx’, e:undefined}。
-->
<script type="text/javascript">
var url = 'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e';
function getUrl() {
var res = {}; //存储最终分隔的结果
//分隔问号获得参数
var para = url.split('?')[1];
//console.log(para); //a=1&b=2&c=&d=xxx&e
//分隔&符号
var group = para.split('&');
console.log(group); //a=1,b=2,c=,d=xxx,e
//对于后面没有‘=’的项值定义为undefined
for(var i=0; i<group.length; i++) {
var start = group[i].indexOf('=');
if(start != -1) {
var name = group[i].slice(0, start);
var value = group[i].slice(start+1, group[i].length);
res[name] = value;
}else {
res[group[i]] = undefined;
}
}
//打印结果
for(var key in res) {
document.write(key + ":" + " " + res[key]);
document.write("<br>");
}
}
//函数调用
getUrl(url);
</script>
</body>
</html>
未完待续中……………