wangchloe / chloe-test Goto Github PK

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

1. js六大数据类型

这里的数据类型是按照typeof返回来分类，也不是很懂有些教程写数据类型还有null，求解答数据类型应该是哪几类？

基本数据类型

• number 数字

• string 字符串

• boolean 布尔

• undefined 未定义

• function 函数

• null 空对象

复杂数据类型

• object 对象(可拆分为多种数据类型)

2. 数据类型补充

• null空对象 -> 数据类型(object)
• NaN 非数字 -> 数据类型(number)

NaN和任何数据类型都不相等，包括自己

3. 数字相关判断方法

• 是否是数字

isNaN() 非数字->true 数字->false

• 是否是整数

if(num == parseInt(num))

4. 变量

1. 全局变量

2. 局部变量

3. 闭包

  子函数可以使用父函数的全局变量

变量的遮蔽
全局变量和局部变量同名
就近原则->在函数里优先使用自己的变量

5. 运算符

1. 算术运算符

2. 比较运算符

	== -> !=	=== -> !==

3. 赋值运算符

4. 逻辑运算符

6. 常见变量命名前缀

7. 字符串转化为数字

parseInt()

• 从左往右开始找，找到第一个非数字(包含小数点)就停止，如果第一个数不是数字，则返回NaN
• eg: '12.5' -> 12 '12abc' -> 12 'abc' -> NaN

parseFloat()

• 从左往右开始找，找到第一个非数字(不包含小数点)就停止，如果第一个数不是数字，则返回NaN
• eg: '12.5' -> 12.5 '12abc' -> 12 'abc' -> NaN

Number()

• 既能处理整数，也能处理小数，但只能处理数字
• eg: '12.5' -> 12.5 '12' -> 12 '12abc' -> NaN 'abc' -> NaN

8. 数字转化为字符串

number + ''

eg：12 + '' -> '12'

9. if语句变形

1. 条件 && 语句; (条件为真时执行)
2. 条件 || 语句; (条件为假时执行)
3. 三目运算 条件? 语句1: 语句2;

10. js及事件的概念

• js：修改样式
• 事件：用户的操作

任何标签都可以添加事件，任何属性都可以修改

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

1. js操作元素属性

• . 属性操作符(不可以接收变量)
• [] 中括号可以操作属性也可以接收变量

<script>
	function setValue() {
		//省略获取元素oBtn, oBtn2的伪代码
		oBtn.value = 'bbb';
		oBtn2['value'] = 'bbb';

	}
</script>

凡是**.** 出现的地方都可以用中括号替代

2. js设置复杂样式

非首单词的首字母大写并去掉-符

<style>
	.complex {
		margin-left: 10px;
	}
</style>

<script>
	function setStyle() {
		var oC = document.getElementsByClassName('complex')[0];
		oC.style.marginLeft = '10px';
	}
</script>

3. 物体从中心放大

• margin-top: -变化的高度/2
• margin-left: -变化的宽度/2

4. a链接防止刷新

<a href="#">点击会刷新页面</a>

<a href="javascript:;">点击不会刷新页面！(推荐使用)</a>
<!-- javascript:;相当于一个伪协议 -->

5. 循环添加事件，事件中的循环变量不能用

<script>
	function clickEg() {
		//获取一组按钮	ps:js一组元素不能一起改变样式或设置事件
		var aBtn = document.getElementsByTagName('button');
		for(var i = 0; i < 3; i++) {
			aBtn[i].onclick = function() {
				//循环中的i变量此时已自增至3
				//aBtn[i].style.background = '#f00';

				//当前事件发生的对象 aBtn[i]为this
				this.style.background = 'f00';
			}
		}
	}
</script>

6. 浏览器加载的过程

1.加载整个页面的标签和属性
2.过滤不符合W3C标准的标签和属性(高级浏览器)
3.执行js -> window.onload

7. DOM获取元素方法

1.document.getElementById('id');
2.document/obj.getElementsByTagName('TagName');
3.document/obj.getElementsByClassName('ClassName');
兼容：Chrome、FF、IE9+

