JavaScript学习笔记

title: JavaScript笔记
tags: JavaScript
categories: WEB

DOM

<body>
<img src="20190325.jpg" id = "sakura">
<script>
    var sakura = document.getElementById("sakura");
    var flag = false;
    sakura.onclick = function () {
        if(flag){
            sakura.src="1542983908(1).jpg";
            flag= false;
        }
        else {
            sakura.src="20190325.jpg";
            flag=true;
        }
    }
</script>
</body>
</html>

BOM

window对象

轮播图

setInterval 重复执行

setTimeout 执行一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
<img src="img1.jpg" id = "img" width="100%" height="200px">

<script>
    var img = document.getElementById("img");
    var num = 1 ;
    function fun() {
        num++
        if (num>3){
            num =1;
        }
        img.src="img"+num+".jpg";
    }
    setInterval(fun,1000);
</script>
</body>
</html>

Location

实现点击后几秒再跳转其他页面

<a href="#" id="href">baidu</a>
<p>
    <span id =time ></span>
</p>
<script>
    var href = document.getElementById("href");
    href.onclick=function () {
        setInterval(showtime,1000);
    }
    var second = 5;
    function showtime() {
        second -- ;
        if(second==0){
            location.href="https://www.baidu.com/";
    }
        var time = document.getElementById("time");
        time.innerHTML = second+"秒后，自动跳转。。。。";
}

let/var

let 在if/for内定义，在外面就访问不到

 <script>
    for(var i =0 ;i<5 ;i++){
      console.log(i);
    }
    console.log(i);

    for(let j =0; j<5;j++){
      console.log(j);
    }
    console.log(j)
  </script>

函数

箭头函数

<script>
    //箭头函数
    var greeting = ()=>{
      console.log("hello");
    };
    greeting();
    //一个参数 括号可以去掉
    var greeting2 = name =>{
      console.log(name+" say hello");
    }
    greeting2("ssinoo");
    // 多个参数
    var greeting3 = (name,age)=>{
      console.log(name+"is"+age);
    }
    greeting3("ssinoo","20")
    // 有返回值 传x 返回 x+1
    var increment = x=>x+1;
    console.log(increment(6));
  </script>

自执行函数

 <script>
    var num1 =10;
    //自执行函数
    (function(){
      var num1 = 20;
      console.log(num1);
    })
    //调用方法
    ();
    console.log(num1);
  </script>

回调函数

<script>
    //回调函数
    function request(cb){
      console.log("请求数据");
      cb("success");
      console.log("请求结果");
    }
    request(result =>{
      console.log("执行回调");
      console.log("执行结果为:"+result);
    })
  </script>

数组

删除数组 spice

spice() : 删除数组中元素（索引位置，删除数量，添加的数组）

<script>
    var arr =[1,2,3,4];
    //索引，几个 从索引为2开始 删除1个。
    arr.splice(2,1)
    console.log(arr); //[1, 2, 4]
    //删除为索引2开始,1个。并添加了[7,8,9]
    arr.splice(2,1,7,8,9)
    console.log(arr);
  </script>

栈模式 push pop

栈：先进后出

push 在数组后面添加元素

pop 删除数组最后面的元素

 <script>
    var stack =[1,2,3];
    stack.push(4,5,6);
    console.log(stack);
    //删除最后一个元素
    var last =stack.pop();
    console.log(stack);
  </script>

队列模式 shift unshift

队列：先进先出

shift: 删除数组第一个元素

unshift:在数组最前面添加元素

<script>
    var queue =[1,2,3]
    queue.push(4,5,6);
    console.log(queue)
    // 删除第一个
    queue.shift();
    console.log(queue);
    //在数组前添加
    queue.unshift(7,8,9)
    console.log(queue);
  </script>

数组排序

<script>
    var arr =[1,4,2,5,3];
    //升序
    arr.sort()
    console.log(arr);
    //实现降序
    // arr.sort((a,b)=>{
    //   if(a>b){
    //     return -1
    //   }else if(a<b){
    //     return 1
    //   }else{
    //     return 0
    //   }
    // })
    arr.sort((a,b)=>b-a)
    console.log(arr);
  </script>

数组连接 concat

concat()

 var arr1 =[1,2,3];
    var arr2 =[4,5,6];
    arr1.concat(arr2)

数组裁切 slice

<script>
    var arr =[1,2,3,4,5,6];
    //包头不包尾 从索引1开始，-2(倒数第2个)
    console.log(arr.slice(1,-2));
  </script>

reduce函数

reduce 有4个返回值：

上一次计算的结果
当前遍历到的数组元素
当期遍历到的索引
数组本身

 <script>
    var arr =[1,2,3,4];
    
      arr.reduce((per,curv,curi,arr)=>{
       console.log(per);
       console.log(curv); 
       console.log(curi); 
       console.log(arr); 
       console.log("-----");
      })
      console.log(arr.reduce((f,s)=>f+s,5));
  </script>