JavaScript 引用数据类型

最新推荐文章于 2022-11-22 13:58:40 发布
最新推荐文章于 2022-11-22 13:58:40 发布
阅读量2.9k 收藏 6
点赞数 10
分类专栏： JavaScript 文章标签： javascript 引用数据类型 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43883917/article/details/109564512
版权

JavaScript 引用数据类型

对象(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();

            //给对象扩展方法
            // s1.sayHi =function(){
            //     console.log('打招呼')
            // }

            //给原型扩展
            Student.prototype.sayHi = function(){
                console.log('打招呼')
            }

            s1.sayHi();


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

效果截图：
在这里插入图片描述

数组(Array)

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

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()); //Keafmd
			console.log(arr.pop()); // 30
			console.log(arr.pop()); //20
			console.log(arr.pop()); //10
			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()) // 10
			console.log(arr4)   // 20,30,40
		</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>
			//将数组拼接以字符串的形式返回 join    10-20-30,40
			var arr6 = [10,20,30,40];
			console.log("arr6.join(\"-\"): "+ (arr6.join('-'))) ;// 返回的是字符串 , 10-20-30-40
			
			//将字符串拆分成数组
			var arrStr = '10-20-30-40';
			console.log(arrStr.split('-')) ;// 数组元素，为字符串类型
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

效果截图：
在这里插入图片描述

函数(Function)

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

方法的声明

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 方法的名字（[形参1,形参2,...形参n]）注：不需要声明类型
			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);//30
		</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);

                //获取指定的实参
                //实参会保存到arguments对象中指定的位置
                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();

        //window.alert("hello");



    </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">
			//创建一个全局变量a
			var a = "全局中的a";

			function fun() {
				//console.log(a);
				//window.b = ...
				var b = "函数作用域中的b";

				console.log(b);
			}

			fun();

			//console.log(b);

			//创建全局变量c
			var c = "全局c";

			console.log(window.c);
			/*function fun2(){

			 //创建一个局部变量c
			 var c = "---> 函数中的c";

			 console.log(c);

			 }

			 fun2();*/

			function fun3() {

				//var c = "fun3中的c";

				function fun4() {

					//var c = "fun4中的c";

					console.log(c);
				}

				//调用fun4
				fun4();

			}

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

效果截图：
在这里插入图片描述

变量和函数的声明提前

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

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

样例代码：

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


        //如果不写var，直接为变量赋值，则相当于为window对象添加属性
        //window.a = 10;
        //a = 10;

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

        var a = 10;

        fun();
        //fun2();

        //使用函数声明来创建一个函数
        function fun(){
            console.log("我是fun函数");
        };

        //使用函数表达式创建一个函数
        var fun2 = function(){
            console.log("我是fun2函数");
        };
		
		
		fun();
		fun2();



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

效果截图：
在这里插入图片描述

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

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

加油！

共同努力！

Keafmd

牛哄哄的柯南
关注
  • 10
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 15
    评论
