JS -关于对象相关介绍

在JS中，除去基本的数据类型，还有包含对象这种复合数据类型，他可以储存多个键值对，并且每个键都是唯一的，并且在对象中可以包含各种数据类型的值，包括其他对象，数组，函数等。对象是JavaScript中比较重要的一种数据结构，这篇博客我们将全部围绕JavaScript对象进行，用它来表示复杂的数据和结构化信息。

  • 对象是由{}包围，键值对之间通过逗号分隔，键值之间用冒号分隔。例如：
let person = {name: "John",age: 30,isStudent: false,hobbies: ["reading", "swimming"],address: {city: "New York",country: "USA"},greet: function() {console.log("Hello!");}
};

属性名和属性值

在JavaScript对象中，属性名（key）是用来唯一标识属性的字符串，而属性值（value）可以是任何数据类型，包括基本数据类型（如字符串、数字、布尔值、null、undefined）和复杂数据类型（如对象、数组、函数）。

属性名是对象中的键，用于访问和操作对象的属性。属性名是字符串类型，可以包含字母、数字、下划线和其他字符，但必须遵循标识符的命名规则。属性名是区分大小写的。

属性值是与属性相关联的数据，可以是任何JavaScript数据类型。属性值可以是基本数据类型，也可以是复杂数据类型。例如，一个属性的值可以是字符串、数字、布尔值，甚至是另一个对象或函数。

 /**向对象中添加属性*属性名：* 对象的属性名不强制要求遵守标识符的规范* 什么乱七八糟的名字都可以使用* 但我们还是尽量按照标识符的规范去做* 如果要使用特殊的属性名，不能采用.的方式来操作* 例子 obj["123"]="hello";*  dpcument.write(obj["123"]);* JS对象的属性值可以使任意的数据类型* */var obj=new Object();obj["123"]="hello";obj.text1="hello";document.write(obj["123"]+"<br>");document.write(obj.text1+"<br>");obj["456"]=789;obj["nihao"]="你好";var n="nihao";var m="456";document.write(obj[m]+obj[n]);console.log(obj);var area=new Object();area=obj;console.log(area);//可以依靠obj之间的赋值来进行obj的套娃/**in运算符*通过该运算符可以检查一个对象中是否含有指定的属性* 如果有则返回true，没有则返回false* 语法：* "属性名" in 对象*///检查obj中是否含有test，text1属性名console.log("test" in obj);//obj中没有test属性名，所以输出falseconsole.log("text1" in obj);//obj中有text1属性名，所以输出trueconsole.log("text1" in area);//因为area继承了obj中所有的属性名，所以在area中检查是否存在text1，也会输出true

对象中基本数据类型和引用数据类型的比较

基本数据类型（Primitive Data Types）：

  • 包括字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）、未定义（Undefined）、Symbol（ES6新增）。
  • 基本数据类型的值直接存储在变量访问的位置，因此在比较时是按值比较的。
  • 当将一个基本数据类型的值赋给另一个变量时，会创建一个新的值的副本，而不是引用原始值。

引用数据类型（Reference Data Types）：

  • 包括对象（Object）、数组（Array）、函数（Function）等。
  • 引用数据类型的值存储在内存中的堆内存中，变量中存储的是指向实际对象的引用。
  • 当将一个引用数据类型赋给另一个变量时，实际上是将引用复制给了新变量，因此两个变量指向同一个对象，修改其中一个变量会影响另一个变量。

在比较基本数据类型时，比较的是它们的值是否相等；而在比较引用数据类型时，比较的是它们在内存中的引用是否指向同一个对象。这是因为基本数据类型是按值访问的，而引用数据类型是按引用访问的。

    /**基本数据类型*String Number Boolean Null Undefined* 引用数据类型* Object*///基本数据类型var a=123;var b=456;console.log("a="+a);console.log("b="+b);//引用数据类型var role1=new Object();role1.姓名="孙悟空";role1.职位="齐天大圣、斗战胜佛";role1.武器="如意金箍棒";var role2=new Object();role2.姓名="猪八戒";role2.职位="天蓬元帅、净坛使者菩萨";role2.武器="九齿钉耙";var role3=new Object();role3.姓名="沙悟净";role3.职位="卷帘大将、金身罗汉菩萨";role3.武器="降妖宝杖";var obj1=new Object();obj1.孙悟空=role1;obj1.猪八戒=role2;obj1.沙悟净=role3;role1.姓名="唐僧";//rol1.姓名由"孙悟空"变为了"唐僧",那么obj1引用的值也会随之变化console.log(obj1);//如果引用变量发生了改动，那么其余的引用的变量也会随之改动而不是不变//当一个值设置为null时，另一个引用该值的变量不会发生变化，会断开连接

在这里插入图片描述

    /**基本数据类型同赋值比较*/var a=10;var b=10;console.log(a == b);//控制台输出true//当比较两个基本数据类型的值时，就是比较他们的值//当比较两个引用数据类型时，它是比较的对象的内存地址//如果两个对象的值一样，但是地址不一样，它也会返回faLsevar obj1=new Object();var obj2=new Object();obj1.name="沙和尚";obj2.name="沙和尚";console.log(obj1 == obj2);//虽然内部的name值一模一样，但是他们的内存地址不一样console.log(obj1.name == obj2.name);//这里相比就是比值了

对象的字面量

JavaScript对象的字面量是一种直接创建对象的方式，使用大括号 {} 来表示对象，其中包含零个或多个键值对。对象字面量是一种简洁、方便的方式来定义和初始化对象，而不需要使用构造函数。
本博客开头的那个JS示例就是：

