数组
var arr = new Array(); // 用构造函数的方式创建一个空的数组
var arr = []; // 用字面量（直接量）的方式创建一个空的数组
eg：
var arr = new Array("a", "b", "c"); // 数组的3个成员（元素）
var arr = ["a", "b", "c"];
var arr = new Array(4); // 开辟了4个空间，每一个空间的内容没有定义
var arr = [undefined, undefined, undefined, undefined]
1.二维数组
var arr = [
["a", "b"],
["x", "y"]
];
console.log( arr[0][0] ); // "a"
2.三维数组
var arr = [
[
["a", "b", "c"]
]
];
console.log( arr[0][0][1] );
3.支持各种类型
var arr = [ "abc", 123, true, NaN, undefined, function(){}, [] ];
4.数组的操作方法
var arr = ["a", "b"]; var arr2 = ["x", "y"];
arr.push("c"); // 在末尾处追加
var item = arr.pop(); // 删除最后一个成员
var l = arr.unshift("xyz", 123, true); // 在开头处添加
var item = arr.shift(); // 删除第一个成员
arr.length = 4; // 可以设置长度
var r = arr.concat(arr, arr2); // 连接数组
数组转成字符串：
var arr = ["abc", "xy", 123];
var r = arr.join(); // "abc,xy,123"
var r = arr.join(""); // "abcxy123"
var r = arr.join(","); // "abc,xy,123"
var r = arr.toString(); // "abc,xy,123"
var r = arr.toLocaleString(); // "abc,xy,123"
var r = arr.toSource(); // '["abc", "xy", 123]'
var r = arr.valueOf(); // ["abc", "xy", 123]
数组倒置
var arr = ["a", "b", "c"];
var r = arr.reverse();
console.log(arr); // ["c", "b", "a"]
console.log(r); // ["c", "b", "a"]
数组截取
var arr = ["a", "b", "c", "d", "e", "f", "g"];
console.log( arr.slice(1, 4) ); // 下标大于等于1，并且小于4
console.log( arr.slice(-2) ); // ["f", "g"] 只有一个参数的话 代表截取从某位之后所有的
console.log( arr.slice(-4, -2) ); // ["d", "e"] 负数代表倒数第几位
数组排序
arr.sort(); // unicode编码进行排序
eg：
var arr = [1, 22, 3, 212];
arr.sort(); // unicode编码进行排序
console.log( arr ); // [1, 212, 22, 3]
获取下标
var arr = ["a", "a", "a"];
console.log( arr.indexOf("a") ); // 0 从左到右查找
console.log( arr.lastIndexOf("a") ); // 2 从右到左查找
forEach 循环
var arr = [1,2,3,4,5,] ;
arr.forEach(function(item,index){
console.log(item);
});
map遍历
let phone=['小米','三星','苹果','一加','乐视','OPPO','VIVO','魅族','联想'];
let newphone=phone.map((x)=>{
return x+'手机'
console.log(x)
})
console.log(phone,newphone)
reduce 归并
var values = [1, 2, 3, 4, 5]
// 只传一个函数，不设置归并初始值
var res1 = values.reduce(function(prev, cur, index, array){
return prev - cur;
})
// 传两个参数，给定归并初始值
var res2 = values.reduce(function(prev, cur, index, array){
return prev - cur;
}, 5)
alert(res1) // -13 1-2-3-4-5=-13
alert(res2) // -10 5-1-2-3-4-5=-10
reduceRight ( )
reduceRight ( ) 的功能与 reduce ( ) 相同，只不过是从后向前遍历，除此之外二者完全相同
filter 筛选
var result=[60,58,31,70,55,43,21,18,98,50,42,31,15,76,50,48,63,80,73,61];
let pass=result.filter((x)=>{
returnx>=60;
})
console.log(pass)
some 判断数组中是否存在符合条件的item判断为true则马上跳出循环并return成true
1、不创建新数组
2、不改变原数组
3、输出的是判断为true则马上跳出循环并return成true
4、回调函数参数，item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出，会循环数组每一项，并在回调函数中操作
var arr = [1,2,3,4,5] ;
var new1 = arr.some(function(item,index){
return item>2&&item<5 ; //判断出一个符合条件则跳出循环并输出true
})
var new2 = arr.some(function(item,index){
return item>5 ; //判断出数组全部元素都不符合条件则输出flase
})
console.log(new1); //true
console.log(new2); //false
console.log(arr); //[1,2,3,4,5]
every 判断数组中的item是否全部符合筛选条件
1、不创建新数组
2、不改变原数组
3、输出的是判断为false则马上跳出循环并return成false
4、回调函数参数，item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出，会循环数组每一项，并在回调函数中操作
排序：
冒泡排序：
依次比较相邻的两个值，如果后面的比前面的小，则将小的元素排到前面。依照这个规则进行多次并且递减的迭代，直到顺序正确。
var examplearr=[8,94,15,88,55,76,21,39];
function sortarr(arr){
for(i=0;i for(j=0;j if(arr[j]>arr[j+1]){ var temp=arr[j]; arr[j]=arr[j+1]; arr[j+1]=temp; } } } return arr; } sortarr(examplearr); console.log(examplearr); 两个循环 当i=0的时候，里面的循环完整执行，从j=0执行到j=6,这也就是第一遍排序，结果是将最大的数排到了最后，这一遍循环结束后的结果应该是[8,15,88,55,76,21,39,94] 当i=1的时候，里面的循环再次完整执行，由于最大的数已经在最后了，没有必要去比较数组的最后两项，这也是j 说到这里，规律就清楚了，每次将剩下数组里面最大的一个数排到最后面，当第一个循环执行到最后的时候，也就是i=6,此时，j=0,只需要比较数组的第一和第二项，比较完毕，返回。 选择排序 首先从原始数组中找到最小的元素，并把该元素放在数组的最前面，然后再从剩下的元素中寻找最小的元素，放在之前最小元素的后面，知道排序完毕。 var example=[8,94,15,88,55,76,21,39]; function selectSort(arr){ var len=arr.length; var minIndex,temp; console.time('选择排序耗时')； for(i=0;i minIndex=i; for(j=i+1;j if(arr[j] minIndex=j; } } temp=arr[i]; arr[i]=arr[minIndex]; arr[minIndex]=temp; } console.timeEnd('选择排序耗时'); return arr; } console.log(selectSort(example)); 快速排序： 1）在数据集之中，选择一个元素作为"基准"（pivot）。 2）所有小于"基准"的元素，都移到"基准"的左边；所有大于"基准"的元素，都移到"基准"的右边。 3）对"基准"左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。 var quickSort = function(arr) { if (arr.length <= 1) { return arr; } var pivotIndex = Math.floor(arr.length / 2); var pivot = arr.splice(pivotIndex, 1)[0]; var left = []; var right = []; for (var i = 0; i < arr.length; i++){ if (arr[i] < pivot) { left.push(arr[i]); } else { right.push(arr[i]); } } return quickSort(left).concat([pivot], quickSort(right)); }; 值传递和引用传递 1.值传递 function fn( b ){ // var b = 5 b = 10; } var a = 5; fn( a ); console.log( a ); 2.引用传递 function fn( b ){ // var b = a = ["x", "y"] b[0] = 123; // [123, "y"] } var a = ["x", "y"]; fn( a ); console.log( a ); //[123, "y"] 值传递还是引用传递，要看数据类型，如果是数组或对象，则执行引用传递 浅拷贝与深拷贝 1.浅拷贝 var a = [1,2]; var b = a; // 浅拷贝（把地址赋值过去了） b[1] = 3; a[0] = 4; console.log( a ); //[4,3] 2.深拷贝(把堆中的数据拷贝了一份，栈中指向新的地址) 实现方式： 2.1 JSON.parse(JSON.stringify(object)) 但是该方法也是有局限性的： 会忽略 undefined 会忽略 symbol 不能序列化函数 不能解决循环引用的对象 参考 2.2 对obj逐层遍历 2.3 lodash 的深拷贝函数 回调函数 把一个函数当成参数，传递给另一个函数的方式，叫做回调函数 fn( function(a){ alert(a) } ); 严格模式 1. "use strict"; // 设置当前代码为严格模式 a = 123; console.log( a ); //报错a is not defined 2. "use strict"; var x = 2; console.log(eval("var x = 5; x")); // 5 // 严格模式下，eval里面的x和外面的x，不是相同的变量 console.log(x); // 2 对象 数组和对象的相同点和不同点 相同点：用一个变量表示一系列的数据 不同点：数组仅存储具体的值；对象存储键值对（属性或方法的名字，属性或方法具体对应的数据） JS对象（创建） 构造函数 var obj = new Object(); obj.a = 1; obj.b = true; obj.c = "abc"; obj.fn1 = function(){ alert("fn1"); } 字面量(直接量) var obj = { a : 1, b : true, c : "abc", fn1 : function( arg1 ){ alert( arg1 ); } } obj.d = "xy"; obj.a = 102; obj.fn2 = function( x, y ){ alert( x+y ); } 对象是一系列数据的集合，每个数据必须由完整的键值对组成 键值对：属性名称 和 属性值 （ 方法名称 和 该方法对应的具体的函数 ） 属性就是变量；方法就是函数 JSON是什么？ JSON是JS的一种简单数据格式，JSON是JavaScript原生格式，它是一种严格的js对象的格式，JSON的属性名必须有双引号，如果值是字符串，也必须是双引号 var obj3={"width":100,"height":100,"name":"rose"}//JSON格式的JS对象 var obj4='{"width":100,"height":200,"name":"rose"}';/*我们可以把这个称做：JSON格式的字符串 */ var obj = { // 在定义一个对象时，键可以是任意写法（可以是单引号，可以是双引号，可以什么都不写） "abc" : 10, "xy" : 5, 'a' : "hello", 'b' : 'world', l : true, t : false, 5 : 4, // 在对象里面，直接写一个数字，是允许的，当成字符串处理 '5' : 3,// 相同的命名，后面把前面覆盖 "c-d" : 2 } 字符串转为对象： JSON.parse( str ) 对象转为字符串： JSON.stringify( obj ) 字符串转json对象， 属性名必须是双引号 var str = '{a:1}'; // 报错 var str = '{"a":1}'; // 正确 var str = "{'a':1}"; // 报错 字符串转js对象 console.log( eval(str) ); // 错误 console.log( eval("(" + str + ")") ); // 正确 eval("({a:1})") 中括号这种方法的作用：在我们不知道具体的属性名时（只有变量描述属性名），只能用中括号这种方法得到该属性。 点这种方法，是我们知道具体的属性名，然后可以直接通过点去得到该属性。 var obj = { "a" : 1, '0' : 456, fn : function(){alert()} } console.log( obj.a ); // 正确 console.log( obj['a'] );// 正确 console.log( obj["a"] );// 正确 //var str = "a"; //console.log( obj[a] ); // 报错 a is not defined 这里面的a，为全局变量 obj["fn"](); instanceof arr instanceof Array 判断arr在其原型链中是否存在 Array 这个构造函数的 prototype 属性 判断属性是否存在 var obj = { a : 1, b : 2 } console.log( 'a' in obj ); //true console.log( 'c' in obj ); //false 删除属性 console.log(delete obj.a) // delete 的返回值，表示是否删除成功 var str = new String("你好"); console.log( str, typeof(str) ); //String {"你好"} "object" var str2 = "你好"; console.log( str2, typeof(str2) ); //你好 string str.substring str.substr str.slice str.split 参数的作用：用哪一个字符串来分割 var str = "123|345|456"； console.log( str.split("|") ); // ["123","345","456"] var str = "abc123abc123"; console.log( str.split("a") ); // ["","bc123","bc123"] var str = "abcdef"; console.log( str.split("") ); // ["a", "b", "c", "d", "e", "f"] var str = "abcdef"; console.log( str.split() ); // ["abcdef"] str.charCodeAt ascii值 var str = "09azAZ"; console.log( str.charCodeAt(0) ); console.log( str.charCodeAt(1) ); console.log( str.charCodeAt(2) ); console.log( str.charCodeAt(3) ); console.log( str.charCodeAt(4) ); console.log( str.charCodeAt(5) ); 1(B) byte = 8 bit 1KB = 1024B 1MB = 1024KB 1GB = 1024MB 1TB = 1024GB Math.abs 取绝对值 Math.abs(-5) //5 Math.ceil 向上取整 console.log( Math.ceil(5.1) ); // 6 console.log( Math.ceil(-5.1) ); // -5 Math.floor 向下取整 console.log( Math.floor(5.1) ); // 5 console.log( Math.floor(-5.1) );//-6 min max 最大值 最小值 console.log( Math.max(5, 3, 6, 2, 91) ); //91 console.log( Math.min(5, 3, 6, 2, 91) ); //2 Math.pow(a,b) a的b次方 console.log( Math.pow(3, 4) ); // 3*3*3*3 console.log( Math.pow(3, 0) ); // 1 Math.random() 随机数 Math.random() 0-----1 Math.round 四舍五入 console.log( Math.round(5.7) ); //6 console.log( Math.round(0.7) ); //1 Math.sqrt 开方 console.log( Math.sqrt(9) ); //3 var date = new Date(); d2 = new Date("2017/1/3"); // 可以仅写 年月日 d3 = new Date("2017/1/3 8:1:1"); // 可以完整的写 年月日 时分秒 d4 = new Date(2017, 12, 3, 25, 10, 5); // 月份为0-11，所以当设置0时，表示1月份 d5 = new Date("2017-1-3"); console.log( d2 ); //Tue Jan 03 2017 00:00:00 GMT+0800 (中国标准时间) console.log( d3 ); //Tue Jan 03 2017 08:01:01 GMT+0800 (中国标准时间) console.log( d4 ); //Thu Jan 04 2018 01:10:05 GMT+0800 (中国标准时间) console.log( d5 ); //Tue Jan 03 2017 00:00:00 GMT+0800 (中国标准时间) date.toLocaleFormat() date.getYear() date.getFullYear() 获取date年份 date.setFullYear(2019) date.getMonth() 0表示1月，11表示12月 date.setMonth(5); date.getDate() 获取date日期 date.setDate(32) date.getTime() date这个时间和1970-1-1 8:0:0 的时间间隔（单位毫秒） date.setTime(3000) // 在1970-1-1 8:0:0 这个基础上，增加3秒 location.href location.href = "http://www.baidu.com"; 跳转 self.location.href;//当前页面打开URL页面 window.location.href;//当前页面打开URL页面 this.location.href;//当前页面打开URL页面 location.href;// 当前页面打开URL页面 parent.location.href;//在父页面打开新页面 top.location.href;//在顶层页面打开新页面 location.reload(); 重新加载页面 window.close(); 关闭窗口（只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。） history history.go( ) go(-1): 返回上一页，原页面表单中的内容会丢失；history.go(-1):后退+刷新；history.go(1) ：前进 back(): 返回上一页，原页表表单中的内容会保留；history.back():后退 ；history.back(0) 刷新； history.back(1)：前进 prompt 对话框 var r = prompt("标题", "abcd"); alert( r ); window.onload // 事件会在页面加载完成后触发。 window.onscroll //页面滚动条事件 window.onresize //onresize 事件会在窗口或框架被调整大小时发生 scrollTop scrollLeft scrollHeight scrollWidth clientHeight clientWidth innerHTML outerHTML innerText outerText innerHTML:从对象的起始位置到终止位置的全部内容,不包括Html标签。 outerHTML:除了包含innerHTML的全部内容外, 还包含对象标签本身。 eg： test1 test2 1）innerHTML的值是“test1 test2 ” 2）outerHTML的值是 outerText和innerText属性获取的值都是一样的，但是在设置内容的功能上有差别，outerText属性可以将原来元素节点被文本节点替换掉，而innerText不会 eg： window.onload=function(){ var top=document.getElementById("top"); var bottom=document.getElementById("bottom"); top.outerText="蚂蚁部落t"; top.innerText="蚂蚁部落b"; } 运行结果如下： setInterval 设置每隔一定时间调用某个函数 timer = setInterval(move, 1000); // 创建了一个定时器，用变量timer来表示 clearInterval( timer ); // 停止定时器 setTimeout 在指定的毫秒数后调用函数或计算表达式 优化：在调用定时器之前最好先进行所有定时器的清空操作 设置属性 1、 div1.setAttribute("title", "bbb"); console.log( div1.getAttribute("title") ); //bbb 2、 div1.attributes.abc = "456"; console.log( div1.attributes.abc ); 3、 div1.x = true; console.log( div1.x, typeof(div1.x) ); //true "boolean" div1.setAttribute("y", true); console.log( div1.getAttribute("y"), typeof(div1.getAttribute("y")) ); //true string var tmp = document.createDocumentFragment(); // 创建虚拟节点 for(var i=0; i<10; i++){ var li = document.createElement("li"); li.innerHTML = i; tmp.appendChild(li); // 将li标签放入虚拟节点里 //div1.appendChild(li); } div1.appendChild(tmp); // 将虚拟节点添加到页面上 nodeType 节点类型（节点类型共有12种） div1.nodeType // 1指元素节点 div1.attributes[0].nodeType // 2指属性节点 div1.firstChild.nodeType // 3指文本节点 nodeName 节点名称 nodeValue 节点值 ul1.firstChild //第一个子节点 ul1.lastChild //最后一个子节点 ul1.parentNode //父节点 ul1.childNodes[1].previousSibling //前一个兄弟节点 ul1.childNodes[1].nextSibling //后一个兄弟节点 document.createTextNode("文本内容"); // 创建一个文本节点 ul1.insertBefore(li1, li2) ; // 将li1这个元素节点，插入到li2这个元素节点的前面 #div1:after{ content : '内容'; color: green; font-size:40px; } console.log( getComputedStyle(div1, false)["background-color"] ); console.log( getComputedStyle(div1, null).backgroundColor ); console.log( getComputedStyle(div1, null).color ); console.log( div1.currentStyle['background-color'] ); // 在低版本IE下获取非行间样式 console.log( getComputedStyle(div1, ':after')["color"] ); document.createElement document.body.removeChild // 低版本IE不支持 console.log( document.getElementsByClassName("c") ); console.log( document.querySelector("#div1") ); console.log( document.querySelectorAll("div") );
js对象和json对象
点. 和 中括号[]
字符串
创建字符串对象
创建字符串
字符串方法：
Math
Date
BOM和DOM
BOM
DOM
定时器
属性
文档碎片
节点
获取样式
创建和删除元素
获取元素
data属性