Day1
??==基于对象==和==事件驱动==的客户端脚本语言
1995，NetScape(网景公司)，布兰登(Brendan Eich)，liveScript
ECMA-262
ECMA 、BOM 、DOM
三种，与引入CSS相似，
内联样式，外部样式，内部样式。
alert(); 以警告框的方式输出,中断后面代码的执行
document.write();输出在页面中,它是影响页面布局
console.log();在控制台输出,不影响用户体验,是程序常用的排序工具,它是输出对象的详细信息
如果是纯JS代码中换行 \n （alert(); ） 如果是在页面中换行 <br> （document.write()）基本数据类型: Number/String/Boolean/Null/Undefined/Symbol
复合数据类型：Object
1.包含字母/数字/下划线/$/中文 2.不能以数字开头 3.不能是关键字/保留字 4.语义化 5.驼峰命名 1>大驼峰: ZhongHuaRenMingGongHeGuo 常用于类(构造函数名) 2>小驼峰: zhongHuaRenMingGongHeGuo 6.匈牙利命名法: 整数(int) iNum 小数(float) fNum 布尔(boolean) boo 数组(array) arr 函数(function) fn 正则 re是在内存中开辟一块空间,这块空间用于存储数据,且数据随程序会发生改变.
显式声明: var iNum = 3; 隐式声明: iNum = 3;初始化 先声明后赋值i++ == i; ++i == i + 1； 3 * "3"(9) "3" * "3"(9) 3 * null(0) 3 * "3a"(NaN) 3 * undefined(NaN) 3 * true(3) 3 * false(0) 3 / 2(1.5) 3 / ‘2‘(1.5) 3 / ‘3a‘(NaN) 0 / 3(0) 3 / 0(Infinity) 0 / 0(NaN) 8 % 3(2) 3 % 8(3) 2 % 8(2) 3 + 3(6) 3 + ‘3‘ = ‘33‘("33") 3 + null(3)3 >= 3(true) 3 > "2"(true) "100" > "2"(false)逐位比较 ‘我‘ > ‘你‘(true)(Unicode编码比较) //切记 null == 0 (false) null == "" (false) null == false (false) null == undefined (true) null === undefined (false)!
&& (如果左边表达式的值为true,则返回右边表达式的值;如果左边表达式的值为false,则返回左边表达式的值,此时,发生短路)
|| (如果左边表达式的值为true,发生短路,返回左边表达式的值,如果左边表达式的值为false,返回右边表达式的值)
!1(false) !-1(false) !0(true) !""(true) !NaN(true) !undefined(true) 3 > 2 && 4 (4) 3 - 3 && 4 (0) 3 > 2 || 4 (true) 3 - 3 || 4 (4)如果表达式成立，执行表达式1，不成立执行表达式二
typeof 1 "number" typeof typeof 1 "string" var a = new Object; console.log(a instanceof Object); //true; typeof一般只能返回如下几个结果：number,boolean,string,function,object,undefined。
instanceof判断是不是某种数据类型
var a = Symbol();console.log(typeof a); //symbol 简单赋值 : = 复合算术赋值: += -= *= /= %=(取运算符左边变量中的值与运算符右边表达式的值进行相应的算术运算,再将结果赋值给左边的变量) var a = 3; a *= 3 + 1; //12 1. parseInt() 2. parseFloat() 3. Number() 4. isNaN() 判断是否是NaN，是就返回true,否则返回false; 5. eval() :解析字符串,将字符串解析为表达式并返回表达式的值Day2
顺序结构/选择结构/循环结构
1. 三元 ?: 2. if 1> if(){} 2> if(){}else{} 3> if(){}else if(){}…… 3. switchDay3
满足一定条件，（重复）执行一段相同代码块。
1、从哪里开始 2、到哪里结束 3、步长
1. while
格式 : 表达式1; while(表达式2){ 语句组; 表达式3; } 2. do while
格式 : 表达式1; do{ 语句组; 表达式3; }while(表达式2);for(表达式1;表达式2;表达式3){ 语句组; } 表达式1; for(;表达式2;表达式3){ 语句组; } 表达式1; for(;表达式2;){ 语句组; 表达式3; }while(2){} do while(1) for(;1;){}break :
1.用于switch,终止switch语句
2.用于循环,终止一层循环
continue :
用于循环,终止一次循环
Day4
对于需要反复使用的功能代码，将其封装成一个独立的模块，这种功能代码块叫函数。
功能：将代码组织为可利用的单位，可以完成特定的任务并返回数据
可以在同一个程序或其他程序中多次重复使用（通过函数名调用）。
function 函数名([参数]){ 语句组; }var 函数名 = function([参数]){ 语句组; }??定义函数时,所传递的参数
??调用函数时,所传递的参数
return 后可不跟参数，遇到return函数就停止了。
/* * 进入作用域，启动解析器 * 一、预解析：寻找一些东西?var function 参数 * a = undefined * fn = function fn(){ alert(4);} * 二、逐行解读代码: * 1.表达式 * a = 3; */ alert(a); //undefined var a = 3; function fn(){ alert(4); } alert(a); //3 /* * 进入作用域，启动解析器 * 一、预解析：寻找一些东西?var function 参数 * a = 3 * 二、逐行解读代码: * 1.表达式 * 2.函数调用 */ alert(a);//function a(){ alert(4);} var a = 1; alert(a); //1 function a(){ alert(2); } //a(); alert(a); //1 var a = 3; alert(a); //3 function a(){ alert(4); } alert(a); //3 <script type="text/javascript"> /* * 进入作用域，启动解析器 * 一、预解析：寻找一些东西?var function 参数 * fn = function fn(){...} * a = 3 * 二、逐行解读代码: * 1.表达式 * 2.函数调用 * * */ function fn(){ alert(‘hehe‘); } // alert(a); // a is not defined </script> <script type="text/javascript"> var a = 3; fn();//hehe </script> /* * 进入作用域，启动解析器 * 一、预解析：寻找一些东西?var function 参数 * a = 3 * fn = function (){...} * 二、逐行解读代码: * 1.表达式 * 2.函数调用(进入函数作用域) * 一、预解析 ：找var function 参数 * a = 4 * 二、逐行解读代码 * 1.表达式 * 2.函数调用 */ alert(a); //undefined var a = 3; alert(a); //3 function fn(){ alert(a); //undefined var a = 4; alert(a); //4 } fn(); alert(a); //3 /* * 进入作用域，启动解析器 * 一、预解析：寻找一些东西?var function 参数 * a = 3 * fn = function (){...} * 二、逐行解读代码: * 1.表达式 * 2.函数调用(进入函数作用域) * 一、预解析 ：找var function 参数 * a = 4 * 二、逐行解读代码 * 1.表达式 * 2.函数调用 */ alert(a); //undefined var a = 3; alert(a); //3 function fn(a){ //a = 3 alert(a); //3 var a = 4; alert(a); //4 } fn(a); alert(a); //3 /* 作用域链 * 进入作用域，启动解析器 * 一、预解析：寻找一些东西?var function 参数 * a = 4 * fn = function (){...} * 二、逐行解读代码: * 1.表达式 * 2.函数调用(进入函数作用域) * 一、预解析 ：找var function 参数 * * 二、逐行解读代码 * 1.表达式 * 2.函数调用 */ alert(a); //undefined var a = 3; alert(a); //3 function fn(){ alert(a); //3 a = 4; alert(a); //4 } fn(); alert(a); //4 /* 作用域链 * 进入作用域，启动解析器 * 一、预解析：寻找一些东西?var function 参数 * fn = function (){...} * a = 4 * 二、逐行解读代码: * 1.表达式 * 2.函数调用(进入函数作用域) * 一、预解析 ：找var function 参数 * * 二、逐行解读代码 * 1.表达式 * 2.函数调用 */ function fn(){ a = 4; alert(a); //4 } fn(); alert(a); //4Day5
function fic(n){ if(n == 1){ return 1; }else{ return n * fic(n - 1); } } alert(fic(5));物质(对象)：一切具有本质特征和行为的事物。
var obj = { name : ‘张志林‘, age : 18 }2.new Object()
对象.属性 对象.方法() 对象[‘属性‘] 对象[‘方法‘]()存储一组或一系列数据容器.
为了解决大量相关数据的存储和使用的问题。
从0开始。
var arr = [];var arr1 = new Array();//1.作用2.参数3.返回值4.是否影响原数组
前增: unshift() 返回值:增加后数组的长度 影响: 是 后增: push() 返回值:增加后数组的长度 影响: 是 2.ɾ
前删: shift() 返回值:被删除的元素 影响: 是 后删: pop() 返回值:被删除的元素 影响: 是 splice(start,length,增加的元素,……); 返回值: 被删除的元素数组 影响: 是 slice(start,end) 返回值: 截取到的新数组 影响: 否 var arr = [1,2,3,4,5,6]; console.log(arr.slice(-5,-2)); //2,3,4 //数组循环了 5.ƴ
concat() 返回值:拼接后的新数组 影响:否 复制克隆，好几种方法。
其中三种如下，ECMA5还有三种
var arr = [1,2,3,4]; var list = arr; list[0] = 9; console.log(arr,list); var list = []; for(var i = 0,len = arr.length;i < len;i ++){ 一、 list[i] = arr[i]; // list.push(arr[i]); } 二、 list = arr.slice(0); 三、 list = arr.concat();ECMA5的复制数组
var arr = [1,2,3,4,5]; var list = []; 1、 arr.forEach(function(value){ list.push(value); }) 2、 var list1 = arr.map(function(value){ return value; }) 3、 var list2 = arr.filter(function(value){ return value; }) console.log(arr,list,list1,list2); 1.reverse()倒序 2.sort()按照字符编码的顺序进行排序 sort(function(a,b){return a - b;})从小到大按数字排 sort(function(a,b){return b - a;})从大到小按数字排 返回值: 返回排序后的数组 影响: 是 8.ת
1.toString() :将数组转为字符串,用逗号隔开 将十进制整数转为其它进制 2.join() 返回值:返回字符串 影响: 否 数组方法例题：
var arr = [3]; //有且仅有一个正整数作为参数时，表示数组长度，负数或小数报错，其它情况表示数组中的元素。 // var list = new Array(3,3); // console.log(arr[0]); // console.log(list[0]); // var arr = [1,2,3,4,5,6]; // console.log(arr.slice(-5,-2)); //2,3,4 // console.log(arr.slice(5,1)); //[] //空数组 // var arr = [1,2,3,4,5,6]; // arr.push([‘a‘,‘b‘,‘c‘]); //[1,2,3,4,5,6,[‘a‘,‘b‘,‘c‘]]; //// console.log(arr.length); // var list = arr.concat([‘a‘,‘b‘,‘c‘]); //[1,2,3,4,5,6,‘a‘,‘b‘,‘c‘]; // console.log(list); var arr = [1,2,3,4]; // var list = arr; // list[0] = 9; // console.log(arr,list); //[9,2,3,4] //[9,2,3,4] //地址相同，共用一个数组，改变一个都改变了 // 数组复制 // var list = []; // for(var i = 0,len = arr.length;i < len;i ++){ // list[i] = arr[i]; //// list.push(arr[i]); // } // list = arr.slice(0); // list = arr.concat(); // 数组排序 // var arr = [5,2,100,3,6]; // console.log(arr.sort(function(a,b){return a - b})); // console.log(arr.sort(function(a,b){return b - a})); // console.log(typeof arr.toString()); // var num = 300; // console.log(num.toString(2)); //二进制 // console.log(num.toString(8)); //八进制 // console.log(num.toString(16));//十六进制 // 获取（min，max）的随机数 // function fnRand(min,max){ // return Math.floor(Math.random() * (max - min + 1) + min); // } // alert(fnRand(0,0xffffff).toString(7)); 从大到小： function mao(arr){ for(var i = 1;i < arr.length;i ++){ for(var j = 0;j < arr.length - i;j ++){ if(arr[j] < arr[j + 1]){ var t = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = t; } } } return arr; } 从小到大： function mao1(arr){ for(var i = 1;i < arr.length;i ++){ for(var j = arr.length - 1;j >= i;j --){ if(arr[j] < arr[j - 1]){ var t = arr[j]; arr[j] = arr[j - 1]; arr[j - 1] = t; } } } return arr; } 从小到大： function xuan1(arr){ for(var i = 0;i < arr.length - 1;i ++){ for(var j = i + 1;j < arr.length;j ++){ if(arr[j] < arr[i]){ var t = arr[j]; arr[j] = arr[i]; arr[i] = t; } } } return arr; }方法一、 function norepeat(arr){ var list = []; for(var i = 0,len = arr.length;i < len;i ++){ if(list.indexOf(arr[i]) == -1){ list.push(arr[i]); } } return list; } // alert(norepeat([2,3,3,2,4,3,2])); //方法二、 alert([...new Set([2,3,3,2,4,3,2])]);Day7
想在哪个作用域下，使用严格模式，在哪个作用域下，写下面这句话。
"use strict"
1> indexOf()
2> lastIndexOf()
3> forEach(function(value,index,array){})
4> map(function(value,index,array){return ...})
5> reduce(function(pre,next,index,array){return ....})
6> filter(function(value,index,array){return ...})
例题
var arr = [1,2,3,4,5]; var list = []; 1、 arr.forEach(function(value){ list.push(value); }) 2、 var list1 = arr.map(function(value){ return value; }) 3、 var list2 = arr.filter(function(value){ return value; }) console.log(arr,list,list1,list2); //数组复制的三种方法 var str = ""; var str1 = new String();查: indexOf()
lastIndexOf()
charAt()
charCodeAt()
String.fromCharCode()
替: replace()
将字符串中的一些字符替换为另外一些字符串。
返回一个替换后的新字符串，不会改变原字符串。
截: substring(start,==end==)
slice(start,==end==)
substr(start,length)
扩展：substr(start,==length==):从指定的位置开始截取指定长度的字符串。
ת:
toUppercase()
toLowercase()
split()
var str = "how do you do"; var subStr = str.substr(4,2); alert(subStr); //do var sub = str.substring(5,1); alert(sub); //ow dGB2312 GB18030 4e00-9fa5输出所有汉字： var str = ‘‘; for(var i = 19968;i <= 40869;i ++){ str += String.fromCharCode(i) + ‘ ‘; } document.write(str);Day8
һ.Math
Math.PI Math.abs() Math.round() Math.floor() Math.ceil() Math.max() Math.max.apply(null,[]) Math.min.apply(null,数组名) Math.random() 0 <= n < 1 Math.random() * (最大值 - 最小值 + 1) + 最小值 Math.pow() Math.sqrt() console.log(Math.round(-3.5));//-3 console.log(Math.round(-3.5000001));//-4 console.log(Math.max.apply(null,[1,2,3,4,5]));//5 console.log(Math.min.apply(null,[1,2,3,4,5]));//1 Math.random() * (5 + 1) + 5 //5-10的随机数new Date() new Date(year,month,date) new Date(year,month,date,hour,minute,second)getFullYear() getMonth() getDate() getDay() getHours() getMinutes() getSeconds() getMilliseconds() getTime() 获取时间戳 toLocaleString() toLocaleDateString() toLocaleTimeString()2.璁剧疆set
<script type="text/javascript"> var date = new Date(); console.log(date.toLocaleString()); console.log(date.toLocaleDateString()); console.log(date.toLocaleTimeString()); </script>Day9
һ.BOM
1.椤剁骇瀵硅薄(瀹夸富瀵硅薄) window
window
graph TB window-->document window-->history window-->location window-->frames window-->screen window-->navigatordocument ? history ? location ? frames ? screen ? navigator
window.location location.hrefnavigator.userAgent
alert()
confirm()
prompt()
setTimeout()
setInterval()
1> document.getElementById(‘id名‘);
2> document.getElementsByTagName(‘标签名‘);
3> document.getElementsByClassName(‘类名‘);
4> document.getElementsByName(‘name名‘);
5> document.querySelector(‘选择器‘);
6> document.querySelectorAll(‘选择器‘);
7> document.documentElement ??获得html节点
8> document.body ???????获得 body节点
document.createElement()
document.createTextNode()
appendChild()
replaceChild(new,old)
cloneNode()
removeChild()
????????元素节点 ???? 属性节点 ???? 文本节点
nodeName: ???标签名????? 属性名?????? #text
nodeType:??????1 ??????2 ????????3
nodeValue:????null????? 属性值??????文本内容
Day10
DOM
1.获取自定义属性 getAttribute()
2.设置自定义属性 setAttribute()
3.删除属性 removeAttribute()
1.去除空白文本节点
function removeSpace(node){ var childs = node.childNodes; for(var i = 0;i < childs.length;i ++){ if(childs[i].nodeType === 3 && /^\s+$/.test(childs[i].nodeValue)){ node.removeChild(childs[i]); } } return node; }parentNode : 父节点
previousSibling : 前一个兄弟节点
nextSibling : 后一个兄弟节点
firstChild: 第一个子节点
lastChild : 最后一个子节点
parentElementNode
previousElementSibling
nextElementSibling
firstElementChild
lastElementChild
insertBefore(新节点,指定的旧节点)
Day11
当一个对象触发了所绑定的事件，所发生的一切详细信息都将保存在一个临时的地方，这个地方就叫做事件对象(相当于飞机上的黑匣子)。
1.ie : window.event
2.IE : 1 4 2
鼠标按钮兼容:
function getButton(evt){ var e = evt || window.event; if(evt){ return e.button; }else if(window.event){ switch(e.button){ case 1 : return 0; case 4 : return 1; case 2 : return 2; } } }滑动轮高度 scrollTop = document.documentElement.scrollTop || document.body.scrollTop 页面高度 event.pageY = event.clentY + scrollTop document.onscroll = function(evt){ var e = evt || window.event; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollTop) } var oDiv = document.querySelector(‘#box‘); oDiv.onclick = function(evt){ var e = evt || window.event; console.log("offsetX:" + e.offsetX + ‘\noffsetY:‘ + e.offsetY); console.log("clientX:" + e.clientX + ‘\nclientY:‘ + e.clientY); console.log("pageX:" + e.pageX + ‘\npageY:‘ + e.pageY); console.log("screenX:" + e.screenX + ‘\nscreenY:‘ + e.screenY); }一.clientX/clientY属性介绍 鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始, 即是以浏览器滑动条此刻的滑动到的位置为参考点,不随滑动条移动 而变化. 二.offsetX/offsetY属性介绍 鼠标点击位置相对于点击(鼠标所在对象区域)的坐标位置 三.pageX/pageY属性介绍 鼠标在页面上的位置,从页面左上角开始, 即是以页面为参考点,随滑动条移动而变化 四.扩展：screenX和screenY属性 鼠标点击位置到windows屏幕窗口的坐标位置 兼容阻止冒泡
document.getElementById("btn").onclick = function(evt){ evt = evt || window.event; alert(this.nodeName); // evt.stopPropagation();//IE不兼容 // evt.cancelBubble = true;//IE evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true; }onkeydown/onkeyup ?? keyCode ??
onkeypress
event.keyCode || event.charCode || event.which
### Day12
##### 一.如何阻止事件的默认行为?
###### 1.右键菜单 : oncontextmenu return false
###### 2.超链接:
event.preventDefault? event.preventDefault() : event.returnValue = false
var oA = document.getElementById("aa"); oA.onclick = function(evt){ evt = evt || window.event; evt.preventDefault(); evt.returnValue = false; }###### 3.拖拽 : ondragstart return false
<style type="text/css"> #box{ width: 100px; height: 100px; background: red; position: absolute; } img{ width: 100px; height: 100px; position: absolute; left :150px; } </style> </head> <body style="height: 5000px;"> <div id="box"> </div> <img src="img/1.jpg" id="img1"/> <script type="text/javascript"> drag(‘box‘); drag(‘img1‘) function drag(id){ var ele = document.getElementById(id); ele.onmousedown = function(evt){ var e = evt || window.event; var disX = e.offsetX; var disY = e.offsetY; document.onmousemove = function(evt){ var e = evt || window.event; ele.style.left = e.pageX - disX + ‘px‘; ele.style.top = e.pageY - disY + ‘px‘; } document.onmouseup = function(){ document.onmousemove = null; } //去掉拖拽的默认行为 document.ondragstart = function(){ return false; } } } </script> </body>##### 二.添加事件监听器
function addEventListener(obj,event,fn,boo){ if(obj.addEventListener){ obj.addEventListener(event,fn,boo); }else{ obj.attachEvent(‘on‘ + event,fn); } }##### 三.移除事件监听 器
function removeEventListener(obj,event,fn,boo){ if(obj.removeEventListener){ obj.removeEventListener(event,fn,boo); }else{ obj.detachEvent(‘on‘ + event,fn); } }##### 四.事件委托/事件代理
###### 1.事件委托的优点:==提高性能==
###### 2.原理 : ==事件冒泡==
<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <h2>hhhh222</h2> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <script type="text/javascript"> var oUl = document.getElementsByTagName(‘ul‘)[0]; oUl.onmouseover = function(evt){ var e = evt || window.event; var target = e.target || e.srcElement; if(target.nodeName.toUpperCase() === ‘LI‘){ target.style.background = ‘red‘; } } </script> </body>##### 五.事件
onclick
ondblclick
onmousedown
onmouseup
onmouseover : 移入事件
onmouseout :移出事件
onmouseenter : 移入事件(默认阻止事件冒泡)
onmouseleave : 移出事件(默认阻止事件冒泡)
onmousemove
onkeydown
onkeyup
onkeypress
onload
onblur
onfocus
onchange
onscroll
onresize
oncontextmenu
ondragstart
onsubmit
##### 六.拖拽
##### 七. offset
offsetWidth : width + padding + border
offsetHeight : height + padding + border
offsetLeft : 相对于父节点的left值
offsetTop : 相对于父节点的top值
Day13
存储在浏览器的文档
在本地的客户端的磁盘上以很小的文件 形式保存数据。
==document.cookie = "key=value;[expires=日期对象;path=‘/‘]"==
==1.一个cookie的大小不超过4KB
2.一个域中的cookie数量在50条左右
3.cookie存在一定的风险==
Day14
匹配字符的一组规则
三: {} [] ()
X{} : 表示括号前的一个或一组字符连续出现的次数.
X{m} : 表示括号前的一个或一组字符连续出现m次.
X{m,} : 表示括号前的一个或一组字符连续出现m至无限次.
X{m,n} : 表示括号前的一个或一组字符连续出现m至n次.
[] : 表示范围 (可以把正则的符号放进[]中解析为字符);
[\u4e00-\u9fa5]
() : 表示组
三: * + ?
X* : {0,}
表示*前的一个或一组字符连续出现0至无限次.
X+ : {1,}
表示+前的一个或一组字符连续出现1至无限次.
X? : {0,1}
表示?前的一个或一组字符连续出现0至1次.
二 : ^ $
^ : 用于正则的开头 : 表示定头
用于[]的开头: 表示取反 [^0-9]
$ : 表示定尾
三个一: . |
. : 表示模糊匹配任意一个字符
| : 表示或者
: 转义符 (将正则的符号放在\后,解析为字符串);
\d : 数字
\D : 非数字
\s : 空白符
\S : 非空白符
\w : 字母数字下划线
\W : 非字母数字下划线
\b : 表示边界
3.replace()
exec是正则调用,参数是字符串
match是字符串调用,参数是正则表达式
<script type="text/javascript"> var str = ‘how do you do‘; var re = /o/; console.log(re.exec(str)); console.log(str.match(re)); /* [o] [o] */ var str = ‘how do you do‘; var re = /o/g; console.log(re.exec(str)); console.log(str.match(re)); /* [o] [o,o,o,o] */ //全局匹配时,exec无效 var str = ‘how do you do‘; var re = /(o).*(o)/; console.log(re.exec(str)); console.log(str.match(re)); /* [ "ow do you do", "o", "o" ] [ "ow do you do", "o", "o" ] */ //()有几个就代表有几个相应的匹配个数，整体也是一个 var str = ‘how do you do‘; var re = /(o).*(o)/g; console.log(re.exec(str)); console.log(str.match(re)); /* Array(3) [ "ow do you do", "o", "o" ] Array [ "ow do you do" ] */Day15
һ.ES6
1. bind()/call()/apply()
==bind() : 返回一个函数==
==call()/apply() :返回一个对象==
JSON是一种基于文本的数据交换方式，或者叫做数据描述格式。
- 基于纯文本，跨平台传递极其简单
- JS原生支持，后台语言几乎全部支持
- 轻量级数据格式，占用字符数量极少，特别适合互联网传递
- 可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的
- 容易编写和解析，当然前提是你要知道数据结构
1.==[]==
2. =={"key" : "value","key" : "value"}==
//原生对象 : {key : ‘value‘,"key" : "value",key : "value"}【注】
==JSON 的健和值必须加双引号，数字可不加，不可加单引号。==
一个JSON中只能有一个JSON数据。[ ]
可以在[ ] 中写多个 { }。
==JSON.parse()== : 将json字符串转为json对象
==JSON.stringify()== :将json对象转为json字符串
var str = ‘{"name" : "张志林","age" : 18}‘; //转为json对象 //eval() : 存在风险 // var json = eval(‘(‘ + str + ‘)‘); // console.log(json.name); var json = JSON.parse(str); json.address = "青岛"; //转为json字符串 str = JSON.stringify(json); console.log(str);4.let/const
1> let声明的变量不能做变量提升
2> 同一个作用域中不能重复声明一个变量
3> let声明,会产生块级作用域
注: for循环有两个作用域,for循环本身是一个块级作用域,for循环的{}又是for循环的子级作用域
4> let声明的全局变量不再是window的属性
const 好处: 一改全改
【注】const
使用const命名是为了当有大量重复常量时，方便修改
常量要求全大写，
当常量是数组时，可以修改数组的元素，地址不可修改。
[] // 返回一个数组
可以直接对应赋值;
++交换变量的值[x, y] = [y, x];++
上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。
{} // 返回一个对象
++从函数返回多个值,传参可不按顺序++
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
alert(a); // var a = 3; //// alert(b); // let b = 4; // var a = 5; // var a = 6; // b = 8; // { // let a = 3; // // } // alert(a); // for(let i = 1;i < 5;i ++,console.log(i)){ // let i = 8; // console.log(i); // } // const G = 10; // const ARR = [1,2,3,4]; // ARR[0] = 10; // console.log(ARR[0]); // let a = 3; // alert(window.a); // let b = 3 * G; // let [a,b,c] = [1,2,3]; // let [q,[w,[e],r],t] = [1,[2,[3],4],5];////不写的话显示,undefined // [a,b] = [b,a]; // console.log(a,b,c); // let {a,b=9,c} = {c : 8,a : 2}; // console.log(a,b,c); function fn({a = 1,b = 2,c = 3}){ return [a,b,c]; } let [x,y,z] = fn({a : 3,c : 5,b : 4}); console.log(x,y,z);1> includes() :
判断子串是否在父串中包含,如果有,返回true,没有,返回false
2> startsWith():
判断子串是否在父串的开头部分,如果在,返回true,不在,返回false
3> endsWith() : 判断子串是否在父串的结尾部分,如果在,返回true,不在,返回false
4> repeat() :
重复字符串
注: 如果<= -1 报错
如果是小数 : 自动取整
如果是字符串:自动转为数字,如果转不了数字的,转为NaN,NaN按0算
var str = "how do you do"; console.log(str.includes(‘do‘,str.length)); console.log(str.startsWith(‘do‘,4)); console.log(str.endsWith(‘do‘,5));==异步:同时进行==
==同步:执行完一个,再执行一个==
//生成器函数
*指针函数,按照指针一步一步执行,每次要点一次 fn().next()
function * fn(){ yield setTimeout(()=>{ alert(‘1‘); },3000); yield setTimeout(()=>{ alert(‘2‘); },2000); yield setTimeout(()=>{ alert(‘3‘); },1000); } var me = fn(); console.log(me.next())++唯一好处: this自动指向所在函数外部的对象++
var fn = ()=>{ // var a = 3; // var b = 3; // return a + b; // } // alert(fn()); // var fn1 = (a,b)=>a + b; // alert(fn1(3,4)); document.onclick = function(){ //alert(this); // var that = this; setTimeout(()=>{ alert(this); },5000) }9.set
1>自动去重
let set = new Set([1,2,1,2,3,2,1,1,4]);//构造一个新的set console.log(set.size);//获取集合长度 console.log([...set]);//转成数组 2>添加元素
set.add(‘a‘);
3>删除元素
set.delete(1);
4>判断是否包含某个元素
console.log(set.has(2));
5>清空整个set
// console.log(set.clear());
// console.log(set);
6>遍历
//keys
//values
//entries
//forEach()
for(let key of set.keys()){ console.log(key); } for(let key of set.values()){ console.log(key); } for(let [key,value] of set.entries()){ console.log(key,value); } set.forEach(function(value,key,set){ console.log(key +‘=>‘ + value); })10.
数组 set 原生 对象 map// var a = {x : 2},b = {x : 3},c = {}; // alert(a); // c[a] = 7;// ‘[object Object]‘ // c[b] = 8; //‘[object Object]‘ // console.log(c); // var obj = {}; // obj[[]] = 3; // obj[[]] = 4; // console.log(obj); //原生对象：所有key默认都会自动 转为字符串 //map {name : ‘张三‘,[] : ‘1‘,[] : ‘2‘} let map = new Map([ [1,2], [[],3], [[],4], [{},5], [{},6], [‘a‘,7] ]); // console.log(map); // alert([] == []); // console.log(map.size); //1.添加元素 map.set(‘b‘,8).set(‘c‘,9); //2.访问元素 // console.log(map.get(‘b‘)); //3.删除元素 // console.log(map.delete(‘b‘)); // console.log(map.delete([])); //4.清除map中所有的元素 // map.clear(); //5.判断是否包含某个key的value // console.log(map.has(‘c‘)); // console.log(map); //6.遍历map //keys //values //entries //forEach() for(let key of map.keys()){ console.log(key); } for(let value of map.values()){ console.log(value); } for(let [key,value] of map.entries()){ console.log(key,value); } map.forEach(function(value,key,map){ console.log(key,value); }) var str1 = Symbol(‘hello‘); var str2 = Symbol(‘hello‘); // console.log(str1 == str2); // console.log(typeof str1); var obj = {}; obj[str1] = 1; obj[str2] = 2; console.log(obj);12.class extends
// Father /* function Father(name,age){ this.name = name; this.age = age; this.showName = function(){ return this.name; } } *//*
* 对象（物质）：一切具有本质特征和行为的事物。
* 类 ： 具有相同属性和方法的一类对象
* 属性 ： 本质特征
* 方法 ： 行为
* 属性与变量
* 方法与函数
*/
class Father{ //默认的方法 //构造器 constructor(name,age){ //属性 this.name = name; this.age = age; } showName(){ return this.name; } showAge(){ return this.age; } } class Son extends Father{ constructor(name,age){ //调用父类的构造器方法 super(name,age); //超类，基类，父类 } } var son = new Son(‘张三‘,18); console.log(son.name); console.log(son.showName());html页面
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ height: 5000px; } #fa{ width: 100px; height: 100px; background: red; position: absolute; } #so{ width: 100px; height: 100px; background: green; position: absolute; left: 130px; } </style> </head> <body> <div id="fa"> 父类：无边界拖拽 </div> <div id="so"> 子类：有边界拖拽 </div> <script type="text/javascript" src="js/drag.js" ></script> <script type="text/javascript" src="js/Subdrag.js" ></script> <script type="text/javascript"> new Drag(‘fa‘); new Subdrag(‘so‘); </script> </body> </html>父类
class Drag{ constructor(id){ this.ele = document.getElementById(id); this.ele.onmousedown = function(evt){ this.fnDown(evt); }.bind(this); } fnDown(evt){ var e = evt || window.event; this.disX = e.offsetX; this.disY = e.offsetY; document.onmousemove = (evt)=>{ this.fnMove(evt); } document.onmouseup = this.fnUp; } fnMove(evt){ let e = evt || window.event; this.ele.style.left = e.pageX - this.disX + ‘px‘; this.ele.style.top = e.pageY - this.disY + ‘px‘; } fnUp(){ document.onmousemove = null; } }子类
class Subdrag extends Drag{ constructor(id){ super(id); } fnMove(evt){ let e = evt || window.event; let left = e.pageX - this.disX; let top = e.pageY - this.disY; //设置边界 if(left <= 0){ left = 0; }else if(left >= document.documentElement.clientWidth - this.ele.offsetWidth){ left = document.documentElement.clientWidth - this.ele.offsetWidth; } if(top <= 0){ top= 0; }else if(top >= document.documentElement.clientHeight - this.ele.offsetHeight){ top = document.documentElement.clientHeight - this.ele.offsetHeight; } this.ele.style.left = left + ‘px‘; this.ele.style.top = top + ‘px‘; } }