JavaScript 引用数据类型

1390

对象(Object)

对象由花括号分隔，在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义，也叫 json。
属性由逗号分隔，空格和折行无关紧要。声明可横跨多行。

定义一个对象, 姓名：Keafmd, 年龄：18 ，地址：北京，isEdu:false

样例代码：

var Ke = {
    'name': 'Keafmd',
    'age': 18,
    address: '北京',
    isEdu:false
}
console.log(Ke)

复制代码

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var Ke = {
			    'name': 'Keafmd',
			    'age': 18,
			    address: '北京',
			    isEdu:false
			}
			console.log(Ke)
		</script>
	</head>
	<body>
		
	</body>
</html>


复制代码

效果截图：

对象的创建

使用 {} 创建

var person = {
    name : 'Keafmd',
    sayHi:function(){
        console.log('hi, my name is :'+this.name)
    }
};

复制代码

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			var person = {
			    name : 'Keafmd',
			    sayHi:function(){
			        console.log('hi, my name is :'+this.name)
			    }
			};
			console.log(person) 
			person.sayHi()
		</script>
		<title></title>
	</head>
	<body>
		
	</body>
</html>



复制代码

效果截图：

使用 Object 创建

var p = new Object();
p.name = 'Keafmd';
p.age = 18;

console.log(p);

复制代码

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			var p = new Object();
			p.name = 'Keafmd';
			p.age = 18;
			
			console.log(p);
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>


复制代码

效果截图：

使用 Function 创建

function Student(){
   this.name = '';
    this.age = 0;
}

var stu1 = new Student();
stu1.name = "Keafmd";
stu1.age = 18;
stu1.address = '哈尔滨';

console.log(stu1);

var stu2 = new Student();
console.log(stu2);

复制代码

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			function Student(){
			    this.name = '';
			    this.age = 0;
			}
			
			var stu1 = new Student();
			stu1.name = "Keafmd";
			stu1.age = 18;
			stu1.address = '哈尔滨';
			
			console.log(stu1);
			
			var stu2 = new Student();
			console.log(stu2);
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>


复制代码

效果截图：

使用 class 关键字

class Human{
   constructor(name) {
        this.name = name;
    }

    sayHi(){
        console.log('我是： '+this.name);
    }

}

var  h1 = new Human('Keafmd');
h1.sayHi()

复制代码

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			class Human{
			    constructor(name) {
			    this.name = name;
			    }
			
			    sayHi(){
			        console.log('我是： '+this.name);
			    }
			
			}
			
			var  h1 = new Human('Keafmd');
			h1.sayHi()
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>


复制代码

效果截图：

对象的原型模型

通过对象可以给对象扩展字段（属性、方法）
如果想同一个类型，都添加属性，则需要用到原型 prototype

样例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function Student(){
                this.name = '';
                this.age = 0;
            }

            var  s1 = new Student();

            
            
            
            

            
            Student.prototype.sayHi = function(){
                console.log('打招呼')
            }

            s1.sayHi();


            var  s2 = new Student();
            s2.sayHi();
        </script>
    </head>
    <body>
    </body>
</html>

复制代码

效果截图：

用于存储多个数据集合的类型

var names = ['张飞','刘备','关羽'];
console.log(names);

复制代码

数据元素的访问, 通过下标的形式 (下标从 0 开始) 数组名 [下标], names[0];

var names = ['张飞','刘备','关羽'];
console.log(names[1]);

复制代码

数组的定义

使用 [] 创建数组

可以直接初始化, 推荐使用

var arr1 = [10,20,30];
console.log(arr1);

复制代码

使用 Array 创建数组

var arr2 = new Array();
console.log(arr2);

复制代码

数组的访问

length 属性代表数字的长度。
通过元素 [下标] 访问数组, 赋值、获取元素内容, 数组是可变长度。

样例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>

            var arr1 = [10,20,30];
            console.log("arr1.length: "+arr1.length);

            var arr3 = [];
            arr3[0] = 100;
            arr3[1] = 200

            arr3[100] = 999;

            console.log("arr3.length: "+arr3.length);
            console.log("arr3[2]: "+arr3[2]);

        </script>
    </head>
    <body>
    </body>
</html>

复制代码

效果截图：

数组的方法

push 向数组中添加元素

相当于是入栈

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			var arr = [];
			arr.push(10);
			arr.push(20);
			arr.push(30);
			arr.push('Keafmd');
			
			console.log("arr[0]:"+arr[0]);
			console.log("arr[1]:"+arr[1]);
			console.log("arr[2]:"+arr[2]);
			console.log("arr[3]:"+arr[3]);
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>


复制代码

效果截图：

pop 从数组的末尾获取元素，并将元素从数组中删除

