欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

pythonweb day10

程序员文章站 2022-06-13 13:22:15
...

pythonweb day10

目录

 

1.数组的API

2.数组的进出栈操作

3.二维数组

4.JS中的内置对象


1.数组的API

  1. toString()
    作用:将数组中的元素转换为字符串返回
    返回值:字符串
    et:
    var arr = [1,2,3];
    var s = arr.toString();
    console.log(s);  //'1,2,3'
  2. join()
    作用:将数组中的元素连接成一个字符串并返回
    返回值:字符串
    参数:可选,如果省略参数,默认元素之间使用,连接。可以给参数,指定元素之间的连接符
  3. reverse()
    作用:反转数组元素
    返回值:数组,会改变数组的原有结构
     
  4. sort()
    作用:对数组中元素进行排序
    返回值:数组,会改变数组原有结构
    参数:可选,自定义排序函数
               默认按照元素的Unicode()码升序排列
    1. 升序的排序函数函数
      function sortAsc(a,b){
          return a - b;
      }
      arr.sort(sortAsc);
      解释:
      1.sortAsc函数接收两个参数,会自动将数组中相邻的两个元素传递给参数
      2.如果返回值>0,交换两个元素的位置,否则不变
    2. 匿名函数作为排序函数,直接写在() 中
      arr.sort(function (a,b){return b-a;});
      <!DOCTYPE html>
      <html>
      <head>
      	<title></title>
      	<meta charset="utf-8">
      	<script type="text/javascript">
      		//1.toString() 将数组元素转成字符串并返回
      		var arr = [10,20,40];
      		var s = arr.toString();
      		console.log(arr,s); //[10, 20, 40] "10,20,40"
      
      		//2.join()
      		console.log(arr.join()); //10,20,40
      		var s2 = arr.join('-');
      		var s3 = arr.join(' ');
      		console.log(s2,s3); //10-20-40 10 20 40
      
      		//3.reverse() 反转数组元素
      		var arr2 = arr.reverse();
      		console.log(arr2,arr); //[40, 20, 10]  [40, 20, 10]
      
      		//4.排序sort()
      		var array = [11,15,20,25,22];
      		console.log(arr.sort(),array.sort()); //[10, 20, 40] [11, 15, 20, 22, 25]
      		var array2 = ['h','A','z','V']; 
      		console.log(array2.sort()); //["A", "V", "h", "z"]
      
      		function sortAsc(a,b){
      			//升序
      			return a-b;
      		}
      		function sortDec(a,b){
      			//降序
      			return b-a;
      		}
      		//由于非数字字符串没有办法减操作
      		console.log(array2.sort(sortDec));
      		console.log(array.sort(sortDec)); // [25, 22, 20, 15, 11]
      
      
      	</script>
      </head>
      <body>
      
      </body>
      </html>

       

2.数组的进出栈操作

  栈结构:遵循先进后出原则
  栈操作可以快速操作数组中的头尾元素

  1. push(data)
    入栈操作,向数组的尾部添加元素,可以是一个或多个
    返回值:返回新数组的长度
    et:
    arr[arr.length] = 'hello';
    arr.push('Hi');
    arr.push(10,20); //多个数据之间只用,隔开
  2. pop()
    出栈操作,删除数组尾部元素
    返回值:返回被删除的元素
  3. unshift()
    向数组头部添加一个或多个元素
    返回最终数组的长度
  4. shift()
    删除数组中头部元素
    返回被删除的元素
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<meta charset="utf-8">
    	<script type="text/javascript">
    		//定义数组
    		var arr = [10,20,30];
    		//1.push()向数组末尾添加元素
    		var length = arr.push(40);
    		console.log(arr,length);
    		arr.push('50','60');
    		console.log(arr,arr.length);
    
    		//2.pop() 删除并返回数组中最后一个元素
    		var elem = arr.pop();
    		console.log(arr,elem);
    
    		//3.unshift() 向数组头部添加一个或多个元素
    		//变量提升
    		console.log(arr,arr.unshift(1,2,3),arr);
    
    		//4.shift() 移除并返回头部元素
    		console.log(arr,arr.shift());
    
    
    	</script>
    </head>
    <body>
    
    </body>
    </html>

    pythonweb day10

