JS语法基础

最新推荐文章于 2023-05-09 19:08:55 发布
最新推荐文章于 2023-05-09 19:08:55 发布
阅读量3.1k 收藏
点赞数
分类专栏： 网页学习 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43978754/article/details/110150733
版权
1.if语句的题目练习难点：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js函数</title>
    <script type="text/javascript">
        let num=prompt("请输入一个星期数：");
        switch (+num){//输入的是字符串，必须要转换成实数
            case 1: 
                   alert("星期1");
                   break;
            case 2:
                   alert("星期2");
                   break;
            case 3:
                   alert("星期3");
                   break;
            case 4:
                   alert("星期4");
                   break;
            case 5:
                   alert("星期5");
                   break;
            case 6:
                   alert("星期6");
                   break;
            case 7:
                   alert("星期7");
                   break;
            default:
                   alert("滚回火星去");
        }
//企业开发中，如果某个条件下不止一个表达式，需要用if语句。而不用三目运算符。
    </script>
</head>
<body>
    <!--body内的注释格式-->
</body>
</html>
2.数组的重点：
（1）构造数组、取数组元素，更改数组元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js数组</title>
    <script type="text/javascript">
        //创建数组，但是可以随时扩充，其他的跟C语言的数组的使用相同。
        //js的数组中可以混合存储不同类型的数据。
        //内存不会挨在一起，不能用指针进行寻找,但是会尽量存的近一些，效率高。
        //document.write(arr1);将会输出该数组内所有的数据。
        let arr1=new Array(1,2,3,4); 
        arr1[4]="Romantic";
        arr1[5]=true;
        let arr2=new Array(10); //10是size,将来还可以扩容
        arr2[1]=100;
        arr2[100]=10;
        let arr3=[10,9,8,7,6];
        let arr4=new Array();  //空数组
        document.write(arr1);    //将会输出该数组内所有的数据
        document.write(arr1[1]);
        document.write("<br>")
        document.write(arr2[1]);
        document.write("<br>")
        document.write(arr2[100]);
        document.write("<br>")
        document.write(arr2[99]);
        document.write("<br>")
        document.write(arr3[1]);
        document.write("<br>")
        document.write(arr2[1000]);   //不会报错，显示undefined
    </script>
</head>
<body>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js数组</title>
    <script type="text/javascript">
        //document.write(arr1);将会输出该数组内所有的数据。
        let arr1=new Array(1,2,3,4); 
        arr1[4]="Romantic";
        arr1[5]=true;
        let [a,b,c,d,e,f]=arr1;    
        //解构的要求必须结构相同,若个数不相同那就从左往右依次赋值，多的就不管了。
        let [m,n,p]=[1,2,[3,4]];   //m=1,n=2,p=[3,4];
        console.log("m="+m);
        console.log("n="+n);
        console.log("p="+p);
        
        let [g,q]=[5,6,7];  //个数不相同，g=5,q=6;
        console.log("g="+g);
        console.log("q="+q);
        
        let [x,y,z]=[-1];  //个数不够，多出来的没有赋值就是undefined
        console.log("x="+x);
        console.log("y="+y);
        console.log("z="+z);

        let [i,j=10,k=100]=[-10];  //也可以给左边某些元素赋默认值，如果后期再次覆盖则默认值会被覆盖。
        console.log("e="+i);
        console.log("f="+j);
        console.log("k="+k);    
      
        //扩展运算符...,但是扩展运算符只能写在最后
        let [l,...r]=[-10,-20,-30]; 
        console.log("l="+l);
        console.log("r="+r); 
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

（2）数组元素的增、删、改
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js数组</title>
    <script type="text/javascript">
        //1.替换多个元素的内容
        let arr1=new Array(1,2,3,4); 
        arr1.splice(1,2,"Sean","Xiao");  //表示arr1从第一个元素开始替换两个元素的内容,参数1开始，参数2是修改的数目，参数3开始是新的内容。
        
        //2.1在数组最后增加新的数据(可以增加多个数据，用,隔开即可)，并返回新数组的长度
        let res=arr1.push("1005","Romantic");
        console.log("length="+res);
        console.log(arr1);
        
        //2.2在数组最前面增加新的数据(可以增加多个数据，用,隔开即可)，并返回新数组的长度
        let new_length=arr1.unshift("小梦","JianGuo");
        console.log("new_length="+new_length);
        console.log(arr1);
        
        //2.3在数组最后删除数据(只能删一个)，并返回删除的数据
        let a=arr1.pop();
        console.log("delete_a="+a);
        console.log("length="+arr1.length);
        console.log(arr1);
        
        //2.4删除数组最前面的数据(只能删除一个)，并返回删除的数据
        let b=arr1.shift();
        console.log("delete_b="+b);
        console.log("new_length="+arr1.length);
        console.log(arr1);
        
        //定位删除某个下表为i得元素
        arr1.splice(1,1);  //从索引元素为1（参数1）的位置开始删除1个元素（参数2）
        console.log(arr1);
    </script>
