JavaScript 引用数据类型

  • 对象(Object)
    • 对象的创建
      • 使用{}创建
      • 使用Object创建
      • 使用Function创建
      • 使用class关键字
    • 对象的原型模型
  • 数组(Array)
    • 数组的定义
      • 使用[]创建数组
      • 使用Array创建数组
    • 数组的访问
    • 数组的方法
      • push 向数组中添加元素
      • pop 从数组的末尾获取元素，并将元素从数组中删除
      • shift 从数组首个下标获取元素，并将元素从数组中删除
      • slice 切片
      • join 和 split
  • 函数(Function)
    • 方法的声明
    • 无参函数
    • 有参函数
    • 函数可以作为参数传递
    • 回调函数
      • 函数做为返回值
    • arguments
    • 变量作用域
    • 函数作用域
    • 变量和函数的声明提前

对象(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] = 200arr3[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()); //Keafmdconsole.log(arr.pop()); // 30console.log(arr.pop()); //20console.log(arr.pop()); //10console.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()) // 10console.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,40var 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">//创建一个全局变量avar a = "全局中的a";function fun() {//console.log(a);//window.b = ...var b = "函数作用域中的b";console.log(b);}fun();//console.log(b);//创建全局变量cvar c = "全局c";console.log(window.c);/*function fun2(){//创建一个局部变量cvar c = "---> 函数中的c";console.log(c);}fun2();*/function fun3() {//var c = "fun3中的c";function fun4() {//var c = "fun4中的c";console.log(c);}//调用fun4fun4();}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

JavaScript 引用数据类型相关推荐

  1. JavaScript引用数据类型

    JavaScript引用数据类型 引用类型 在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起(它也常被称为类). Object类型 创建Object实例的方式有两种.第一种 ...

  2. JavaScript中的基本数据类型与引用数据类型

    JavaScript中的基本数据类型与引用数据类型 转载自:https://www.cnblogs.com/c2016c/articles/9328725.html 1.栈(stack)和堆(heap ...

  3. JavaScript的数据类型、null 和undefined、原始数据类型和引用数据类型等JavaScript基础知识总结

    一.JavaScript里有哪些数据类型,解释清楚null 和undefined,解释清楚原始数据类型和引用数据类型.比如讲一下1 和Number(1)的区别 数据类型: undefined,没有定义 ...

  4. 惊呼!JavaScript基本数据类型和引用数据类型详解

    前言 我是歌谣 知其然知其所以然 人人都有一个大厂梦 希望通过自己的一个总结分享可以给予大家带来帮助和提升. 本期知识点 JavaScript中基本数据类型和引用数据类型 目标 理解基本数据类型和引用 ...

  5. Javascript第六章基本数据类型和引用数据类型第三课

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  6. 【JavaScript笔记 · 基础篇(五)】Array全家桶（引用数据类型中的数组 / Array对象 / Array.prototype）

    文章目录 一. 引用数据类型中的数组 1.1 概述 1.2 初始化 1.2.1 字面量 1.2.2 构造函数模式 1.3 访问 1.4 length属性 1.5 数组遍历 1.6 类数组对象 1.6. ...

  7. JavaScript数据类型基本数据类型与引用数据类型的区别

    JavaScript数据类型 1.JavaScript判断数据类型 typeof操作符 使用typeof操作符可以返回变量的数据类型 typeof操作符有带括号和不带括号两种用法 typeof (变量 ...

  8. 【JavaScript】关于基本数据类型和引用数据类型

    基本数据类型 JavaScript的基本数据类型有: String-字符串类型 Number-整形-----NaN也属于数值型 Boolean-布尔类型 null undefined-undefine ...

  9. JavaScript中基本数据类型和引用数据类型的区别

    1.基本数据类型和引用数据类型 ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型. 基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象. 当我们把变量赋值给一个变 ...

最新文章

  1. 人人都能学会的python编程教程15：高级特性2
  2. android 获取图片
  3. golang 字符串分割
  4. 从来富贵险中求 为何低学历的人能成为亿万富翁
  5. 深入理解 Vuejs 动画效果
  6. C语言加取址符的作用,C语言中指针和取地址符的关系
  7. java城市公交查询系统案例_013JAVA.JSP城市公交查询系统.zip
  8. functools学习有感
  9. python截图拼接_Python实现屏幕截图有两种方式 - 小众知识
  10. uva 11714——Blind Sorting
  11. 二叉树删除节点，(查找二叉树最大值节点)
  12. 训练dnn_[预训练语言模型专题] MTDNN(KD) : 预训练、多任务、知识蒸馏的结合
  13. 最大功率点跟踪MPPT
  14. c++的内存问题---内存碎片
  15. 从黑马学完IT，能进大厂吗？会不会遭歧视？答案来了…
  16. xlsxwriter去掉网格线_(原创)xlsxwriter，python excel 写入数据\图表等操作_图表操作(二）...
  17. Windows提示：您的许可证即将过期
  18. nc数据处理，掩膜，经纬度定位格点
  19. JVM_0.5_小故事
  20. HTML5期末大作业：网上鲜花网站设计——网上鲜花网页设计(5页)HTML+CSS+JavaScript web期末作业设计网页

热门文章

  1. 微信小程序开发实现微信支付
  2. micro、M3O微服务系列(一)
  3. 房租房贷可税前抵扣，等等！你还要考虑这个
  4. 原创|智能交通2022第十六届北京国际数字交通展览会
  5. ProxySQL实现双主双从读写分离部署
  6. AV1编码标准整体概述
  7. Jupyter Notebook使用过程中的七七八八
  8. Qt翻译文件ts中type理解
  9. Elixir服务器接收客户端消息01
  10. matlab如何使输出结果更美观(symdisp函数——pretty函数升级版)