JavaScript 初学习_js点击替换时,将段落替换为一张图片怎么弄-CSDN博客

本文链接：https://blog.csdn.net/m0_62309595/article/details/124771052

使用 push() 操作数组

一个将数据添加到数组末尾的简单方法是 push() 函数。

.push() 接受一个或多个参数（parameters），并把它压入到数组的末尾。

使用 pop() 操作数组

改变数组中数据的另一种方法是用 .pop() 函数。

.pop() 函数用来弹出一个数组末尾的值。我们可以把这个弹出的值赋给一个变量存储起来。换句话说就是 .pop() 函数移除数组末尾的元素并返回这个元素。

使用 shift() 操作数组

pop() 函数用来移出数组中最后一个元素。如果想要移出第一个元素要怎么办呢？

这时候我们就需要 .shift() 了。它的工作原理就像 .pop()，但它移除的是第一个元素，而不是最后一个。

使用 unshift() 操作数组

不仅可以 shift（移出）数组中的第一个元素，也可以 unshift（移入）一个元素到数组的头部。

.unshift() 函数用起来就像 .push() 函数一样，但不是在数组的末尾添加元素，unshift() 在数组的头部添加元素。

相等运算符

会做强制类型转换

使得number类型和string可以比较

严格相等运算符

不做类型转换

使用 Switch 语句从许多选项中进行选择

测试 case 值使用严格相等（===）运算符进行比较。 break 告诉 JavaScript 停止执行 switch 语句。如果遗漏了 break ，下一个语句将会被执行。

函数中arguments的用法

里面存储了所有传递过来的实参

他是一个伪数组

他并不是一个真正意义上的数组

1.具有数组的length属性

2.按照索引的方式进行存储

3.没有真正数组的一些方法比如pop() push()等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function fn(){
            console.log(arguments);
            console.log(arguments.length);
            console.log(arguments[2]);
        }
        fn(1,2,3);
        fn(5,6,7,8,9);
    </script>
</head>
<body>
    
</body>
</html>

显示出的效果图：

（按F12）

JS中的预解析

1.js引擎运行js分为两步：预解析代码执行

（1）预解析 js会把所有的var和function提升到当前作用域的最前面

（2）代码执行按照代码从上到下的顺序书写代码

2.预解析分为变量预解析（变量提升）和函数预解析（函数提升）

注：变量提升就是把所有变量声明提升到当前作用域最前面，不提升赋值操作

创建对象

对象字面量

利用new object创建对象

利用等号 = 赋值的方法添加对象的属性和方法

利用构造函数创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Hero(uname,utype,ublood,uattack){
            this.name=uname;
            this.type=utype;
            this.blood=ublood;
            this.attack=uattack;
        }
        var lp=new Hero('廉颇','力量型',500,'近战');
        var hy=new Hero('后裔','射手型',100,'远程');

        console.log(lp.name);
        console.log(lp.type);
        console.log(hy.name);
        console.log(hy.type);
    </script>
</head>
<body>
    
</body>
</html>

注：

1.构造函数首字母需要大写

2.构造函数不用return

3.使用构造函数必须要new

遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Hero(uname,utype,ublood,uattack){
            this.name=uname;
            this.type=utype;
            this.blood=ublood;
            this.attack=uattack;
        }
        var lp=new Hero('廉颇','力量型',500,'近战');
        var hy=new Hero('后裔','射手型',100,'远程');
        for(var i in lp){
            console.log(i);//输出的是属性名
            console.log(lp[i]);//输出的是值
        }
    </script>
</head>
<body>
    
</body>
</html>

输出：

Math 对象

Math数学对象不是一个构造函数直接使用里面的属性的方法即可

1.Math.PI

console.log(Math.PI); //3.141592653589793

2.Math.abs()

//绝对值方法
        console.log(Math.abs(1)); // 1
        console.log(Math.abs(-1)); // 1
        console.log(Math.abs('-1')); // 1 隐式转换

3.Math.floor() Math.ceil() Math.round()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //往小了取值
        console.log(Math.floor(1.1)); // 1
        console.log(Math.floor(1.9)); // 1
        console.log(Math.floor(-1.1)); //-2
        
        //ceil 往大了取值
        //round 四舍五入取值
        console.log(Math.round(-1.1)); //-1
        console.log(Math.round(-1.9)); //-2

        //其他数字都是四舍五入 但是.5比较特殊 他往数字较大的一方取值
        console.log(Math.round(-1.5)); //-1
    </script>
</head>
<body>
    
</body>
</html>

4.Math.random()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //不带参数 随机值  0 <= x < 1
        console.log(Math.random());

        //得到两个数之间的随机整数
        function getRandom(min,max){
            return Math.floor(Math.random()*(max-min+1))+min;
        }

        console.log(getRandom(1,100));
    </script>
</head>
<body>
    
</body>
</html>

Date对象

Date是构造函数必须使用new来调用创建我们的日期对象

Date对象的构造

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //参数常用的写法 数字型：2019,10,01 或者是 字符串型 '2019-10-1 8:8:8'
        var day=new Date(2019,10,1);
        //但是要注意此时输入的是10月 默认是11月 
        var day1=new Date('2019-10-1');
        console.log(day);
        console.log(day1);
    </script>