let person = {name: "Alice",age: 25,isStudent: true,hobbies: ["reading", "painting"],address: {city: "London",country: "UK"}
};

person 对象使用对象字面量的方式创建，包含了几个属性：name、age、isStudent、hobbies 和 address。每个属性都是一个键值对，用冒号分隔键和值，用逗号分隔不同的键值对。

对象字面量是一种常见且方便的方式来创建对象，并且可以在需要时动态地添加或修改属性。

函数

JS中的函数function也是一个对象，函数中可以封装一些功能代码，在我们需要使用的时候执行这些功能代码，一般我们在函数中保存一些代码，在需要的时候调用，当我们使用typeof检查一个函数对象的时候，会返回一个function。

    //创建一个函数对象//可以将要封装的代码以字符串的形式传递给构造函数var fun = new Function("console.log('Hello，这是我的第一个函数');");console.log(fun);//封装到函数中的代码不会立即执行//函数中的代码会在函数调用的时候执行//调用函数 语法:函数对象()fun();//函数对象有普通对象的功能fun.world="你好";console.log(fun.world);//使用函数声明来创建一个函数//语法：//function 函数名([形参1，形参2，形参3，形参4])//{//}function fun2(){console.log("这是我的第二个函数~~~");document.write("这是我的第二个函数~~~<br>");alert("这是我的第二个函数~~~");}console.log(fun2);//这种情况不属于调用函数fun2();//这样属于直接调用函数//使用函数表达式来创建一个函数//var 函数名 = function([形参1，形参2，形参3……])//{//}var fun3 =function(){document.write("我是匿名函数中封装的代码");}fun3();

函数的call()和apply()方法

call() 方法：

  • call() 方法允许你调用一个函数，并指定函数内 this 的值，以及传入一个参数列表。
  • 语法：function.call(thisArg, arg1, arg2, …)
  • 第一个参数 thisArg 是函数内部的 this 指向的对象，可以是任何对象。
  • 后续的参数是传递给函数的参数列表。
function greet(name) {console.log(`Hello, ${name}! My name is ${this.name}.`);
}let person = { name: "Alice" };
greet.call(person, "Bob");

apply() 方法：

  • apply() 方法与 call() 类似，但是接受一个参数数组作为参数。
  • 语法：function.apply(thisArg, [argsArray])
  • 第一个参数 thisArg 是函数内部的 this 指向的对象。
  • 第二个参数 argsArray 是一个数组，包含传递给函数的参数。
function greet(name) {console.log(`Hello, ${name}! My name is ${this.name}.`);
}let person = { name: "Alice" };
greet.apply(person, ["Bob"]);

这两个方法允许你在调用函数时显式指定函数内部的 this 指向的对象，并且可以传递参数列表或参数数组给函数。这在某些情况下非常有用，特别是在需要动态改变函数执行上下文时。

    /**call()和apply()*这两个方法都是函数对象的方法，需要通过函数对象来调用*党对函数调用call()和apply()都会调用函数执行*在调用call()和apply()可以将一个对象指定为第一个参数*此时这个对象将会成为函数执行时的this*call()方法可以将实参在对象之后依次传递*但是apply()方法需要将实参封装到一个数组中统一传递*this的情况*1.以函数形式调用时，this永远都是window*2.以方法的形式调用时，this是调用方法的对象*3.以构造函数的形式调用时，this是指定的那个对象*4.使用call和apply调用时，this是指定的那个对象*/function fun(a,b){console.log(a);console.log(b);console.log(this.name);}var obj={name:"obj1"};var arr=[2,3]fun.call(obj,2,3);fun.apply(obj,arr);console.log(obj);console.log(arr);//fun.call();//fun.apply();//fun();//上面三行代码效果一样//var obj2={name:"obj2"};//fun.call(obj);//此时输出的是objcet objcet //如果不设定第一参数是obj，而是直接调用fun()，那么输出的则是object window

arguments

arguments 是一个类数组对象，它包含了函数被调用时传入的所有参数。即使函数定义时没有明确指定参数，也可以通过 arguments 对象访问到所有传入的参数。arguments 对象可以在函数内部使用，类似于一个数组，可以通过索引访问参数值。

function sum() {let total = 0;for (let i = 0; i < arguments.length; i++) {total += arguments[i];}return total;
}console.log(sum(1, 2, 3)); // 输出 6

sum 函数没有明确指定参数，但是通过 arguments 对象可以访问到所有传入的参数，并计算它们的总和。arguments 对象可以用来处理不定数量的参数，或者在不知道函数会接收多少参数的情况下进行处理。

