JavaScript——函数（Math、数组、字符串、Date、定时器）

函数、Math、定时器、时间对象、数组、字符串

---

函数

函数：实现某个功能的代码块

作用：1. 提高代码利用率。2. 分隔作用域。3. 防止命名冲突。4. 释放内存

声明

function test(){
  console.log("...");
}

调用

• 无参

  test();
  

• 有参

  function add(a,b){
    return {a,b};
  }
  
  

  a,b是形参数，50,100是实参

  var x = add(50,100);
  

• arguments 函数内置数组

  1. 当形参和实参数量不匹配 可以不写形参 直接通过 arguments 接收参数
  2. 当参数较多 可以使用 arguments 接收参数

  function sum(a,b,c,d){
    console.log(arguments);
    var sum = 0;
    for(var i = 0; i < arguments.length; i++){
      sum = sum + arguments[i];
    }
    return sum;
  }
  console.log(sum(2,3,4,5,6,7););
  

作用域

• 变量在函数内声明，变量为局部变量，具有局部作用域。

  局部变量：只能在函数内部访问。

  // 此处不能调用 carName 变量
  function myFunction() {
      var carName = "Volvo";
      // 函数内可调用 carName 变量
  }
  

• 变量在函数外定义，即为全局变量，具有全局作用域。

  全局变量：网页中所有脚本和函数均可使用

  var carName = " Volvo";
  // 此处可调用 carName 变量
  function myFunction() {
    // 函数内可调用 carName 变量
  }
  

Math方法

• 取绝对值 Math.abs(x)
• 返回x的y次幂 Math.pow(x,y)
• 返回x的算数平方根 Math.sqrt(x)
• 返回几个数的算术平方根 Math.max(x,y,...)
• 返回几个数中的最小值 Math.min(x,y,...)
• 四舍五入取整 Math.round(x.xx)
• 向上取整 Math.ceil(x.xx)
• 向下取整 Math.floor(x.xx)
• 随机数 取 0-1 之间的小数 Math.randow()
• 取整(向下取整) parseInt(x.xx)

随机数

取两个数之间的随机整数

function getRandom(max,min){
  return Math.floor(Math.random()*(max-min+1)+min);
}

function getRandom(max,min){
  return Math.round(Math.random()*(max-min)+min);
}

随机变色

box.style.backgroundColor="rgb("+getRandom(0,255)+','+getRandom(0,255)+','+getRandom(0,255)+')';

定时器

callback : 回调函数 把函数当作一个参数传到另一个函数中

setInterval(callback,time) 每隔固定时间代码执行一次

var time1=setInterval(function(){
  console.log("Hello World");
},1000);

setTimeout(callback,time) 延迟固定时间执行一次 只执行一次

setTimeout(function(){
  alert("hello 我不吃");
},2000);

clearInterval(time) 移除定时器

clearInterval(time1);

随机抽取

<script>
    var num = document.getElementsByTagName('div');
    var btn = document.getElementsByTagName('button')[0];

    function fun() {
        for (var i = 0; i < num.length; i++) {
            num[i].innerHTML = `${Math.round(Math.random() * 10)}`
        }
    }
    fun();
    var time;

    var flag = 0;
    btn.onclick = function () {
        flag++;
        if (flag == 1) {
            time = setInterval(function () {
                fun();
            }, 50);
        }
        setTimeout(function(){
            flag = 0;
            clearInterval(time);
        },1000);
    }
</script>

时间

JS脚本内置了Date对象，该对象为我们提供了一些列操作时间和日期的方法。

---

• 创建时间对象

  1. 不传参 获取的是当前的时间

  2. 可以传参 获取的是指定的时间

     字符串"2022-8-23 00:00:00"

     数字 2022, 7, 23表示 2022-08-23 月份的取值范围[0-11]

  var date = new Date();
  

  var date = new Date('2023-1-21 00:00:00');
  

• 获取年 getFullYear()

  var year=date.getFullYear();
  

• 获取月 getMoth()

  var month=date.getMonth();
  

• 获取日 getDate()

  var day=date.getDate();
  

• 获取周几 getDay()

  var w=date.getDay();
  

• 获取时、分、秒 getHours() 、 getMinutes() 、 getSeconds()

  var h=date.getHours();
  var m=date.getMinutes();
  var s=date.getSeconds();
  

• 获取时间戳 getTime()

  获取距离1970.1.1的毫秒数

  var ss=date.getTime();
  

距离某天的时间

距离春节时间

• 先计算出 当天 和 某天的时间戳
• 然后得到 当天 距离 某天 的毫秒数
• 将毫秒数转化为秒
• 然后通过秒数计算出天、小时、分、秒

var t=document.querySelector('p');
function sett(){
  var date1 = new Date();
  var date2 = new Date('2023-1-21 00:00:00');
  var date1_ss =date1.getTime();
  var date2_ss =date2.getTime();
  var numS=Math.floor((date2_ss-date1_ss)/1000);
  var s=numS%60;
  var m=(numS-s)%(3600);
  var h=(numS-s-m)%(3600*24);
  var d=(numS-s-m-h);
  // console.log(numS,d/(3600*24),h/3600,m/60,s);
  t.innerHTML=(`${d/(3600*24)}天${h/3600}小时${m/60}分${s}秒`)
}
time1=setInterval(function(){
  sett();
},1000)

数组

• 将数组分隔为字符串 join()

  参数：一个参数，把数组分割为字符串，不传参数默认用逗号分隔

  返回值：分割后的字符串

  var arr=['苹果','橘子','香蕉'];
  console.log(arr.join('-'));
  

