JavaScript第二周知识点总结

对象：

属性：变量
方法：函数
直接量：
	{
		name : "张三",
		study : function() {
			console.log("学习...");
		}
	}

内置对象：

由 ECMAScript 实现提供的、独立于宿主环境的所有对象

Array（数组）：
作用：
用于在单个的变量中存储多个值
概念：
元素：数组中的数据存储空间
下标（索引）：元素的编号，下标编号从0开始，到 (长度-1) 结束
长度：数组中保存的元素个数，length
使用：
创建对象：
a. var arr = []; // 空数组，没有元素，长度为0
b. var arr = [val1, val2, val3, …]; // 创建数组的同时实现元素初始化
c. var arr = new Array(); // 等价于 []
d. var arr = new Array(val1, val2, val3, …); // [val1, val2, val3, …]
e. var arr = new Array(size); // size是一个数字参数，表示数组初始长度
数组元素访问：使用下标 ---- 数组名[下标]
数组元素的迭代（遍历）----穷举法：使用 数组名.length 求数组的长度。

// 普通循环
			for (var i = 0; i < array.length; i++) {
				array[i]
			}

// for-in
			for (var i in array) { // 遍历数组，i表示的是数组元素的字符串下标
				array[i] // 通过使用字符串下标来访问元素
			}

			for (var attrName in obj) {	// 遍历对象，attrName 表示的是对象的属性名字符串
				obj[attrName]; // 通过使用 对象名[字符串索引] 的方式来访问对象属性值
			}

API
属性：length – 长度
方法：
添加：

- push(val1, val2, val3, ....) -- 向数组末尾添加元素，返回添加元素后的新数组长度
			
- unshift(val1, val2, val3, ....) -- 向数组开头插入元素，返回添加元素后的新数组长度
- splice(index, 0, val1, val2, val3, ....) -- 从指定的index处删除0个元素后，将val1, val2, val3, ....插入到删除的位置

删除：

- pop() -- 从末尾删除一个元素，返回的是删除掉的元素值
- shift() -- 从开头删除一个元素，返回的是删除掉的元素值
- splice(index, howmany) -- 从指定的index处删除howmany个元素，返回的是一个数组，数组中包含删除的元素

排序：

- reverse() -- 反转，逆序
- sort(sortby) -- 排序，默认按照数组中每个元素的字符串unicode编码顺序排序（字典顺序），如果需要按照指定方式排序，则需要提供一个排序函数sortby参数

<script>
		var scores = [93, 87, 96, 92, 99, 100, 88, 76, 80, 67, 59, 32, 9];		
		// 升序：a<b返回小于0的值、a==b返回0、a>b返回大于0的值
		// 降序：a>b返回小于0的值、a==b返回0、a<b返回大于0的值
		var sortby = function(a, b) {
			/*if (a < b)
				return -1;
			if (a === b)
				return 0;
			if (a > b)
				return 1;*/
//			return a - b;
			 return b - a;
		};

		scores.sort(sortby);

		console.log(scores);
	</script>

截取：

 - slice(start, end) -- 从 start 开始截取到 end 结束，包括开始索引处元素，不包括结束索引处的元素，返回截取后的数组，原数组本身不受影响

连接：

- concat() -- 连接数组，返回连接后的新数组，原数组本身不受影响
- join(sep) -- 连接数组中的每个元素，默认以,(逗号)分隔，返回连接后的字符串
转换为字符串：
- toString() -- 默认与未传递参数的 join() 方法一致
举例如下：	

<script>
		var array = [1,2,3,4,5,6];
		console.log(array)
		console.log("数组长度：" + array.length);
		// 添加
		var ret = array.push(99, 88, 77);
		console.log("push返回值：" + ret)
		console.log("数组长度：" + array.length);
		console.log(array)

		array.unshift(-1, -2, -3)
		console.log(array)

		// 删除
		ret = array.pop();
		console.log("删除的：" + ret)
		console.log(array);

		array.shift();
		console.log(array)

		ret = array.splice(1, 0, 55, 44, 33, 22, 11);
		console.log(ret)
		console.log(array)

		// 排序
		array.reverse();
		console.log(array)
		array.sort();
		console.log(array);

		console.log(array.join("-"))
	</script>

