JavaScript学习
JavaScript ?????
数组对象
数组属性与方法
属性：
length 获取或设置数组长度
方法：
(1)push()方法:当前最后面添加元素，返回当前数组长度
(2)pop()方法:去掉数组最后一个元素，返回除去元素
(3)unshift()方法:数组最前面添加元素，返回当前数组长度
(4)shift()方法:数组最前面移出元素，返回移出元素
(5)concat()方法:拼接数组或字符串，返回新数组,原来数组不变
(6)slice(start,end)方法:截取数组元素，返回新数组，原来数组不变
slice取值情况：左闭右开
slice(1)为索引1到最后元素
slice()为复制原来数组
slice(1,-1)为索引1到索引为-1
(7)reverse()方法:反转原来数组，返回一个新数组
(8)toString()方法:将数组元素转换为字符串并用逗号隔开
(9)join()方法:将数组元素用指定符号隔开并转换为字符串
(10)splice(index,howmany,add,add...)方法:在指定位置删除并添加元素，返回一个新数组
(11)indexOf()方法:查找某一元素在数组中第一次出现的位置并返回当前索引，没有找到返回-1
(12)lastIndexof():查找某一元素在数组中最后一次出现的位置并返回位置索引
es6新方法：
(13)Array.from()方法用于将两类对象转为真正的数组
eg: let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
(14)Array.of()方法用于将一组值，转换为数组
eg:Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
数组迭代
1.forEach （主遍历）
写法：数组.forEach(function(item,index){代码体,_arr})
item:代表当前遍历得这一项得元素
index:代表当前遍历得这一项得索引
_arr:代表当前正在遍历得数组
eg:
var arr=[a,b,c,d];
arr.forEach(function(item,index,_arr){
console.log(item+","+index);
console.log(_arr);
})
2.map方法（主计算）
定义：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
var arr=[11,23,67,43,54];
var newArr=arr.map(function(item,index,_arr){
console.log(item+','+index);
var x=item*2;
return x;
})
//newArr的结果为[22,46,134,86,108]
3.filter方法（主条件）
定义：对数组的每一项运行给定函数，返回满足条件的项并组成数组，与map相似
eg:var arr=[11,23,67,43,54,98];
var newarr=arr.filter(function(item,index,_arr){
return item%2==0;
})
console.log(newarr);// [54,98]
4.every方法（主与操作，全真为真才输出）
定义：对数组中的每一项运行给定函数，如果函数对每一项都返回true，则返回true，若一项为假，返回false
eg：
var arrs=[11,23,44,38,67];
var result=arr.every(function(item,index,_arr){
return item>10;
})//返回result结果为true的一项
5.some方法（主或操作，一真为真）
定义：对数组的每一项运行给定函数，如果函数任一项返回为true，则返回true
eg：
var arr=[11,23,87,44,67];
var result=arr.some(function(item,index,_arr){
return item>90;
})
数组归并(求和)
reduce方法
格式：var result=arr.reduce(function(prev,current,index,_arr){/*代码*/})
参数：prev 前一项
current 当前项
index 索引
eg:
var arr=[1,2,3,4,5];
var result=arr.reduce(function(prev,current,index,_arr){
var sum=prev+current;
return sum;
})
数组排序
sort方法 将数组排序，返回一个新数组
eg: var arr=[8,5,6,3,4,1];
arr.sort(function(a,b){
return a-b;//从小到大
return b-a;//从大到小
return 0;//不换位置
})
String对象
属性和方法：
(1)length属性:返回当前字符串的长度，它不能赋值
(2)索引取值:可以像数组一样通过索引取里面的某一个字符，但是不能赋值
(3)concat()拼接字符串,返回一个新的字符串
(4)slice(start?,end?)方法,用于截取当前的字符串形成一个新的字符串
(5)substring(start,end?)方法,返回一个新的字符串,不能为负数
(6)substr(start,length?)方法，start代表开始索引，length代表截取字符串的长度
(7)indexOf/lastIndexOf查找匹配的字符串，与数组里面的用法保持一致，找到以后返回索引 ，找不到返回-1
(8)split()方法 ，将字符串按照指字符隔开变成数组
(9)charAt(index)通过索引来取字符串里面的某一个字符
(10)startsWith()判断某个字符串是否以什么开始
(11)endsWith()判断某个字符串是以否是什么结尾
(12)includes()判断是否包含某个字符串，包含就是true,不包含是false
(13)trim()/trimLeft()/trimRight()用于去除字符串左右的空格，返回去除空格以后的字符串
(14)replace()方法，查找符合要求的字符串，然后替换成指定的字符串，并返回替换以后的结果
(15)padStart(maxLength,fillString)方法与padEnd(maxLength,fillString)方法,两个方法是一组方法，可以将字符串以指定的格式进行齐位数，如1要成三位数格式的字符串001。
DOM操作
通过JavaScript获取页面元素
(1)document.getElementById("div1");通过ID来获取页面的元素,通过这种方式去获取，永远只能够获取到0个(null)或1个,ID名称重复的情况下，则找到的永远是第一个
(2)document.getElementsByClassName("div2");通过class名称来获取页面元素,获取的是一个HTMLCollection的集合（类数组），具备数组的特性，不具备数组的方法
(3)document.getElementsByTagName("p");通过标签名称来获取页面元素
(4)document.getElementsByName("sex");通过name名称来获取页面上面的元素,获取的是一个NodeList的集合
(5)document.querySelector("#div1");通过querySelector()来获取元素,通过选择器来选择元素，如果找到了元素就返回1个元素，如果找不到就返回null,即使找到了多个元素，也只返回第1个元素 (6)document.querySelectorAll(".div2");通过querySelectorAll()来获取元素
Element属性
(1)children属性，获取当前元素下面的子级元素
(2)parentElement属性，用于获取当前元素的父级元素
(3)nextElementSibling属性，用于获取当前元素的下一个兄弟元素
(4)previousElementSibling属性，用于获取当前元素的前一个兄弟元素
(5)className属性，获取或设置当前元素的class名称
(6)classList属性，返回当前元素的class名称集合
(7)firstElementChild属性，获取当前元素下面的第一个子元素，相当于children[0]
(8)lastElementChild属性，获取当前元素下面的最后一个子元素
(9)innerText属性，获取或设置当前元素里面的文本内容
(10)innerHTML属性，获取或设置当前元素内部的HTML内容
(11)tagName当前属性会返回当前元素的标签名称（这个标签名称是全大写的
(12)value属性，它是表单元素里面才会有属性，可以对这个属性取值与赋值
(13)childElementCount当前元素的子元素的个数
Element常用方法
(1)createElement()方法，根据标签名创建一个标签元素
(2)appendChild()方法，向当前元素里面的最后去追加一个新的元素
(3)remove()方法，删除当前的元素（里面的子元素也会一并删除）
(4)removeChild()方法，删除指定的子元素，返回这个删除的子元素
(5)cloneNode()克隆一个相同的元素出来接收一个参数，这个参数是布尔类型，默认是false,如果给它一个参数true，则代表要克隆子元素
(6)insertAdjacentElement()方法，向指定的位置插入元素
常用内置对象
Math对象
(1)Math常数
Math.PI圆周率，约于等 3.14
Math.E,自然对数的底数，约等于2.718
Math.LN10,10的自然对值，约等于2.302
Math.LN2，2的自然对值，约等 于0.693
Math.SQRT2,2的平方根，约等于1.414
Math.SQRT1_2，0.5的平方根，约等于0.707
(2)Math方法
Math.abc()绝对值
Math.round()四舍五入
Math.floor()向下取整，返回小于或等于这个数的大最大整数
Math.ceil()向上取整，返回大于或等于这个数的最小整数
Math.pow(x,n)函数，取x的n次方的结果
Math.max()方法，用于求一系列数中的最大值
Math.min()方法 ，用于求一系列数中的最小值
Math.sqrt(n)取数字n的平方根
Math.random()获取0~1之间的一个随要数
Date对象
Date.now()方法，返回当前的时间。要注意，它返回的是一串数字，这个数字是时间戳，指的是从1970-1-1到现在的毫秒数
getFullYear()获取当前的年份的方法
getMonth()获取当前月份的方法 0~11
getDate()获取当前天数
getDay()获取星期几 0~6
getHours()获取小时数
getMinutes()获取分钟
getSeconds()获取秒钟
BOM编程
BOM全称：Browser Object Model，浏览器对象模型 ，它主要是将JavaScript与浏览器的特性进行了结合，主要就是浏览器里面的几个大对象
location对象
location指浏览器的地址栏对象
1. href 属性，返回当前浏览器地址栏里面的地址，如果对其赋值，则会跳转到新的网页地址
2. protocol 属性，返回 lcoation 地址中的协议，如 http:
3. hostname 属性，返回当前地址中的主机名称
4. port 属性，返回当前地址中的端口号， https 协议默认的端口号是 443 ， http 的协议默认是 80
5. host 属性，返回当前地址中的主机名称与端口号 hostname:port
6. pathname 属性，返回当前地址中的主机后面的路径名，如 /webExp/music/01.html
7. origin 属性，返回当前地址中的域信息，域包含协议，主机名与端口号
protocal//hostname:port 如 http://127.0.0.1:5500
8. search 属性，返回当前地址中的 ? 后面的的内容，如
http://127.0.0.1:5500/01location.html?username=biaogege&age=18 当中的 search 指的就是问题后面的内容 ?username=biaogege
9. hash 属性，返回当前地址中的哈希值，也就是 # 后面的东西，如
http://127.0.0.1:5500/01location.html#abcdefg 它的的hash就是 #abcdefg
10. assign() 方法，载入一个新地址，页面会跳转到这个新地址，与 href 属性的操作是一样的
11. replace() 方法，将当前地址替换成一个新的地址，跳转新的地址的网页，在访问的历史记录当中替换了这条记录
12. reload() 方法，重新加载当前页面，相当于刷新当前页面
history对象
history指当前浏览器的浏览记录
1. length 属性代表有几条历史记录，该属性只读
2. back() 相当于浏览器的后退功能，直到退到第一个就不能退了
3. forward() 相当于浏览器的前进功能，直到前进到最前面一个
4. go(step) ，在历史记录当中前进名后退，如果 step 是正数，则是前进，如果是负数则是后退，可以一次退多次或进多次
navigator对象
navigator指浏览器本身
1. appName 当前浏览器的名称
2. appVersion 浏览器的版本。一般不与实际的浏览器版本对应
3. cookieEnabled 是否启用了cookie
4. onLine 表示浏览器是否连接到了因特网
5. userAgent 浏览器的用户代理字符串，我们可以通过这个属性来判断用户在打开某一个网页的时候使用的是什么设备
6. maxTouchPoints 支持的最大触摸点数
7. getUserMedia() 获取电脑多媒体设备，如视频与音频
8. geolocation ，地理定位，它里面有一个 getCurrentPosition 的方法，可以实现浏览器的定位，定位成功以后里面有两个属性 coords 以及 timestamp coords 代表定位成功以后的坐标信息
latitude 纬度
longitude 经度
accuracy 准确性
speed 速度
altitude 海拔高度
altitudeAccuracy 海拔高度的准确性
heading 指南针方向
screen对象
当前的设备的屏幕对象
1. width 代表当前屏幕的宽度
2. height 代表当前屏幕的高度
3. colorDepth 颜色深度
4. orientation 屏幕的方向
5. availWidth 屏幕的可用宽度
6. availLeft 可用位置开始的横坐标
7. availTop 可用位置开始的纵坐标
window对象(重点)
window对象是Web浏览器端的最高对象，我们之前所学习的所有东西全都是直接或间接的来自于window。它指的就是当前的窗口
1. alert(message:string) 信息弹窗提示框
2. confirm(message:string):boolean 询问框，它有两个按钮选择，一个确定，一个取消。当点击取消的时候返回 false ，点击确定的时候返回 true
3. prompt(message?: string, _default?: string): string ,它会在页面弹出一个信息输入框，返回值是你输入的内容，如果点击了取消，则返回 null
4. open(url?: string, target?: string, features?: string, replace?: boolean): Window
第一个参数url代表要打开网页的地址，第二个参数target代表新网页打开的方式，第四个参数是否以replace的形式打开 ，它的第三个参数是新网页窗口打开的样式信息，它的参数如下
样式行为 说明
channelmode=yes|no|1|0 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes|no|1|0 是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的window，还必须在影院模式。仅限IE浏览器
height=pixels 窗口的高度。最小.值为100
left=pixels 该窗口的左侧位置
location=yes|no|1|0 是否显示地址字段.默认值是yes
menubar=yes|no|1|0 是否显示菜单栏.默认值是yes
resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes
scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes
status=yes|no|1|0 是否要添加一个状态栏.默认值是yes
titlebar=yes|no|1|0 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes
top=pixels 窗口顶部的位置.仅限IE浏览器
width=pixels 窗口的宽度.最小.值为100
5. close() 方法，关闭当前页面
6.onbeforeunload 事件，这个事件表示当一个网页要准备关闭的时候，它会触发
?```js
window.onbeforeunload = function (event) {
event = event || window.event;
var msg = "你确定要关闭当前的这个页面，不考虑一下吗？";
event.returnValue = msg;
return msg;
}
7.onload 事件
window对象的onload事件比较特殊，它代表的是当前的浏览器中页面上面所有的元素已经加载好了，并且连 ![]()
,,