需要注意的是，arguments 对象是一个类数组对象，不是一个真正的数组，因此它没有数组的方法，如 push()、pop() 等。如果需要将 arguments 对象转换为真正的数组，可以使用类似 Array.from(arguments) 或者 Array.prototype.slice.call(arguments) 的方法。

    /**在调用函数时，浏览器每次都会传递进两个隐含的参数*1.函数的上下文对象this*2.封装实参的对象arguments*-arguments是一个类数组对象*类数组，但不是数组，所以判断是否是数组类型的时候会显示false*在调用函数时，我们所传递的实参都会在arguments中保存*arguments.length可以用来获取实参的长度*我们即使不定义形参，也可以通过arguments来使用实参*只不过比较麻烦*arguments[0]表示第一个实参 []中的数字就代表数组的索引*他里边有一个属性叫做callee*这个属性对应一个函数对象，就是当前正在指向的函数的对象*/function fun(){console.log(arguments);//检查是否是数组可以有两个办法console.log(arguments instanceof Array);//此时控制台输出falseconsole.log(Array.isArray(arguments));//次数控制台也是输出false//检查是否属于对象console.log(arguments instanceof Object);//此时控制台输出true//检查arguments的长度console.log(arguments.length);}fun();fun("hello");//此时长度输出为1fun("hellon","rock");//此时长度输出为2function fun1(){console.log(arguments[0]);console.log(arguments[2]);}fun1("a","b","c");function fun2(a,b){//console.log(arguments);//检查是否是数组可以有两个办法//console.log(arguments instanceof Array);//此时控制台输出false//console.log(Array.isArray(arguments));//次数控制台也是输出false//检查是否属于对象//console.log(arguments instanceof Object);//此时控制台输出true//检查arguments的长度//console.log(arguments.length);//console.log(arguments.callee);//次方法会在控制台显示出当前函数的所有代码console.log(arguments.callee == fun2);//callee代表当前函数，所以控制台显示true}fun2();

Date对象

JS中使用Date对象来表示一个时间，Date 对象表示的是从1970年1月1日00:00:00 UTC（世界协调时间）开始经过的毫秒数。Date 对象可以用来获取当前日期和时间，以及进行日期和时间的计算、比较和格式化。

  • 创建 Date 对象：使用 new Date() 构造函数来创建一个 Date 对象。如果不传入任何参数，将会得到当前的日期和时间。
    例如：
 let currentDate = new Date();
  • 获取日期和时间：Date 对象有多个方法用于获取日期和时间的各个部分，如 getFullYear()、getMonth()、getDate()、getHours()、getMinutes() 等。
    例如：
let year = currentDate.getFullYear();
let month = currentDate.getMonth();
let day = currentDate.getDate();
  • 日期和时间的计算：Date 对象可以进行日期和时间的计算，如加减天数、小时数等。
    例如：
currentDate.setDate(currentDate.getDate() + 1); // 将日期加一天
  • 格式化日期和时间：可以使用 toLocaleString()、toLocaleDateString()、toLocaleTimeString() 等方法将日期和时间格式化为本地时间字符串。
    例如：
let formattedDate = currentDate.toLocaleString();

    //创建一个Date对象//如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间var d=new Date();console.log(d);//创建一个指定的时间对象//需要在构造函数中传递一个表示时间的字符串作为参数//日期格式 月份/日/年 时:分:秒var d2=new Date("12/03/2016 11:10:30");console.log(d2);//getDate()//获取当前日期对象是几日var date=d2.getDate();console.log(date);//getDay()获取当前日期对象是星期几//他会显示0-6的值，其中0代表星期日var day=d2.getDay();console.log(day);//getMonth()会获取当前日期对象的月份//它会显示0-11的值，其中每个数字+1后的值代表着月份//比如0代表一月份，1代表二月份var month=d2.getMonth();console.log(month);//getFullYeart()获取当前日期对象的年份//以四位数字返回获取到的年份的值var year=d2.getFullYear();console.log(year);//其余的类似方法//getHours()获取日期对象的小时0-23//getMinutes()获取日期对象的分钟0-59//getSeconds()获取日期对象的秒数0-59//getMilliseconds()获取日起对象的毫秒0~999//getTime()//获取当前日期对象的时间戳//时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分0秒//到当前日期所花费的毫秒数(1秒=1000毫秒)//给系统设置的时间按系统情况断定时区，我们输入的时间按北京时间算，所以跟格林威治标准时间不是同一个时间var ds=d2.getTime();var ds2=d.getTime();console.log(ds);console.log(ds2);//Date()获取当前日期var dt=Date();console.log(dt);//Date,now()获取当前的时间戳//这个时间戳指运行的那个时间相对于格林威治标准时间的时间戳d=Date.now();console.log(d);//利用时间戳来测试代码的执行的性能var start=Date.now();for(i=0;i<100;i++){console.log("测试代码运行性能");}var end=Date.now();console.log("执行时间："+(end - start)+"毫秒");

Math对象

Math 对象是一个内置的数学对象，提供了许多数学常量和方法，用于进行数学计算。Math 对象中的方法和属性都是静态的，可以直接通过 Math 对象访问，而不需要创建实例。

常用属性：

  • Math.PI：表示圆周率 π 的近似值（3.14159…）。
  • Math.E：表示自然对数的底 e 的近似值（2.71828…）。

常用方法：

  • Math.abs(x)：返回参数 x 的绝对值。
  • Math.round(x)：将参数 x 四舍五入为最接近的整数。
  • Math.floor(x)：返回小于或等于参数 x 的最大整数。
  • Math.ceil(x)：返回大于或等于参数 x 的最小整数。
  • Math.max(x, y, z, ...)：返回参数中的最大值。
  • Math.min(x, y, z, ...)：返回参数中的最小值。
  • Math.random()：返回一个大于等于 0 且小于 1 的随机数。
  • Math.sqrt(x)：返回参数 x 的平方根。
  • Math.pow(x, y)：返回 x 的 y 次幂。
  • Math.sin(x)、Math.cos(x)、Math.tan(x)：返回参数 x 的正弦、余弦、正切值等三角函数值。
    /**Math和其他的对象不同，他不是一个构造函数*它属于一个工具类不用创建对象，它里面封装了数学运算相关的属性和方法*/    /*Math的对象属性*E 返回算术常量e，即自然对数的底数（约2.718）*LN2 返回2的自然对数（约等于0.693）*LN10 返回10的自然对数（约等于2.302）*LOG2E 返回以2为底的e的对象（约等于1.414）*LOG10E 返回以10为底的e的对数（约等于0.434）*PI 返回圆周率（约等于3.1415926）*SQRT1_2 返回2的平方根的倒数（约等于0.707）*SQRT2 返回2的平方根（约等于1.414）*///例如输出圆周率console.log(Math.PI);//Math的方法//例如abs()可以用来计算一个数的绝对值console.log(Math.abs(3-8888));//Math.ceil()可以对一个数进行向上取整，小数位只有有值就自动进1//Math.floor()可以对一个数进行向下取整，小数部分会被舍去//Math.round()可以对一个数进行四舍五入//Math.random()可以生成一个0-1之间的随机数console.log(Math.ceil(1.0055));console.log(Math.floor(1.55));console.log(Math.round(2.49));console.log(Math.random());for(i=0;i<100;i++){console.log(Math.random());}//max()可以获取多个数中的最大值//min()可以获取多个数中的最小值var max=Math.max(14,156,214,153,45,789,324,45,38,453,453,4,34,534,3541,5,4,561,3,153,4,531,35,153,4);var min=Math.min(45,1,53,135,4,5314,53,453,435,135,15,41,53,153,135,1,53,13,11,5,453,1,354,53,135,453,1,534,45);console.log(max);console.log(min);//pow(x,y)可以获取x的y次幂var pow=Math.pow(5,3);console.log(pow);//sqrt(x)可以获取x的平方根var sqrt=Math.sqrt(81);console.log(sqrt);

包装类

在JavaScript中，有三个包装类（Wrapper Classes）：String、Number 和 Boolean。这些包装类允许将基本数据类型（字符串、数字、布尔值）包装成对象，以便可以调用对象的方法和访问对象的属性。

String 包装类：String 包装类允许将基本数据类型的字符串包装成一个字符串对象。
例如：

let str = "Hello";
let strObj = new String(str);

Number 包装类：Number 包装类允许将基本数据类型的数字包装成一个数字对象。
例如：

let num = 10;
let numObj = new Number(num);

Boolean 包装类：Boolean 包装类允许将基本数据类型的布尔值包装成一个布尔对象。
例如：

let bool = true;
let boolObj = new Boolean(bool);

尽管可以使用包装类将基本数据类型包装成对象，但在实际开发中，通常直接使用基本数据类型，而不是使用包装类。这是因为 JavaScript 引擎会自动将基本数据类型转换为对象，以便可以调用对象的方法和访问对象的属性。因此，可以直接在基本数据类型上使用方法和属性，而无需显式地创建包装对象。

例如，可以直接使用字符串的方法和属性，而不需要创建 String 对象：

let str = "Hello";
console.log(str.length); // 输出 5

 /**基本数据类型*String Number Boolean Null Undefined * 引用数据类型* Object* 在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型小的数据转换为对象* String()可以将基本数据类型字符串转换为String对象* Number()可以将基本数据类型的数字转换为Number* Boolean()可以将基本数据类型的布尔值转换为Boolean对象* 在日常情况中，不会使用基本数据类型的对象* 如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的一些结果*/var num1 =new Number(3);//此时num1是objectvar num2 =3;//此时num2是Number类型var str1 =new String("hello");//此时str1是objectvar str2 ="hello";//此时str2是String类型var bool1=new Boolean(true);//此时bool1是objectvar bool2=true;//此时bool2是Boolean类型console.log(typeof num1);console.log(typeof num2);console.log(typeof str1);console.log(typeof str2);console.log(typeof bool1);console.log(typeof bool2);//因为设置了num1num1.text1="Hello,World!";console.log(num1.text1);//控制台显示Hello,Wordld!console.log(num1);//控制台显示num1这个项目中的所有属性//方法和属性只能添加给对象，不能添加给基本数据类型//当我们对一些基本数据类型的值去调用属性和方法时//浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法//调用完以后，再将其转换为基本数据类型。所以再转换类型后，给a添加一个属性，也不会在控制台显示，这个属性已经被销毁了var a=123;a=a.toString();console.log(a);console.log(typeof a);

关于字符串的相关方法

  • charAt(index)：返回指定索引位置的字符。
  • charCodeAt(index)：返回指定索引位置的字符的 Unicode 值。
  • length：返回字符串的长度（字符的个数）。
  • substring(startIndex, endIndex)：返回从 startIndex 到 endIndex（不包括）之间的子字符串。
  • slice(startIndex, endIndex)：返回从 startIndex 到 endIndex（不包括）之间的子字符串。与 substring() 类似，但支持负数索引。
  • indexOf(searchValue, startIndex)：返回指定字符串在原字符串中首次出现的索引位置。如果未找到，返回 -1。
  • lastIndexOf(searchValue, startIndex)：返回指定字符串在原字符串中最后一次出现的索引位置。如果未找到，返回 -1。
  • toUpperCase()：将字符串转换为大写。
  • toLowerCase()：将字符串转换为小写。
    /**创建一个字符串*/var str="HelloWorlld"/**在底层字符串是以字符数组的形式保存的*["H","e","l","l","o"…………]*///length可以用来获取字符串的长度console.log(str.length);//输出字符长度12console.log(str[0]);//输出第一个字符H//返回字符串中指定位置的字符//charAT()，返回指定索引位置的值//该方法不会对原字符串产生影响var result =str.charAt(2);var result2=str[2];console.log(result);//会返回指定的索引位置的值console.log(result2);//效果跟上面的charAT(2)一样//charCodeAt()//返回字符串中指定的索引位置的值的Unicode编码值var result3=str.charCodeAt(2);console.log(result3);//输出了l在Unicode编码中的值，也就是108 //String.fromCharCode()//返回字符编码中指定的值的字符编码var result4=String.fromCharCode(78);//注意()中的值的进制console.log(result4);//concat()//可以用来连接两个或者多个字符串//作用和+一样//不会对原字符串产生影响var result5,str1,str2;str1="Hello";str2="World";result5=str1.concat(str2);console.log(result5);//indexOf()//检索字符串,该方法可以检查一个字符串中是否含有指定内容//如果字符串中含有该内容，则会返回其第一次出现的索引//如果没有找到指定的内容，则是返回-1//()中可以传递两个参数，第一个为索引值，第二个为索引位置的值var str3="hello atguigu";var result6=str3.indexOf("g");var result7=str3.indexOf("g",9);console.log(result7);console.log(result6);//lastIndexOf()//相比于indexOf()不同的是一个是从前往后找，一个是从后往前找，但是找到的结果的位置索引还是按从前往后算//第二个参数也是起始位置索引，从输入的起始索引开始从后往前找//方向改变，索引位置还是不变//slice()//可以从字符串中截取指定的内容//对原字符串没有任何影响//同样是可以输入两个参数，一个是起始位置索引，一个是结束位置索引，但是截取的字符串包括起始位置不包括结束位置var str4="abcdefghijk";var result8=str4.slice(0,5);var result9=str4.slice(0);var result10=str4.slice(0,-1);//负数表示倒数，所以-1表示倒数第一，不输出结束位置索引console.log(result8);//输出abcde（不包括f）console.log(result9);//只有起始位置索引，没有结束位置，默认输出后面的所有字符串console.log(result10);//输出abcdefghij//substring()//可以用来截取一个字符串，可以slice()类似//两个参数的使用跟slice()类似，都是起始位置索引和结束位置索引 //这个方法不能接受负值作为参数，如果传递了一个负值，折磨人使用0//他还自动调整参数的位置，如果第二个参数小于第一个，则自动交换var result11=str4.substring(1,2);console.log(result11);//substr()//用来截取字符串//同样是可以传递两个参数，第一个参数是起始位置索引值，第二个参数是索引的数量(索引的长度)//不影响原字符串var result12=str4.substr(1,2);console.log(result12);//split()//可以将一个字符串拆分为一个数组var str5="abc,bcd,efg,hij";var result13=str5.split(",");//如果传递一个空串作为参数，则会将每个字符都拆分为数组中的每一个元素console.log(result13);//这样的话，就会以,为标识符把字符串分开//最后就会输出一个数组console.log(result13[1]);//控制台输出数组的第二个元素，即bcdconsole.log(typeof result13);//此时输出的object而不是stringconsole.log(Array.isArray(result13));//控制台输出的是true，确认result13是数组console.log(result13.length);//控制台输出的长度是4，也就是四个元素//toUpperCase()//将一个字符串转换为大写并且返回var str6="abcdefg一二";var result14=str6.toUpperCase();console.log(result14);//小写字母变成了大写字母//tuLowerCase()//将一个字符串转换为小写并且返回var str7="ABCDEFG";var result15=str7.toLowerCase();console.log(result15);//大写字母变成了小写字母

函数参数

/**定义一个用来求两个数和的函数*可以在函数的()中来指定一个或多个形参（形式参数）*多个形参之间使用，隔开，声明形参就相当于在函数内部生命了对应的变量*但是并不赋值*/function sum(num1,num2){document.write(num1+num2+"<br>");}sum(123,456);//在调用函数时，可以再()中指定实参（实际参数）//实参将会赋值给函数中华对应的形参//调用函数时，解析器不会检查实参的类型sum(123,"hello");//输出123hello//调用函数时，解析器不会检查实参的数量//多余实参不会被使用sum(123,456,"hell","hello");//特殊情况，实参缺失sum(1);//此时b的值是undefined，所以相加为NaN

返回值

/**创建一个函数，用来计算三个数的和*可以使用return来设置函数的返回值* 语法：* return 值* return后的值将会作为函数的执行结果返回* 可以定义一个变量来读取该结果* return后面的语句都不会执行* 没有明确返回值或者输出值的话，获取的值默认undefined*/function sum(a,b,c){var d=a+b+c;return d;}var result=sum(7,8,9);console.log(result);

    /**函数常规流程*/function fun1(){alert("我要开始装逼了");for(i=1;i<=5;i++){document.write(i+"<br>");//break可以退出当前循环结构//continue可以用于跳过档次循环//return直接返回当值，并且不执行后面的代码,即结束整个函数}alert("我装逼完了");}//fun()//return返回值可以使任意的数据类型//也可以是一个对象，也可以是一个函数function fun2(){var obj={name:"沙和尚"};return obj;}var a=fun2();console.log(a.name);

立即执行函数

在 JavaScript 中，立即执行函数（Immediately Invoked Function Expression，IIFE）是一种在定义后立即执行的函数表达式。它可以用于创建一个独立的作用域，避免变量污染和全局命名冲突。

(function() {// 函数体
})();

let result = (function(name) {return "Hello, " + name + "!";
})("Alice");console.log(result); // 输出 "Hello, Alice!"

在这个例子中，立即执行函数接受一个参数 name，并返回一个拼接了问候语的字符串。通过在函数定义后立即调用，并传递参数 “Alice”，可以立即执行函数并将结果赋值给变量 result。

函数的作用域

函数内部定义的变量和函数在函数内部可访问的作用域。这意味着在函数内部定义的变量和函数只能在函数内部被访问，而在函数外部是不可见的。
变量的作用域：

  • 在函数内部使用 var 关键字声明的变量具有函数作用域，也称为局部变量。
  • 在函数外部声明的变量具有全局作用域，也称为全局变量。
function myFunction() {var localVar = "I am a local variable";console.log(localVar); // 在函数内部可以访问局部变量
}myFunction();
console.log(localVar); // 报错，无法在函数外部访问局部变量

函数的作用域链：

  • 函数作用域链是指函数内部可以访问外部函数的变量，以及全局作用域中的变量。
  • 当函数在内部访问一个变量时，它首先在自己的作用域中查找，如果找不到，则沿着作用域链向上查找，直到找到变量或到达全局作用域。
var globalVar = "I am a global variable";function outerFunction() {var outerVar = "I am an outer variable";function innerFunction() {var innerVar = "I am an inner variable";console.log(innerVar); // 在内部函数中访问内部变量console.log(outerVar); // 在内部函数中访问外部变量console.log(globalVar); // 在内部函数中访问全局变量}innerFunction();
}outerFunction();

枚举对象中的属性

  • for…in 循环： 使用 for…in 循环可以遍历枚举对象的所有可枚举属性（包括继承的属性）。
    const Colors = {RED: "red",GREEN: "green",BLUE: "blue"
};for (let key in Colors) {console.log(key); // 输出 RED, GREEN, BLUE
}
  • Object.keys() 方法： 使用 Object.keys() 方法可以获取枚举对象的所有可枚举属性的键组成的数组。
    const Colors = {RED: "red",GREEN: "green",BLUE: "blue"
};let keys = Object.keys(Colors);
console.log(keys); // 输出 ["RED", "GREEN", "BLUE"]
  • Object.values() 方法： 使用 Object.values() 方法可以获取枚举对象的所有可枚举属性的值组成的数组。
       const Colors = {RED: "red",GREEN: "green",BLUE: "blue"};let values = Object.values(Colors);console.log(values); // 输出 ["red", "green", "blue"]```
  • Object.entries() 方法： 使用 Object.entries() 方法可以获取枚举对象的所有可枚举属性的键值对组成的数组。
        const Colors = {RED: "red",GREEN: "green",BLUE: "blue"};let entries = Object.entries(Colors);console.log(entries); // 输出 [["RED", "red"], ["GREEN", "green"], ["BLUE", "blue"]]

这些方法可以帮助我们获取枚举对象的属性，以便进行遍历、查找、过滤等操作。需要注意的是，for…in 循环会遍历对象的原型链上的属性，而 Object.keys()、Object.values() 和 Object.entries() 方法只会获取对象自身的可枚举属性。

JS的作用域Scope

全局作用域（Global Scope）：

  • 全局作用域是在整个代码中都可访问的作用域。
  • 在全局作用域中定义的变量和函数可以在代码的任何地方被访问。
    例如，在全局作用域中定义的变量：
let globalVariable = "I am in global scope";

函数作用域（Function Scope）：

  • 函数作用域是在函数内部定义的变量和函数可访问的作用域。
  • 在函数作用域中定义的变量和函数只能在函数内部被访问。
    例如，在函数作用域中定义的变量：
function myFunction() {
let localVariable = "I am in function scope";
}

块级作用域（Block Scope）：

  • 块级作用域是在代码块（如 if、for、while 语句块）内部定义的变量可访问的作用域。
  • 在块级作用域中定义的变量只能在块级作用域内部被访问。
    例如，在块级作用域中定义的变量：
 if (true) {let blockVariable = "I am in block scope";}

this

this 是一个特殊的关键字，用于引用当前执行上下文中的对象。它的值取决于函数的调用方式和上下文。

函数调用方式：

  • this 的值取决于函数的调用方式。
  • 当函数作为对象的方法调用时，this 指向调用该方法的对象。
  • 当函数作为普通函数调用时，this 指向全局对象（在浏览器中是 window 对象）。
const obj = {name: "Alice",greet: function() {console.log("Hello, " + this.name + "!");}
};obj.greet(); // 输出 "Hello, Alice!"function sayHello() {console.log("Hello, " + this.name + "!");
}sayHello(); // 输出 "Hello, undefined!"（在浏览器中输出 "Hello, [全局对象的名称]!"）

构造函数中的 this：

  • 当函数作为构造函数使用时，this 指向新创建的对象。
  • 在构造函数中，可以使用 this 来引用新创建的对象，并将属性和方法添加到该对象上。
function Person(name) {this.name = name;this.greet = function() {console.log("Hello, " + this.name + "!");};
}const person = new Person("Alice");
person.greet(); // 输出 "Hello, Alice!"

显式绑定 this：

  • 可以使用 call()、apply() 或 bind() 方法来显式地绑定函数的 this 值。
  • 这些方法允许在调用函数时指定 this 的值，并传递参数给函数。
const obj1 = { name: "Alice" };
const obj2 = { name: "Bob" };function greet() {console.log("Hello, " + this.name + "!");
}greet.call(obj1); // 输出 "Hello, Alice!"
greet.apply(obj2); // 输出 "Hello, Bob!"const greetBob = greet.bind(obj2);
greetBob(); // 输出 "Hello, Bob!"
   /**浏览器在调用函数每次都会向函数内部传递进一个隐含的参数*这个隐含的参数就是this，this指向的是一个对象*这个对象我们称为函数执行的上下文对象*根据函数的调用方式的不同，this会指向不同的对象*1.以函数的形式调用时，this永远都是window*2.以方法的形式调用时，this就是调用方法的那个对象*如果是函数调用，那么就可以引用全局变量，如果var name="孙悟空"*那么this.name =window.name="孙悟空"*/function fun(){console.log(this);}fun();var obj={name:"孙悟空",sayName:fun};obj.sayName();fun();

    //创建一个name变量var name="全局";//此时name属于全局变量，即window.name//创建一个fun()函数function fun(){console.log(this.name);}//创建两个对象var obj ={name:"孙悟空",sayName:fun};var obj2 ={name:"沙和尚",sayName:fun};//fun();obj.sayName();obj2.sayName();//我们希望调用obj.sayName()时可以输出obj的名字

函数声明和变量声明

函数声明（Function Declaration）和变量声明（Variable Declaration）都会被提升（Hoisting）到当前作用域的顶部。这意味着在代码执行之前，函数声明和变量声明的定义就已经存在于内存中，可以在声明之前使用。

函数声明的提升意味着可以在函数声明之前调用函数，例如：

greet(); // 可以在函数声明之前调用function greet() {console.log("Hello!");
}

变量声明的提升意味着可以在变量声明之前使用变量，但是变量的值会被提升为 undefined，例如：

console.log(name); // 可以在变量声明之前访问，但值为 undefinedvar name = "Alice";

需要注意的是，虽然函数声明和变量声明都会被提升，但是函数表达式（Function Expression）和变量赋值不会被提升。例如：

greet(); // 报错，函数表达式没有被提升var greet = function() {console.log("Hello!");
};

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/1785.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

LeetCode in Python 72. Edit Distance (编辑距离)

LeetCode in Python 72. Edit Distance (编辑距离)

编辑距离的基本思想很直观&#xff0c;即不断比较两个单词每个位置的元素&#xff0c;若相同则比较下一个&#xff0c;若不同则需要考虑从插入、删除、替换三种方法中选择一个最优的策略。涉及最优策略笔者最先想到的即是动态规划的思想&#xff0c;将两个单词的位置对应放在矩…
阅读更多...
Vue2 移动端（H5）项目封装弹窗组件

Vue2 移动端（H5）项目封装弹窗组件

前言 因vant-ui的dialog组件没有自定义footer插槽 效果 参数配置 1、代码示例&#xff1a; <t-dialog :visible.sync"show" :title"title" submit"submit"></t-dialog>2、配置参数&#xff08;t-dialog Attributes&#xff09; 参…
阅读更多...
IS62C256AL-45TLI功能参数介绍及如何优化性能

IS62C256AL-45TLI功能参数介绍及如何优化性能

IS62C256AL-45TLI功能和参数介绍及如何优化性能-公司新闻-配芯易-深圳市亚泰盈科电子有限公司 产品品种:静态随机存取存储器 RoHS:是 存储容量:256 kbit 组织:32 k x 8 访问时刻:45 ns 接口类型:Parallel 电源电压-最大:5.5 V 电源电压-最小:4.5 V 电源电流—最大值:25 mA 最小…
阅读更多...
JumpServer搭建堡垒机实战

JumpServer搭建堡垒机实战

文章目录 第一步、下载安装第二步、访问异常处理【1】docker方式拉取失败 JumpServer是运维人员可连接内部服务器上进行操作&#xff0c;支持Linux等操作系统的管理工具。 第一步、下载安装 curl -sSL https://resource.fit2cloud.com/jumpserver/jumpserver/releases/latest/…
阅读更多...
OpenCV-复数矩阵点乘ComplexMatrixDotMultiplication

OpenCV-复数矩阵点乘ComplexMatrixDotMultiplication

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 需求说明 一般用到FFT&#xff0c;就涉及到复数的计算&#xff0c;为了便于调用&#xff0c;我自行封装了一个简单的复数矩阵点乘…
阅读更多...
如何用网页绘制一个黑莓9900的键盘效果图

如何用网页绘制一个黑莓9900的键盘效果图

如何用网页绘制一个黑莓9900的键盘效果图 入了几个黑莓蓝牙键盘&#xff0c;出于喜好&#xff0c;想做一个跟实体键盘一模一样的网页界面。 最终的实现效果是这样的&#xff1a; 在线查看&#xff1a;http://kylebing.cn/tools/bb-keyboard 点击上面四个按键显示不同模型界面…
阅读更多...
Linux 网络操作命令Telnet

Linux 网络操作命令Telnet

Telnet 尽管 Telnet 已经逐渐被更安全的 SSH 协议所取代&#xff0c;但在某些特定场景下&#xff0c;如对旧系统的维护或教育目的&#xff0c;Telnet 仍然有其使用价值。本文将介绍如何在 Linux 系统中安装 Telnet 客户端&#xff0c;以及如何使用它进行远程登录。 用户使用 t…
阅读更多...
Activiti——将绘制的流程图存入act数据库并进行流程推进与状态流转

Activiti——将绘制的流程图存入act数据库并进行流程推进与状态流转

文章目录 前言流程图入库操作 RepositoryService项目结构数据库连接配置文件入库Java测试代码zip 方式进行流程的批量部署 流程启动 RuntimeService待处理任务查看 TaskService流程状态的扭转查询流程定义信息 RepositoryService查询正在执行的流程实例 RuntimeService已部署流…
阅读更多...
Springboot+Vue项目-基于Java+MySQL的在线文档管理系统(附源码+演示视频+LW)

Springboot+Vue项目-基于Java+MySQL的在线文档管理系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…
阅读更多...
实测14us，Linux-RT实时性能及开发案例分享—基于全志T507-H国产平台

实测14us，Linux-RT实时性能及开发案例分享—基于全志T507-H国产平台

本文带来的是基于全志T507-H&#xff08;硬件平台&#xff1a;创龙科技TLT507-EVM评估板&#xff09;&#xff0c;Linux-RT内核的硬件GPIO输入和输出实时性测试及应用开发案例的分享。本次演示的开发环境如下&#xff1a; Windows开发环境&#xff1a;Windows 7 64bit、Window…
阅读更多...
在 Linux 上通过 udev 规则绑定 ttyUSB 设备的相对地址

在 Linux 上通过 udev 规则绑定 ttyUSB 设备的相对地址

文章目录 问题描述解决方案1. 分辨当前 USB 设备的绝对地址2. 使用绝对地址查看设备属性3. 使用 udev 规则绑定设备到相对地址3.1. 区分多个不同型号 USB 设备3.2. 区分多个相同型号 USB 设备 问题描述 Linux 系统开机时会随机为连接的 USB 设备随机分配 /dev/ttyUSB* 这样的绝…
阅读更多...
java学习之路-抽象类和接口

java学习之路-抽象类和接口

目录 前言 1.抽象类 1.2抽象类语法 1.3抽象类特性 1.4抽象类的作用 2.接口 2.1接口概念 2.2接口的定义 2.3接口的使用 接口使用栗子 2.4接口特性 2.5 实现多个接口 请看栗子 2.6接口间的继承 2.7接口使用实例 2.8Clonable 接口和深浅拷贝 2.9 抽象类和接口的区别…
阅读更多...
华为是如何开经营分析会的？

华为是如何开经营分析会的？

添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 企业不可避免开各种会议&#xff0c;而其中经营分析会对于企业发展至关重要。该会议主要是对企业经营目标进行复盘&#xff0c;需要公司全体上下共同重视&#xff0c;其目的是让企业集中力量&#xff0c;解…
阅读更多...
Java | Leetcode Java题解之第35题搜索插入位置

Java | Leetcode Java题解之第35题搜索插入位置

题目&#xff1a; 题解&#xff1a; class Solution {public int searchInsert(int[] nums, int target) {int n nums.length;int left 0, right n - 1, ans n;while (left < right) {int mid ((right - left) >> 1) left;if (target < nums[mid]) {ans mi…
阅读更多...
根据表格该列数据的长度动态变化该列的宽度；

根据表格该列数据的长度动态变化该列的宽度；

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、代码前言 在使用elementui的表格将数据展示出来时，我们想根据表格该列数据的长度动态变化该列的宽度； 1.看了一下elementui文档有一个 width 的属性，可用它来修改对应列。 2.那么我们需要拿到该列的所有数据去比较…
阅读更多...
java基础之类运行与双亲委派机制简介

java基础之类运行与双亲委派机制简介

一 类加载运行过程 通过java命令运行某个类的main函数来启动程序时&#xff0c;首先需要通过类加载器将主类加载到JVM中&#xff1b; 源码&#xff1a; package com.ddu.jvm;public class HelloWordHelper {public static void main(String[] args) {User user new User();…
阅读更多...
初识java——jdk?环境变量？及关于安装jdk的步骤

初识java——jdk?环境变量？及关于安装jdk的步骤

文章目录 JDK的安装在安装JDK时遇到的问题&#xff1a; 背景知识一 什么是jdkjdk简介jdk文件详解&#xff1a;1 bin目录&#xff1a;2 lib目录&#xff1a;3 include目录.exe文件是可执行的应用程序&#xff0c;这个我们都清楚&#xff0c;但.dll文件又是做什么的呢&#xff1f…
阅读更多...
数据结构学习之路--玩转队列的内核知识(附C源码)

数据结构学习之路--玩转队列的内核知识(附C源码)

嗨嗨大家~我又来啦&#xff01;今天为大家带来的是与队列相关的知识。我们马上进入知识的海洋~ 目录 前言 一、队列 1 队列的概念 2 队列的实现 2.1 队列的定义 2.2 队列的初始化 2.3 队列的判空 2.4 入队 2.5 出队 2.6 取队头元素 2.7 取队尾元素 2.8 取…
阅读更多...
37、Tomato(VulnHub)

37、Tomato(VulnHub)

Tomato 一、nmap 2211是ssh的端口&#xff0c;21的ftp也不是弱密码 二、web渗透 随便看看 目录爆破 /seclists/Discovery/Web-Content/common.txt /antibot_image/antibots/readme.txt 发现该站点存在反爬机制 /antibot_image/antibots/info.php 提示我们该网页存在个参数 GET&…
阅读更多...
SFP、SFP+、SFP28 与 QSFP28 收发器之间的差异：兼容性和性能

SFP、SFP+、SFP28 与 QSFP28 收发器之间的差异：兼容性和性能

近年来&#xff0c;网络技术发展迅速&#xff0c;因此&#xff0c;计算专业人员面临着越来越令人困惑的术语和缩写词。 管理数据中心时必须了解的一个关键领域是收发器&#xff0c;特别是 SFP (1550nm/1310nm)、SFP (850nm) 和 QSFP28 (4x25G) 之间的差异。 这些型号在兼容性方…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023