- bom 操作：Browser Object Model 是浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。
1-1window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
1-1-1常用的提示框：
window.alert("弹框");
if(window.confirm("确认是否提交？"))
{
console.log("确认");
}
else{
console.log("用户拒绝");
};
//返回值为字符串
var price = prompt("请输入价格：", '0');
console.log(price);
1-1-2window的加载完成事件：window.onload = function () {console.log("加载完成"); }
1-1-3窗口大小变化事件：
window.onresize = function () {
屏幕的尺寸
浏览器可视区域的尺寸
//console.log(window.innerWidth,window.innerHeight);
//浏览器的大小
//console.log(window.outerWidth,window.outerHeight);
屏幕的尺寸
屏幕的实际尺寸
// console.log(window.screen.width);
// console.log(window.screen.height);
//屏幕尺寸 不包含任务栏
// console.log(window.screen.availWidth);
// console.log(window.screen.availHeight);
// console.log(document.documentElement.clientWidth);
// console.log(window.screen.availWidth);
// console.log(window.innerWidth); }
1-1-4禁止浏览器的右键：window.oncontextmenu = function (e) { e.preventDefault(); }
1-1-5navigator 对象 存在当前设备信息： window.navigator 对象包含有关访问者浏览器的信息。在编写时可不使用 window 这个前缀。
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。
navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
1-1-6 浏览器上的复制事件 (给body添加)
document.body.oncopy = function (e) {
//根据浏览器的兼容写代码
//document.selection.createRange().text 这个是ie 识别
var selection = window.getSelection() ? window.getSelection() : document.selection.createRange().text;
var link = "<br/>——————————————————————————————————————<br/>" + +
"转载来源：<br/>" +
"原文地址：" + location.href +
"<br/>——————————————————————————————————————<br/>";
var copytext = selection + link;
if (window.clipboardData) {
window.clipboardData.setData("Text", copytext);
} else {
//使用元素创建
var div=document.createElement("div");
div.className="copy";
div.innerHTML=copytext;
document.body.appendChild(div);
selection.selectAllChildren(div);
setTimeout(function (){
div.remove();
},0)
} }
1-2document 对象，文档对象；
1-3location 对象，浏览器当前URL信息；
1-3-1重新加载location.reload();
1-3-2获取地址console.log(location.href);
1-3-3跳转页面location.href="https://www.baidu.com";/location.replace("https://www.baidu.com");
1-4history 对象，浏览器访问历史信息；
1-4-1 history.back() - 加载历史列表中的前一个 URL。返回上一页。
1-4-2history.forward() - 加载历史列表中的下一个 URL。返回下一页。 go(“参数”) -1表示上一页，1表示下一页。
history.pushState(null,'百度',"./1.问题.html");
history.replaceState(null, null, './2.window对象.html');
gol.onclick = function () {
history.back();
}
gor.onclick = function () {
history.forward();
}
- 数组array
2-1. 如何声明数组
标准：var arr=new Array(); //new 实例化 创建
白话：var arr=[];
2-2数组如何赋值：在建立数组的时候直接赋值(下面这种方式 给1个值 长度 多个值 是赋值)var arr1 = new Array(5, 3, 2, 1);
2-3数组的遍历:2-3-1.for遍历:for (var i = 0; i < arr2.length; i++) { console.log(arr2[i]); };
2-3-2使用for in 进行遍历:for (var index in arr2) { console.log(arr2[index]);}
2-3-3forEach 数组的自带方法 遍历:arr2.forEach(function (value, index, array) {console.log(value,index,array); });
2-3-4map 映射 将一个数组映射为另一个数组(功能写一半 可以当作遍历)
var list = [1, 2, 3, 4, 5, 6];
//[1,4,9,16,25,36]
//map 映射返回修改之后的集合
var newlist = list.map(function (value, index) {
return value * value
});
console.log(newlist);
list.map(function (value, index) {
console.log(value);
});
2-4累加器
var num = [1, 2, 3, 4];
var number = num.reduce(function (all, value) {
return all * value;
});
console.log(number);
2-5数组拼接方法
var a = [1, 2];
var b = [3, 4];
console.log(a.concat(b));
2-6字符串转化数组
var str = "abcdef";
var strarr = str.split("");
console.log(strarr);
2-7数组转化字符串
//join()
console.log(strarr.join(""));
2-8数组翻转
var s = [1, 2, 3, 4];
console.log(s.reverse());
将一串字符串 原位反转// “Hello World !” 转换成// “olleH dlroW !”
var ts = "Hello World !";
var tstemp = ts.split(" ");
console.log(tstemp);
//["Hello", "World", "!"]
var data = tstemp.map(function (value, index) {
return value.split("").reverse().join("");
});
console.log(data);
//"Hello World !"
console.log(ts.split("").reverse().join("").split(" ").reverse());
2-9数组自带的排序方法
var f1 = [1, 5, 2, 3, 6, 4];
console.log(f1.sort());//默认 小-大
//改变sort的排序方式
var f2 = f1.sort(function (n1, n2) {
console.log(n1, n2);
return n2 - n1;
});
console.log(f2);
2-10数组追加方法
var f3 = [1, 2, 3];
//f3[f3.length]=10;
//使用方法追加
//往数组后边追加
f3.push(20); //方法返回值 是数组追加之后的长度
console.log(f3);
//往数组之前追加
console.log(f3.unshift(0));
console.log(f3);
2-11两个删除
//删除数组后边的
console.log(f3.pop());
console.log(f3);
//删除数组前面的
console.log(f3.shift());
console.log(f3);
2-12检测的方法
//检测数组里面的每一位是否都满足要求
var has = f3.every(function (val, index) {
return val % 2 == 0;
});
console.log(has);//false
//过滤数组里面的元素 根据条件
var has1 = f3.filter(function (value) {
return value % 2 != 0;
});
console.log(has1);
2-13find 查找满足条件的
//根据调开始查找每一位 只要满足条的值 直接出
var has2 = f3.find(function (value) {
return value > 2;
});
console.log(has2);
//检测数组里面是否包含某个值
//数据类型一致
//返回值是bool值
console.log(f3.includes(2));
2-14查找数组中的值 有返回索引 没有返回-1
console.log(f3.indexOf(4));
console.log(f3.lastIndexOf(1));
2-15检测对象是否为数组
//Array.isArray 不能直接使用对象 点
//返回值bool
console.log(Array.isArray(f3));
2-16数组截取方法
var m1 = [1, 2, 3, 4];
console.log(m1.slice(0, 3)); //返回值是截取的值
//slice 截取之后 元素不受影响
console.log(m1);
console.log(m1.splice(0, 2));//返回值是截取的值
//splice 截取之后 元素受影响
// splice 后边可以继续写值 表示追加
console.log(m1);
console.log(m1.toString());
2-17valueOf 获取数组的原始值
var h1 = new Array('ab');
console.log(h1.valueOf());
console.log(h1);
var h2 = ['a', 'b'];
console.log(h2.valueOf());
2-18keys() 是es6 返回迭代器
var inter = m1.keys();
console.log(inter.next());
console.log(inter.next());
console.log(inter.next());
//返回数组里面的 键值对象
var en = m1.entries();
console.log(en.next());
console.log(en.next());
console.log(en.next());
console.log(en.next());
//检测 满足条件返回true /false
console.log(m1.some(function (val, index) {
console.log(val);
return val % 2 == 0;
}));
- 四种排序
3-1冒泡排序:从第一个元素开始，把当前元素和下一个索引元素进行比较。如果当前元素大，那么就交换位置，重复操作直到比较到最后一个元素
var arr=[1,2,3,9,8,7,6,5,1];
function bubbleSort(s){
if(Array.isArray(s)){
if(s.length==1){
return s;
}
var temp=null;
for(var i=0;i< s.length;i++){
for(var j=0;j< s.length-i-1;j++){
if(s[j]>s[j+1]){
temp=s[j];
s[j]=s[j+1];
s[j+1]=temp;
}
}
}
}
return s;
}
console.log(bubbleSort(arr));
3-2快速排序:在数据集之中，找一个基准点，建立两个数组，分别存储左边和右边的数组，利用递归进行下次比较。
var arrinfo = [1, 2, 3, 4, 5, 6,5, 4, 73];
function quickSort(array) {
if (Array.isArray(array)) {
if (array.length <= 1) {
return array;
}
var centerIndex = Math.ceil(array.length / 2);
var cValue = array.splice(centerIndex, 1);
var left = [];
var right = [];
array.forEach(function (value) {
if (value > cValue) {
left.push(value);
}
else {
right.push(value);
}
});
//递归
return quickSort(left).concat(cValue, quickSort(right));
}
}
console.log(quickSort(arrinfo));
3-3选择排序：遍历数组，设置最小值的索引为 0，如果取出的值比当前最小值小，就替换最小值索引，遍历完成后，将第一个元素和最小值索引上的值交换. 如上操作后，第一个元素就是数组中的最小值，下次遍历就可以从索引 1 开始重复上述操作。
function selectSort(array) {
if (Array.isArray(array)) {
if (array.length == 1) {
return array;
}
for (var i = 0; i < array.length - 1; i++) {
var minIndex = i;//默认当前的i最小
for (var j = i + 1; j < array.length; j++) {
minIndex = array[minIndex] < array[j] ? j : minIndex;
}
[array[i],array[minIndex]]=[array[minIndex], array[i]];
}
return array;
}
}
var arrinfo = [1, 9, 4, 2, 5, 3, 8, 6, 7];
console.log(selectSort(arrinfo));
3-4插入排序第一个元素默认是已排序元素，取出下一个元素和当前元素比较，如果当前元素大就交换位置。那么此时第一个元素就是当前的最小数，所以下次取出操作从第三个元素开始，向前对比，重复之前的操作。
var arrdata =[1, 9, 4, 2, 5, 3, 8, 6, 7];
function insertSort(arr) {
if (Array.isArray(arr)) {
if (arr.length == 1) {
return arr;
}
for (var i = 1; i < arr.length; i++) {
var current = arr[i];
var preIndex = i - 1;
while (preIndex >= 0 && arr[preIndex] < current) {
arr[preIndex + 1] = arr[preIndex];
preIndex--;
}
arr[preIndex + 1] = current;
}
return arr;
}
}
console.log(insertSort(arrdata));
总结： 1. getelementbyclassname是动态的；qyeryselectall是静态的
2.F12打开检查
3.for，for in通用；for each是数组特有的遍历，
4.数组分为真数组和类数组（集合）
5.面试常用的两个遍历：map（不写返回值就是遍历）
累计器reduce
6.slice取小不取大，对原数组无影响
7.数组里面存在索引 和 值 0:1
var arr2 = new Array();
arr2[0] = 1;
arr2[1] = “a”;
arr2[2] = true;
arr2[3] = function () {
}