排序算法：
1.冒泡排序
二重循环，外层循环控制比较的轮数，内层循环控制每轮比较的次数。

外层循环N-1  （N = array.length）
内层循环N-1-i （i表示外层循环变量）

如：

<script>
		var array = [33, 22, 11, 9, 8, 5, 4, 333, 555, 777, 111, 444, 666, 222];

		console.log(array.join("; "))

		for(var j = 0, len = array.length; j < len - 1; j++) {			
			for (var i = 0; i < len - 1 - j; i++) {
				if (array[i] > array[i+1]) { // 交换位置
					var tmp = array[i];
					array[i] = array[i+1];
					array[i+1] = tmp;
				}
			}
			console.log(array.join(", "))
		}
	</script>

2.选择排序
3.插入排序
4.快速排序
5.希尔排序
####断点调试(逻辑出错----开发工具下切换到 sources)：
a. 定位大概可能出错的位置，设置断点
b. 启动调试，单步执行(F10)
c. 在单步执行的过程中，观察变量的变化，判断变量变化与预期结果是否一致，如果一致，则继续向后执行，如果与预期结果不一致，则说明可能是错误点，分析解决错误
d. 停止调试，修改代码

####数据类型：
基本(原始)类型
引用类型

内存：

在栈内存中主要存储的是基本类型的值，引用类型的"引用"
在堆内存中主要存储的是创建的对象

var arr = [1,2,3],
array = [1,2,3];
arr == array // false

var stu = {name:“张三”},
stu2 = {name:“张三”};
stu === stu2 // false

Array ES5中新增API：

遍历迭代：

      - array.forEach(callback); 遍历迭代数组中的每个元素，在迭代到每个元素时，都去调用 callback 函数执行。
	callback 是一个函数，该函数结构：
	- function(currentValue, index, array) {}
	 currentValue 是当前遍历到的元素值
	 index 是当前遍历到元素在数组中的下标
	array 是调用 forEach() 方法的数组对象
- array.map(callback);返回一个新数组，该新数组中的元素值是 callback 函数的返回值。
- array.some(callback)测试数组中是否有某元素通过 callback 函数测试。如果 callback 函数返回值为 true 则表示通过测试
- array.every(callback);测试数组中是否每个元素都通过 callback 函数测试。
- array.filter(callback);返回一个新数组，该新数组中的元素是通过 callback 测试的元素

查找：

	- array.indexOf(search[, fromIndex = 0])
		查找 search 值在数组 array 中第一次出现的下标，如果存在则返回大于等于0的值，如果不存在，则固定返回 -1。也可以指明从指定的索引 fromIndex 处开始查找，如果未指定 fromIndex 则默认从下标0位置开始查找。
	- lastIndexOf()

归并：

- array.reduce(callback[, initValue]);
- 累加、累乘，callback 是遍历迭代数组元素实现累加操作时调用的函数，该函数有四个参数：sum、currentValue、index、array
	- reduceRight()

String 对象：

作用：用于处理文本，使用 “” 或 ‘’ 来表示字符串
创建：
var str = “abc”; // typeof “string”
var str = new String(“abc”); // typeof “object”
API：
属性：length - 长度
方法：

		str.charAt(index) -- 在字符串中查找index索引处的字符
		str.charCodeAt(index) -- 查找 index 索引处字符的 unicode 编码
		String.fromCharCode(code) -- 将unicode编码转换为字符串
		str.concat() -- 字符串连接
		str.indexOf(subStr) -- 查找子字符串第一次出现的位置
		str.lastIndexOf() -- 最后一次出现的位置
		str.match() -- 与正则表达式相关
		str.search() -- 与正则表达式相关
		str.replace() -- 与正则表达式相关，替换
		str.split() -- 与正则表达式相关，分割，返回数组
		str.slice(start, end) -- 截取子字符串，包括开始索引处的字符，不包括结束索引处字符。end 不传递时表示截取到字符串末尾。start、end都可以取负值，表示从后向前计数
		str.substring(start, end) -- 截取子字符串
		str.toLowerCase() -- 转换为小写
		str.toUpperCase() -- 转换为大写
		str.trim() -- ES5中新增，去掉字符串前后空白

