JavaScript流程控制语句、对象及函数的学习_classmate在js里面怎么用-CSDN博客

本文链接：https://blog.csdn.net/weixin_45654590/article/details/119971708

流程控制语句

顺序语句

按照顺序一条一条的执行代码，从上到下

分支语句

if

if(表达式){
//该表达式求值的结果不一定是布尔类型，如果不是布尔类型，ECMAScript会调用Boolean() 转换函数将这个表达式结果转换为一个布尔类型 ，当该值为true时，执行if代码块中的内容
语句;
}

if-else

//当条件表达式为true时，执行if代码块中的内容，否则，执行else代码块中的内容，一般情况下，如果代码块中代码只有一行，可以省略大括号。
if(条件表达式){
语句;
}else{
语句;
}

if-else if-else

可以有多个else if

//当条件表达式1为true时，执行代码块1,否则当条件表达式2为true时执行代码块2，当条件表达式1,条件表达式2都为false的时候执行代码块3
if(表达式1){
代码块1;
}else if(表达式2){
代码块2;
}
else{ 
代码块3;
}

switch

//表达式或变量符合某个case常量时，执行该case中的代码。每个case代码块都必须包含break; 表示执行完当前代码块的内容跳出switch代码块。当所有case不满足情况下，执行default代码块的内容。default位置可以随意。
switch(表达式/变量){
case 常量1:
语句; break;
case 常量2:
语句; break;
…
case 常量n:
语句; break;
default:
语句;
}

循环语句

一个循环语句应该具备三要素：计数器，循环结束条件，迭代器。

for

//循环初值也可以写在循环体外，仅执行一次
//循环条件:通常使用逻辑运算符进行结束循环判断。每次执行循环体之前均会执行该代码
//步长：每次执行完循环体代码后执行，通常用于迭代使其更加靠近结束条件
for(循环初值;循环条件;步长){
语句; //循环体
}

while

while循环是先判断再执行语句

while(循环条件){
语句; //循环体
}

do-while

do while循环是先执行，再判断

do{
语句;//循环体
}while(循环条件);

学会10!、99乘法表、101-200之间的素数、1234能组成多少个互不相同且无重复的三位数、水仙花数

对象

JavaScript 对象是被命名值的容器。
（JavaScript 对象中的）名称:值对被称为属性。
方法是在对象上执行的动作。
详细学习: 链接
ECMAScript中的对象其实就是一组数据(属性)和功能(方法)的集合

创建对象

使用对象字面量表示法
对象字面量就是包围在一对括号中的零个或多个”name:value“对。

var user={};//声明对象字面变量
user.name="Bob";//向对象添加信息
user.age=12;
console.log(user.name,user.age);//输出对象的属性值
//Bob 12

var notebook={
    No:1001,
    //不同属性之间要用,分割；属性名和属性值之间用':'分割
    price:200.2,
    products:{name:'笔记本',price:3000},
    manager:'Tom',
    sayAge:function(){console.log("sayAge function")}
};
console.log(notebook.No,notebook);
/*1001 {
  No: 1001,
  price: 200.2,
  products: { name: '笔记本', price: 3000 },
  manager: 'Tom',
  sayAge: [Function: sayAge]
}*/

