Web前端105天

编程入门行业动态更新时间:2024-10-24 06:33:05

Web前端105天

JS进阶day03

前言

一、复习

二、数组

2.1数组API

2.2 二维数组

三、字符串对象

3.1转义字符 —— \

3.2字符串API

3.3练习

总结

前言

JS进阶day03学习开始

一、复习

二、数组

2.1数组API

API: JS下预定义的函数和方法，可以直接调用
toString()--将一个数组转为字符串
join()--将一个数组转为字符串，可以指定元素之间的分隔符
concat(数组...)--拼接数组
reverse()--翻转数组元素，返回翻转后的数组，原数组会发生变化
slice(start, end)--截取数组元素，start开始的下标，end结束的下标，不包含end本身，end为空会截取到最后，下标为负数表示倒数，返回截取的元素，原数组不会发生变化
splice(start, count, v1,v2,..)--删除数组元素，start开始的下标，count删除的数量，count为空删除到最后，下标为负数表示倒数，v1,v2...表示删除后要补充的元素，返回删除的元素，原数组会发生变化。
sort()--对数组元素进行排序，默认是按照Unicode编码排列
sort(function(a,b){return a-b  //按照数字从小到大排列//return  b-a  //按照数字从大到小排列
})
// 返回的是排序后的数组，原数组会发生变化
push()--在数组的末尾添加元素，返回的数组长度，原数组会发生变化
pop()--删除数组末尾的一个元素，返回删除的元素，原数组会发生变化

unshift()--在数组的开头添加元素，返回的数组长度，原数组会发生变化

shift()--删除数组开头的一个元素，返回删除的元素，原数组会发生变化

indexOf()--查找数组中是否含有某个元素，如果存在返回下标，不存在返回-1

其它的API:

JavaScript 数组方法

Array - JavaScript | MDN
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>数组API</title></head><body><script>/* // 数组转为字符串var arr = ['a','b','c']console.log( arr.toString() )var num = 2console.log( num.toString() )var c = [5,8,6]c.toString()// 如何区分名字相同的方法是否为同一个方法：需要查看调用方法的对象的数据类型是否相同var arr = ['a','b','c']// 数组转为字符串，可以指定元素之间的分隔符console.log( arr.join('') )var arr1 = ['John','Also','周杰伦']var arr2 = ['Anna','Lilly','Joan']var arr3 = ['Hu','Kick','凯立德']// 拼接多个数组console.log( arr1.concat(arr2,arr3) )console.log(arr1)var arr = ['a','b','c','d']// 翻转数组元素console.log( arr.reverse() )// 查看原数组console.log(arr)var arr = ['John','Also','周杰伦','Anna','Lilly','Joan','Hu','Kick','凯立德']// 截取数组元素// console.log( arr.slice(2) )// console.log( arr.slice(2,5) )console.log( arr.slice(-4,-2) )console.log(arr)// 练习：创建数组，包含a~h，每个字母是一个元素，分别截取出bc，f，将截取的两部分拼接成一个新数组。var arr = ['a','b','c','d','e','f','g','h']var arr1 = arr.slice(1,3)var arr2 = arr.slice(-3,-2)console.log( arr1.concat(arr2) )var arr = ['John','Also','周杰伦','Anna','Lilly','Joan','Hu','Kick','凯立德']// 删除数组元素// console.log( arr.splice(2) )// console.log( arr.splice(2,3) )// console.log( arr.splice(-4,2) )console.log( arr.splice(-4,0,'李赫','李婷') )console.log(arr)// 练习：创建数组，包含a~h，每个字母是一个元素，删除de，替换g为m，在下标为1的位置插入z。var arr = ['a','b','c','d','e','f','g','h']arr.splice(3,2)arr.splice(-2,1,'m')arr.splice(1,0,'z')console.log(arr)// 数组排序var arr = [23,9,78,6,45]// 默认按照Unicode编码排列// arr.sort()arr.sort( function(a,b){// console.log(a,b)// return a-b //按照数字从小到大排列return b-a //按照数字从大到小排列} )console.log( arr )var arr = ['John','Also','Dange']// 在数组的末尾添加元素// console.log( arr.push('Anan','Jinjin') )// 删除数组末尾的一个元素// console.log( arr.pop() )// 在数组的开头添加元素// console.log( arr.unshift('Linli','Daily') )// 删除数组开头的一个元素console.log( arr.shift() )console.log(arr)var arr = ['a','b','c','d']// 检测数组中是否含有某个元素(查找元素)console.log( arr.indexOf('f') )*/// 练习：创建数组，包含爱国福、和谐福，如果不含有敬业福，则把该福字添加到数组的最后。最后打印数组var arr = ['爱国福','和谐福']if( arr.indexOf('敬业福')===-1 ){arr.push('敬业福')}console.log(arr)</script></body>  
</html>

2.2 二维数组