URL:
协议://域名:端口/路径名称?查询字符串#hash

Date 对象：
作用：用于处理日期和时间。
创建：
var date = new Date(); // 返回当前系统时间所表示的日期时间对象
var date = new Date(milliseconds); // 返回是日期时间是相对 1970-1-1 0:0:0 (UTC时间)以来的毫秒计算时间值
var date = new Date(“yyyy-MM-ddTHH:mm:ss”); // 返回字符串表示的日期时间对象
var date = new Date(year, month, date, hour, minute, second, millisecond); // 单独传递年月日时分秒毫秒值，month取值是 0_11，表示112月
API：
方法：

	获取：
			getFullYear() -- 完整的4位年份
			getMonth() -- 月份，返回的是 0~11
			getDate() -- 日期
			getDay() -- 星期，返回的是 0~6
			getHours() -- 小时
			getMinutes() -- 分钟
			getSeconds() -- 秒
			getMilliseconds() -- 毫秒
	设置：
			setFullYear() -- 完整的4位年份   
			setMonth() -- 月份，返回的是 0~11
			setDate() -- 日期
			setHours() -- 小时
			setMinutes() -- 分钟
			setSeconds() -- 秒
			setMilliseconds() -- 毫秒  毫秒(距1970-1-1 0:0:0)：
			getTime() -- 返回距1970-1-1 0:0:0以来的毫秒值
			setTime() -- 根据距1970-1-1 0:0:0以来的毫秒值设置日期时间对象
			Date.now()  -- (ES5)返回距1970-1-1 0:0:0以来的毫秒值
			Date.parse(dateStr) -- 将日期时间字符串解析转换为表示时间的毫秒值

	转换：
			toString()
			toUTCString()
			toLocaleString()
			toDateString()
			toTimeString()

JavaScript = ECMAScript + BOM + DOM

BOM

Browser Object Model
浏览器对象模型
作用：能够在 JS 中与浏览器实现“对话”
没有标准化

Window 对象：

JS中可以使用 window 来引用 Window 对象，Window对象表示的是浏览器中打开的窗口，相当于是浏览器中的最顶层对象。
Window 对象拥有全局作用域，我们定义的全局变量、函数都相当于是 Window 对象的属性。
Window对象的属性调用时，可以省略 “window.” 的书写