obj.getElementsByClassName

• 高级浏览器 -> function
• IE8- -> undefined

兼容写法

<script>
	function getByClass(obj, sClass) {	// obj为从哪个父级下面查找类为sClass的元素
			if(obj.getElementsByClassName) {	// IE8- -> undefined  高级浏览器 -> function
				return obj.getElementsByClassName(sClass);	// 高级浏览器
			} else {	// IE8
				var aEle = document.getElementsByTagName('*');
				var arr = [];
				for(var i=0; i<aEle.length; i++){
					var temp = aEle[i].className.split(' ');
					if(findInArr(sClass, temp)) {
						arr.push(aEle[i]);
					}
				}
				return arr;
			}
		}
</script>

• getElementById只能从document下获取
  var oDiv = document.getElementById('id');
• getElementsByTagName/getElementsByClassName可以从document下获取，也可以从父级下获取
  var oDiv2 = document.getElementsByClassName('ClassName')[0];
  var oDiv3 = oBox.getElementsByTagName('TagName')[0];

8. js中的真假

• 真：非0数字，非空字符串，true，非空对象
• 假：0，空字符串('')，false，空对象(null)，undefined，NaN

9. 获取元素当前样式(兼容)

<script>
	function getStyle(obj, name){	//元素，样式名称
		if(obj.currentStyle) {	// Chrome、FF -> undefined	IE -> object
			// IE系
			return obj.currentStyle[name];	// 兼容IE系
		} else {
			// Chrome、FF
			return getComputedStyle(obj, false)[name];	// 兼容高级浏览器(Chrome、FF、IE9+)
		}

	}
</script>

简化

<script>
	function getStyle(obj, name){	//元素，样式名称
		return (obj.currentStyle || getComputedStyle(obj, false))[name];
	}

	// 调用
	console.log(parseInt(getStyle(oDiv, 'heihgt')));
</script>

10. 获取一个n~m之间的随机数(n<m，且不包括m)

<script>
	function rnd(n, m) {
		return parseInt(Math.random() * (m - n) + n);
	}
</script>

应用：随机变色

<script>
	// rgb色值范围[0, 255]
	oDiv.style.background = 'rgb(' + rnd(0, 256) + ',' + rnd(0, 256) + ',' + rnd(0, 256) + ')';
</script>

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

1. 参数的数组arguments

参数中的数组，函数中可以不需要定义参数

<script>
	sum(12, 5, 6);

	function sum() {
		console.log(arguments[1]);	// 5
	}
</script>

2. 设置样式的三种方法

1. style.xxx
   oDiv.style.width = '300px';

2. className
   oDiv.className = 'active';

3. cssText
   批量设置样式
   oDiv.style.cssText = 'width: 300px; height: 300px';

3. 字符串的相关方法

• str.charAt(i); 获取字符串中的第i+1个字符 返回值：相应位置的字符

str[i]的兼容问题
获取字符串中的第i+1个

• str[i] 兼容：高级浏览器及IE8+
  IE7 -> undefined

• str.charAt(i) 全兼容

• str.indexOf('w'); 查找w在字符串中的位置 返回值：成功 -> w在字符串中的位置 失败 -> -1

1. 从左往右找
2. 区分大小写
3. 找到第一个相同值即停止
4. 查找多个字符时，返回第一个字符的位置

• str.lastIndexOf('w'); 查找w在字符串中的位置 返回值：成功 -> w在字符串中的位置 失败 -> -1

从右往左倒序查找，返回的索引值与indexOf()规则相同

• str.search('w'); 与indexOf()规则相同 常用于正则

• str.substring(开始位置, 结束位置); 截取字符串，包含开始位置，不包含结束位置

str.substring(开始位置); 截取字符串 从开始位置一直截取到最后

• str.substr(开始位置, 截取字符串长度); 定长截取字符串

• str.slice(开始位置, 结束位置); 截取字符串

• str.match('w'); 在字符串中匹配w 常用于正则 返回值：成功 -> 匹配的w 失败 -> null