</head>
<body>
</body>
</html>
（3）有关数组的函数：清空=[]、数组转成字符串toString、数组转成指定结构的字符串join("*")、数组的拼接concat、数组的反转reverse、数组的截取slice、查找元素的位置indexOf(lastIndexOf)、判断数组中是否存在某个元素includes。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js数组</title>
    <script type="text/javascript">
        let arr=new Array(10,20,30,40);
        //1.清空数组，三种方式。arr=[]或者arr.length=0或者arr.splice(0,arr.length);
        /*
        arr=[];
        arr.length=0;
        arr.splice(0,arr.length);
        console.log(arr);
        */
        
        //2.如何将数组转化为字符串
        /*
        let str=arr.toString();
        console.log(str);
        console.log(typeof str);
        */
        
         //3.1如何将数组转化为指定字符串的结构
        /*
        let str=arr.join();   //默认情况下与toString()一样
        console.log(str);
        console.log(typeof str);
        */
        
        //3.2如果传递了参数，该参数就会成为元素之间的连接符号
        /*
        let str=arr.join("+");   
        console.log(str);
        console.log(typeof str);
        */
        
        //4.1两个数组的拼接,切忌使用+拼接，会转成字符串拼接在一起
        //不会修改原有的数组，会生成返回新的数组
        /*
        let arr1=[1,2,3];
        let arr2=[4,5,6];
        let res=arr1.concat(arr2);
        console.log("arr1="+arr1);
        console.log("arr2="+arr2);
        console.log("拼接后的数组为"+res);
        */
        
        //4.2
        /*
        let arr1=[1,2,3];
        let arr2=[4,5,6];
        //在这里需要注意，在解构数组中讲过，...在等号左边表示将剩余的数据打包成一个数组赋值给相应的变量。...在等号的右面表示将数组中所有的数据解开放在所在的位置。
        let res=[...arr1,...arr2];
        console.log("arr1="+arr1);
        console.log("arr2="+arr2);
        console.log("拼接后的数组为"+res);
        */
        
        //5.数组的反转arr.reverse
        /*
        let arr1=[1,2,3,4,5,6];
        console.log("arr1="+arr1);
        arr1.reverse();
        console.log("修改后的arr1="+arr1);
        */
        
        //6.如何截取数组中指定范围的数据slice(注意不是splice!!!),slice不会改变arr1数组，而且包头不包尾，只会返回所取位置的数组。但是splice不同，会包含尾部。
        /*
        let arr1=[1,2,3,4,5,6];
        console.log("arr1="+arr1);
        let res=arr1.slice(1,3)  //包头不包尾！！！
        console.log("arr1="+arr1);
        console.log("res="+res);
        */
        
        //7.查找元素的位置,indexOf默认从左向右找，找到结束返回相应的下标值，找不到返回-1
        //indexOf(参数1，参数2)，参数1表示要查找的元素，参数2表示从哪里开始查找
        //lastIndexOf()表示从右边往左查找
        /*
        let arr1=[1,2,3,4,3,6];
        console.log("arr1="+arr1);
        let a=3,laca;
        loca=arr1.lastIndexOf(a);  
        console.log(a+"的位置为："+loca);
        */
        
        //8.查找数组中是否存在某个元素，可以用indexOf或者lastIndexOf判断结果是否为-1.
        let arr1=[1,2,3,4,3,6];
        console.log("arr1="+arr1);
        let a=4,judge;
        judge=arr1.includes(a);
        console.log("数组arr1包含："+ a+"元素？"+judge);
    </script>
</head>

<body>
</body>
</html>
（4）数组的一些其他有关操作：

将字符串分割成数组：split

<script type="text/javascript">
        let str=prompt("请输入三个数字用,隔开");
        let arr=str.split(",");   //split函数，将字符串分割，并返回分割后形成的数组
        console.log(arr);
</script>

在这里插入图片描述

在这里插入图片描述

a.用户输入一串数字，然后排序输出。:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js数组</title>
    <script type="text/javascript">
        /*
        let str=prompt("请输入三个数字用,隔开");
        let arr=str.split(",");   //split函数，将字符串分割，并返回分割后形成的数组
        for(let i=1;i<=9;i++){
            if(arr[0]==i || arr[1]==i || arr[2]==i){ //类型不同，不能用includes/===
                continue;
            }
            console.log(i);
        }
        */
        
        let str=prompt("请输入三个数字用,隔开");
        let arr=str.split(","),num;   //split函数，将字符串分割，并返回分割后形成的数组
        num=new Array(10);
        for(let i=0;i<arr.length;i++){
            num[arr[i]]=666;
        }
        for(let j=1;j<10;j++){
            if(num[j]===666)
                continue;
            else{
                console.log(j);
            }
        }
    </script>
