JavaScript---ECMAScript基础总结

JavaScript组成

JavaScript组成	作用	兼容性
ECMAScript:解释器、翻译	JavaScript的语法标准，作为核心，它规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象	几乎没有兼容性问题
DOM:Document Object Model，文档对象模型	操作页面元素的能力document	有一些兼容性问题
BOM:Browser Object Model，浏览器对象模型	操作浏览器的能力window	没有兼容性问题---几乎不兼容

DOM基础见：https://blog.csdn.net/maidu_xbd/article/details/85800668

BOM基础见：https://blog.csdn.net/maidu_xbd/article/details/90230090

ECMAScript基础总结

变量类型——typeof检测类型

用法：

<!DOCTYPE html>
<html>

<head>
	<title>typeof</title>
	<script type="text/javascript">

		var a = 12;
		alert(typeof (a));//number
		var b = 'abc';
		alert(typeof (b)); //string
		var c = document;
		alert(typeof (c));//object

	</script>
</head>

<body>

</body>

</html>

2. typeof 返回的数据类型种类：number、string、boolean、undefined、object、function

object对象类型——基本类型(number、string、boolean、undefined)与复合类型(由基本类型所组成)的对比、数组

基本类型----12、‘ab’、true

复合类型---对象

数组、Date也是对象

良好的代码习惯：变量从始至终，只存放一种类型的数据

数据类型转换

显式类型转换（强制类型转换）：

parseInt----把字符串转为数字

parseFloat----小数

NaN:Not a Number不是数字

2. 隐式类型转换

== 和 !=先把两边的东西转为一样的类型，然后再比较

===和!==不转换，直接比较

加号----1.字符串连接 2.数字相加 var a=’12’, var b=’5’ a+b=125(使用字符串连接)

减法----1.数字相减 var a=’12’, var b=’5’ a-b=7

变量作用域---作用范围（局部变量，全局变量）

闭包---子函数可以使用父函数的局部变量

命名规范：可读性，规范性

匈牙利命名法---类型前缀，首字母大写 ----例如：oBtn

类型	前缀	类型	实例
数组	a	Array	aItems
布尔值	b	Boolean	bIsComplete
浮点数	f	Float	fPrice
函数	fn	Function	fnHandler
整数	i	Integer	iItemCount
对象	o	Object	oDiv1
正则表达式	re	RegExp	reEmailCheck
字符串	s	String	sUserName
变体变量	v	Variant	vAnything

运算符:

算术：+ 加、- 减、* 乘、/ 除、% 取模
赋值：=、+=、-=、*=、/=、%=
关系：<、>、<=、>=、==、===、!=、!==
逻辑：&& 与、|| 或、! 否
运算符优先级：括号

程序流程控制：

判断：if、switch、?:
循环：while、for
跳出：break----终止整个循环；continue----终止本次循环
什么是真、什么是假：

真：true、非零数字、非空字符串、非空对象

假：false、数字零、空字符串、空对象、undefined

JSON

什么是Json 一种轻量级的数据交换格式，基于 ECMAScript 的一个子集。
Json和数组

var obj={a: 5, b: 6, c:'abc', d: [1,2,3,4]};

alert(obj.d[0]);

var arr=[{a: 5, b: 12}, {a: 6, b: 19}];

alert(arr[1].b);

3. Json和for in

var obj={a: 5, b: 3, c: 98};

var attr='';

for(attr in obj)

{

alert(attr+'='+obj[attr]);

}

函数返回值

什么是函数返回值

函数的执行结果

可以没有return

一个函数应该只返回一种类型的值

函数传参：

可变参（不定参）：arguments

参数的个数可变，参数数组

例子1：求和

求所有参数的和

function sum(){

    Var result = 0;

    for(i=0;i<arguments.length;i++){

        result += arguments[i];

    }

    alert(result);

}

sum(1,2,3,5,66,43,2,12);

例子2：CSS函数

判断arguments.length

给参数取名，增强可读性

取非行间样式(不能用来设置)：

obj.currentStyle[attr]

getComputedStyle(obj, false)[attr]