</head>
<body>
    
</body>
</html>

Date内置的方法

简单算法之时分秒补全两位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function getTime(time){
            var h=time.getHours();
            h=h<10?'0'+h:h;
            var m=time.getMinutes();
            m=m<10?'0'+m:m;
            var s=time.getSeconds();
            s= s<10?'0'+s:s;
            return h+':'+m+':'+s;
        }
        var time=new Date();
        console.log(getTime(time));
    </script>
</head>
<body>
    
</body>
</html>

获得总的毫秒数（相对于1970年1月1日）

重要案例：倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //倒计时案例
        //核心算法：输入时间的总毫秒数减去现在时间的总毫秒数 得到剩余时间的总毫秒数
        //将剩余时间总毫秒数转换为天 时 分 秒 
        function countDown(time){  //传入截止日期
            var nowTime=+new Date(); //返回的是当前时间的总毫秒数
            var inputTime=+new Date(time);
            var times=(inputTime-nowTime)/1000; //毫秒换算成秒
            
            //强制转换为Int类型
            var d=parseInt(times/60/60/24);
            d=d<10?'0'+d:d;
            var h=parseInt(times/60/60%24);
            h=h<10?'0'+h:h;
            var m=parseInt(times/60%60);
            m=m<10?'0'+m:m;
            var s=parseInt(times%60);
            s=s<10?'0'+s:s;
            return d+'天'+h+'时'+m+'分'+s+'秒';
 
        }

        console.log(countDown('2022-5-30 0:0:0'));
    </script>
</head>
<body>
    
</body>
</html>

数组对象

创建数组

两种方式检测是否为数组

筛选数组

（将大于2000的从数组中删除）

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
     <title>Document</title>
     <script>
        var arr=[100,6000,5000,800,60,3];
        function select(array){
            var newArr=[];
            for(var i=0;i<array.length;i++){
                if(array[i]<=2000){
                    //注：newArr的下标从零开始
                    //法一：
                    //newArr[newArr.length]=array[i];
                    //法二：
                    newArr.push(array[i]);
                }
            }
            console.log(newArr);
        }
        select(arr);
     </script>
 </head>
 <body>
     
 </body>
 </html>

数组排序

如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；

如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。备注： ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；

如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。
compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
     <title>Document</title>
     <script>
        var arr=[100,6000,5000,800,60,3];
        //翻转数组 reverse()
        var newArr=arr.reverse();
        console.log(newArr);

        //排序 sort函数 要实现升序需要添加一个函数 
        arr.sort(function(a,b){
            return a-b; //升序
        })
        console.log(arr);
     </script>
 </head>
 <body>
     
 </body>
 </html>

索引

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

重要案例：给数组去重

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
     <title>Document</title>
     <script>
        //给数组去重
        //算法：遍历旧数组 用旧数组元素去查询新数组 如果该元素在新数组中没有出现 就将其添加进新数组中
        var arr=[1,5,8,7,5,1,9,5,7,2]

        function quchong(arr){
            var newArr=[];
            for(var i=0;i<arr.length;i++){
                if(newArr.indexOf(arr[i])===-1){
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }

        var newArr=quchong(arr);
        console.log(newArr);
     </script>
 </head>
 <body>
     
 </body>
 </html>

转换为字符串

toString()

toString() 返回一个字符串，表示指定的数组及其元素。

const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());
// expected output: "1,2,a,1a"

join(分隔符)

可以选择分隔符默认为逗号

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

数组合并

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

Splice（）

Array.prototype.splice() - JavaScript | MDN

字符串

索引

案例返回字符位置

例：查找字符串 'nabdsnjnzncjznk' 所有n出现的位置以及出现的次数

核心算法：

1.先查找第一个n出现的位置

2.当返回结果不是-1时继续向后查找

3.开始检索的位置是index+1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str='nabdsnjnzncjznk';
        var index=str.indexOf('n');
        var cnt=0;
        while(index!=-1){
            console.log(index);
            cnt++;
            index=str.indexOf('n',index+1);
        }
        console.log(cnt);
    </script>
</head>
<body>
    
</body>
</html>

根据位置返回字符

案例：统计出现最多的字符

前提内容：（先判断对象里有没有这个属性）

对象 [ ' 属性名 ' ]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var people={
            name: 'peter'
        }
        if(people['name']){
            console.log('include');
        }else{
            console.log("didn't include" );
        }
    </script>
</head>
<body>
    
</body>
</html>

算法：

1. 利用charAt() 遍历这个字符串

2. 将每个字符都存储给对象如果对象没有该属性就为1 如果存在就+1

替换字符 replace

replace ( ' 被替换的字符 ' ，' 替换成的字符 ' )

只会替换第一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str='bsdadkjandkanla';
        console.log(str.replace('a','b'));
    </script>
</head>
<body>
    
</body>
</html>

替换全部：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str='bsdadkjandkanla';
        console.log(str.replace('a','b'));
        while(str.indexOf('a')!==-1){
            str=str.replace('a','b');
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>