相当于是出栈

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			var arr = [];
			
			arr.push(10);
			arr.push(20);
			arr.push(30);
			arr.push('Keafmd');
			
			console.log(arr.pop()); 
			console.log(arr.pop()); 
			console.log(arr.pop()); 
			console.log(arr.pop()); 
			console.log(arr)  
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>


复制代码

效果截图：

shift 从数组首个下标获取元素，并将元素从数组中删除

类似出队

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			var arr4 = [10,20,30,40];
			console.log(arr4.shift()) 
			console.log(arr4)   
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>


复制代码

效果截图：

slice 切片

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			var arr5 = [10,20,30,40];
			console.log(arr5)
			console.log("arr5.slice(1) : "+arr5.slice(1))
			console.log("arr5.slice(1,2) : "+arr5.slice(1,2))
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>


复制代码

效果截图：

join 和 split

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			
			var arr6 = [10,20,30,40];
			console.log("arr6.join(\"-\"): "+ (arr6.join('-'))) ;
			
			
			var arrStr = '10-20-30-40';
			console.log(arrStr.split('-')) ;
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>


复制代码

效果截图：

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

方法的声明

function 名字(参数列表...){
    //语句块
}
//调用
方法名字()

复制代码

实例↓

function sayHi(){
    console.log('hello JavaScript')
}

sayHi(); 

复制代码

在 js 中一切皆是对象, 方法只要加括号就可以执行

function sayHi(){
    console.log('hello JavaScript')
}

var myfun = sayHi;
myfun()

复制代码

无参函数

像这种不传参数的函数就是无参函数

function sayHi(){
    console.log('hello JavaScript')
}

sayHi();

复制代码

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			function sayHi(){
			    console.log('hello JavaScript')
			}
			
			sayHi();
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>


复制代码

效果截图：

有参函数

有参的函数我们在定义时需要定义参数，而且调用时也需要传入参数。

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			
			function sum(numa,numb){
				console.log(numa+numb)
			}
			
			
			sum(10,20);
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>


复制代码

效果截图：

函数可以作为参数传递

第一种写法

function say (value) {
    alert(value);
}
function execute (someFunction, value) {
    someFunction(value);//回调函数
}
execute(say, 'hi js.');

复制代码

上面代码是将 say 方法作为参数传递给 execute 方法。

第二种写法

var say = function(value) {
    alert(value);
 }
 function execute (someFunction, value) {
     someFunction(value);//回调函数
 }
 execute(say, 'hi js.');

复制代码

第三种写法

function execute (someFunction, value) {
  someFunction(value);//回调函数
}
execute(function(value) {
    alert(value);
}, 'hi js.');

复制代码

上述代码中 execute 方法的第一个参数是一个匿名函数 (没有函数名的函数)。函数有名字是为了方便下次使用。 而使用匿名函数通常不希望再次使用(即只使用一次的) 的函数可以定义为匿名函数。

上面的函数 say 被叫做回调函数。

回调函数

回调函数就是你调用别人（execute），然后别人会调用你（say），简言之：你写一个函数（say），但不是由你调用，是由你调用的一个函数（execute）调用。

函数做为返回值

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			function fn2(a){
			    return function (b){
			        console.log(a+b);            
			    };
			}
			
			fn2(20)(10);
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>


复制代码

效果截图：

arguments

在调用函数时，浏览器还传递了另一个隐含的参数，还有一个参数叫做 arguments。arguments 是一个类数组对象，在它里边保存着函数执行时的实参。函数的所有的实参都在 arguments 中保存，通过 arguments 即使不定义形参也可以使用参数。

样例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

            function fun(a,b,c){


                
                console.log(arguments.length);

                
                
                console.log(arguments[2]);

            }

            fun("hello",123,true);




        </script>
    </head>
    <body>
    </body>
</html>

复制代码

效果截图：

变量作用域

**作用域（Scope）
作用域简单来说就是指一个变量的作用的范围
在 JS 中作用域分成两种：

  1. 全局作用域
  2. 函数作用域**

**全局作用域：

  1. 所有直接在 script 标签中编写的代码都在全局作用域中。
  2. 全局作用域在打开网页时创建，在网页关闭时销毁。
  3. 全局作用域中有一个全局对象 window，window 代表的是浏览器的窗口。

在全局作用域中创建的变量都会作为 window 对象的属性保存
在全局作用域中创建的函数都会作为 window 对象的方法保存
4. 在全局作用域中创建的变量都是全局变量，可以在页面的任意位置访问。**

样例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
		
        var a = 123;
        b = 456;



        function fun(){
            console.log(b);
            console.log(window.a);
            console.log(window.b);
            console.log("我是全局中的函数fun");
        }

        fun();

        window.fun();

        



    </script>
</head>
<body>
</body>
</html>

复制代码

效果截图：

函数作用域