Location 对象：

	代表 URL
	window.location 或 location 来引用
	协议://域名:端口/路径名称?查询字符串#hash
	属性：
	hash 设置或返回从井号 (#) 开始的 URL（锚）。 
	host 设置或返回主机名和当前 URL 的端口号。 
	hostname 设置或返回当前 URL 的主机名。 
	href 设置或返回完整的 URL。 
	pathname 设置或返回当前 URL 的路径部分。 
	port 设置或返回当前 URL 的端口号。 
	默认端口：HTTPS--443   HTTP--80
	protocol 设置或返回当前 URL 的协议。 
	search 设置或返回从问号 (?) 开始的 URL（查询部分）。 
方法：
	reload() 重新加载

History 对象：
		代表访问历史记录
		window.history 或 history 来引用
方法：
		back() -- 后退，一个记录
		forward() -- 前进，一个记录
		go(num) -- 前进(+)/后退(-)

Navigator 对象：

		代表浏览器本身相关信息
		window.navigator 或 navigator 引用
		属性：
			userAgent

	Document 对象：
		代表浏览器中打开的文档

	其它属性：
		innerWidth
		innerHeight			

	方法：
		alert()
		prompt()
		confirm()

		open()
		close()
计时器：
		setInterval(fn, time) -- 周期性执行，每隔 time 时长执行一次 fn 函数
		setTimeout(fn, time) -- 一次性执行，指定 time 时长后执行一次 fn 函数
		clearInterval(id) -- id 是 setInterval() 启动的计时器返回值
		clearTimeout(id) -- id 是 setTimeout() 启动的计时器返回值
		通过递归，也可以使用 setTimeout() 达到 setInterval() 周期性计时的效果

JavaScript 是单线程的应用程序。EventLoop 机制
异步任务、异步机制
回调函数

DOM：

Document Object Model
文档对象模型:使用 JavaScript 能够去操作页面文档中的各元素的添加、修改、删除、克隆、查找等，或操作CSS

	JavaScript 能够改变页面中的所有 HTML 元素 
	JavaScript 能够改变页面中的所有 HTML 属性 
	JavaScript 能够改变页面中的所有 CSS 样式 
	JavaScript 能够对页面中的所有事件做出反应 


Document对象：
	window.document 或 document 来引用 

查找元素节点：

	document.getElementById() -- 根据元素的 id 属性查找
		如果能够查找到，则返回查找到的DOM元素对象，如果不能查找到，则返回 null
	document.getElementsByTagName() -- 根据元素的标签名查找
		返回 HTMLCollection 集合，如果根据标签能够查找到元素，则将所有查找到的元素保存到集合中，如果不能查找到，则集合长度为0
	document.getElementsByClassName() -- (ES5)根据类名查找元素
		返回 HTMLCollection 集合，如果根据类名能够查找到元素，则将所有查找到的元素保存到集合中，如果不能查找到，则集合长度为0
	document.getElementsByName() -- 根据元素的 name 属性值查找

解决根据类名查找元素兼容问题：

function byClassName(className, context) {
		// 默认在 document 文档中查找
		context = context || document;

		/* 支持使用 getElementsByClassName 方法，则直接使用 */
		if (context.getElementsByClassName)
			return context.getElementsByClassName(className);

		/* 不支持使用 getElementsByClassName 方法 */
		// 保存所有查找到元素的数组
		var _result = []; 
		// 将查询上下文后代中所有元素查找出来
		var _tags = context.getElementsByTagName("*");
		// 遍历迭代所有元素
		for (var i = 0, len = _tags.length; i < len; i++) {
			// 获取当前遍历到元素的所有类名
			var _classNames = _tags[i].className.split(" ");
			// 遍历所有类名
			for (var j = 0, l = _classNames.length; j < l; j++) {
				if (_classNames[j] === className) { // 当前元素的某个类名与待查找的类名一致
					// 说明当前遍历到的元素是需要查找的元素之一
					_result.push(_tags[i]);
					break;
				}
			}
		}
		// 返回所有查找到的结果
		return _result;
	}

添加：

创建元素节点：

	var element = document.createElement(tagName)

设置属性：

	element.setAttribute(attrName, attrValue)
	或
	element.<attrName> = attrValue

添加到父元素内部：

	parentElement.appendChild(element);
	如果 element 是页面中已存在的DOM元素，则该方法为移动元素

添加到父元素内部某子节点

	parentElement.insertBefore(newNode, oldNode);
	如果 oldNode 不存在，则将 newNode 追加到末尾

元素内部文本：

	element.innerHTML
		-- 内部HTML文本
	element.innerText
		-- 内部纯文本

创建文本节点：

var txtNode = document.createTextNode(text)

可以将文本节点添加到元素内部：element.appendChild(txtNode);

删除：

parentElement.removeChild(childNode)
	父元素内部删除孩子节点

克隆：

var copy = node.cloneNode(boolean)
boolean 表示是否克隆元素后代，默认为 false（不克隆），如果需要克隆节点后代，则传递 true

查找(层级–属性)：

node.parentNode -- 查找父节点
node.childNodes -- 所有孩子节点
node.children -- 所有孩子元素节点
node.firstChild -- 第一个孩子
node.lastChild -- 最后一个孩子
node.previousSibling -- 前一个兄弟节点
node.nextSibling -- 后一个兄弟节点

标题CSSOM

CSS-Object Model

标题获取：

	行内（内联）
		element.style
	所有
		window.getComputedStyle(element) -- 经过计算后的样式
		-- IE9之前浏览器不支持：element.currentStyle

标题设置：

	element.style.<attrName> = attrValue;