前端学习第六周-循环语句，函数，参数，作用域，对象，数组以及一些方法

最新推荐文章于 2023-01-06 21:00:00 发布

几个茶

最新推荐文章于 2023-01-06 21:00:00 发布

阅读量316

点赞数 1

文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/keaicha/article/details/125362878

版权

文章目录

前言
一、循环语句
二、Function函数
三、参数
四、作用域
六、object对象
七、String
五、data
六、数组
总结

前言

这周已经进入js的正式学习，整体进度略微有些快，还需要加强巩固。

一、循环语句

prompt 输入的值为字符串，如果想输入数字，必须用number转换

1.if语句

if(表达式1){
语句1
}else if(表达式2){
语句2
}else{
语句3
}
//else可以省略

2.switch语句

switch(表达式){
case 值1:
语句1
break;
case 值2:
语句2
break;
default:
语句3
break;
}//效率更高

3.for循环

for (初始化1;条件表达式2;更新表达式4){
语句3;
}

4.while和do while

while (条件表达式){
语句(更新表达式);
}
//事先不指定循环开始或者结束的范围，只要满足该条件，就会一直执行循环体
//很容易有“出一错误”，只能人为的-1（条件和循环的变量并不是一个值）

do{
循环体(更新表达式);
}while(循环执行条件);
//while循环可能一次也不会执行，do while至少循环一次，先做这件事，再验收这件事的合理性
//for一般用于已知循环次数，while用于不知道循环次数

while(true){}结合break来实现
break:打断循环，打断最近的一次循环
break 名字:打断对于名字的循环

//lable的使用
outer: for (var i = 0; i < 5; i++) {
    console.log('外层循环 i 的值：' + i);
    for (var j = 0; j < 5; j++) {
        break outer; // 直接跳出outer所在的外层循环（这个outer是我自定义的label）
        console.log('内层循环 j 的值:' + j);
    }
}

continue:跳过当前的当次循环，跳过最近的当前循环，对后面的循环没有影响
break和continue都不能独立放在if中，需要放在循环里，而且作用的不是if，是if存在的循环

随机数函数
math.random()//得到0-1之间的随机数
parseInt(math.random()*(b-a+1))+a//得到[a,b]区间的整数

拆位方法
//将一个整数，拆分成个十百位
1.数学方法
百位是原数字除100取整
十位是原数字除以10取整，再与10求模
个位是原数字与10求模
2.字符串方法
直接将原数字变为字符串，然后使用charAt()方法
var n =Number(prompt(‘请输入一个三位数’));
var nStr = n.toString();
var a = nStr.charAt(0);
var b =nStr.charAt(1);
var c = nStr.charAt(2);

二、Function函数

必须先定义才能使用

1.定义函数

//定义的函数是不会直接被执行的，必须被调用才能运行

（1）"函数申明"方式创建函数

function 函数名(形参1,…形参n){
语句;
}
//函数提升

（2）函数表达式（匿名函数）方式创建函数

var fn1 =function(形参1,…形参n){
语句;
}
//仅仅只有变量提升
//函数优先提升，变量申明提升无法覆盖提升的函数

（3）使用构造函数 new function()

var aa = new function(‘a’,‘b’,‘console.log(a,b)’)
aa(5,6)

2.函数的调用

//执行函数体中的所有语句，就称为“调用函数”

1.函数名()

//调用函数，可以多次调用

2.通过“对象.属性()”

当函数以对象的某个属性值的形式储存在对象里面，叫方法

var obj = {
	a: 'zzzzz',
	fn2: function() {
		console.log('强强强强，永不止步!');
	}
};
obj.fn2(); // 调用函数

3.立即执行函数

(function() {
console.log(‘我是立即执行函数’);
})();

4.通过构造函数来调用

function fun3() {
console.log(‘永不止步~’);
}
new fun3();

5.绑定事件函数（被其他函数调用）通过dom去触发