• str.split('w'); 切割字符串 返回值类型：数组

1. 字符串按w割开，去掉w后组成的数组
2. 若没找到w则原样返回一个长度为1的数组
3. 若为''(空字符串，无空格)则返回将str中每个字符逐个拆开的数组

• str.toUpperCase(); str转大写
  str.toLowerCase(); str转小写

• str.replace('xxx', 'yyy'); 常用于正则 参数：被替换内容,替换内容

1. 修改第一个被替换内容
2. 替换不修改原字符串, 需重新声明
3. 第二个参数可为一个方法
4. replace可以连用

<script>
	var str = 'xxa';
    str.replace('x','y');
    str2 = str.replace('a', 'b');
    str3 = str.replace('x', 'y').replace('a', 'b');
    alert(str);     // xxa
    alert(str.replace('x', 'y'));   // yxa
    alert(str2);    //xxb
    alert(str3);    //yxb
</script>

<script>
	var str = 'xxxy';
    var str2 = str.replace('xxx', function(s){
        alert(s);	// xxx  被替换字符 数据类型：string
        var str2 = '';
        for(var i = 0; i < s.length; i++) {
            str2 += '*';
        }
        return str2;	// 替换后的内容
    });

    alert(str2);	// ***y
</script>

• str.charCodeAt(i); // 获取字符串中的第i+1个字符对应的ASCII编码

a-> 0x61 -> 97
b-> 0x62 -> 98
z -> 0x7A -> 122

4. 字符串比较

• 英文 按照字典序(a~z)依次比较，z为最大；从两字符串的第一个字符开始，若相当再比较下一个字符
• 数字 按照数字大小依次；从两字符串的第一个字符开始，若相当再比较下一个字符
• 汉字 按照unicode大小比较

5. 字符串应用

###判断浏览器的类型
window.navigator.userAgent
eg:

<script>
	if(window.navigator.userAgent.indexOf('Chrome') != -1) {
		console.log('Chrome');
	} else if(window.navigator.userAgent.indexOf('Firefox') != -1) {
		console.log('Firefox');
	} else if(window.navigator.userAgent.indexOf('MSIE7.0') != -1) {
		consolle.log('IE7');
	} else {
		console.log('others');
	}
</script>

###判断上传文件格式
eg:

<script>
	var index = str.lastIndexOf('.');
   	var type = str.substring(index+1);	//返回文件类型名
</script>

6. 定义数组

1. var arr = [1, 2, 3];
2. var arr = new Array(1, 2, 3);

Array()只传一个参数时表示定义一个新数组的长度
new Array(10); 定义一个长度为10的数组

7. 数组的相关方法

• arr.push('w'); 往数组最后面添加一项 返回值：新添加的那项
• arr.unshift('w'); 往数组最前面添加一项 返回值：新数组长度
• arr.pop(); 删除数组最后一项 返回值：删除的那项
• arr.shift(); 删除数组最前一项 返回值：删除的那项
• arr.join('w'); 数组各项用w连接成一个字符串 返回值类型：字符串
• arr.concat(arr2, arr3, ...); 数组arr与arr2、arr3...连接
• arr.reverse(); 数组翻转
• arr.sort(); 数组排序(按字典序和数字序列)

高级排序 数值排序

- 从小到大
  arr.sort(function(n1, n2){
  return n1-n2;
  });
- 从大到小
 arr.sort(function(n1, n2){
  return n2-n1;
 });

• arr.splice(开始位置, 删除个数, 元素1, 元素2);

<script>
	var arr1=[1,2,3,4];
   arr1.splice(1, 0, 'a', 'b');	//添加：在1后添加'a','b'	返回值：返回空数组

   var arr2=[1,2,3,4];
   arr2.splice(1, 2); //删除：删除2、3	返回值：返回删除的各项

   var arr3=[1,2,3,4];
   arr3.splice(1, 1, 8, 88, 888) //修改：先删除再添加 把2改为8,88,888	返回值：返回删除的各项