3.二维数组

  1.   数组中每个元素又是一个数组
    语法:
    var arr = [[10,5,3],[20,23],[30,13]];
    console.log(arr.length); //3

    //向二维数组中添加元素
    arr[1][2] = 50;

    //访问二维数组中元素
    console.log(arr[2][0]); //30
    et:
    var books = [
        ['西游记','三国演义','红楼梦','水浒传'];
        ['西游记','三国演义','红楼梦','水浒传'];
    ];
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<meta charset="utf-8">
    	<script type="text/javascript">
    		var arr = [[10,5,3],[20,23],[30,13]];
    		console.log(arr.length);
    		arr[1][3] = 510;
    		console.log(arr[1],arr[2][1]);
    	</script>
    </head>
    <body>
    
    </body>
    </html>

    pythonweb day10

  2. 练习:随意录入一个数字,将数字转换成对应的二进制并输出
    10转换二进制:除2取余,倒序排列余数
    10 / 2 = 5 ...0
    5  /  2 = 2 ...1
    2  /  2 = 1 ...0
    1  /  2 = 0 ...1
    10的二进制1010
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<meta charset="utf-8">
    	<script type="text/javascript">
    		function decode2Bin(){
    			var num = Number(prompt('输入数字'));
    			var arr = [];
    			while(num != 0){
    				arr[arr.length] = num % 2;
    				num = parseInt(num / 2);
    				
    				
    			}
    			//显示二进制
    			arr.reverse();
    			console.log(arr.join(''));
    		}
    		decode2Bin();
    	</script>
    </head>
    <body>
    
    </body>
    </html>
     