</head>
<body>
</body>
</html>

b.用户输入一串数字，然后排序输出。(该方法有缺陷，不能输入负数！):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js数组</title>
    <script type="text/javascript">
        //用户输入一串数字，然后排序输出。
        let arr=[1,3,5,3,7,5];
        let res=new Array(10),str;
        res.fill(0);
        for(let i=0;i<arr.length;i++){
            str=arr[i];
            res[str]+=1;
        }
        for(i=1;i<=9;i++){
            for(let j=1;j<=res[i];j++){
                document.write(i);
                document.write("<br>");
            }
        }
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述
c.选择排序和冒泡排序:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js数组</title>
    <script type="text/javascript">
        //用户输入一串数字,然后排序输出,选择排序。
        let arr=[1,9,2,6,3,-1,20,8],temp;
        n=arr.length;
        /*
        for(let i=0;i<n;i++){
            for(let j=i+1;j<n;j++){
                if(arr[i]>arr[j]){
                    temp=arr[i];
                    arr[i]=arr[j];
                    arr[j]=temp;
                }
            }
        }
        */
        
        //冒泡排序
        for(let i=1;i<n;i++){
            for(let j=0;j<=n-i-1;j++){
                if(arr[j]>arr[j+1]){
                    temp=arr[j+1];
                    arr[j+1]=arr[j];
                    arr[j]=temp;
                }
            }
        }
        for(let i=0;i<n;i++){
            console.log(arr[i]);
        }
    </script>
</head>

<body>
</body>
</html>
一只呆桃酱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
题目总结
qq_41564928的博客
10-20 1239
1. localstorage 和 sessionstorage 的区别 1.sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。（浏览器关闭后不可使用） 2.localStorage：将数据保存在客户...
js语法基础详细思维导图
03-12
js语法基础思维导图
JS 之基本语法 & html结合
xiongfeng
10-20 1564
JS之 基本语法 & 与html相结合 & JS的可变参数arguments 一、关于JavaScript概述: 1.简单性 JavaScript是一种脚本编写语言，它采用小程序段的方式实现编程， 像其它脚本语言一样，JavaScript同样已是一种解释性语言，它提供了一个简易的开发过程。 2.动态性 JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经 过Web服务程序。它对用
JavaScript基础语法
m0_67683346的博客
11-02 5062
javascript中的一些基础语法
JavaScript语法基础思维导图
一一
08-24 621
JavaScript的基础语法
m0_72161237的博客
05-09 2560
对于 JavaScript 认知： 1️⃣是世界上最流行的编程语言之一 2️⃣是一个脚本，通过解释器运行 3️⃣主要在客户端（浏览器）上运行，现在也可以基于 node.js 在服务器端运行 那么JavaScript 能做哪些事情呢？ 网页开发(更复杂的特效和用户交互) 网页游戏开发 服务器开发(node.js) 桌面程序开发(Electron, VSCode 就是这么来的) 手机 app 开发
学习笔记 JavaScript基础语法（全）
weixin_63676550的博客
01-15 5708
JavaScript基础语法学习笔记，视频教程链接放在末尾
JavaScript语法基础
博客之家
05-25 243
JS基础语法 1.在页面中显示HelloWorld 2.在页面中循环显示HelloWorld
js语法基础
weixin_72636693的博客
08-31 54
javascript 语法基础 想学习js的朋友可以看看
10-29
javascript 语法基础，都是一些大体的说下常见问题，适合有点别的程序基础的朋友。
javascript基础语法总结.pdf
07-02
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
JavaScript 语法基础教学课件
05-08
JavaScript 语法基础教学课件
JavaScript基础语法之js表达式
10-22
主要介绍了JavaScript基础语法之js表达式 的相关资料,需要的朋友可以参考下
vue js基础语法
weixin_58286934的博客
09-30 595
什么是vue vue是目前前端主流的js框架，它和库的区别在于： 库是更多是一个封装好的特定的集合，提供给开发者使用，而且是特定于某一方面的集合(方法和函数)，库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度理解库; 框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发。 当前主流的前端框架除了Vue还有React、Angular Vue有什么优势 Vue.js是一套
使用python绘制好看的箱形图、柱状图、散点图
05-26
使用python绘制好看的箱形图、柱状图、散点图
ipython-8.11.0.tar.gz
最新发布
05-26
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
libaa1-1.4.0-1.30.aarch64.rpm
05-26
安装：rpm -i xx.rpm
javascript语法基础
08-25
JavaScript语法基础包括数据类型、运算符、选择结构和循环结构。在JavaScript中，所有的类型都是用var关键字来修饰。常见的数据类型包括字符串、数字、布尔值、数组和对象等。 JavaScript中的运算符包括算术运算符...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值