AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript 引用数据类型

2022-06-06 97
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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>

效果截图：

1.png


对象的创建


使用{}创建


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>

效果截图：

1.png


使用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>

效果截图：

1.png


使用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>

效果截图：

1.png



使用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>

效果截图：

1.png


对象的原型模型


通过对象可以给对象扩展字段（属性、方法）

如果想同一个类型，都添加属性，则需要用到原型 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>

效果截图：

1.png


数组(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>

效果截图：

1.png


数组的方法


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>

效果截图：

1.png



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>

效果截图：

1.png


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>

效果截图：

1.png


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>

效果截图：


1.png

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>

效果截图：

1.png


函数(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>

效果截图：

1.png


有参函数


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


样例代码：


<!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>

效果截图：

1.png


函数可以作为参数传递


第一种写法


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>

效果截图：

1.png


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.png


函数作用域


函数作用域：

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>

效果截图：

1.png


变量和函数的声明提前


变量的声明提前：

使用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>

效果截图：

1.png


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


文章标签：
JavaScript
前端开发
数据格式
存储
JSON
关键词：
JavaScript数据类型
牛哄哄的柯南8151
目录
相关文章
天下无敌呀
|
14天前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
天下无敌呀
130 59
刘志辉~
|
2月前
|
JavaScript
js基础数据类型
js基础数据类型
刘志辉~
27 1
六卿
|
7天前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型，包括基本数据类型（Number、String、Boolean、Undefined、Null）和复杂数据类型（Object），并解释了如何使用`typeof`操作符来识别变量的数据类型。同时，还讨论了对象、函数和数组等复杂数据类型的使用方式。
六卿
13 2
尹正杰
|
1月前
|
JavaScript 前端开发
JavaScript基础知识-基本数据类型和引用数据类型
关于JavaScript基础知识的文章，主要介绍了基本数据类型和引用数据类型。
尹正杰
34 2
JavaScript基础知识-基本数据类型和引用数据类型
热爱技术的小郑
|
2月前
|
JavaScript 前端开发
JavaScript基础&实战（1）js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分，涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换，通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
热爱技术的小郑
32 2
JavaScript基础&实战（1）js的基本语法、标识符、数据类型
土木林森
|
2月前
|
开发者 图形学 开发工具
Unity编辑器神级扩展攻略：从批量操作到定制Inspector界面，手把手教你编写高效开发工具，解锁编辑器隐藏潜能
【8月更文挑战第31天】Unity是一款强大的游戏开发引擎，支持多平台发布与高度可定制的编辑器环境。通过自定义编辑器工具，开发者能显著提升工作效率。本文介绍如何使用C#脚本扩展Unity编辑器功能，包括批量调整游戏对象位置、创建自定义Inspector界面及项目统计窗口等实用工具，并提供具体示例代码。理解并应用这些技巧，可大幅优化开发流程，提高生产力。
土木林森
126 1
lvbb66
|
2月前
|
JavaScript 前端开发
JS常用数据类型转换（数字型和字符串型之间转换）
JS常用数据类型转换（数字型和字符串型之间转换）
lvbb66
40 2
土木林森
|
2月前
|
前端开发 JavaScript
Web 前端大揭秘！JS 数据类型检测竟如此震撼，一场惊心动魄的代码探秘之旅等你来！
【8月更文挑战第23天】在Web前端开发中，合理检测数据类型至关重要。JavaScript作为动态类型语言，变量类型可在运行时变化，因此掌握检测技巧十分必要。
土木林森
27 1
土木林森
|
2月前
|
存储 前端开发 JavaScript
Web前端的奇幻之旅：探索JS数据类型的奥秘与差异
【8月更文挑战第23天】JavaScript是一种动态类型语言，提供多种内置数据类型支持信息的存储与操作。这些类型对Web前端开发者至关重要，直接影响代码性能与可读性。JavaScript数据类型主要分为两大类：原始数据类型（如Undefined、Null、Boolean等）与引用数据类型（如Object、Array等）。原始类型直接存储值，而引用类型存储指向数据的引用。原始类型不可变且存储在栈中，访问更快；引用类型则存储在堆中，可通过其引用进行修改。理解这些差异有助于编写高效、可维护的代码。
土木林森
33 0
游客ot6eft3qn37ga
|
2月前
|
存储 JavaScript 前端开发
JavaScript引用数据类型和构造函数的秘密
JavaScript引用数据类型和构造函数的秘密
游客ot6eft3qn37ga
35 13

热门文章

最新文章

  • 1
    JavaScript基本数据类型分析
  • 2
    JS判断文件扩展名
  • 3
    如何添加360浏览器（chrome）添加JavaScript例外，禁止网站加载JS
  • 4
    Kotlin 扩展函数 与 JS 的 prototype
  • 5
    超棒的纯Javascript实现的文件上传功能 - Fine uploader
  • 6
    asp.net常用javascript封装代码
  • 7
    Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）
  • 8
    JavaScript学习（十四）---String对象中的模式匹配方法
  • 9
    在javascript里 string 和 int 类型转换
  • 10
    在Ubuntu上安装Node.js的Upstream版本
  • 1
    JS+CSS3点击粒子烟花动画js特效
    43
  • 2
    JavaScript字符串检查：从基础到高级
    54
  • 3
    使用 JavaScript 获取 URL 参数的详细指南
    6858
  • 4
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    193
  • 5
    Java Script 中的垃圾回收机制有哪些缺点
    52
  • 6
    描述 JavaScript 中的垃圾回收机制。
    53
  • 7
    如何使用 JavaScript 操作 DOM？
    52
  • 8
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    48
  • 9
    JavaScript 中的数组方法有哪些？
    44
  • 10
    JS设置日期为0时0分0秒
    191

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 语言入门-2：基本类型
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    无影云桌面