4.JS中的内置对象

  1. 对象:由属性和方法组成,使用点语法访问内部属性和方法
    arr.length;
    arr.sort();
  2. 对象分类
    1. 内置对象 - ES 提供的
    2. BOM 浏览器对象模型
    3. DOM 文档对象模型
    4. 自定义对象 - 函数
  3. 字符串 - String
    1. 声明字符串 
      var str = 'hello';
      var str2 = new String('字符串2');
      var str3 = String('字符串3');
      注意:只有内置对象再创建时可以省略new关键字
    2. 属性
      length:表示字符串的长度
      var s = '你 好 坏';
      console.log(s.length);  //5
    3. 常用方法
      1. 英文大小写转换
        1. toUpperCase()
          将英文字符串转换为全大写字母
        2. toLowerCase()
          将英文字符串转换为全小写字母
          注意:大小写转换操作会返回新的字符串,不影响原本字符串
          <!DOCTYPE html>
          <html>
          <head>
          	<title></title>
          	<meta charset="utf-8">
          	<script type="text/javascript">
          		//1.创建字符串
          		var s1 = 'hello';
          		var s2 = 'hello world';
          		var s3 = new String('Hello World');
          		var s4 = String('你好');
          
          		//2.获取字符串长度
          		console.log(s1.length);
          		console.log(s2.length);
          
          		//遍历字符串,输出每一位字符串
          		for(var i = 0; i < s2.length; i ++){
          			console.log(s2[i]);
          		}
          
          		//3.转换大小写
          		var str1 = s3.toUpperCase();
          		var str2 = s3.toLowerCase();
          		console.log(str1,str2);
          		console.log(s3);
          	</script>
          </head>
          <body>
          
          </body>
          </html>
          pythonweb day10

          练习:
          1. 创建一个数组,初始化内容,由英文大小写字母和数字0-9组成
          2. 生成随机验证码(多少位的验证码是可以设置的)
            使用随机下标访问数组元素
            随机数:Math.random();
            数组的下标范围[0,length-1]
          3. 通过prompt 提示给用户,接收用户输入
          4. 判断用户输入的验证码是否匹配,
            用户输入不区分大小
            给出提示,验证码输入是否正确
            示例:
            <!doctype html>
            <html lang="en">
             <head>
              <meta charset="UTF-8">
              <meta name="Generator" content="EditPlus®">
              <meta name="Author" content="">
              <meta name="Keywords" content="">
              <meta name="Description" content="">
              <title>Document</title>
              <script>
            	//1. 创建数组
            	var arr = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g'];
            	//2. 生成四位随机验证码
            	var show = '';
            	for(var i = 0; i < 4; i ++){
            		//随机到数组中取元素
            		var index = parseInt(Math.random() * arr.length); //[0,length-1]
            		show += arr[index];		
            	}
            	//3. 提示用户并接收输入
            	var input = prompt("验证码为"+show);
            
            	//4. 判断是否一致
            	if(input.toUpperCase() == show.toUpperCase()){
            		alert("输入正确");
            	}else{
            		alert("输入有误");
            	}
            
            
              </script>
             </head>
             <body>
              
             </body>
            </html>

            函数示例:
             

            <!doctype html>
            <html lang="en">
             <head>
              <meta charset="UTF-8">
              <meta name="Generator" content="EditPlus®">
              <meta name="Author" content="">
              <meta name="Keywords" content="">
              <meta name="Description" content="">
              <title>Document</title>
              <script>
            	function generalCode(len){
            		//生成验证码
            		var arr = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g'];
            		var vCode = "";
            		for(var i = 0; i < len; i ++){
            			var index = parseInt(Math.random() * arr.length);
            			vCode += arr[index];
            		}
            		return vCode;
            	}
            	function validateCode(){
            		//生成验证码
            		var vCode = generalCode(6);
            		//提示用户并接收输入
            		var input = prompt("验证码为"+vCode);
            		//4. 判断是否一致
            		if(input.toUpperCase() == vCode.toUpperCase()){
            			alert("输入正确");
            		}else{
            			alert("输入有误");
            		}
            	}
              </script>
             </head>
             <body>
            	<button onclick = "validateCode();">点击验证</button>
             </body>
            </html>

             

      2. 读取指定位置的字符
        1. 读取指定位置的字符
          charAt(index);
          et:
          var str = 'hello world';
          var s = str.charAt(6);
          console.log(s); //w
          返回指定位置的字符
        2. 获取指定位置字符对应的Unicode码
          charCodeAt(index);
          et:
          var str = 'abc';
          var res = str.charCodeAt(1);
      3. 检索字符串
        1. indexOf(value,fromIndex)
          value:要查找的字符串
          fromIndex:从指定的下标位置开始向后查找,
          可选参数,默认为0
          返回值:返回value 第一次出现的下标位置,如果查找失败,返回-1
        2. lastIndexOf(value,fromIndex)
          返回值:返回value最后一次出现的下标位置
          <!doctype html>
          <html lang="en">
           <head>
            <meta charset="UTF-8">
            <meta name="Generator" content="EditPlus®">
            <meta name="Author" content="">
            <meta name="Keywords" content="">
            <meta name="Description" content="">
            <title>Document</title>
            <script>
          	var str = "Hello World";
          	//1. 获取指定位置的字符
          	var s = str.charAt(9);
          	console.log(s);
          
          	//2. 获取指定位置字符对应的Unicode编码
          	var s2 = str.charCodeAt(9);
          	console.log(s2);
          	var str2 = "杨超越";
          	var s3 = str2.charCodeAt(0);
          	console.log(s3);
          	console.log(s3.toString(16));
          	//已知中文字符对应的16进制编码为 6768
          	var str3 = "\u6768";
          
          	//3. 获取指定字符对应的下标
          	var index = str.indexOf("l"); //hello world
          	console.log(index); //2
          	var lastIndex = str.lastIndexOf("l");
          	console.log(lastIndex);
          
          	//邮箱 : aaa@qq.com
          	var mailStr = "aaa@qq.com";
          	var atIndex = mailStr.indexOf("@");
          	console.log(atIndex);
          	//获取最后一个n的下标
          	console.log(mailStr.lastIndexOf('n',atIndex));
          	console.log(mailStr.indexOf('b'));
          
          	//分割字符串
          	var str = "abc-def-tgb-kda";
          	var res2 = str.split('-');
          	console.log(res2);
          	var res3 = str.split('.');
          	console.log(res3);
          
          
          
            </script>
           </head>
           <body>
            
           </body>
          </html>

          pythonweb day10

      4. 截取字符串
        substring(startIndex,endIndex);
        返回指定下标范围内 startIndex - endIndex -1
        对应的字符串
        练习:
        1. 从指定邮箱中截取用户名
          @之前的所有字符是用户名
        2. 从制定的邮箱中截取服务商名称
          @之后的字符串
        3. 对身份证号操作,提取其中的生日
          1970年01月01日
          <!doctype html>
          <html lang="en">
           <head>
            <meta charset="UTF-8">
            <meta name="Generator" content="EditPlus®">
            <meta name="Author" content="">
            <meta name="Keywords" content="">
            <meta name="Description" content="">
            <title>Document</title>
            <script>
          		function subMail(){
          			var input = prompt("请输入邮箱");
          			//用户名 0 - @符号的前一位
          			var uname = input.substring(0,input.indexOf("@"));
          			//运营商 @符号后面的字符串
          			var atIndex = input.indexOf("@");
          			var mailServer = input.substring(atIndex + 1);
          			console.log(uname,mailServer);
          		}
          		subMail();
          
          		//提取身份证号
          		function getBirth(){
          			var userID = "41152719940415627X";
          			var year = userID.substring(6,10);
          			var month = userID.substring(10,12);
          			var day = userID.substring(12,14);
          			console.log(year,month,day);
          		}
          		getBirth();
          
            </script>
           </head>
           <body>
            
           </body>
          </html>

           

      5. 分割字符串
        split(seperator);
        将字符串按照指定字符分割,拆分成若干个小字符串返回数组,数组中存放小字符串
        练习:
        提交订单,会将购物车中的商品信息发送给后台
        1845_5&1834_2&3199_7
        获取商品信息
        商品ID  商品数量
        1845     5
        1834     2
        3199     7
      6. 模式匹配
        1. 作用
          配合正则表达式完成字符串的查找和替换
        2. 正则表达式
          语法:/正则格式/修饰符
          修饰符:
          i:ignorecase忽略大小写
          g:global 全局匹配
          m:multiple 多行匹配
          et:
           
          1. /\d{2,6}/g
          2. var str = '垃圾都要扔到垃圾箱里';
            /垃圾/g
        3. 字符串方法
          1. replace(subtr/regexp,replacement)
            作用:在一个字符串中,将substr或者是满足正则格式的字符串替换为 replacement
          2. match(substr/regexp)
            作用:按照指定的子字符串 substr
            或者正则表达式匹配对应的字符串
            返回满足格式的字符串数组
            <!doctype html>
            <html lang="en">
             <head>
              <meta charset="UTF-8">
              <meta name="Generator" content="EditPlus®">
              <meta name="Author" content="">
              <meta name="Keywords" content="">
              <meta name="Description" content="">
              <title>Document</title>
              <script>
            		//查找和匹配字符串
            		var str = "收垃圾,倒垃圾,爱上海,去买垃圾";
            		//查找并替换字符串内容
            		var s = str.replace(/垃圾/g,"**");
            		console.log(s,str); //收**,倒**,爱上海,去买** 收垃圾,倒垃圾,爱上海,去买垃圾
            
            		var r = str.match(/垃圾/g);
            		console.log(r);  //["垃圾", "垃圾", "垃圾"]
            
            
            
              </script>
             </head>
             <body>
              
             </body>
            </html>

             
            练习:
            Microsoft is a big company,microsoft's color is red,has a MICROSOFT logo like Microsoft
            1. 将所有的Microsoft 替换成‘微软’
            2. 输出替换了多少次