</script>

splice模拟方法

1)  arr.push(c);    -> arr.splice(arr.length, 0, c);
2）arr.unshift(c); -> arr.splice(0, 0, c);
3）arr.pop();      -> arr.splice(arr.length-1, 1);
4）arr.shift();    -> arr.splice(0, 1);

8. json(object类型)

json格式：{name:value,name2:value2, ...}
json标准格式：{"name":value, "name2":value2, ...}

所有键名需双引号,键值非数字时需加引号
键值对没有json.length
json的name是唯一的

• 获取json值: json.name 或者 json['name']

• 添加/修改: json.aaa = 'bbb'; 或者 json['aaa'] = 'bbb';

• 删除: delete json.c; 或者 delete json['c'];

• 判断json内某个属性是否存在

<script>
	var json = {a: 1, b: 2};
	alert('c' in json);	// false 属性c不存在
</script>

json和数组的区别

length

• 数组：有length
• json：没有length

循环遍历方法

• 数组：for(var i=0;i<arr.length;i++){alert(arr[i])}; for循环
• json：for(var name in json){alert(json[name])}; for in循环

访问元素下标类型

• 数组：arr[1] 数字
• json：json['a'] 字符串

顺序

• 数组：有序，根据下标访问
• json：无序，根据键名访问

9. Math方法

1. Math.random() 0-1随机数（不包含1）
2. Math.abs(num) 绝对值
3. Math.max(num1, num2, ...) 最大数
4. Math.min(num1, num2, ...) 最小数
5. Math.floor(num) 向下取整 12.4 -> 12 12.6 -> 12
6. Math.ceil(num) 向上取整 12.5 -> 13 12.1 -> 13
7. Math.pow(n, m) n的m次方 Math.pow(2, 3)=8;
8. Math.sqrt(num) num开平方 Math.sqrt(9)=3;
9. Math.round(num) 四舍五入 12.1 -> 12 12.6 -> 13

num.toFixed(保留小数个数); 保留几位小数(自动四舍五入)

10. try-catch捕获异常

<script>
	try {
		// code
	} catch(ex) {	// exception
		console.log(ex.message);	// 查看错误信息

		// 错误的提示信息
		// 补救的代码
	}
</script>

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

1. 返回值问题(return)

1. return语句后面的代码不执行
2. 函数若没有写return，则默认返回undefined
3. 函数返回语句为return; 也返回undefined
4. return必须写在函数function内

2. undefined出现的情况

1. 函数没有返回值或只有return;
2. 定义了一个变量，但没有赋值

eg: var a; // undefined
function show(a) {}
show(); // undefined

3. 访问不存在的属性

eg: oDiv.aaa; // undefined

3. eval(字符串)

虽然这个不建议使用，但还是聊聊这个东西是怎么用的吧

eval能把字符串里面的代码转换成js能理解的程序，把引号中的拿出来运行

<script>
	var a = '[1, 2, 3]';	//字符串
	alert(eval(a));		// 1, 2, 3  '[1, 2, 3]' -> [1, 2, 3]
</script>

4. 数字小于10的补零函数

<script>
	function toTen(num) {
		if(num < 10) {
			return '0' + num;
		} else {
			return '' + num;	// 函数的返回类型最好保持一致
		}
	}
</script>

简化

<script>
	function toTen(num) {
		return num < 10 ? '0' + num : '' + num;
	}
</script>

5. 定时器

1. Interval(每过一段时间执行一次，循环执行)

• 开启定时器
  setInterval(函数/函数名, 时间);

时间单位是毫秒

• 关闭定时器
  clearInterval(定时器的名字);

2. Timeout(过一段时间执行一次，只执行一次)

• 开启定时器
  setTimeout(函数/函数名, 时间);

时间单位是毫秒

• 关闭定时器
  clearTimeout(定时器的名字);

	<script>
		// 定时器先关后开
		var bSin = false;
		var timer = setInterval(function() {
			if(bSin) {
				return;
			}
			bSin = true;
		}, 30);

		function clear() {
			clearInterval(timer);
			bSin = false;
		}
	</script>