**函数作用域：

  1. 函数作用域可以理解为是全局中的小的作用域。
  2. 函数作用域在函数调用时创建，在调用结束时销毁。

每调用一次函数就会创建一个新的函数作用域。
3. 在函数作用域中可以访问到全局变量, 而在全局中无法访问到函数作用域中的变量。
在函数中创建的变量如果不写 var，则会变成全局变量。
4. 当我们在函数中使用一个变量时，它会先在自身的作用域中寻找，如果有就直接使用，如果没有则去上一级作用域中寻找，找到则使用，没找到则继续寻找，直到找到全局作用域为止。
如果全局作用域中依然没有，则报错 ReferenceError。
5. 在函数作用域中也适用变量和函数的声明提前。**

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var a = "全局中的a";

			function fun() {
				
				
				var b = "函数作用域中的b";

				console.log(b);
			}

			fun();

			

			
			var c = "全局c";

			console.log(window.c);
			

			function fun3() {

				

				function fun4() {

					

					console.log(c);
				}

				
				fun4();

			}

			fun3();
		</script>
	</head>
	<body>
	</body>
</html>


复制代码

效果截图：

变量和函数的声明提前

变量的声明提前：
使用 var 关键字声明的变量，都会在所有的代码执行之前被声明，但是不会赋值。
赋值会直到执行到赋值的代码时才执行。
如果不适用 var 关键字声明变量，则不会有声明提前的特性。

函数的声明提前：
使用函数声明创建的函数，会在所有的代码执行之前创建，
所以我们可以在函数声明前就去调用函数。
使用函数表达式创建的函数，没有这个特性，所以不能在它创建之前调用。

样例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">


        
        
        

        
        console.log("a = "+a);

        var a = 10;

        fun();
        

        
        function fun(){
            console.log("我是fun函数");
        };

        
        var fun2 = function(){
            console.log("我是fun2函数");
        };
		
		
		fun();
		fun2();



    </script>
</head>
<body>
</body>
</html>

复制代码

效果截图：

上面的 fun2() 的注释打开会报错，因为在那里还没有声明 fun2，不能调用。

写作不易，读完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的 “一键三连” 了吗，没错点它 [哈哈]

加油！

共同努力！

Keafmd

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
前端
喜欢就支持一下吧
点赞0 分享
AI-robot的头像-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
14年前 2.6W+
机器学习之随机森林回归篇（RandomForestRegressor）-一一网
机器学习之随机森林回归篇（RandomForestRegressor）
机器学习之随机森林回归篇（RandomForestRegressor）
4年前 4202
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS-一一网
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
4年前 3895
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞-一一网
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
19年前 3842
Wireshark之抓包文件保存-一一网
Wireshark之抓包文件保存
Wireshark之抓包文件保存
4年前 3406
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
相关推荐
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
手摸手教你实现vue的动态路由（addRoute版）-一一网
手摸手教你实现vue的动态路由（addRoute版）
手摸手教你实现vue的动态路由（addRoute版）
4年前 3118
Unity实用功能之使用TextMeshPro组件-一一网
Unity实用功能之使用TextMeshPro组件
Unity实用功能之使用TextMeshPro组件
4年前 3062
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …-一一网
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …...
4年前 2847
Windi CSS 在 Vue3 + Vite 项目中的使用-一一网
Windi CSS 在 Vue3 + Vite 项目中的使用
Windi CSS 在 Vue3 + Vite 项目中的使用
3年前 2728
vue3 使用 qrcode.vue 生成二维码-一一网
vue3 使用 qrcode.vue 生成二维码
vue3 使用 qrcode.vue 生成二维码
4年前 2621
搜索
开启精彩搜索
世界，您好！-一一网
3.7W+人已阅读
世界，您好！
TOP1
番茄社区无限观看+付费视频破解教程-一一网
番茄社区无限观看+付费视频破解教程
5年前3.2W+人已阅读
TOP2
香蕉视频v3.8.3_VIP会员破解教程-一一网
香蕉视频v3.8.3_VIP会员破解教程
5年前3.1W+人已阅读
TOP3
[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网
密码保护：[桜井宁宁]COS和泉纱雾超可爱写真福利集
5年前2.8W+人已阅读
TOP4
[桜井宁宁] 爆乳奶牛少女cos写真-一一网
密码保护：[桜井宁宁] 爆乳奶牛少女cos写真
5年前2.8W+人已阅读
TOP5
快猫v1.1.7会员破解版_最新快猫vip破解教程大全-一一网
快猫v1.1.7会员破解版_最新快猫vip破解教程大全
5年前2.7W+人已阅读
TOP6
标签云
默认路由黑裙黑群晖麦克风车机鸿蒙系统鸿蒙系统鸿蒙OS鸿蒙驱动软件驱动题库音频剪辑音乐剪辑面板面具静态雷石集群随机阿里云