数组
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<arr.length-1;i++){
for(j=0;j<arr.length-1-i;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<arr.length-1-i的巧妙之处,结果是[8,15,55,76,21,39,88,94]
说到这里,规律就清楚了,每次将剩下数组里面最大的一个数排到最后面,当第一个循环执行到最后的时候,也就是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<len-1;i++){
minIndex=i;
for(j=i+1;j<len;j++){
if(arr[j]<arr[minIndex]){
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 );
}
js对象和json对象
对象是一系列数据的集合,每个数据必须由完整的键值对组成
键值对:属性名称 和 属性值 ( 方法名称 和 该方法对应的具体的函数 )
属性就是变量;方法就是函数
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
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
Date
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秒
BOM和DOM
BOM
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):前进
DOM
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:
<div id="test">
<span style="color:red">test1</span> test2
</div>
1)innerHTML的值是“<span style="color:red">test1</span> test2 ”
2)outerHTML的值是<div id="test"><span style="color:red">test1</span> test2</div>
outerText和innerText属性获取的值都是一样的,但是在设置内容的功能上有差别,outerText属性可以将原来元素节点被文本节点替换掉,而innerText不会
eg:
<div id="top">蚂蚁部落top</div>
<div id="bottom">蚂蚁部落bot</div>
window.onload=function(){
var top=document.getElementById("top");
var bottom=document.getElementById("bottom");
top.outerText="<b>蚂蚁部落t</b>";
top.innerText="<b>蚂蚁部落b</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;
}
<div id="div1" >div</div>
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") );
网友评论