6. 日期对象

<script>
	// 获取时间
	var oDate = new Date();
	oDate.getFullYear();	// 获取年
	oDate.getMonth();		// 获取月，从0开始，获取+1，设置-1 !important
	oDate.getDate();		// 获取日
	oDate.getDay();			// 获取星期，星期天 -> 0，星期一 ~ 星期六 -> 1 ~ 6

	oDate.getHours();		// 获取小时，记得加s，下同 !important
	oDate.getMinutes();		// 获取分钟
	oDate.getSeconds();		// 获取秒
	oDate.getMillseconds();	// 获取毫秒
	oDate.getTime(); 		// 时间戳 当前时间距离1970/1/1凌晨的毫秒数
</script>

<script>
	// 设置时间
	var oDate = new Date();
	oDate.setFulllYear(2017, 11, 13);	// 设置年、月、日  月份设置时-1
	oDate.setHours(0, 0, 0, 0);			// 设置时、分、秒、毫秒

	// 获得时间戳
	oDate.getTime();	// 设置后的时间距离1970/1/1凌晨的毫秒数
</script>

7. 日期对象应用

oDate.setDate(31); // 假设本月有30天会跑到下个月的第一天 会自动进位
oDate.setDate(0); // 会跑到上个月的最后一天

本月有多少天

<script>
	var oDate = new Date();
	oDate.setMonth(oDate.getMonth() + 1); // 当前月份+1
	oDate.setDate(0);	// setDate(0);
	alert(oDate.getDate());

</script>

本月第一天是周几

<script>
	var oDate = new Date();
	oDate.setDate(1);	// setDate(1);
	alert(oDate.getDay());
</script>

本月最后一天是周几

<script>
	var oDate = new Date();
	oDate.setMonth(oDate.getMonth()+1);	// 当前月份+1
	oDate.setDate(0);	// setDate(0);
	alert(oDate.getDay());
</script>

8. 事件函数相同可以合并

eg: oDiv1.onmouseout = oDiv2.onmouseout = function() {};

9. this

this: 当前方法属于谁，this就是谁
this默认属于window

定时器里的this不能直接使用，原因：this指向了window

1.定时器中的this不指向元素，指向window
解决：在定时器外保存this
oBtn.onclick = function() {
var _this = this;
setTimeout(function(){
_this.style.background = '#f00';
},1000);
}
2.调用封装函数使用this，this不指向元素，指向window
3.(低级浏览器attachEvent)事件绑定里面的this 报错

10. 闭包

用处：

1. 解决变量名冲突
2. 解决循环添加事件，事件中的循环变量不能用的问题

<script>
	function clickEg() {
		//获取一组按钮	ps:js一组元素不能一起改变样式或设置事件
		var aBtn = document.getElementsByTagName('button');
		for(var i = 0; i < 3; i++) {
			aBtn[i].onclick = function() {
				//循环中的i变量此时已自增至3
				//aBtn[i].style.background = '#f00';

				//当前事件发生的对象 aBtn[i]为this
				this.style.background = 'f00';
			}
		}
	}
</script>

闭包写法：

<script>
	function clickEg() {
		//获取一组按钮	ps:js一组元素不能一起改变样式或设置事件
		var aBtn = document.getElementsByTagName('button');
		for(var i = 0; i < 3; i++) {
			(function(index) {
				aBtn[i].onclick = function() {
					aBtn[index].style.background = 'f00';
				}
			})(i);
		}
	}
</script>

<script>
	for(var i=0; i<2; i++) {
		setTimeout(function(){
			alert(i);
		}, 2000);
	}	// 结果：两秒后alert两次2，两秒后i已为2，然后执行两次循环
</script>

闭包写法：

<script>
	for(var i=0; i<2; i++) {
		(function(a){
			setTimeout(function(){
				alert(a);
			},2000);
		})(i);
	}	// 结果：两秒后alert 0、1
</script>

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！