JavaScript 基础 Part 4
来源:互联网 发布:时间序列数据聚类分析 编辑:程序博客网 时间:2024/05/27 14:12
小练习
- 将一个日期字符串如 '2014-12-12' 转化为中文 '二零一四年一二月一二日'。
function date2CN(str) { var date = new Date(str); if (date.toString() === 'Invalid Date') return 'Not a Date'; return str2CN(date.getFullYear()) + '年' + (str2CN(date.getMonth() + 1)) + '月' + str2CN(date.getDate()) + '日'; function str2CN(str) { var len, i, res = ''; str = str.toString(); len = str.length; for (i = 0; i < len; i++) { res += char2CN(str.charAt(i)); } return res; } function char2CN(num) { switch (num) { case '0': return '零'; case '1': return '一'; case '2': return '二'; case '3': return '三'; case '4': return '四'; case '5': return '五'; case '6': return '六'; case '7': return '七'; case '8': return '八'; case '9': return '九'; } }}
- 分数分布统计需求,即给予一个数组(数组可能非常大),数据是学生们的分数,从0到10,要求输出各个分数的学生有多少名。
var data = [4, 5, 6, 4, 9, 1, 5, 6, 8, 8, 8, 7, 9, 10, 6, 7, 6, 7, 7, 8, 8, 8, 9, 5, 8, 9, 6, 5, 10];function statistics(arr) { var res = [], len = arr.length, item; while (len--) { item = arr[len]; res[item] = res[item] ? ++res[item] : 1; } len = arr.length; while (len--) { if (!res[len]) continue; console.log('%d分的有%d人', len, res[len]); }}
数学函数
Math
对象包含了很多和数学相关的属性和方法,如 Math.PI
, Math.E
等。这一部分将介绍一些常用的数学函数。
random
Math.random();
该函数返回一个 0 - 1 之间的随机数,包括0,不包括1。
console.log(Math.random()); // a float number in [0, 1)
ceil
Math.ceil(number);
该函数将一个数字向上取整。
console.log(Math.ceil(0.9)); // 1console.log(Math.ceil(0.1)); // 1console.log(Math.ceil(1)); // 1console.log(Math.ceil(-1.9)); // -1
floor
Math.ceil(number);
该函数将一个数字向下取整。
console.log(Math.floor(0.9)); // 0console.log(Math.floor(0.1)); // 0console.log(Math.floor(1)); // 1console.log(Math.floor(-1.9)); // -2
round
Math.round(number);
该函数将一个数字四舍五入取整。
console.log(Math.round(0.9)); // 1console.log(Math.round(0.1)); // 0console.log(Math.round(1)); // 1console.log(Math.round(-1.9)); // -2
max
Math.max([value1[,value2, ...]])
返回参数中的最大者。
console.log(Math.max(1, 2, 3, -1)); // 3
之前我们有写过求数组中最大值的函数,那么我们也可以这样:
function getMaxOfArray(arr) { return Math.max.apply(null, arr);}
min
Math.min([value1[,value2, ...]])
返回参数中的最小者。
console.log(Math.min(1, 2, 3, -1)); // -1
小练习
- 封装函数,参数为两个数组,返回一个处于这两个数字之间的随机数,[num1, num2)。
function random(num1, num2) { return num1 + Math.floor(Math.random() * (num2 - num1));}
JSON
JSON 即 JavaScript 对象表示法(JavaScript Object Notation),是一种简洁的储存数据的格式。由于它的结构很像 JS 的对象,所以很适合 JS 来使用。类似的还有 yaml 和 xml 等等。关于 JSON 的历史等详细介绍可看这篇wiki。
从 ECMAScript 5 开始,支持原生的 JSON 对象了,下面是两个主要的操作方法。IE 8+支持。
JSON.parse
JSON.parse(text[, reviver]);
该方法将一个 JSON 格式字符串转换为 JS 对象。第二个参数可以在对象返回前进行一些操作,详情见这篇文档。
JSON.parse('{}'); // {}JSON.parse('true'); // trueJSON.parse('"foo"'); // "foo"JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]JSON.parse('null'); // nullJSON.parse('{"1": 1, "2": 2}') //Object {1: 1, 2: 2}JSON.parse('{"p": 5}', function (k, v) { if(k === "") return v; return v * 2;}); // { p : 10 }
JSON.stringify
JSON.stringify(value[, replacer [, space]]);
该方法将一个 JS 对象转换为 JSON 字符串。参数的详细解释见这篇文档。
JSON.stringify({}); // '{}'JSON.stringify(true); // 'true'JSON.stringify("foo"); // '"foo"'JSON.stringify([1, "false", false]); // '[1,"false",false]'JSON.stringify({ x: 5 }); // '{"x":5}'
初识 setTimeout 和 setInterval
下面介绍常用的计时器的设置和清除方法。
setTimeout
var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);var timeoutID = window.setTimeout(code, delay);
setTimeout
方法用于设置一个计时器,在计时器生效时执行某段代码或者函数。方法返回值是计时器的唯一标识,用于清除该计时器。setTimeout
方法属于全局对象window
,所以也可以直接使用。
setTimeout(function () { console.log('Bazinga');}, 1000);
clearTimeout
window.clearTimeout(timeoutID);
clearTimeout
用于清除 setTimeout
设置的计时器。
var timer = setTimeout(function () { console.log('Bazinga');}, 1000);clearTimeout(timer);
setInterval
var intervalID = window.setInterval(func, delay[, param1, param2, ...]);var intervalID = window.setInterval(code, delay);
该方法与 setTimeout
的区别在于该方法设置的计时器会循环执行,即每隔固定时间执行一次,而不是在执行一次之后就消亡。
setInterval(function () { console.log('Bazinga');}, 1000);
clearInterval
window.clearInterval(intervalID);
该方法用于清除 setInterval
设置的计时器。
var timer = setInterval(function () { console.log('Bazinga');}, 1000);clearInterval(timer);
进阶
关于计时器还有些进阶的特性,比如函数中 this
的值、计时器的异步性等,这里我们不做过多的讨论,之后的进阶班上我们再详细讨论。这里只是给大家看两个例子:
console.log(1);setTimeout(function () { console.log(2);}, 0);console.log(3);
for (var i = 0; i < 10; i++) { setTimeout(function () { console.log(i); }, 0);}
小练习
- 做一个计时器,每秒输出当前时间
DOM 基础 Part 1
什么是 DOM
DOM 即 Document Object Model,大体上可以分为核心 DOM、XML DOM 和 HTML DOM。它定义了文档中的各种不同对象,以及这些对象的属性、方法、事件等内容。浏览器通过实现 DOM 规范,从而暴露给 JS 一个操作 DOM 节点的接口。详情可见官方文档。
JS 通过 DOM 能做什么
- 能够改变页面中的所有 HTML 元素
- 能够改变页面中的所有 HTML 属性
- 能够改变页面中的所有 CSS 样式
- 能够对页面中的所有事件做出反应
DOM 树
HTML 文档在浏览器中会被解析为 DOM 树,其中每个节点即 DOM 节点,就是我们用 JS 直接操作的对象。
对于如下的 HTML 结构:
<html> <head> <title>My title</title> </head> <body> <a href="">My link</a> <h1>My header</h1> </body></html>
它解析后的 DOM 树为:
其中节点的关系为:
- JavaScript 基础 Part 4
- JavaScript 基础 Part 2
- JavaScript 基础 Part 3
- “JavaScript Promises和AngularJS $q Service”Part 1 (基础篇)
- “JavaScript Promises和AngularJS $q Service”Part 1 (基础篇)
- [领域]javascript hacking guide part 4
- [领域]javascript hacking guide part 4
- [领域]javascript hacking guide part 4
- [领域]javascript hacking guide part 4
- [领域]javascript hacking guide part 4
- [领域]javascript hacking guide part 4
- [领域]javascript hacking guide part 4
- [领域]javascript hacking guide part 4
- [领域]javascript hacking guide part 4
- [领域]javascript hacking guide part 4
- [领域]javascript hacking guide part 4
- [领域]javascript hacking guide part 4
- [领域]javascript hacking guide part 4
- java 多线程 run() start()的区别
- Emacs入门
- [授权发表]进程和进程的基本操作
- spring事务声明的几种传播特性
- Ubuntu使用(一):下载工具篇
- JavaScript 基础 Part 4
- Spirng 学习心得
- Cocos2d-3.x_基本数据类型(cocos2d::Map)
- [授权发表]为可执行文件“减肥”
- Phalcon笔记学习笔记
- [授权发表]代码测试、调试与优化小结
- 浅谈驱动中强制结束进程的3种方法
- 【数学题-递推找规律】BNU 4225 杨辉三角形
- strrchr【该怎么用char 。T_T】