专栏目录
JavaScript的函数（function）
qq_45799465的博客
01-28 5438
目录 函数的基本概念 概念： 理解： 优点： 函数的基本语法 声明式： 赋值式： 调用： 函数的参数 一个参数时 多个参数时 函数的返回值 函数的返回值return 简单的理解return 为什么要有return return的作用 函数的基本概念 概念： 实现功能效果的代码块 理解： 将需要的程序，封装定义在一个函数中，通过调用函数调用相对应的程序。 优点： 封装一次。多次调用，有更好的可操作性和可维护性。 函数的基本语法 声明式： ...
JavaScript函数（Function）
StupidlyGrass的博客
01-17 2571
JavaScript函数（Function）
【JavaScript】 函数 function
小数点儿_
11-22 1924
也就是说，传入函数的原始值的地址，因此在函数内部修改参数，将会影响到原始值。函数参数不是必需的，JavaScript 允许省略参数，但是，没有办法只省略靠前的参数，而保留靠后的参数。只要闭包没有被垃圾回收机制清除，外层函数提供的运行环境也不会被清除，它的内部变量就始终保存着当前值，供闭包读取。它的作用域与变量一样，就是其声明时所在的作用域，与其运行时所在的作用域无关。如果函数内部修改的，不是参数对象的某个属性，而是替换掉整个参数，这时不会影响到原始值。所以，闭包可以看作是函数内部作用域的一个接口。
菜鸟教程 之 JavaScript 函数(function)
墨鱼菜鸡
07-11 3497
From：https://www.runoob.com/js/js-function-definition.html JavaScript函数定义 JavaScript 使用关键字function定义函数。 函数 可以 通过声明定义，函数 也可以 是一个表达式。 函数声明 分号 是用来分隔可执行 JavaScript 语句。 由于...
javascript中function详解
forgiveForever的博客
03-31 7549
js,function, 函数，函数详解，函数内部参数
javaScript的数据类型
05-12
ECMAScript 中有 5 种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number和 String。还有 1种复杂数据类型——Object，Object 本质上是由一组无序的名值对组成的。ECMAScript 不支持任何创建...
JavaScript基本数据类型和引用类型的区别详解
02-01
前两天看到kraaas大神的关于基本数据类型和引用类型的区别的文章觉得写得非常不错，就想着在其基础上加上自己平时看到的一些知识点和理解，所以就有了以下的文章 js基本数据类型包括：undefined,null,number,boolean...
JavaScript基本数据类型及值类型和引用类型
10-23
大家经常可以见到javascript中的一些数据类型，比如“undefined”、“boolean”、“string”等等，这篇文章就和大家一起来学习JavaScript基本数据类型及值类型和引用类型，有需要的童鞋参考下，本文写的不好地方，还...
JavaScript基础心法 数据类型
10-18
一个很基础的知识点，这篇主要是介绍JavaScript中基本数据类型和引用数据类型是如何存储的,需要的朋友可以参考下
JavaScript 函数 Function 的基本使用
Mark
11-07 6998
在 JavaScript 中定义函数的方法有 3 种：使用 function 语句、使用 Function() 构造函数和定义函数直接量。不管使用哪种方法定义函数，它们都是 Function 类型的实例，并将继承 Function 原型对象的方法和属性。 1、声明函数 在 Javascript 中，可以使用 function 语句来声明函数。具体用法如下： function funName...
详解JavaScript的Function对象
Learn-anything.cn
12-21 1694
一、Function 对象 Function 对象是全局对象，可以动态创建函数，实际上每个函数都是一个 Function 对象。 1、函数是Function类型对象 // 下面代码可以判断，函数是Function类型对象 (function(){}).constructor === Function // true 2、创建 函数 const sum = new Function('a', 'b', 'return a + b'); console.log(sum(2, 6)); // expected
js函数(function)
Gavin_Liu_的博客
04-10 3479
函数其实就是抽取写好的js代码,作为一个通用的代码块 作用:减少代码冗余,方便调用(提高效率),便于维护 //js有哪些函数(带括号的就是函数) 1.系统函数 系统自带的函数例如:alert() 2.内置函数 Math.pow()//Math对象的内置函数 3.自定义函数 自己写的函数,先书写--后调用//没有调用是不会执行的 函数蛀牙依赖于function关键字进行定义,一般函数名以fn开头 //自定义函数的使用; //三种声明方式 1.第一种 function 函数名(参数1,参数2....
【JavaScript 进阶问题列表】
weixin_47673761的博客
11-15 1011
javascript 的一些细节问题，可以帮助您更好的理解JavaScript
js function定义函数使用小结
qq_35960760的博客
02-17 298
1.最基本的作为一个本本分分的函数声明使用。 function func(){} 或 var func=function(){};  2.作为一个类构造器使用： function class(){} class.prototype={}; var item=new class();  3.作为闭包使用： (function(){ //独立作用域 }
js function函数
Hello_World99的博客
09-05 241
作用:自执行函数的作用就是可以为页面划分多个区域,由于区域都是在函数中,收到局部变量限制,所以每个自执行函数可以认为是一个单独的页面.变量之间互不冲突.特征:将函数内部的函数返回到函数外部,以便于可以在函数外部通过返回的内部函数访问所有局部变量.局部变量:在函数内部定义,并且仅在函数中有效的变量就是局部变量(形参也是)函数的结构:普通函数、匿名函数、回调函数、递归函数、内部函数。JS的函数声明分为2种：声明函数和匿名函数（表达式函数）自执行函数:无需调用就可以执行的函数就是自执行函数.
一篇相当不错的js function入门文章(转)
程禹皓的专栏
04-22 150
  词语翻译列表:function :函数（Function 未翻译） declare:定义 assign:指派，分配 functionbody:函数体（就是函数的内容） object: 对象 property:属性 unnamed:匿名（在这里没翻译成未命名） object oriented programming:面相对相编程 class:类（比如后面的clas...
javascript中: (function(){})();如何理解?
飞翔的熊blabla
06-21 2160
转载于:https://zhidao.baidu.com/question/156291805.html javascript中: (function(){})()是匿名函数，主要利用函数内的变量作用域，避免产生全局变量，影响整体页面环境，增加代码的兼容性。 (function(){})是一个标准的函数定义，但是没有复制给任何变量。所以是没有名字的函数，叫匿名函数。没有名字就无法像普通函数那样...
js --- 数组（1）数组的创建，下标，常用方法
m0_53149377的博客
10-17 2169
数组也是js中的一个数据类型，他是一个复杂(引用)数据类型，单词是Array在数组中也可以存储很多条数据。数组他是一个有序的集合。数据都是按照顺序排列的，每一条数据都拥有一个属于自己的编号创造数组的方式。数组是一个有序的集合（数组中每一个数据都是按照顺序排好的，每一个数据都有他自己对应的编号）索引（下标）：从左到右从0开始依次+1。这个编号我们一般就叫做下标、索引。数组的常用方法【不改变原始数组】数组的常用方法【改变原始数组】方式二:内置构造函数方式创建。方式一:字面量方式创建。
js函数题
weixin_45806273的博客
02-13 470
1.下面代码的输出是什么? function sayHi() { return (() => 0)(); } typeof sayHi(); A: “object” B: “number” C: “function” D: “undefined” 答案：B sayHi函数返回立即调用的函数（IIFE）的返回值。 该函数返回0，类型为数字。 只有7种内置类型：null，und...
JavaScript的引用数据类型
最新发布
03-25
JavaScript的引用数据类型包括：对象、数组、函数和日期等。这些数据类型都是存储在内存中的对象，它们不具有固定大小，而是根据存储的数据而变化。与基本数据类型不同，引用数据类型的存储空间不是在声明变量时分配...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

牛哄哄的柯南

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值