Einführung in JS-Referenztypen

1. Einleitung

• Ja, dies ist der fünfte Artikel, der dieses Mal in zwei Blogbeiträge unterteilt wird viel Inhalt. Der erste Teil ist sehr lang und enthält viel Code. Er befasst sich hauptsächlich mit Referenztypen und häufig verwendeten Referenztypen. Ich habe den Code getestet und festgestellt, dass daran nichts auszusetzen ist.

• Lesen und schreiben Sie weiter. Es ist nicht einfach. Ich hoffe, dass jeder etwas aus diesem Blog lernen kann. Es ist großartig, es mit allen teilen zu können. Darüber hinaus möchte ich durch mein eigenes Verstehen und Denken einige persönliche Erkenntnisse gewinnen, damit jeder die langweiligen Worte im Buch leicht verstehen kann. Wenn alle das Gefühl haben, dass dieser Typ gut geschrieben hat, nachdem er es gelesen hat, dann werde ich zufrieden sein. Hehehe

Kein Unsinn mehr, kommen wir zum Punkt...

2. Referenztyp

Referenztyp? Wenn Sie Sprachen wie Java studiert haben, können Sie es sich als eine Klasse vorstellen. Das Buch sagt auch, dass diese Beschreibung nicht korrekt ist. . . Sagen Sie nichts anderes, wir verstehen Referenztypen als Objektdefinitionen.

Manchmal finde ich, dass Sprache wirklich magisch ist. Sie verstehen es vielleicht nicht, wenn ich über Referenztypen spreche, aber Sie verstehen es vielleicht, wenn ich über Objektdefinitionen spreche.

Referenztyp (Objektdefinition): beschreibt die Eigenschaften und Methoden eines Objekttyps.
Hör mir zu:

1. Referenztyp (Objektdefinition): Mensch Es ist ein Referenztyp, der die Eigenschaften und Methoden beschreibt, die menschlichen Objekten gemeinsam sind. Menschliche Eigenschaften wie Augen, Köpfe, Hände usw.; menschliche Methoden (kann als Verhalten bezeichnet werden): Gehen, Essen usw. Jeder Referenztyp hat nur eine Definition: Es handelt sich um einen kollektiven Zeiger.

2. Wert des Referenztyps : Es ist jedes neue Objekt (Instanz des Referenztyps). Es gibt viele Objekte, genau wie Hunderte Millionen von uns Menschen. Objekte desselben Referenztyps haben gemeinsame Eigenschaften und Methoden, aber wir können Eigenschaften dynamisch hinzufügen und ändern, so wie jeder unterschiedliche Orte hat.

In 3.js integrierte Referenztypen : Objekttyp, Array-Typ, Funktionstyp, Datumstyp, RegExp-Typ usw. Natürlich können wir auch Referenztypen anpassen.

Nachdem wir uns die erstellten Objekte im Bild angesehen haben, schauen wir uns die im Code erstellten Objekte an:

//这里创建了一个对象叫obj，它是object类型的，那么它就有object类型共有的属性和方法
var obj = new Object();
//这里创建了一个对象叫arr，它是Array类型的,那么它就有Array类型共有的属性和方法
var arr = new Array();
//我们可以创建很多对象
var arr1 = new Array();
var arr2 = new Array();

Um es für Laien auszudrücken: Wenn ich Sagen wir Menschen, in Ihrem Fall gibt es ein grobes Modell einer Person in Ihrem Gehirn. Ja, ich sagte Array. Ihr Gehirn hat ein grobes Bild eines Arrays, aber Sie kennen seine spezifische Form nicht. Spezifische Dinge können nur durch das Objekt offenbart werden. Ich sagte zum Beispiel Xiao Ming (wenn Sie Xiao Ming kennen), dann wissen Sie, was für ein Mensch Xiao Ming ist.

An diesem Punkt sollten Sie fast ein Verständnis für Referenztypen haben. Sprechen wir über die integrierten Referenztypen in js.

3. Die integrierten Referenztypen von JS

