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，不能调用。

JavaScript 引用数据类型

对象(Object)

对象的创建

使用{}创建

使用Object创建

使用Function创建

使用class关键字

对象的原型模型

数组(Array)

数组的定义

使用[]创建数组

使用Array创建数组

数组的访问

数组的方法

push 向数组中添加元素

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

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

slice 切片

join 和 split

函数(Function)

方法的声明

无参函数

有参函数

函数可以作为参数传递

回调函数

函数做为返回值

arguments

变量作用域

函数作用域

变量和函数的声明提前

热门文章

最新文章

相关课程

相关电子书

相关实验场景

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JavaScript 引用数据类型

对象(Object)

对象的创建

使用{}创建

使用Object创建

使用Function创建

使用class关键字

对象的原型模型

数组(Array)

数组的定义

使用[]创建数组

使用Array创建数组

数组的访问

数组的方法

push 向数组中添加元素

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

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

slice 切片

join 和 split

函数(Function)

方法的声明

无参函数

有参函数

函数可以作为参数传递

回调函数

函数做为返回值

arguments

变量作用域

函数作用域

变量和函数的声明提前

热门文章

最新文章

相关课程

相关电子书

相关实验场景