目录
1.数组的API
- toString()
作用：将数组中的元素转换为字符串返回
返回值：字符串
et：
var arr = [1,2,3];
var s = arr.toString();
console.log(s); //'1,2,3' - join()
作用：将数组中的元素连接成一个字符串并返回
返回值：字符串
参数：可选，如果省略参数，默认元素之间使用，连接。可以给参数，指定元素之间的连接符 - reverse()
作用：反转数组元素
返回值：数组，会改变数组的原有结构
- sort()
作用：对数组中元素进行排序
返回值：数组，会改变数组原有结构
参数：可选，自定义排序函数
默认按照元素的Unicode()码升序排列- 升序的排序函数函数
function sortAsc(a,b){
return a - b;
}
arr.sort(sortAsc);
解释：
1.sortAsc函数接收两个参数，会自动将数组中相邻的两个元素传递给参数
2.如果返回值>0,交换两个元素的位置，否则不变 - 匿名函数作为排序函数，直接写在() 中
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.数组的进出栈操作
栈结构：遵循先进后出原则
栈操作可以快速操作数组中的头尾元素
- push(data)
入栈操作，向数组的尾部添加元素，可以是一个或多个
返回值：返回新数组的长度
et：
arr[arr.length] = 'hello';
arr.push('Hi');
arr.push(10,20); //多个数据之间只用，隔开 - pop()
出栈操作，删除数组尾部元素
返回值：返回被删除的元素 - unshift()
向数组头部添加一个或多个元素
返回最终数组的长度 - 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>
3.二维数组
- 数组中每个元素又是一个数组
语法：
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>
- 练习：随意录入一个数字，将数字转换成对应的二进制并输出
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中的内置对象
- 对象：由属性和方法组成，使用点语法访问内部属性和方法
arr.length;
arr.sort(); - 对象分类
- 内置对象 - ES 提供的
- BOM 浏览器对象模型
- DOM 文档对象模型
- 自定义对象 - 函数
- 字符串 - String
- 声明字符串
var str = 'hello';
var str2 = new String('字符串2');
var str3 = String('字符串3');
注意：只有内置对象再创建时可以省略new关键字 - 属性
length：表示字符串的长度
var s = '你 好 坏';
console.log(s.length); //5 - 常用方法
- 英文大小写转换
- toUpperCase()
将英文字符串转换为全大写字母 - 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>
练习：- 创建一个数组，初始化内容，由英文大小写字母和数字0-9组成
- 生成随机验证码(多少位的验证码是可以设置的)
使用随机下标访问数组元素
随机数：Math.random();
数组的下标范围[0,length-1] - 通过prompt 提示给用户，接收用户输入
- 判断用户输入的验证码是否匹配，
用户输入不区分大小
给出提示，验证码输入是否正确
示例：<!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>
- toUpperCase()
- 读取指定位置的字符
- 读取指定位置的字符
charAt(index);
et:
var str = 'hello world';
var s = str.charAt(6);
console.log(s); //w
返回指定位置的字符 - 获取指定位置字符对应的Unicode码
charCodeAt(index);
et:
var str = 'abc';
var res = str.charCodeAt(1);
- 读取指定位置的字符
- 检索字符串
- indexOf(value,fromIndex)
value：要查找的字符串
fromIndex：从指定的下标位置开始向后查找，
可选参数，默认为0
返回值：返回value 第一次出现的下标位置，如果查找失败，返回-1 - 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); //邮箱 ： zhang.san@163.com var mailStr = "zhang.san@163.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>
- indexOf(value,fromIndex)
- 截取字符串
substring(startIndex,endIndex);
返回指定下标范围内 startIndex - endIndex -1
对应的字符串
练习：- 从指定邮箱中截取用户名
@之前的所有字符是用户名 - 从制定的邮箱中截取服务商名称
@之后的字符串 - 对身份证号操作，提取其中的生日
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>
- 从指定邮箱中截取用户名
- 分割字符串
split(seperator);
将字符串按照指定字符分割，拆分成若干个小字符串返回数组，数组中存放小字符串
练习：
提交订单，会将购物车中的商品信息发送给后台
1845_5&1834_2&3199_7
获取商品信息
商品ID 商品数量
1845 5
1834 2
3199 7 - 模式匹配
- 作用
配合正则表达式完成字符串的查找和替换 - 正则表达式
语法：/正则格式/修饰符
修饰符：
i：ignorecase忽略大小写
g：global 全局匹配
m：multiple 多行匹配
et：
- /\d{2,6}/g
- var str = '垃圾都要扔到垃圾箱里'；
/垃圾/g
- 字符串方法
- replace(subtr/regexp,replacement)
作用：在一个字符串中，将substr或者是满足正则格式的字符串替换为 replacement - 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- 将所有的Microsoft 替换成‘微软’
- 输出替换了多少次
- replace(subtr/regexp,replacement)
- 作用
- 英文大小写转换
- 声明字符串
扫一扫
766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