Warum müssen wir die integrierten Referenztypen von JS einführen? viel. Es ist, als ob wir etwas kennenlernen, wenn wir jung sind, zum Beispiel einen Fisch. Zuerst wussten wir das nicht, aber später hat uns unsere Mutter immer gesagt, dass das ein Fisch ist, Baby, und dir gesagt, wie ein Fisch aussieht. und dann haben wir ein gewisses Verständnis dieser Art.

In der Welt von js gibt es nicht so viele Dinge auf der Welt. Lassen Sie uns zunächst die häufig verwendeten integrierten Referenztypen verstehen: Objekt, Array, Datum, RegExp und Funktion.

1. Objekttyp

Der Objekttyp ist der am häufigsten verwendete Typ, obwohl er für Anwendungen zum Speichern und Übertragen von Daten geeignet ist .

1.1 Objektobjekt erstellen:

Lassen Sie uns zunächst darüber sprechen. Es gibt zwei Möglichkeiten, ein Objektobjekt zu erstellen:
1. Direkt neu.
Syntax: neuer Operator und Objektkonstruktor

//new操作符后面加Obejct的构造函数
var o = new Obeject();
//添加属性
o.name = "yuan";

2. Objektliteral
Syntax: geschweifte Klammern, die darin enthaltenen Attribute verwenden Schlüssel-Wert-Paare Im Formular wird jedes Attribut durch ein Komma getrennt, und das letzte Attribut ist nicht durch ein Komma getrennt.

//对象字面量（有种封装数据的感觉）
var p = {
    data:13,
    name:'yuan',
    age:11
}
//两者对比
var x = {};  //创建一个空对象和new Object() 相同

1.2 Zugriffsattribute

1. Durch Punktnotation

var p = new Object();
p.name = '渊源远愿';
console.log(p.name);  //渊源远愿

2. Durch die eckige Klammermethode

var o = new Object();
o.age = 22;
console.log(o["age"]);  //22
//方括号可以用变量来访问属性
var otherAge = "age";
console.log(o[otherAge]);  //22

Normalerweise ist dies der Fall sagte, dass es mehr Methoden gibt, die man verwenden kann.

1.3 Eigenschaften und Methoden von Objekt:

Keine Notwendigkeit, auf Details einzugehen: Schauen Sie sich den dritten Artikel in derselben Serie an

2. Array-Typ

2.1 Array-Erstellung

Zwei Möglichkeiten:
1.new Array();

//创建一个空数组
var arr1 = new Array();
//创建一个长度为10的空数组，
var arr2 = new Array(10);
//创建一个包含一个字符串good的数组
var arr3 = new Array("good");

Besonderer Hinweis: Wenn in den Klammern nur ein Wert übergeben wird , dieser Wert ist ein numerischer Wert. Wenn dies der Fall ist, wird ein Array mit der Länge dieses Werts erstellt. Wenn es sich um andere Werte handelt, handelt es sich um ein Array, das diesen Wert enthält.

2. Array-Literal, verwenden Sie eckige Klammern:

// 创建空的
 var fish = [];
 //创建有值的，在括号里添加
 var cars = ["BMW","BenZ","Ferrari"];
 //注意，创建数组不要留空项。浏览器兼容性问题，IE8或以前版本会认为这是有3项，下面这种不建议。
 var nums = [1,2,];

2.2 Greifen Sie auf die Werte im Array zu

Dasselbe wie bei anderen Sprachen für den Index Zugriff (tiefgestellt ab 0):

//创建数组
var cars = ["BMW","BenZ","Ferrari"];
console.log(cars[0]);  //BMW
console.log(cars[2]);  //Ferrari

//修改数组某个值,对其重新赋值就像
cars[0]  = "lala";

2.3 Häufig verwendete Attribute und Methoden

Häufig verwendete Attribute und Methoden werden hier angegeben, weitere Details finden Sie in der js-Dokumentation.

1.length-Attribut: Gibt die Länge des Arrays zurück.

var num = [1,2,3,4,5]
console.log(arr.length);  //5
//妙用：通过改变数组的length可以改变数组长度
arr.length = 10;  //现在num 数组长度为10了
console.log(num); //[1,2,3,4,5,,,,,]  后面5个值是空的