写法

 <body>
        <div id="btn">我是按钮，请点击我</div>

        <script>
            var btn = document.getElementById('btn');
            //2.绑定事件
            btn.onclick = function(undefind) {
                console.log('点击按钮后，要做的事情');
            };
        </script>
    </body>

6.倒计时调用函数

setTimeout
setInterval

clearTimeout(t1)
var t1=setTimeout(Function(){
	console.log('倒计时时间结束打印该语句');
},2000)

clearInterval(t2)
var t2=setInterval(Function(){
	console.log('每隔一段时间打印一次');
},3000)
//写倒计时前需要一个变量去接，并且清除，避免倒计时混乱

es6函数
箭头函数
函数表达式
//var fn4 = Function(){
// console.log(a,b)
//}
var fn5 =(a,b)=>{console.log(a,b);}//参数只有一个的时候可以省略小括号

三、参数

//任何一个函数类型都可以被当成参数传入函数内部
//形式参数个数可以随意填，以及参数类型，但是函数里面的参数需要对应实际方式
函数也有长度，就是形参的个数

//arguments是所有参数的集合,表示它接受到的实参列表，是类数组，可以用下标去遍历，但是又不能用数组的方法
function fun(){
            var sum=0;
            for(let i=0;i<arguments.length;i++)
            {
                sum+=arguments[i];
            }
            console.log(sum);
        }
        fun(2,3,6,3)
//不管用户传入多少参数，都可以求出他的和

arguments.callee() 调用自己本身
递归：函数内部调用函数本身

return 把函数的结果返回出去，并且终止函数

return 终止函数，循环写在函数内部也可以变相的终止循环
break 终止最近的循环，if写在循环里面，break也可以变相的终止if
continue 跳过最近的循环

四、作用域

es5
全局作用域
函数作用域（局部作用域）

es6
块级作用域

就近原则，由内往外

六、object对象

是一组无序的相关属性和方法的集合
作用:封装信息
对象具有特征（属性）和行为（方法）
键值对的形式存在
定义的属性可以是任意值，比如字符串，数字，null，undefined,数组,方法
属性如果有相同的值，后面的将覆盖之前的值
如果没有定义该值，打印出来是 undefined,如果在对象外面再添加值，也等同于给他再赋值
delete可以删除对象中的属性

语法糖//将复杂的语法简化了
var xixi =new object()
var xixi={}//就是上面一行的语法糖
var hehe=new Array()
var hehe=[]

console.log(xixi.name);
console.log(xixi[‘name’]);//两种写法不同,遍历中只能用中括号，但是不加入引号

for (var 属性 in 遍历对象){

}

for in 循环也可以遍历数组，但是有问题，会将自定义的属性也遍历出来，所有es6诞生了forof

面对对象编程封装继承多态

constructor反向指向他的构造函数

七、String

字符串的不可变性：字符串的任何方法对字符串的操作，对原来的字符串都不会有改变

1.indexOf() 2.lastIndexOf()

indexOf(‘查找的字符’,查找起始索引)
从头到尾开始查找需要寻找的字符串，存在的话返回第一次出现的位置，不存在返回-1
indexOf(‘a’,0);第二个值默认为0，从第一个索引开始查找，如果为3，则从索引第3处开始查找，跳过之前的值。
lastIndexOf(‘查找的字符’,查找的终止索引)
lastIndexOf()//从后往前查找对于的字符串，但是索引还是从前往后数
lastIndexOf(‘a’,3);这里面的3代表的是查找的终止索引，也就是最后的值，从该值往前查找

q求a出现的次数
 var str = 'adjsbakcblksjfhlwejarasnablskcbaklfbdakjcnkaSEBFKWJDBFOWJRGHFkejwrb';
       
	     var num = 0;
         var index = 0;
         for (var i = 0 ;i < str.length;i++) {
             if (str.indexOf('a', index) > -1) {
                 num++
                 index = str.indexOf('a', index) + 1
             }
			 //方法二
             // if ('a' == str[i]) {
             //     num++
             // }
         }
         console.log(num);

