JavaScript-day07

17 阅读3分钟

一、栈和队列

添加元素和删除元素的新方式
  • :先进后出
  • 队列:先进先出

二、数组的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>
  • 判断:返回的是布尔值
  1. every:每一个,要求所有元素都满足条件才会为true
var bool=arr.every(function(val,i,arr){
        //val - 当前的值
        //i - 当前的值的下标
        //arr - 当前数组本身
        return 判断条件;
})
  1. 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>
  • 遍历:拿到数组中的每个元素做相同 或 相似的操作
  1. forEach - 直接修改原数组
arr.forEach(function(val,i,arr){
        直接做你想要的操作;
})
  1. 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>
  • 过滤和汇总:
  1. 过滤:筛选出你需要的部分
var subArr=arr.filter(function(val,i,arr){
    return 判断条件;
})
  1. 汇总:
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[行下标][列下标];
    1. 列下标越界,返回undefined
    2. 行下标越界,得到是一个报错
  • 遍历二维数组:必然两层循环,外层循环控制行,内层循环控制列
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

  • 什么是字符串: 多个字符组成的【只读】字符【数组】
  • 和数组有相同点:
    1. 字符串中的个数:str.length;
    2. 获取字符串中的某个字符:str[i];
    3. 遍历字符串
    4. 所有数组不修改原数组的API,字符串也可以使用(concat、slice)
  • 和数组也有很多不同的地方:
    1. 所有数组的直接修改原数组的API,字符串都不可以使用,比如排序只有数组可以使用
  • 引用/对象类型:11个
    1. String、Number、Boolean -> 包装类型
    2. Array、Function、Date(日期)、Math(数学)、RegExp(正则:验证)
    3. Error(错误)
    4. Object(面向对象开发方式)
    5. Global(全局对象)- 只有在浏览器中被window对象代替了, 自然保存着全局变量和全局函数,只不过window可以省略不写,而在node.js中全局对象就叫做global
  • 包装类型: 专门用于将原始类型的值封装为一个引用类型的对象的
    1. 为什么:原始类型的值原本就是没有任何属性和方法,意味着原始类型本身是不支持.去做任何操作的
    2. 但是前辈们发现字符串经常会被我们程序员所操作,为了方便我们程序员将这三个人提供了包装类型(提供了属性和方法)
    3. 何时使用:只要你试图使用原始类型的变量调用属性或方法的时候,自动包装
    4. 何时释放:方法调用完毕后,自动释放包装类型,又变成了原始类型
    5. 为什么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>