2.Array.isArray()-Methode: Bestimmen Sie, ob das Objekt ein Array ist

//用了判断改对象是不是数组
var arr = [];
console.log(Array.isArray(arr));   //true
console.log(Array.isArray("s");    //false

3.join( ) Methode:Ändern Sie die Array-Trennmethode und geben Sie die neue Trennzeichenfolge

zurück

//原来是使用逗号连接的
var arr = [1,2,3,4,5];
//用|连接,注意只是返回字符串，不会改变数组里面的连接方式
console.log((arr.join("|"));  //'1|2|3|4|5'
console.log(arr);  //[1,2,3,4,5]  还是一样用逗号的

4.栈方法：pop()和push()组合使用实现栈的先进后出

//引入这两方法是为了用数组实现栈的功能
//push() :从数组最后添加数据
var stack = new Array();
//添加一个10
stack.push(10);
//添加一个5
stack.push(5);
//添加一个100
stack.push(100);
//现在stack中有3个数值
console.log(stack);   //[10,5,100]

//pop() :从数组最后删除并返回该数据
stack.pop();  //100  100被删除
console.log(stack);   //[10,5]  剩下两数

5.队列方法：shift()和push()组合使用实现先进先出

这里就不再举例了，类似与栈的操作，只是操作的函数不同，栈的pop是从后面删除，而队列的shift是从前面删除，这样就先进先出了。

6.重排序方法：sort()和reverse()

//sort()默认是按照ascii码表排序的，所以会出现下面这种情况
var arr = [5,12,18,1];
console.log(arr.sort());  //[1,12,18,5]
//为了可以对数字正常排序，为sort传入一个比较函数
function comp(a,b){
    return a-b;
}
//再来排序
arr.sort(comp);
console.log(arr);  //[1,5,12,18]  这次正确了

//reverse()是将数组完全颠倒
arr.reverse();
console.log(arr);  //[18,12,5,1]

7.合并和剪切：concat() , slice()

//1.concat() 在该数组的基础上添加元素，返回一个新数组（不会改变原数组）
var arr1 = [1,2,3];
//在arr1基础添加4，5，6，并返回给arr2，不会改变arr
var arr2 = arr1.concat(4,5,6);
console.log(arr2);  //[1,2,3,4,5,6]

//2.slice() 通过传入开始和终点值来剪切数组，并返回新数组
var  arr3  = arr2.slice(1,5);
console.log(arr3);  //[2,3,4,5]

8.最强大的数组方法：splice()
删除：接受两个参数，第一个是开始删除位置，第二个是删除的个数,返回一个删除项的数组

//用来删除
var arr = [1,2,3,4,5,6,7];
var del_arr = arr.splice(0,4);  //从0位开始删除4项，即前4项
console.log(del_arr);  //[1,2,3,4]
console.log(arr);  //[5,6,7]  arr数组剩下后面3项了

插入：输入3个参数，起始位置，0（删除项数设为0），要插入的值

//用来插入
var arr1 = [1,2,3,4,5,6];
arr1.splice(3,0,100);//从位置3插入一个100值
console.log(arr1);  //[1,2,3,100,4,5,6];

替换：指定3个参数，起始位置，要删除的项，插入的值

//替换
var arr2 = [1,2,3,4,5];
//我要替换3，替换成100
arr2.splice(2,1,100);  //起始位是2，删除1项（就是3了），载插入100，ok
console.log(arr2); //[1,2,100,4,5]

9.位置函数：indexOf()和lastIndexOf():这两个方法用来找数值下标位置。都接受两个参数，第一个是要找的值，第二个是开始位置

//indexOf() 只传一个参数时默认从0开始找数值，找到返回这个数的数组位置，没有返回-1
var arr = [100,12,123,1234];
console.log(arr.indexOf(123));  //2  数组的位置2

//lastIndexOf()  和indexOf查找顺序正好相反，它从数组末尾开始找起
console.log(arr.lastIndexOf(100));  //0

10.forEach()方法，对每一项进行处理

//接受一个函数，函数传入2个参数表示当前数值和其下标位置
var arr = [1,2,3,4,5];
arr.forEach(function(item, index){
    console.log(item + 1);
}

//输出 2,3,4,5,6  每一项都加1了

3.Date类型

3.1 创建对象

//创建一个时间对象，保存着当前时间
var n = new Date();

3.2 常用方法

var now = new Date();
//getDate() 返回当前天数，一个月的某天（0-31）
console.log(now.getDate());  //20
//getMonth()  //返回月份
console.log(now.getMonth());  //9,这里的9表示10月 （0-11）
//getFullYear(),返回当前年份
console.log(now.getFullYear());  //2017

更多方法在js文档中。

4.RegExg类型

ES通过RegExg类型来支持正则表达式，语法：var e = /pattern/flag
其中pattern表示正则表达式，flag表示标识，标识可以一个或多个。

flags有3个，这些flags可以组合使用

flags	说明
g	全局模式，该模式应用于所有的字符串
i	不区分大小写模式，确定匹配项时忽略模式与字符串的大小写
m	多行模式，一行文本到尾后还会查下一行的字符串，如果有的话

4.1 创建RegExg对象

1.字面量方式

//懒啊，直接书上的例子
var p1 = /at/g;  //匹配所有"at" 的实例
var p2 = /[bc]at/i  //匹配第一个bat或cat，不区分大小写
var p3 = /.at/gi  //匹配所有at结尾的组合，不区分大小写

//正则中如果想在字符中包含元字符需要对其进行转义
//这里和p3不同的是对.这个元字符进行转义,用\符号转义
var p4 = /\.at/gi;  //这里的意思是匹配所有的".at",不区分大小写。

2.使用new RegExg构造函数

//RegExg() 接受两个参数，一个是正则表达式，一个是标志
var pattern1 = new RegExg("at","gi");
//pattern1和pattern2完全等价
var pattern2 = /at/gi;

4.2 RegExp的实例属性

有5个实例属性：global，ignoreCase,multiline,lastIndex,source

//直接上例子，了解作用是什么就好了
//有一个正则对象
var p = /hello/i;
//global属性，返回布尔值，表示是否设置了g标志
console.log(p.global);  //false
//ignoreCase属性，返回布尔值，表示是否设置了i标志
console.log(p.ignoreCase);  //true
//multiline属性，返回布尔值，表示是否设置了m标志
console.log(p.multiline);  //false
//lastIndex属性，返回整数，表示开始搜索下一个匹配字符的位置，从0开始
console.log(p.lastIndex);  //0
//source属性，返回正则表达式的字符串形式
console.log(p.source); //"hello"

4.3 RegExp常用方法

1.exec()方法：接受一个参数，这参数是应用模式的字符串，然后返回包含第一个匹配项的数组

var p = /p/;
var str = "happy";
var arr = p.exec(str);
console.log(arr); // ["p",index:2,input:"happy"]  返回这个数组，第一个值表示匹配到的字符，index表示字符所在的位置，input表示应用的字符串

2. test() 方法：用于知道这个字符串与模式是否匹配，接受一个字符串参数，返回布尔值

var p1 = /ry/g;
console.log(p1.test("ryuan")); //true,字符串中有ry这字符串，所以返回true

5.Function类型

核心：函数即对象

5.1 定义函数

定义函数有下面3种方法，常用的是1,2种

//1.函数声明
function getName(){
    var name = 'ry-yuan';
    return name;
}
//2.函数表达式
var getAge = function(){
    var age = 100;
    return age;
}
//3.使用Function构造函数,前面1-n个是参数，最后一个参数的是函数体，这种不推荐使用。
var sum = new Function("num","return num");

5.2 函数声明和函数表达式的区别

上面的定义函数常用1,2中，分别是函数声明和函数表达式，那他们有什么区别？
如果听过声明提升的话就很容易理解下面的内容，js解析器执行时会先找到所有的声明，将其提升到顶部。有什么用？看例子：

//函数声明，我们先运行sayHello,但是不会报错，因为函数声明已经在解析时被提到顶部
sayHello();  //hello everyone
function sayHello(){
    console.log("hello everyone");
}


//函数表达式，用var定义函数名.用函数表达式，不会提升，所以先运行sayBye就会找不到函数体
sayBey();  //报错 TypeError: sayBye is not a function
var sayBye = function(){
    console.log("bye bye");
}

5.3 函数名是指向函数的指针

一个函数在js种就是一个Function的实例，函数名就是对实例的引用，一个指针，前面的对象中也有说过。那么一个函数就可以有多个函数名了。

//定义一个函数，函数名是sum
var sum = funtion(num1,num2){
    return num1+num2;
}

//讲sum复制给otherSum,那么otherSum和sum都指向同一个function对象
otherSum = sum;

otherSum(100,420);  //520
sum(1300+14); //1314

//对sum设置为null,sum变量就不在指向function对象
sum  = null;

//otherSum依然能够使用
otherSum(1,9); //10

5.4 函数没有重载

上面说了，函数名只是函数的指针，函数名是变量一样，重复复制就会覆盖原来的。
在java语言来说，有不同的参数数量也称为重载，但是js中没这种操作

//函数声明，fn为函数名
function fn(num1, num2){
    return num1+ num2;
}
//再来函数声明，fn为函数名
function fn(num){
    return num;
}

//fn只会指向最后一次声明的函数
fn(1,43);  //1

5.5 函数像值一样传递

因为函数名本来就是一个变量，所以函数也可以像值一样被传递。说实话，函数能被当做值来传递确实是一件好玩的事，大家有兴趣可以去了解回调函数，这里先不介绍了。

//声明一个函数fn1，它可以接受两个参数，一个是函数，一个是值
function fn1(fn,value){
    return (fn(value));
}
//声明一个fn2，接受一个参数
function fn2(val){
    console.log(val+1000);
}
//fn2当成参数传递给fn1
fn1(fn2,24);  //1024

5.6 函数内部对象

函数内部有两个特殊的对象arguments和this

1.arguments:包含传入函数的所有参数，主要用于保存函数参数,它可以看做是一个数组

function fn(num1,num2){
    console.log(arguments);
}
fn(100,200);  //{'0':100,'1':200}

//arguments有一个callee的属性，它是一个指针，用来指向当前这个函数
//例如一个递归调用,阶乘函数，里面的arguments.callee就是等价于这个函数
function factorial(num){
    if(num<=1){
        return 1;
    }
    else{
        return num*arguments.callee(num-1);
    }
}

2.this：指向调用这个函数的对象

//全局作用域下
var hi = 'hi';
//一个普通object对象
var obj = { hi = "obj hi"};
function say(){
    console.log(this.hi)
}

//say函数在全局作用域下定义，直接执行，this将指向window对象，所以hi是windows对象的。
say();  //hi  

//将say赋予obj对象，并且obj来调用say，这次this将指向obj对象
obj.say = say;
obj.say();  //obj hi

5.7函数属性和方法

1.length属性：函数接受参数的个数

function fn(n,m){};
alert(fn.length); //2

2.prototype属性：后面博客再说，厉害嘞

3.apply()和call()方法：扩充函数依赖的运行环境。就像是把一个函数给一个个的对象使用。

var color = "red";
var obj = {color: "green"};
//先声明一个函数
function fn(){
    console.log(this.color);
}
//给window对象用
fn.call(window);  //red
//给obj对象用
fn.call(obj);   //green

apply和call功能是一样的：不同就是接受参数不同，大家第一个参数都是作用域对象，后面的apply接收一个参数数组，call则是接收一个个参数。

//声明一个函数add
function add(num1,num2){
    return num1+num2;
}
//在另一个函数调用,第一个是this，后面参数一个个输入
//这里用call
function otherAdd(n1,n2){
    return add.call(this,n1,n2);
}
//这里用apply，第一都是this，后面接受参数变成数组形式
function otherAdd(n1,n2){
    return add.apply(this,[n1,n2]);
}

Das obige ist der detaillierte Inhalt vonEinführung in JS-Referenztypen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!