数组中的元素还是数组
[ [ ], [ ], [ ] ]

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>二维数组</title></head><body><script>var arr = ['山东省','江苏省','广东省']var city = ['济南','青岛','烟台','南京','苏州','无锡','广州','深圳','珠海']// 二维数组：对一组数据进行分类var city2 = [['济南','青岛','烟台'],['南京','苏州','无锡'],['广州','深圳','珠海']]console.log(city2[0][0])</script></body>
</html>

三、字符串对象

包装对象：目的是为了让原始类型的值像对象一样，具有属性和方法，JS中提供了三种包装对象，分别是字符串对象、数字对象、布尔对象
new String()--将一个字符串包装为对象
String()--将一个值强制转为字符串
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>字符串对象</title></head><body><script>// 字面量var str1 = '1'// 包装对象var str2 = new String('1')// console.log(str2, typeof str2)// console.log( str1+2, str2+2 )// 将一个值转为字符串var str3 = String(1)// console.log(str3, typeof str3)// arr.toString() //方法必须通过对象来调用// String() //函数可以独立调用</body>
</html>

3.1转义字符 —— \

\' --将具有特殊意义的引号转义为普通引号
\n--将字符n转义为换行符
\t--将字符t转义为制表符，就是多个连续空格(Tab键)
// 转义字符 
// 转为普通引号
console.log('It\'s a dog')
// 字符n转移为换行符
console.log('a\nb')
// 字符t转义为制表符
console.log('a\tb')				
console.log('D:\\WEB2208\\JS')

3.2字符串API

length--获取字符串的长度
charAt(下标)--获取下标对应的字符，可以使用数组的写法字符串[下标]
indexOf()--查找字符串某个字符串，返回的是找到的第1个的下标，找不到返回-1
lastIndexOf()--查找字符串某个字符串，返回的是找到的最后1个的下标，找不到返回-1
slice(start, end)--截取字符串，start开始下标，end结束下标，不包含end本身，end为空截取到最后，下标为负数表示倒数
- 所有的字符串API都不会影响原来的字符串，都是会产生一组新的字符串
toUpperCase()--英文字母转大写
toLowerCase()--英文字母转小写
split( )--将字符串转为数组，需要指定分隔符

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>字符串API</title></head><body><script>/* var str='新play'// 查看字符串长度console.log( str.length )// 字符串在调用属性或者方法的时候，会自动包装为对象console.log( new String(str).length )var str='javascript'// 获取下标对应的字符console.log( str.charAt(1), str[1] )// 练习：声明变量保存字符串javascript，遍历字符串，统计出字符a出现的次数var str = 'javasjcrivpt'// 声明变量，用于计数for(var i=0,count=0;i<str.length;i++){// console.log(str[i])// 如果字符是a，数量加1if(str[i]==='a'){count++}}console.log(count)// 面试题：统计出一个字符串中哪一个字符出现的次数最多，共有几次// 查找字符串中是否含有某个字符串var str='javascript'// 找第1个                  console.log( str.indexOf('a') )// 找最后1个console.log( str.lastIndexOf('a') )// 截取字符串var str='javascript'// console.log( str.slice(4) )// console.log( str.slice(4,7) )console.log( str.slice(-3,-1) )// 练习：截取出文件名称的后缀名var str = 'abc.123.min.jpg'// 查找最后一个.的下标var n  = str.lastIndexOf('.')console.log(n)// 截取后缀名console.log(str.slice(n+1))// 练习：截取出一个邮箱的用户名和域名var str = 'xin123457@qq'// 查找@的下标var n = str.indexOf('@')console.log(n)// 截取console.log(str.slice(0,n), str.slice(n+1))// 英文字母转大小写var str = 'JavaScript'console.log( str.toUpperCase() ) //大写console.log( str.toLowerCase() ) //小写console.log(str)var arr = ['a','b','c']// 数组转为字符串var str = arr.join('-') //'a-b-c'// 字符串转为数组console.log(str.split('-'))*/// 练习：将字符串进行翻转//  abcdef  -> fedcbavar str = 'abcdef'// 把字符串转为数组，每个字母作为一个元素// 将数组进行翻转// 将数组转为字符串console.log( str.split('').reverse().join('') )</script></body>
</html>

3.3练习

练习：将一句英文中每个单词的首字母转为大写，其余字母转为小写
- hOw aRE YOU -> How Are You

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>课后练习</title></head><body><script>//练习：将一句英文中每个单词的首字母转为大写，其余字母转为小写// hOw aRE YOU  ->  How Are Youvar str = 'hOw aRE YOU'// 将字符串转为数组，用空格来分隔var arr = str.split(' ')// 遍历数组，获取每个单词for(var i=0;i<arr.length;i++){// console.log(arr[i])// 截取首个字母，转为大写var f=arr[i].slice(0,1).toUpperCase()// 截取其余字母，转为小写var o=arr[i].slice(1).toLowerCase()// console.log(f,o)// 把转换后的拼接成新单词，然后覆盖之前元素中的单词arr[i]=f+o}// 将数组转为字符串，之间用空格分隔console.log(arr.join(' '))</script></body>
</html>