style--------------------------取行间样式

currentstyle-----------------取非行间的样式，获取计算后的样式，只适用IE

getComputedStyle-------适用火狐

复合样式---background,在currentstyle中无法获取到

基本样式----width

数组

定义:

var arr=[12, 5, 8, 9];

var arr=new Array(12, 5, 8, 9);

没有任何差别，[]的性能略高，因为代码短

属性:

length

既可以获取，又可以设置

例子：快速清空数组

数组使用原则：数组中应该只存一种类型的变量

方法:

添加

push(元素)，从尾部添加;

unshift(元素)，从头部添加

var arr=[1,2,3];

arr.push(4);

arr.unshift(5);

删除

pop()，从尾部弹出

shift()，从头部弹出

var arr=[1,2,3];

arr.pop();

arr.shift();

排序

sort([比较函数])，排序一个数组、字符串数组、数字数组

ar arr=['float', 'zindex', 'xy', 'absolute', 'blue', 'leo'];

arr.sort();

var arr=[96, 8, 12, 72, 33, 118];

arr.sort(function (num1, num2){

return num1-num2;

});

转换类

concat(数组2)---连接两个数组--str1.concat(srt2)

join(分隔符)---用分隔符，组合数组元素，生成字符串

var arr=[1,2,3,4];

alert(arr.join(':'));

字符串split

插入、删除

splice

（1）中间删除：splice(开始,长度)--arr.splice(2, 3);

（2）中间插入：splice(开始, 长度,元素…)--arr.splice(5, 0, 'a', 'b', 'c');先删除，后插入

（3）替换：splice(开始, 长度, 元素…)--arr.splice(1, 2, 'a', 'b');

var a = ["a", "b", "c", "d"];
        // 中间删除：splice(开始,长度)--arr.splice(2, 3);
        a.splice(1, 1);
        alert(a);//a,c,d

event对象和事件冒泡

event对象---event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

获取event对象(兼容性写法)-----var oEvent=ev||event;

event 对象用来获取事件的详细信息：鼠标位置、键盘按键

事件冒泡------当事件发生后，这个事件就要开始传播(从里到外或者从外向里)

cancelBubble-------取消冒泡，阻止浏览器默认的事件冒泡行为。

window.onload = function(){
			var oBtn = document.getElementById("btn");
			var oDiv = document.getElementById("div1");

			oBtn.onclick = function(ev){
				var oEvent = ev||event;
				oDiv.style.display = "block";
				oEvent.cancelBubble=true;
			}

			document.onclick = function(){
				oDiv.style.display = "none";
			}
		}

鼠标事件-----document.onmousemove

获取鼠标位置，可视区位置：clientX、clientY

document.onclick=function (ev)
{
	var oEvent=ev||event;
	
	alert(oEvent.clientX+', '+oEvent.clientY);
	//IE
	//alert(event.clientX+', '+event.clientY);
	
	//FF
	//alert(ev.clientX+', '+ev.clientY);
	
	/*if(ev)
	{
		alert(ev.clientX+', '+ev.clientY);
	}
	else
	{
		alert(event.clientX+', '+event.clientY);
	}*/
};

KeyCode---获取按下的键盘按键Unicode值。

document.onkeydown=function (ev)
{
	var oEvent=ev||event;
	
	alert(oEvent.keyCode);
};

ctrlKey,shiftKey,altKey

offsetLeft / offsetTop---相对于最近的祖先定位元素，包括外边距margin

offsetWidth / offsetHeight-----宽度/高度，包括边框border和内边距Padding

scrollTop----scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
alert(scrollTop);

跟随鼠标移动的div

#div1{width: 100px;height: 100px;background: #ccc;position: absolute;}
	
document.onmousemove=function (ev){
			var oEvent = ev||event;
			var oDiv = document.getElementById("div1");
			
			oDiv.style.left=oEvent.clientX+'px';
			oDiv.style.top=oEvent.clientY+'px';
		}

-------整理的好乱，后续更新整理中------

JavaScript---ECMAScript基础总结

ECMAScript基础总结

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条