javaScript学习第二周core

第一天hash数组（关联数组），数组api

1、创建：2步 1、创建空数组：var arr=[]; 2、为数组添加自定义下标并且赋值：arr["自定义下标"]=新值;

2、访问元素：arr["自定义下标"];

3、强调：hash数组的length失效了，永远为0！ 遍历hash数组：不能再使用for循环，必须使用for in循环 - ，它不需要设置从哪里开始到哪里结束，纯自动化的，专门为了遍历hash数组存在的 for(var i in 数组名){i;//下标 数组名[i];//当前次元素} 不止能遍历hash数组，也能遍历索引数组 个人建议：索引数组依然是for，hash数组再使用for in

4、hash数组的原理： a:hash算法：将字符串，计算出一个尽量不重复的数字（地址值）字符串内容相同，则计算出来的数字也一定是相同的 b:添加元素：将自定义下标交给hash算法，得到一个数字（地址值），直接将你要保存的数据放到此地址保存起来 c:获取元素：将指定的自定义下标交给hash算法，得到一个和当初保存时一样的数字（地址值），通过此地址找到你当初保存的数据，取出来使用

*1、将数组转化为字符串：2种：

1、var str=String(str);   

　将数组转化为字符串并分隔每个元素;　　

var arr=[1,2,3]; String(arr) "1,2,3" arr//[1, 2, 3]

注：不改变原数组

2,、var str=arr.join("自定义分隔符"); 
将数组转化为字符串，可定义分隔符
强调：如果join省略"",就等效于String

注：不改变原数组

var arr=[1,2,3]; arr.join('')//"123"

var arr=[1,2,3]; arr.join(' ')//"1 2 3"

var arr=[1,2,3]; arr.join(',')//"1,2,3" arr//[1, 2, 3]

2、链接和获取子数组：
1、连接：var newArr=arr1.concat(值1,值2,arr2,...);
将concat后的内容，和arr1拼接，组成新数组返回
强调：concat的参数中包含数组，则打散数组，以单个元素拼接　　

var arr1=[1,2,3],arr2=[4,5,6] arr1.concat(1,2)//[1, 2, 3, 1, 2]

var arr1=[1,2,3],arr2=[4,5,6] arr1.concat(arr2)//[1, 2, 3, 4, 5, 6]

2、获取子数组：var subArr=arr.slice(starti,endi+1);
获得arr中starti位置开始，到endi位置的所有元素组成的新数组
强调：含头不含尾
省略第二个参数：表示从starti一直取到结尾
可支持负数参数：-n表示倒数第n个元素，相当于length-n　　　 var arr=[1,2,3,4]

arr.slice(0)//[1, 2, 3, 4]

arr.slice(0,2)//[1, 2]

arr.slice(-3)//[2, 3, 4]

arr.slice(-3,-1)//[2, 3]

arr.slice(0,2)//[1, 2]

arr//[1, 2, 3, 4]

注：不改变原数组

3、删除，插入，替换：（直接修改原数组）
1、删除：var deletes=arr.splice(starti,n);
删除arr中starti位置开始的n个元素
返回被删除的元素组成的临时新数组

var arr=[1,2,3,4] arr.splice(0)//[1, 2, 3, 4]

var arr=[1,2,3,4] arr.splice(-1)//[4]

var arr=[1,2,3,4] arr.splice(0,3)//[1, 2, 3] arr//[4]

注：1.支持负数

2.直接修改原数组

2、插入：arr.splice(starti,0,值1,值2,...);
在arr中starti位置，插入新值。旧值被向后顺移
强调：

　　1.要插入的值，只能以单独的参数传入，不支持打散数组参数

2.starti表示第i个 不是数组索引

var arr=[1,2,3,4] arr.splice(2,0,22,33) arr//[1, 2, 22, 33, 3, 4]

3、替换：var deletes=arr.splice(starti,n,值1,值2,...);
删除arr中starti位置开始的n个元素，再在starti位置插入新元素
删除的元素个数和插入的新元素个数不必相等

var arr=[1,2,3,4] arr.splice(2,2,5,6) arr//[1, 2, 5, 6]

4、反转数组元素：arr.reverse();

arr=[1,2,3,4]
arr.reverse()//[4, 3, 2, 1]
arr//[4, 3, 2, 1]

注：直接修改原数组

5、升序排列：arr.sort();   (直接修改原数组)

arr=[1,5,3,2] arr.sort()//[1, 2, 3, 5]

arr=[1,5,32,2] arr.sort()//[1, 2, 32, 5] arr//[1, 2, 32, 5]

注：1.将arr中的元素，以字符串方式升序,如上

2.sort()支持自定义排序方法(arrayObject.sort(sortby))，这个以后再说啦~

6、结尾出入栈：
1、入栈：arr.push(值)
将值压入数组结尾

var arr=[1,2,3,4] arr2=arr.push(1)//5 //返回新数组的长度 arr//[1, 2, 3, 4, 1]

2、出栈：var last=arr.pop();
弹出数组最后一个元素

var arr=[1,2,3,4] arr.pop()//4 //返回弹出的元素 arr//[1,2,3]

注：直接修改原数组

7、开头出入栈：
1、入栈：arr.unshift(值);
将值插入数组开头
2、出栈：var first=arr.shift();
取出数组第一个元素

var arr=[1,2,3,4] arr.unshift(22)//5 arr//[22, 1, 2, 3, 4]

var arr=[1,2,3,4] arr.shift()//1 arr//[2, 3, 4]

注：直接修改原数组

总结：

---------------------------直接修改原数组：-------------------------------

1.arr.splice();

2.arr.reverse();

3.arr.sort();

4.arr.push(值);arr.pop();* 从数组的尾部插入/删除一个或多个元素

5.arr.unshift(值);arr.shift();* 从数组的头部插入/删除一个或多个元素

----------------**不修改原数组，直接返回一个新数组：*---------------------------

*1.String(arr);

*2.arr.join("自定义分隔符");

*3.arr1.concat(值1,值2,arr2,...); 添加新的元素到值后面

*4.arr.slice(starti,endi+1); slice(start, end)  start:开始裁切的下标, end:结束裁切的下标(end切不到)  => 实际上裁切的范围是 下标start到end-1

第二天 数组的api

es5提供的3组6个api： 1.判断有两个 第一个： var bool=arr。every（function（val，i，arr）{ val---当前值； i---当前值的下标； arr---当前数组本省；return---判断条件}

第二个：some var bool=arr。some（function（val，i，arr）{return判断条件}

2.遍历： 第一个：arr.forEach(function(val,i,arr){直接做你想要的操作;}) 第二个：var newArr=arr.map(function(val,i,arr){return 直接做你想要的操作;})

3.过滤和汇总： 过滤：筛选出你需要的部分，但是和现实不一样的是原数组并不会发生变化 var subArr=arr.filter(function(val,i,arr){return 判断条件;}) 汇总：var result=arr.reduce(function(prev,val,i,arr){return prev+val;},基础值)

 以上6个API都是在简化我们的for循环操作，以后数组我们可能真的不会再写for循环

ES6箭头函数：简化一切匿名回调函数的： 固定公式：function去掉，()和{}之间添加=>，如果形参只有一个，那么()可以省略，如果函数体只有一句话，那么{}也可以省略，如果函数体只有一句话并且是return，那么return和{}都可以省略

第三天

1、*****StringAPI：就是一些只有字符串可以使用的函数，不需要我们创建，直接使用 1、转义字符：
作用： 1、将字符串中和程序冲突的字符转为原文 """ ''' 2、包含特殊功能的符号： 换行：\n 制表符：\t -> 大空格，就跟你敲tab按键效果一样 3、*输出unicode编码的字符： \u4e00 - ascii码：19968 \u9fa5 - ascii码：40869

2、*大小写转换：将字符串中的每个字符统一的转为大写 或 小写 何时：只要程序不区分大小写，就要【先统一】的转为大写 或 小写，再比较 （做验证码） 如何： 大写：var upper=str.toUpperCase(); 小写：var upper=str.toLowerCase();

3、获取字符串中指定位置的字符：str.charAt(i) === str[i];

4、*获取字符串中指定位置的字符的ASCII码： var ascii=str.charCodeAt(i);

 *通过ASCII码转回原文：
	var 原文=String.fromCharCode(ascii);

5、***检索字符串：检查索引，检查下标：获取关键字的下标 var i=str/arr.indexOf("关键字",starti); 从starti位置开始，查找右侧第一个关键字的第一个字符的位置 starti可以省略，默认从0位置开始查找 *返回值：找到了，返回第一个关键字的第一个字符的下标位置 没找到，返回-1，其实我们根本不关心下标为多少，我们只关心下标为不为-1 作用：判断有没有！ 强调：数组也能使用此方法，数组这个方法是后期才添加 上的，原本此方法只有字符串可用，比如老IE的数组就没此方法。 鄙视题：默认只能获取到第一个关键字的下标，如何才能获取到所有的关键字的下标？ var str="no zuo no die no can no bibi no"; var index=-1; while((index=str.indexOf("no",index+1))!=-1){ console.log("找到了，下标为："+index); }

6、拼接字符串：var newStr=str.concat("新字符串",...) 还不如 +运算

7、*截取字符串：3个 var subStr=str/arr.slice(starti,endi+1);//用法和数组的用法完全一致 str.substring(starti,endi+1);//用法几乎和slice一致，但是不支持负数参数 str.substr(starti,n);//n代表的是截取的个数，不必考虑含头不含尾

8、*替换字符串：本身这个方法非常的强大，但是由于我们暂时还不会正则表达式，所以只能替换固定的关键字，暂时比较搓 var newStr=str.replace("固定关键字"/正则表达式,"新内容");

9、*****切割/分割/分隔字符串： 作用：将字符串转为数组： var arr=str.split("自定义切割符"); 注意： 1、切割后，切割符就不存在了 2、如果你的切割符写的是""，切散每一个字符

10、去掉空白字符：str.trim/trimStart/trimEnd()

第四天 math对象 数学计算的api

1、Math对象：专门提供了数学计算的API 强调：不需要创建，直接使用

2.API： 1、取整：3种 1、上取整：var num=Math.ceil(num);//小数位数不能超过15位 2、下取整：var num=Math.floor(num); 3、四舍五入取整：var num=Math.round(num);//只看小数位数的第一位

//更推荐：*parseInt(str去掉单位)+*num.toFixed(d);
//*num.toFixed(d); 具有四舍五入功能，返回是字符串，搭配parseFloat使用
   

//鄙视题：不允许使用toFixed的情况下，自己封装一个函数，由用户传入数字和保留位数，实现四舍五入操作： function toFixed(num,d){ num=(10d); num=Math.round(num); num/=(10d); return num; } var result=toFixed(Math.PI,2); console.log(result);

2、乘方和开方 乘方：Math.pow(底数,幂); -> 更简化：底数x幂 开方：Math.sqrt(num); - 仅仅只能开平方

3、🌟最大值和最小值： var max/min=Math.max/min(a,b,c,d,e,f,g,...);//自动在你传入的数字中比较出最大值或最小值 问题：本身不支持数组参数 解决：固定用法：Math.max/min.apply(Math,arr);//apply具有打散数组的功能

4、绝对值：把负数转为正数：Math.abs(-1);//1 放上负数转为正数

5、🌟🌟🌟随机数：Math.random(); 在0-1之间去一个随机的小数 搭配上parseInt，只能取到0，但是不可能取到1，意味着取不到最大值 随机整数公式：parseInt(Math.random()*(max-min+1)+min) 强调：只要以后网页中某一块有随机的功能，他的底层一定用到了随机数

2、Date对象：日期对象，提供了操作日期和时间的API。 创建：4种 1、🌟创建一个当前日期：var now=new Date();

2、🌟创建一个自定义时间：var birth=new Date("yyyy/MM/dd hh:mm :ss");

3、创建一个自定义时间：var birth=new Date(yyyy,MM,dd,hh,mm,ss);//修改月份，从0~11，0代表1月

4、复制一个日期：var end=new Date(start); 为什么：日期的所有API都是直接修改原日期的，无法获得修改之前的日期 所以：在执行API之前先进行复制，然后再操作复制后的日期

使用：2类 1、两个日期对象之间，可以相减（大-小），得到一个毫秒差，换算出自己想要的任何一部分 - 日期的本质其实就是保存了一个毫秒数 - 做倒计时的关键 2、API：分量：8个时间的单位 年月日星期：FullYear Month Date Day（没有set方法操作） 时分秒毫秒：Hours Minutes Seconds Milliseconds 每一个分量都有一对儿getXXX/setXXX的方法 其中getXXX负责获取一个分量的值 其中setXXX负责设置一个分量的值 特殊： 1、取值范围： FullYear - 当前年份的数字 Month - 011 Date - 131 Day - 06：0代表是星期天，外国人的眼里星期天才是一周的第一天的 Hours - 023 Minutes、Seconds：0~59 日期你知道了取值范围，如果你还故意设置超出范围，他很聪明，会自动进制 2、Day，没有set方法

3、如果希望对某个分量进行加减操作：date.setXXX(date.getXXX()+/-n)

3、定时器： 1、周期性定时器：每过一段时间就会执行一次，先等后做 开启：timer=setInterval(callback,间隔毫秒数); 停止：clearInterval(timer);

2、一次性定时器：等待一段时间，只会做一次就结束了 开启：timer=setTimeout(callback,间隔毫秒数); 停止：clearTimeout(timer); 定时器是我们第一次见到的异步技术：无论我这一块代码多么的耗时，也不会卡住后续代码

第五天 bom

1、BOM：Browser Object Model - 浏览器对象模型：专门用于操作浏览器的，但是它使用的不多，远不如ES和DOM，浏览器很多操作都是自带的，而且BOM没有标准， 各个浏览器都有自己的定义，但是大部分浏览器的都是一致规范的，除了老IE（8-）

2、window对象：扮演着两个角色： 1、全局对象：保存着全局变量和全局函数 2、指代当前窗口本身：

属性： 1、获取浏览器的完整大小：outerWidth/outerHeight 2、🌟获取浏览器的文档显示区域的大小：innerWidth/innerHeight - 获取每台电脑的浏览器的文档显示区的大小 3、获取屏幕的完整大小：跟window没关系：screen.width/height; - 我们目前学习的都是浏览器应用（网页），并不会去做桌面应用

方法： 1、*打开链接的新方式： 1、当前窗口打开，可以后退： HTML：内容 JS：open("url","_self");

2、当前窗口打开，禁止后退：使用场景：比如电商网站，结账后不允许后退 HTML做不到了，只有JS可以，也不是window能做到的，而是另外一个人： history：当前【窗口的历史记录】，他其实可以做的事儿就是前进后退 ocation：当前【窗口正在打开的url】，有一个API： location.replace("新url");//叫做替换，不叫做跳转，不会产生历史记录，自然也不能后退了，但是网址替换了，网页必然会发生变化

3、新窗口打开，可以打开多个 HTML：内容 JS：open("url","_blank");

4、新窗口打开，只能打开一个：使用场景：比如电商网站，只允许用户打开一个结账页面 HTML：内容 JS：open("url","自定义一个name");

其实窗口的底层都是有一个名字的，如果打开了一个已经开着的名字的窗口的，他会把他关闭掉，再次打开 学完这块，我们知道了两个点： 1、以后的跳转，任何标签都可以 2、提升用户的体验感 3、a标签的其他用途： 1、跳转 2、锚点 3、下载按钮：下载 4、打开图片和txt文档：打开图片和txt 5、直接书写js-不需要绑定点击事件：打开图片和txt

2、打开新窗口/新链接：newW=open("url","target","width=?,height=?,left=?,top=?"); 特殊： 1、如果没有加第三个参数，那么窗口会和浏览器融为一体 2、如果你加了第三个参数，那么窗口会脱离浏览器独立存在 3、关闭窗口：window/newW.close(); 4、改变新窗口的大小：newW.resizeTo(新宽,新高); 5、改变新窗口的位置：newW.moveTo(新X,新Y); 6、*window提供了三个框： 警告框：alert("警告文字"); 输入框：var user=prompt("提示文字"); 确认框：var bool=confirm("提示文字"); 7、**定时器也是window的 8、事件： 1、window.onload事件 - load - 加载：等待其他所有的资源加载完毕后才会执行的代码，放在里面的代码其实要最后才会执行 2、*window.onresize事件 - 窗口如果大小发生了变化，就会触发，搭配上判断innerWidth可以理解为是js版本的css媒体查询 3、window.onscroll事件 - 滚动事件，一旦滚动就会触发 1、获取滚动条当前的位置：window.scrollY 2、获取元素距离页面顶部有多远：elem.offsetTop/offsetLeft 9、**本地/客户端存储技术： cookie：淘汰了，存储的大小只有2kb，而且操作极其麻烦，尤其要到处切割，只能最多保存30天 webStorage：H5带来了一个新特性，存储的大小有8mb，永久保存，而且非常简单 分类2种： 1、sessionStorage - 会话级，只要浏览器一旦关闭，数据就会死亡了 2、localStorage - 本地即，只要你不清空，就会永久存在 两者的用法是一模一样的，不用创建，直接可用 操作：

			1、添加：xxxStorage.属性名="属性值";
			2、读取：xxxStorage.属性名;
			3、删除：xxxStorage.removeItem("属性名");
			4、清空：xxxStorage.clear();