1、concat()
用于连接两个数组，生成一个新的数组
arrayNew.concat(array1,array2,arrsy3)
2、
for (var i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i)
}, 1000)
};
输出 10个10
（setTimeout是异步执行的，1000毫秒后向任务队列里添加一个任务，只有主线上的全部执行完才会执行任务队列里的任务，所以当主线程for循环执行完之后 i 的值为10，这个时候再去任务队列中执行任务，i全部为10）
for (let i = 0;i<=3;i++) {
setTimeout(function(){
console.log(i);
},1000)
}
输出结果为 0 1 2 3
for(var i=0; i<=3; i++){
!function(i){
setTimeout(function(){
console.log(i); //输出的结果为1，2，3
},0);
}(i)
}
输出结果为 0 1 2 3
var、let、const的区别
var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
3、parseInt(string,raix)
解析字符串，返回一个整数
parseInt("10") //10
parseInt("19",10) //10+9=19
parseInt("11",2) //2+1=3
parseInt("17",8) //8+7=15
parseInt("1f",16) //16+15=31
parseInt("010"); //未定：返回 10 或 8
4、var x = 1; x++ 先输出再运算 ++x先运算再输出
console.log(x++); //1
console.log(x); //2
console.log(++x); //3
console.log(x); //3
var y=2;
console.log(y++); //2
console.log(y); //3
console.log(++y); //4
console.log(y); //4
============================================================
1、banner轮播特效 计时器 setIntetval
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.contianer {
position: relative;
width: 1200px;
overflow: hidden;
margin: 0 auto;
}
.banner-img {
height: 460px;
background-repeat: no-repeat;
display: none;
}
.active-img {
display: block;
}
.banner-01 {
background: url('img/bg1.jpg');
}
.banner-02 {
background: url('img/bg2.jpg');
}
.banner-03 {
background: url('img/bg3.jpg');
}
.dots {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
text-align: center;
}
.dots span {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 10px;
border: 1px solid #000;
margin-right: 10px;
}
.active-dot {
background-color: #000;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.6);
}
.prev {
position: absolute;
top: 50%;
margin-top: -40px;
left: 0;
display: block;
width: 40px;
height: 80px;
transform: rotate(180deg);
background: url('img/arrow.png') no-repeat 15px 26px;
}
.next {
position: absolute;
top: 50%;
margin-top: -40px;
right: 0;
display: block;
width: 40px;
height: 80px;
background: url('img/arrow.png') no-repeat 15px 26px;
}
</style>
</head>
<body>
<div class="contianer">
<div class="banner">
<a href="javascript:;">
<div class="banner-img banner-01 active-img"></div>
</a>
<a href="javascript:;">
<div class="banner-img banner-02"></div>
</a>
<a href="javascript:;">
<div class="banner-img banner-03"></div>
</a>
</div>
<div class="dots">
<span class="active-dot"></span>
<span></span>
<span></span>
</div>
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var baLen = $('.banner a').length;
var index = 0;
var timer = null;
// 定时器
function startLun() {
timer = setInterval(function() {
index++;
if (index >= baLen) {
index = 0;
};
baLun();
}, 2000)
}
// 定时器停止
function stopLun() {
clearInterval(timer);
}
// banner轮播
var baLun = function() {
$('.banner div').removeClass('active-img');
$('.banner div').eq(index).addClass('active-img');
$('.dots span').removeClass('active-dot');
$('.dots span').eq(index).addClass('active-dot');
};
// dots点击
$('.dots span').click(function() {
console.log(index);
index = $(this).index();
baLun();
});
// 左右箭头点击
$('.next').click(function() {
index++;
if (index >= baLen) {
index = 0;
}
baLun();
});
$('.prev').click(function() {
index--;
if (index <= 0) {
index = baLen - 1;
}
baLun();
});
// 鼠标滑过计时器停止
$('.banner').hover(function() {
stopLun();
}, function() {
startLun();
})
</script>
</body>
</html>
2、splice(index,howmany)
向数组中删除/添加项目
移除数组的第三个元素，并在数组第三个位置添加新元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");
输出
Banana,Orange,Lemon,Kiwi,Mango
slice(start,end)
从已有的数组中返回选定的元素
slipt(separator,howmany)
分割
var str="How are you doing today?"
document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you
=========================================
1、forEach 不理解怎么用的
// ES5
var funcs2 = [];
for (var i = 0; i < 5; i++) {
funcs2.push(
(function(value) {
return function() {
console.log(value)
}
})(i)
)
};
funcs2.forEach(function(funcs2) {
funcs2();
})
// ES6
var funcs3 = [];
for (let i = 0;i<5;i++) {
funcs3.push(function(){
console.log(i);
})
}
funcs3.forEach(func=>func());
2、Spread Operator 展开运算符 即三个点...
组装对象或者数组
//数组
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]
//对象
const alp = { fist: 'a', second: 'b'}
const alphabets = { ...alp, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项
===========================================================
08/22
1、var和function的预解析问题,以及变量和function的先后顺序的问题
此阶段浏览器只是对var、function、函数形参进行一个解析的准备过程。而且在这个“预解析”过程中，有一个预解析先后顺序，即函数的形参 -> function -> var。而且重名时预留函数、后来者覆盖前者。预解析结果形参如果有值则解析到值，没有则为underfined，函数则解析到整个函数体，变量都为underfined；这道题目中没有参数出现，所以先不讨论。所以这道题在“预解析”时，函数声明权重优先会被提升
网友评论