• 向数组末尾添加 push() 改变原数组

  参数：添加到数组的内容

  返回值：Number 数组新长度

  arr.push('榴莲');
  

• 向数组开头添加 unshift() 改变原数组

  参数返回值同上

  arr.unshift('榴莲')
  

• 删除数组最后一项 pop() 改变原数组

  arr.pop();
  

• 删除数组开头一项 shift() 改变原数组

  arr.shift();
  

• 删除/添加/替换 splice() 改变原数组

  1. 删除 splice(下标，删除的个数)

     // 删除下标1的元素
     arr.splice(1,1);
     

  2. 添加 splice(下标,0,添加的个数)

     // 从下标为1的位置依次插入'菠萝','草莓'
     arr.splice(1,0,'菠萝','草莓');
     

  3. 替换 splice(下标,删除的个数,替换的项)

     // 将下标为2的元素替换为'葡萄'
     arr.splice(2,1,'葡萄');
     

• 排序 sort() 改变原数组

  数组排序 如果单个数组 默认通过ASCII排序

  参数：比较函数

  返回值：排序后的数组

  var arr2=[2,36,23,8,19,0];
  arr2.sort(function(v1,v2){
      return v2-v1;
  })
  // return的值>0 进行交换
  // 1->[36,2,23,8,19,0]
  // 2->[36,23,2,8,19,0]
  // 3->[36,23,8,2,19,0]
  // 4->[36,23,8,19,2,0]
  // 5->[36,23,8,19,2,0]
  // v1->v2 v2->0
  

• 反转数组 reverse() 改变原数组

  参数：无

  返回值：排序后的数组

  arr.reverse()
  

• 拼接数组 concat() 不改变原数组

  参数：多个参数可以是数组也可以是其他类型

  返回值：新构建的数组

  var food=['米饭','馒头','面条'];
  food.concat('烤鸭','烤羊腿');
  

• 截取数组 slice() 不改变原数组

  一个参数：数组下标，返回该参数位置开始到末尾的所有项

  两个参数：数组下标，返回起始和结束位置之间的项，但不包括结束位置的项

  var animal=['猴儿','熊猫','狗子','孔雀','猴儿','老鼠'];
  console.log(animal.slice(3));
  console.log(animal.slice(0,3));
  

• 从前向后查找 indexOf()

• 查找

  一个参数：元素

  两个参数：元素,下标（从该下标开始向前/向后查找）

  返回值：返回元素的下标值，找不到元素返回-1

  1. 从前向后 indexOf()

     animal.indexOf('熊猫');
     animal.indexOf('猴儿',1);
     

  2. 从后向前 lastIndexOf()

     animal.lastIndexOf('孔雀');
     animal.lastIndexOf('猴儿',4);
     

数组去重

方法1

var numArr=[99,45,89,45,99,99,23,56,0,2,0];
for(var i=0;i<numArr.length;i++){
    for(var j=i+1;j<numArr.length;j++){
        if(numArr[i]===numArr[j]){
            numArr.splice(j,1);
            j--;
        }
    }
}

方法2

var numArr=[99,45,89,45,99,99,23,56,0,2,0];
var arr=[];
for(var i=0;i<numArr.length;i++){
    if(!arr.includes(numArr[i])){
        arr.push(numArr[i]);
    }
}

方法3

var numArr=[99,45,89,45,99,99,23,56,0,2,0];
var arr=new Set(numArr);
console.log(arr);

字符串

字符串的方法不改变原字符串，和数组不同

---

• 返回字符串中字符 charAt()

  参数：数字索引

  返回值：字符

  var str='hello world'
  console.log(str.charAt(5));
  console.log(str[6]);
  

• 拼接字符串 concat()

  参数：任意多个参数都可

  返回值：拼接后的字符串

  str.concat('hello');
  

• 截取字符串

  一个参数：截取索引开始位置一致到结束

  两个参数：截取是一个范围

  slice()

  str.slice(1);
  

  substring()

  str.substring(1,5);
  

• 查找

  一个参数：查找内容 eg: “h”,“he”

  两个参数：查找内容,下标（从该下标开始向前/向后查找）

  返回值：返回内容的下标值，找不到返回-1

  1. 从前向后 indexOf()

     var str = "hello world";
     str.indexOf('lo');
     str.indexOf('l',5);
     

  2. 从后向前 lastIndexOf()

     str.lastIndexOf('r');
     

• 删除前后所有空格 trim()

  参数：无

  返回值：删除后的新字符串

  str.trim();
  

• 大小写转换

  转小写 toLowerCase()

  转大写 toUpperCase()

  str.toUpperCase();
  str.toLowerCase();
  

• 字符串分隔为数组 split()

  参数：分隔符

  返回值：数组

  var str = "banan";
  var arr = str.split('n');
  // 分隔后的数组arr = ['ba','a'];
  

• 替换字符串

  参数：要替换的字符,被替换的字符

  返回值：替换完的新字符串

  replace() 只替换一次

  var s = "abcat";
  var s1 = s.replace('a','1');
  // s1 = "1bcat"
  

  replaceAll() 替换所有

  var s = "abatabac";
  var s1 = s.replaceAll('ba','12');
  // s1 = a12t12c
  

反转字符串

var newStr='hello world';
var str=[];
str = newStr.split('');
str = str.reverse();
newStr = str.join('');
console.log(newStr);