一、栈和队列
添加元素和删除元素的新方式
- 栈:先进后出
- 队列:先进先出
二、数组的API
- 开头添加元素
arr.unshif(值1,....);//修改原数组
- 开头删除元素
var first=arr.shift();//修改原数组 返回被删除的元素
- 结尾添加元素
arr.push(新值,...);//修改原数组
- 结尾删除元素
var last=arr.pop();//修改原数组 返回被删除的元素
<script>
var arr = [1,2,3,4,5]
// 开头添加
arr.unshift(-1,0)
console.log(arr)//[-1, 0, 1, 2, 3, 4, 5]
// 开头删除
arr.shift()
console.log(arr);//[0, 1, 2, 3, 4, 5]
// 结尾添加
arr.push(6,7,8,9)
console.log(arr)//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
// 结尾删除
arr.pop()
console.log(arr)//[0, 1, 2, 3, 4, 5, 6, 7, 8]
</script>
- 判断:返回的是布尔值
- every:每一个,要求所有元素都满足条件才会为true
var bool=arr.every(function(val,i,arr){
//val - 当前的值
//i - 当前的值的下标
//arr - 当前数组本身
return 判断条件;
})
- some:有一些,所有元素都不满足则为false
var bool=arr.some(function(val,i,arr){
return 判断条件;
})
<script>
// 判断 返回的是布尔值
var arr1 = [1,2,3,4,5]
var arr2 = [2,4,6,8,10]
// every 全部满足才满足
var bool1 = arr1.every(function(val,i,arr){
//val代表当前值 i代表当前值的下标 arr代表数组本身
return arr[i]%2==0//判断是否所有的都是偶数
})
var bool2 = arr2.every(val => val%2==0)
console.log(bool1);//false
console.log(bool2);//true
// some 全部不满足才不满足
var bool3 = arr1.some(function(val,i,arr){
return val%2!=0
})
var bool4 = arr2.some(function(val,i,arr){
return val%2!=0
})
console.log(bool3);//true
console.log(bool4);//false
</script>
- 遍历:拿到数组中的每个元素做相同 或 相似的操作
- forEach - 直接修改原数组
arr.forEach(function(val,i,arr){
直接做你想要的操作;
})
- map - 不修改原数组返回一个新数组
var newArr=arr.map(function(val,i,arr){
return 直接做你想要的操作;
})
<script>
var arr = [1,2,3,4,5,6,7,8,9,10]
// 遍历
// forEach 直接修改原数组
arr.forEach(function(val,i,arr){
arr[i]=val*2
})
console.log(arr)//[2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
// map 不修改原数组
var newArr = arr.map(function(val){
return val*2
})
console.log(arr)//[2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
console.log(newArr)//[4, 8, 12, 16, 20, 24, 28, 32, 36, 40]
</script>
- 过滤和汇总:
- 过滤:筛选出你需要的部分
var subArr=arr.filter(function(val,i,arr){
return 判断条件;
})
- 汇总:
var result=arr.reduce(function(prev,val,i,arr){
return prev+val;
},基础值)
<script>
var arr = [1,2,3,4,5,6,7,8,9]
// 过滤
var subArr = arr.filter(function(val,i,arr){
return val%2==0
})
console.log(subArr)//[2, 4, 6, 8]
// 汇总
var result = arr.reduce(function(pre,val,i,arr){
return pre+val
})
console.log(result)//45
</script>
二、二维数组
数组的元素又引用着另一个数组
何时:在一个数组,希望再次细分每个分类
- 创建:
var arr=[ ["张三",18,900],
["李四",19,1000],
["王五",20,700]
];
- 访问:arr[行下标][列下标];
- 列下标越界,返回undefined
- 行下标越界,得到是一个报错
- 遍历二维数组:必然两层循环,外层循环控制行,内层循环控制列
for(var r=0;r<arr.length;r++){
for(var c=0;c<arr[r].length;c++){
console.log(arr[r][c]);
}
}
三、ES6箭头函数
简化一切匿名回调函数的
- 固定公式: function去掉,()和{}之间添加=>,如果形参只有一个,那么()可以省略,如果函数体只有一句话,那么{}也可以省略,如果函数体只有一句话并且是return,那么return和{}都可以省略
四、String
- 什么是字符串: 多个字符组成的【只读】字符【数组】
- 和数组有相同点:
- 字符串中的个数:str.length;
- 获取字符串中的某个字符:str[i];
- 遍历字符串
- 所有数组不修改原数组的API,字符串也可以使用(concat、slice)
- 和数组也有很多不同的地方:
- 所有数组的直接修改原数组的API,字符串都不可以使用,比如排序只有数组可以使用
- 引用/对象类型:11个
- String、Number、Boolean -> 包装类型
- Array、Function、Date(日期)、Math(数学)、RegExp(正则:验证)
- Error(错误)
- Object(面向对象开发方式)
- Global(全局对象)- 只有在浏览器中被window对象代替了, 自然保存着全局变量和全局函数,只不过window可以省略不写,而在node.js中全局对象就叫做global
- 包装类型:
专门用于将原始类型的值封装为一个引用类型的对象的
- 为什么:原始类型的值原本就是没有任何属性和方法,意味着原始类型本身是不支持.去做任何操作的
- 但是前辈们发现字符串经常会被我们程序员所操作,为了方便我们程序员将这三个人提供了包装类型(提供了属性和方法)
- 何时使用:只要你试图使用原始类型的变量调用属性或方法的时候,自动包装
- 何时释放:方法调用完毕后,自动释放包装类型,又变成了原始类型
- 为什么null和undefined不能使用. - 因为前辈们没有给他们俩提供包装类型
五、周期性定时器
每过一段时间就会自动执行一次
- 开启:
timer=setInterval(function(){
操作;
},间隔毫秒数)
- 停止: clearInterval(timer)
- 鼠标移入:onmouseover
- 鼠标移出:onmouseout
六、案例
淡出淡入轮播
<body>
<div class="box" id="box">
<img class="active" src="./images/1.jpg" alt="">
<img src="./images/2.jpg" alt="">
<img src="./images/3.jpg" alt="">
<button><</button>
<button>></button>
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 淡出淡入轮播
var btns = document.getElementsByTagName('button')
var imgs = document.getElementsByTagName('img')
var lis = document.getElementsByTagName('li')
var j = 0
for (var i in btns) {
btns[i].onclick = function () {
if (this.innerText == '>') {
animate(1)
} else {
animate(-1)
}
}
}
for (var i = 0; i < lis.length; i++) {
lis[i].index = i
lis[i].onclick = function () {
for (var i in lis) {
lis[i].className = ''
imgs[i].className = ''
}
this.className = 'active'
imgs[this.index].className = 'active'
}
}
timer = setInterval(function () {
animate(1)
}, 1000)
box.onmouseover = function () {
clearInterval(timer)
}
box.onmouseout = function () {
timer = setInterval(function () {
animate(1)
}, 1000)
}
function animate(num) {
j += num
if (j > imgs.length - 1) {
j = 0
}
if (j < 0) {
j = imgs.length - 1
}
for (var i in imgs) {
imgs[i].className = ''
lis[i].className = ''
}
imgs[j].className = 'active'
lis[j].className = 'active'
}
</script>
</body>