使用构造函数
根构造函数Object function(函数类型）<—成对出现—>Object数据类型 object(对象类型）

var person =new Object();//等价于var person={};
//console.log(person);//{}
person.name="Bob";//.操作符新增属性
person.age=18;
console.log(person.name);//属性的访问
person.sayAge=function(){
    //这里定义函数时，等号右边是没有名字的，因此为匿名函数
    console.log(person.age);
};
person.sayAge;//访问sayAge方法，但未执行方法内的代码块
//console.log(person.sayAge);//[Function]
person.sayAge();//加了圆括号之后就可以执行代码块了
console.log(person.sayAge);
/*Bob
18
[Function]*/

var add=function(a,b){
    //等价于function add(a,b){}
    console.log(a+b);
}
//函数放到对象中↓
person.plus=add;//这种写法是将add函数里的代码块给了plus，plus成了一个函数
console.log(person.plus);//[Function: add]
//函数的执行结果↓
person.plus=add(10,20);//输出30，是add执行了代码块的结果。当前plus定义了但是没有赋值，因此打印出undefined
console.log(person.plus);//undefined
/*[Function: add]
30
undefined*/

访问对象属性

点表示法

对象名称.属性名称
//person.name

中括号表示法

//使用中括号的场景：①属性名称中有特殊符号②要进行完全的遍历时
对象名称["属性名称"]
//person["first name"]

//遍历对象或数组属性时，也可用for..in循环
for (var 变量 in 对象)
{
	var 想访问的属性值=对象[变量];
}

删除属性

delete 属性访问表达式
//delete stu.name //删除stu对象的name属性

检测属性

in 检测某属性是否是某对象的自有属性或者是继承属性
在这里插入图片描述 hasOwnProperty()检测给定的属性是否是对象的自有属性，对于继承属性将返回false
propertyIsEnumerable() 检测给定的属性是否是该对象的自有属性，并且该属性是可枚举的通常由JS代码创建的属性都是可枚举的，但是可以使用特殊的方法改变可枚举性。
在这里插入图片描述

this

在对象内部使用，指代自己

使用方法

var obj={
    name:'zs',
    age:100,
    plus:function(){
        console.log(obj,this,this.name);//内部访问obj对象，obj和this得到的结果是一样的
    },
    sayName:function(){
        //该函数用来获取obj的名字
        console.log("sayName:"+this.name);
    },
    updateAge:function(age){
        this.age=age;
        //这里将函数的age更新为obj的age
        console.log("updateAge:"+this.age);//输出obj的age
    }
}
//对象的外部↓
console.log(obj,this);//外部访问obj对象,在此处用this输出{}，外部使用this无效
console.log('-----');
obj.plus();//调用plus函数，才可以执行函数内部的内容
obj.sayName();//函数圆括号内可以不传值
obj.updateAge(33);//此处将age=33赋值给obj中的age
//console.log(age);//报错！在外部是不能直接获得属性值的

运行结果：

{
  name: 'zs',
  age: 100,
  plus: [Function: plus],
  sayName: [Function: sayName],
  updateAge: [Function: updateAge]
} {}
-----
{
  name: 'zs',
  age: 100,
  plus: [Function: plus],
  sayName: [Function: sayName],
  updateAge: [Function: updateAge]
} {
  name: 'zs',
  age: 100,
  plus: [Function: plus],
  sayName: [Function: sayName],
  updateAge: [Function: updateAge]
} zs
sayName:zs
updateAge:33

运行环境全局变量

不使用var，直接变量名等于某个值，这样node环境中global新增该属性变量，浏览器环境中window也新增该属性变量

num=2；

Object属性及方法

任何对象都继承于Object对象（object原型）
在这里插入图片描述

详细学习: 博客地址
Object常用方法

方法	描述
constructor:	保存当前用户创建当前对象的函数
hasOwnProperty(propertyName);	检查给定的属性名是否是对象的自有属性
toString();	返回对象的字符串表示
valueOf();	返回对象的字符串、数值、布尔值的表示
propertyIsEnumberable(propertyName);	检查给定的属性在当前对象实例中是否存在
isPrototypeOf(object);	检查传入的对象是否是原型
toLocaleString();	返回对象的字符串表示，该字符串与执行环境的地区对应

详细学习: 博客地址

对象序列化

是指将对象的状态转换为字符串。反序列化，将字符串还原为对象函数，RegExp,Error对象，undefined值不能序列化和反序列化。

JSON.stringify(obj) //将对象序列化为Json字符串,只能序列化对象可枚举的自有属性。
JSON.parse(jsonStr)//反序列化

函数

作用：提高复用率、封装（实参、形参、功能）
函数的结束：return 和 }

自定义函数

函数声明

function 函数名（形参列表，用，分割）{
	//函数体
}

//举例↓
function add(a,b){
//a,b为形参
    return a+b;//5
}
add(2,3);
var c=4,d=5;
//c,d为实参
add(c,d);

函数表达式

var 函数名 = funtion(形参列表){
	//函数体
}

//举例↓
var print = function(){
    console.log("打印");
}
print();

函数的调用

函数名(实参列表)；

全局范围内被调用

var sayName=function(){
	console.log(this.name);
}
sayName();//undefined 调用函数时一定要加()

对象范围内被调用

var sayName=function(){
	console.log(this.name);
}
var p={
	name:'zs',
    sayName
}
p.sayName();//zs

函数名.call(执行环境对象,实参列表)；

执行环境对象：函数作为对象中的成员

var sayName=function(){
	console.log(this.name);
}
var p={
	name:'zs',
    sayName
}
sayName.call(p);//zs

函数名.apply(执行环境对象,实参列表数组)；

var sayName=function(){
	console.log(this.name);
}
var q={name:'ls'};
//q.sayName();//q.sayName is not a function
sayName.apply(q);//ls

call和apply的功能与区别：
功能：反向建立函数与对象之间的关系
区别：apply如果要写参数，就一定要写数组
print.call(p,‘red’,‘green’);
print.apply(p,[‘red’,‘green’]);
变量提升：

//变量可以重复使用、可以重复定义
var name = function(){
    console.log("lisi");
}
var name = function(){
    console.log("wangwu");
    //输出wangwu，代码从上而下执行，第一个执行的lisi被wangwu覆盖了
}
name();

//变量可以提升
console.log(age);//undefined
var age=20;
console.log(age);//20

//函数变量名的提升
console.log(test);//[Function: test]
test();
function test(){
    console.log("test函数");//test函数
}

console.log(study);//undefined，这里的study由var定义，不是函数，因此不能输出[Function]
//study();//error!
var study=function(){
    console.log("stydy函数");
}

例题：

console.log(say);//[Function: say]，这是函数变量提升而输出的结果
say();//say
function say(){console.log('say')};
var say='name';
//say();//error! ↑的say不是函数，不可用该种方式调用
console.log(say);//name,按照代码从上往下顺序执行而输出的结果

函数的内部属性

arguments

未使用arguments：

function add(a,b){
    console.log(a,b);
}
add(1);//1 undefined
add(1,2);// 1 2
add(1,2,3);// 1 2 第三个值就不会被打印出来

在这里插入图片描述
使用arguments：

function add(a,b){
    console.log(a,b);
    console.log(arguments);//让下面add所有变量都打印出来
}
add(1);
add(1,2);
add(1,2,3);

在这里插入图片描述
arguments的属性：
arguments是一个类数组对象，在调用函数时，我们所传递的实参都会在arguments中保存

function add(a,b){
    console.log(a,b);
    console.log(arguments);
    console.log(arguments.length,arguments.callee);
//arguments.length:与length不同，这是实参的个数
//arguments.callee:callee属性是一个指针，指向拥有这个arguments对象的函数
}
add(1);
add(1,2);
add(1,2,3);

在这里插入图片描述

var name=function(){
    console.log(arguments.callee);
}
var age=name;
name();//[Function: name]
age();//[Function: name]

遍历

function print(){
    console.log(arguments);
    //for in循环
    for(var key in arguments){
        console.log(arguments[key]+"t");
    }
    //for循环
    for(var i =0;i<arguments.length;i++){
        var key =i.toString();//将number类型转换为字符串类型
        console.log(arguments[key]+"s");
    }
}
print("hello",'world');
print(1,2,3,false);

在这里插入图片描述
例题：

输出0 600 6
形参与实参

function add(a,b){
    a='hello';
    b="world";
    console.log(a,b,arguments['0'],arguments['1']);
}
//形参与实参如果有了绑定关系，那么函数内部形参变量名就与arguments[key]有了绑定关系
add();//调用函数时未赋值，因此没有实参与a，b建立起关联关系
add(1);//与a建立了关联关系
add(1,2);//这里与a,b都建立起关联关系，因此显示上面a，b中的值
add(1,2,3);

在这里插入图片描述

this

//var username='zs';//文件内的全局 username=zs this.username=undefined
username='lisi';//不加var变成了运行环境的全局global，因此this.username可以找到它 lisi lisi
function say(){
    //console.log(this.username);//undefined,函数内部未被定义调用也不会报错
    console.log(username,this.username);
}
say();

var age=100;//文件
function print(){
    var age=200;//函数
    console.log(age,this.age);//函数 node
}
print();//200 undefined

var classmate="一班";
var stu={
    classmate:'二班',
    class:function(){
        console.log(classmate);
        // 就近原则：函数内部->该文件内部->运行环境
    }
};
stu.class();//调用class函数之后，然后就执行stu中的clsaa函数中的语句，但未在该函数内定义classmate，所以它去文件内部找，找到了一班，因此输出

var classmate="一班";
var stu={
    classmate:'二班',
    class:function(){
        console.log(stu.classmate,this.classmate);//二班 二班
        //这里的this指代stu
    }
};
stu.class();
//有this时就看是否是全局的，没有.就是全局的，有.就是.前面对象的
console.log(stu.classmate);//二班

例题
在这里插入图片描述

对这个p3还是不太明白。

函数属性和方法

length()

表示函数希望接受的命名参数的个数，即形参的个数。

function add(a,b){
    console.log(a,b);
    console.log(add.length);//调用下面三个add函数时，都输出2,不管下面add函数调用时有几个实参，但预期形参是2个，就输出2
}
console.log(add.length);//2 形参的个数
add(1);//1 undefined
add(1,2);// 1 2
add(1,2,3);// 1 2

apply()

调用call和apply可以将一个对象指定为第一个参数，此时这个对象会成为函数执行时的this
apply和call可以反建立起函数与对象之间的关系
apply() 方法接受数组形式的参数

apply([thisObject,[argArray] ]);
构造函数.prototype.函数.call(任意对象，实参数组);

call()

call() 方法分别接受参数

call([thisObject,arg1,arg2...argn);
构造函数.prototype.函数.call(任意对象，实参列表);

函数的应用

作为参数

function print(){
	sayName();
}
var sayName=function(){
	console.log("小阵");
}
print(sayName);//sayName函数作为参数被调用

参数的应用：作为对象成员去赋值；绑定监听函数

作为返回值

function getFunction(){
	return function(){
	console.log('匿名函数');
	}
}
var a=getFunction();
a();//匿名函数
getFunction()();//匿名函数

function Name(){
	var sayName= function(){
	console.log(this.name);
	}
	return sayName;
}
var b=Name();
b();//undefined
Name()();//undefined
//Name()()第一个圆括号是执行Name函数，该函数内还有sayName函数，就再加一个圆括号来执行

举例：

function Cat(name){
	this.name=name;
}
var c1=new Cat('小花');
var c2=new Cat('小白');
c1.toString = function(){
	var str="";
	for(var key in this){
		var value=this[key];
		str += value;
	}
	return str;
}
//console.log(c1.toString());
//c2想用c1的toString函数
//console.log(c2.toString());//[object Object]
console.log(c1.toString.apply(c2));//小白