求所有的字符出现的次数
    var str = 'adjsbakcblksjfhlwejarasnablskcbaklfbdakjcnkaSEBFKWJDBFOWJRGHFkejwrb';

    var obj = {}
    // console.log(obj['a']);
    for (var i = 0 ;i < str.length; i++) {
        if (obj[str[i]]){
            obj[str[i]]++
        } else {
            obj[str[i]] = 1
        }
    }
    console.log(obj);

3.search

不支持第二个参数
search(‘查找的字符串’)
search(/查找的字符串/igm);反斜杠为正则表达式
g: global 全文搜索，不添加，搜索到第一个匹配停止
i: ignore case 忽略大小写，默认大小写敏感
m: multiple lines 多行搜索

4.includes()

判断某个字符串是否存在于另外一个字符中
存在返回true，不存在返回false
支持第二个参数
str.includes(‘查找的字符’,查找的起始位置（索引）)

5.startsWith()

startsWith(‘字符’,查找起始位置（索引）：判断某个字符是不是以
另外一个字符开头，是的返回true，不是返回false
支持第二个参数，表示查询的位置

6.endsWith()

endsWith(‘字符’,个数：判断某个字符是不是以
另外一个字符结尾，是的返回true，不是返回false
支持第二个参数，表示查询的位置

7.srt[索引]:查找索引对应的字符，如果没有返回undefined

8.str.charAt(索引):查找索引对应的字符，存在即返回，如果没有返回空

9.str.charCodeAt(索引)：查找索引对应的ascii符，存在即返回对应的十进制数，如果没有返回NaN

10.str.slice()

没有参数的时候，剪切整个字符串
一个参数的时候
正数：超过length-1,返回空，没超过的话，参数是起始索引，剪切到最后包含了起始索引）
负数：首先+字符串的length，如果转化成正数的话看上面，如果还是负数，剪切全部
二个参数的时候
二个正数：第一个数小于第二个数，包左不包右剪切；大于第二个剪切为空
两个负数：同时加上字符串的length，转化成正数查看
一个负数，一个正数：负数加上字符串的length，转化成正数查看

11.str.substring()

没有参数的时候，剪切整个字符串
一个参数的时候
正数：超过length-1,返回空，没超过的话，参数是起始索引，剪切到最后包含了起始索引）
不支持负数//负数当0看待，剪切全部
二个参数的时候
二个正数：第一个数小于第二个数，包左不包右剪切；大于第二个数时智能调换位置，始终保持前面小后面大
两个负数：负数当0看待

12.str.substr()

没有参数的时候，剪切整个字符串
一个参数的时候
正数：超过length-1,返回空，没超过的话，参数是起始索引，剪切到最后包含了起始索引）
负数：首先+字符串的length，如果转化成正数的话看上面，如果还是负数，剪切全部
二个参数的时候
第一个参数是剪切的起始索引，如果是负数，加上字符串length来看，转换之后还是负数当成0来看
第二个参数是剪切的长度>=0

13.str.concat()

连接属性，和+作用相同
var temp = str1 +str2
var temp2 = str2.concat(str1,str2)

14.str.repect()

重复属性
var str1 = “heihei”
var temp = str1.repect(3)//3代表重复的次数
console.log(temp)

15.str.replace()

替换
var str1 = “saskdjanksbdaksdAASCNALSKNC”
var temp = str1.replace(‘s’,“-”) //只能将第一个s换成-
var temp2 = str1.replace(/s/gi,“-”)
console.log(str1);
console.log(temp);
console.log(temp2);

16.str.fromCharCode(num)

根据十进制的num去取ascii码表对应的字符
var temp =str.fromCharCode(87)
//对立的 str.charCodeAt(索引)

17.str.toLowerCase() 字符串全转换成小写

18.str.toUpperCase() 字符串全部转换成大写

19.str.split()

字符串转化成数组
不加参数：字符串直接成为数组的唯一的一项
var arr = str.split(‘a’);
参数：作为分隔符号，如果原字符存在分隔符号，便分隔字符串，分隔出来的依次放入数组并返回
如果不存在分隔符号，字符串直接成为数组中唯一的一项
参数=空串：字符串的每一项都传入数组，并返回

20.join()

数组方法把数组转换成字符串
arr.join(“参数”)
不带参数或者参数为","，相当于数组 + “”
带其他参数作为分隔符，分隔数组里面的每一项，组成字符串并返回

21.trim()

去掉字符串前后的空格

五、data

1.生成时间对象

1.参数字符串
“2022-6-16 17:40:00”//年月日必填
“2022/6/16”//不填时分秒默认时间为00:00:00
2.参数 2020,1,32,45,23,45//第二位是月份，但是是实际月份-1，剩下的为月，日，时，分，秒，毫秒，超过自己本身的单位值，前一位增加值
3.参数字符串"Thu Jan 01 1970 08:00:02 GMT+0800 (中国标准时间)"

2.时间戳

1.getTime()
2.+ - / *
3.Number()
4.valueOf()
5.Date.now()

3.set类

var time = new Date(“2008-5-12”)
console.log(time);
time.setFullYear(2008)
time.setMonth(3)

4.get类

getMonth()+1
getDate()//是获取的日
getDay()//是获取的星期，是0-6的整数，0为周天，1-6为周一到周六
var time = new Date()
console.log(time);

//做一个倒计时
  // 例子

        function getTime(end, rizi,start) {
            // 获取结束的时间cuo
            var timeEnd = new Date(end).getTime()

            // 获取开始的时间cuo
            if (start) {
                var timeStart = new Date(start).getTime()
            } else {
                var timeStart = new Date().getTime()
            }

            var dom = document.getElementById("id1")

            if (timeEnd - timeStart >= 0) {
                // 总的毫秒差
                var timeCha = timeEnd - timeStart
                // 天
                var date = parseInt(timeCha /1000 /60 /60 /24)
                // console.log(date);
                // 小时
                var hours = parseInt(timeCha /1000 /60/60 %24)
                hours = hours < 10 ? "0" +hours : hours
                // console.log(hours);

                // 分钟
                var mins  =  parseInt(timeCha /1000 /60 % 60)
                mins = mins < 10 ? "0" +mins : mins
                // console.log(mins);

                // 秒
                var ss  =  parseInt(timeCha /1000  % 60)
                ss = ss < 10 ? "0" +ss : ss

                // 毫秒
                var ms = timeCha % 1000

                if (ms < 10) {
                    ms =  "00" + ms
                } else if (ms < 100) {
                    ms =  "0" + ms
                }
                // console.log(ms);

                var temp = `距离${rizi}还剩${date}天${hours}时${mins}分${ss}秒${ms}毫秒`
                // console.log(temp);
               
                // console.log(dom);
                dom.innerHTML = temp
            } else {
                dom.innerHTML = '活动结束'
            }


        }

        if (t1) {
            clearInterval(t1)
        }
        
        var t1 = setInterval(()=>{
            getTime('2022-6-16 18:00:00',"6-16下班")
        },1)

六、数组

方式一：使用字面量创建数组
var arr1 = []; // 创建一个空的数组

var arr2 = [1, 2, 3]; // 创建带初始值的数组
方式二：使用构造函数创建数组
let arr = new Array(参数);
let arr = Array(参数);
如果参数为空，则表示创建一个空数组；
如果参数是一个数值时，表示数组的长度,但是这4项都是undefined；
如果有多个参数时，表示数组中的元素。

数组中什么数据类型都可以放

下标越界，访问不存在的项会返回undefined

arr.length =0;相当于清空数组
索引不能设置为负值，不然直接定义为属性；该索引有值的话直接覆盖，没有值的话创建一个新的值，前面未被设置的值，显示为空，实际类型为 undefined

//方法就是打点调用的函数，所以就是数组打点调用他们

1.数组的类型相关

1.Array.isArray(被检测的东西)：检测一个数据是否为数组，是的话返回true，不是的话返回flase
2.Array.from(arguments)：把伪数组转换成数组，不修改原来的伪数组，只会生成一个新的数组
3.arr.toString():数组转字符串
4.Array.of():创建数组的方式

2.数组的修改相关

1.push() :向数组尾部增加一项或者多项，会改变原数组，返回值是数组新的长度==>arr.splice(arr.length,0,添加的值)
2.pop() ：删除数组最后一项，并返回删除的这一项，会改变原数组//括号中不支持参数==>arr.splice(arr.length-1,1);
3.unshift() :向数组头部增加一项或者多项，会改变原数组，返回值是数组新的长度==>arr.splice(0,0,添加的值)
4.shift() :删除数组最前一项，并返回删除的这一项，会改变原数组//括号中不支持参数==>arr.splice(0,1);
5.splice() :在数组任何位置进行增加，修改，删除;被删除的项会以数组的形式返回
splice(索引，删除个数，新增项1，新增项2，…新增项n)
6.arr.slice() 返回值是数组//不会更改原来的数组
没有参数的时候。剪切整个数组
1个参数的时候，
正数：超过length - 1,返回空数组，没超过的话参数是起始索引，剪切到最后（包含了起始索引）
负数：（其实就是数组的倒数第几个项）首先 + 数组的length,如果转化成正数的话看上面，如果还是负数，剪切全部
2个参数的时候，
2个正数：第一个数小于第二个数，包左不包右剪切。
2个负数：同时加上字符串的length，转化成正数查看。
1个负数，1个正数：负数加上字符串的length，转化成正数查看。
7.fill() ：填充数组，会改变原数组，返回值也是新的数组
arr.fill(填充项，填充起始索引，结束索引)

3.数组的查询相关

1.indexOf()
//arr.indexOf(‘查找的项’，查找起始索引) ：从头到尾查找某个项是否存在，存在返回第一次出现的索引，不存在返回-1
2.lastIndexOf()
//arr.lastIndexOf(‘查找的项’，查询的终止索引)：从尾到头查找某个项是否存在，存在返回第一次出现的索引，不存在返回-1
3.arr.includes()
// 判断某一项是否存在于另外一个数组中，存在返回true ,不存返回false,支持第二个参数，表示查找的起始位置（索引）
4.arr.find()
//查找是否满足指定条件的项，如果有返回第一个满足条件的那一项,没有返回 undefined
//find()可以用来遍历对象，但是只能用来返回查找到的第一项
5.arr.findIndex()
//查找是否满足指定条件的项，如果有返回第一个满足条件的那一项对应索引,没有返回 -1
//arr.find(function (遍历的每一项，每一项对应的索引，反向指向调用find方法的数组) {
6.arr.every()
//判断数组当中所有项是否满足指定条件，都满足返回true, 只要有一项不满足，终止遍历，返回false
// &&
7.arr.some()
//判断数组当中是否有一项满足指定条件，只要有一项满足返回true, ，终止遍历。都不满足的话，遍历完，返回false
// ||
// var arr = [22,33,11,44,55,66,77];
// var temp = arr.some(function (item, index,arr){
// console.log(item);
// if (item > 30) {
// return true
// } else {
// return false
// }
// })

    // console.log(arr);
    // console.log(temp);

4.排序和杂类

1.arr.concat(): 合并连接多个数组，并不会改变原数组
2.arr.join() : 数组转为字符串
//参数表示以什么字符作为连接符，留空则默认以逗号分隔
//split()可以使字符串转为数组
3.arr.reverse() :反转数组，会改变原来的数组
4.arr.sort() 修改原数组

6.数组的遍历方法

1.forEach() 没有返回值,可以修改原数组。
2.map() :映射出新的数组，官方说不能修改元素组，但实际可以通过其他方法进行修改
3.filter(): 筛选出满足条件的所有项，组成一个新数组返回出去

清空数组的方式
var arr[]
arr.length=0
arr.slice(0)

总结

还是需要再加强练习和记忆

几个茶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习第六周-循环语句，函数，参数，作用域，对象，数组以及一些方法

循环语句，函数，参数，作用域，对象，数组以及一些方法
复制链接

扫一扫