>  기사  >  웹 프론트엔드  >  JavaScript 참조 유형에 대한 자세한 소개(예제 포함)

JavaScript 참조 유형에 대한 자세한 소개(예제 포함)

不言
不言앞으로
2019-03-29 10:11:152012검색

이 글은 자바스크립트 참조 유형에 대한 자세한 소개를 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

개념: 참조 유형은 데이터와 함수를 함께 구성하는 데 사용되는 데이터 구조, 즉 클래스입니다.
객체는 특수 참조 유형 인스턴스입니다. new 뒤에 생성자를 추가하면 새 객체가 생성됩니다.
생성자: 객체를 생성하는 데 사용되는 함수입니다.
예: var person = new Object();
object는 새 객체에 대한 기본 속성과 메서드를 제공하는 생성자입니다.

1. 객체 유형

//공통 메소드

var person = new Object();
person.name = "syr";
person.age = 22;

//객체 리터럴

var person = {    
    name : "syr",    
    age : 22,    
    5 : true            //5自动转为"5"
}
* 数值属性名会自动转为字符串;
* 对象字面量推荐只在属性名可读的情况下使用,也是向函数传递大量参数首选方式,必须使用命名参数,对象字面量封装多个可选参数。
* 访问对象一般用点表示法,js中也可以用方括号法,将要访问的属性以字符串的形式放进去。

예: Alert(person["name"]) //Equal to person.name

* 方括号法主要优点是可以通过变量来访问属性。
* 点表示法属性名不能包含错误的自负或者保留字和关键字,但方括号法可以。
* 通常,除非必须使用变量来访问属性,否则推荐使用点表示法。

2.
* 数组:数据的有序列表。

es 배열의 각 항목은 모든 유형의 데이터를 저장할 수 있으며 배열 크기도 동적으로 조정할 수 있습니다.

方法一 : new可以省略;
var colors = new Array();
方法二 : 数组字面量
var colors = ["red","blue","green"];
객체와 마찬가지로 리터럴은 Array 생성자를 호출하지 않습니다.

var colors = ["red","blue","green"];
colors[0] // 显示第一项
colors[2] = "black"; // 修改第二项
colors[3] = "brown" ; //增加第四项
colors.length = "black" ;  增加一项
length 속성은 배열의 길이를 반환하며 배열에서 항목을 추가하고 제거할 수 있습니다.

* 检测数组

value instanceof Array // 判断是否为数组
Array.isArray(value) // isArray确定到底是不是数组,不管在哪个环境中创建
* 转换方法
모든 객체에는 toLocalString() 메서드가 있습니다. 백그라운드에서 tostring()을 호출하면 null 및 정의되지 않은 반환 결과가 빈 문자열로 표시됩니다.

* 栈方法 : 后进先出(吃了吐)
push(): 원하는 수의 매개변수를 허용하고 끝에 추가합니다.

pop(): 배열 끝에서 항목을 제거합니다.

* 队列方法 : 先进先出(吃了拉);
shift(): 프런트 엔드가 항목을 제거하고 항목을 반환하며 길이가 1만큼 줄어듭니다.

unshift(): 프런트 엔드가 항목을 푸시합니다.

* 重排序方法
reverse(): 역순; (): order;

비교 문자열이며 자동으로 문자열로 변환됩니다.
예를 들어 "5" 앞에 "10"이 있으므로 정렬을 위해서는 비교 함수를 전달해야 합니다.

function compare(value1,value2){    
    if(value1 < value2){        
        return -1;    
    }else if(value1 > value2){        
    return 1;    
    }else{        
    return 0;    
    }
    }
value = [0,1,5,10,15];value.sort(value);  //0,1,5,10,15
* 操作方法

concat() 접합: 먼저 원본 배열의 복사본을 만든 다음 끝에 매개변수를 추가합니다. 원본 배열은 변경되지 않습니다. Slice(1,2): Cut: 매개변수 1의 시작 위치를 반환하고, 매개변수 2는 끝 위치를 반환하며, 뒤가 아닌 앞을 감싸고, 원래 배열은 변경되지 않습니다. sorice(): 주로 배열에 항목을 삽입합니다. (배열 작업의 가장 중요한 방법): -삭제: 항목 수에 관계없이 삭제할 수 있으며 두 개의 매개변수를 지정합니다. arg1은 삭제할 위치, arg2는 삭제할 항목 수, 예: splice(0, 2): 삭제 전 두 개의 용어

-삽입: 세 개의 매개변수. 시작 위치, 삭제할 항목 수 및 삽입할 항목은 나중에 여러 개 삽입할 수 있습니다. 예: solice(2,0,"red","green"); 위치 2에서 "red" 및 "green"을 삽입합니다.
-교체: 위와 동일하며 삽입된 항목의 개수는 개수와 같을 필요는 없습니다. 삭제된 항목 수
참고: splice()는 원래 배열을 변경합니다.

* 位置方法

indexof(): 처음부터 검색합니다. lastIndexof(): 검색하지 않습니다.

arg1은 검색할 항목을 나타내고, arg2는 시작 위치입니다(선택적 매개변수). 찾을 수 없으면 -1, 비교할 때 합동이 사용됩니다.

var number = [1,2,3,4,5,4,3,2,1];
number.indexof(4) ;  //返回5

* 迭代方法

every();filter();

forEach();
map();

* 归并方法

reduce(): 처음부터reduceRight; 처음부터

배열의 모든 항목을 반복하여 최종 항목을 만듭니다. 반품 항목.

3. 날짜 유형

var now = new Data();
date.parse("May 25,2004"); // 新建特定日期
* 继承: 重写了3个方法

toLocalString(): 브라우저 설정 날짜

toString();

valueof();

* 日期格式化方法:

-toDateString(): 주, 월, 일, 연도를 표시하는 특정 형식; (): 시, 분, 초, 시간대; toLocalDateString(): 지역별 요일, 월, 일 및 연도를 표시합니다.

toLocalTimeString(): 시, 분, 초를 표시합니다. 특정 형식의 완전한 UTC 날짜, 특정 표시는 브라우저에 따라 다릅니다.

4. RegExp 유형: 정규식;

var expression = /pattern/flags;
标志flags包括 :
g : 全局;
i : 不区分大小写;
m : 多行模式;
例子 : var pattern = /at/g 全局找at
var pattern = /[bc]at/i ; 匹配第一个bat或cat,不区分大小写。
无意符须转义;
* RegExp实例方法:

RegExp의 주요 메소드는 -exec()입니다: 캡처 그룹, 매개변수는 문자열이며, 배열을 반환하고, 일치하는 항목이 없으면 null을 반환하고, 두 개의 추가 반환 속성: 인덱스 및 입력.

index: 위치 입력: 캡처된 문자열

-test(): 일치하는 경우 true를 반환하며, 사용자 입력을 확인하는 데 자주 사용됩니다.


5. 함수 유형

* 概念

함수는 실제로 객체입니다. 다른 참조 유형과 마찬가지로 함수 이름은 객체에 대한 포인터일 뿐입니다.
* 没有重载

동일한 함수를 선언하면 나중 함수가 이전 함수를 덮어쓰게 됩니다.

* 函数声明和函数表达式
function sum(){    }    // 函数声明
var sum = function(){    }      // 函数表达式函数声明可以变量提升,任何时候任何位置都可以调用。
* 作为值的函数

함수를 실행하지 않고 해당 함수에 접근하려면 함수 이름 뒤의 괄호 쌍을 제거해야 합니다.

// 한 함수에서 다른 함수로 복귀

// 정렬에 따라 객체 배열

function Compare(pro){

return function(obj1,obj2){        
var val1 = obj1[pro];        
var val2 = obj2[pro];        
if(val1 > val2){            
return 1;        
}else if(val1 < val2){  
          return -1;        
}else{
          return 0;        
}}}
var data = [{name:"AN:,"age":20},{name:"BN:,"age":30}]
data.sort(compare("name"));
* 函数的内部属性

내부적으로 두 개의 특수 객체를 포함합니다: this 및 인수
-argument: 전달된 모든 매개변수를 포함하고, 호출 수신자 속성을 가지며, 포인터이며, 이 객체의 함수만 소유하려고 합니다. .
// 재귀 알고리즘은 계승을 계산합니다function fac(num){

if(num <= 1){
        return 1;    
        }else{
      return num * fac(num-1);   // 等同于 return num * argument.callee(num -1);
      }}
 方法一与函数名耦合严重,且只有名称确定或不发生改变时使用。
 方法二更合适
* this : 引用的是函数执行的环境对象,函数的名称仅为包含着指针的变量而已,所以在不同的环境中执行引用的也是相同的函数。

* 函数的属性和方法(重点)

Function도 객체이므로 속성과 메서드가 있습니다.
* -属性 : length 和 prototype

-length는 수신하려는 명명된 매개 변수의 수를 나타냅니다. -prototype은 상속에도 사용할 수 있는 tostring(), valueOf 등과 같은 모든 힘과 메소드가 저장되는 실제 장소이며 이는 매우 중요합니다.

prototype 속성은 열거 가능하지 않으므로 for-in을 사용할 수 없습니다.

* -方法 : 非继承而来的方法有两个: apply() 和 call().

함수는 특정 범위에서 함수를 호출하는 것입니다. 실제로 함수 본문에서 이 개체의 값을 설정합니다. 두 메소드는 동일한 기능을 가지고 있지만 차이점은 매개변수를 받는 방식입니다. call(): 매개변수를 하나씩 나열합니다.
apply(): 매개변수는 배열입니다. 둘 다의 기능은 매개변수를 전달하는 것뿐만 아니라 함수의 범위를 확장하는 것입니다. 접근하기 어려운 곳을 통과하십시오.
bind(): 메서드, 함수 인스턴스를 생성하고 이 값, 전역 범위에 바인딩합니다.

6、基本包装类型 (也是对象)

为方便操作基本类型值,提供3个特殊引用类型:Boolean,Number和String.
每读取值后台都会创建对应的基本包装类型的对象,才可以用方法操作数据。
引用类型与基本包装类型主要区别为对象生存期,用new创建引用累心实例一直保存在内存中,自动创建基本包装类型存在执行瞬间,然后立即销毁,所以不能给基本类型添加属性和方法。

* Boolean 类型

typeof 基本类型 // ‘boolean’typeof 引用类型 //  'object'建议永不要使用Boolean对象

* Number 类型

toFixed()方法 : 按照指定方法返回数值的字符串表示。
var num = 10;num.tpFixed(2) // '10.00'
toExpoential() : 幂

* String 类型

属性:length : 表示含多少个字符方法:
1)字符方法:charAt()和charCodeAt():查找某个字符在字符串中的位置。    charCodeAt():查找字符编码
2)字符串操作方法:拼接用+号
-三个给予字符串创建新串:
slice():切片             // 第一个参数为起始位置,第二个参数为结束位置substr():子函数       // 第一个参数为起始位置,第二个参数为截取的个数substring():子串     // 第一个参数为起始位置,第二个参数为结束位置
以上方法都不会影响原始字符串
3)字符串位置方法:
indexof:从字符串中查找字符串,返回位置,查不到则返回-1.
indexOf:从头查找lastIndexOf:从尾查找  返回第一次出现的位置
4)trim:创建字符串副本,删除前后所有空格,原始字符串不变。
5)字符串大小写转变:
toLocalUpperCase():转大写,针对特定地区
toLocalLowerCase():转小写,针对特定地区
toUpperCase():转大写
toLowerCase():转小写
6)字符串模式匹配方法:
match():与RegExp的exec方法相同,参数为正则表达式活RegExp对象。
search():从尾开始查找,参数与match相同,找不到返回-1
replace():替换
split():切片,基于指定分隔符字符串为多个子字符串。第二个参数可选,返回几个数组。

7、单体内置对象

已自行实例化,可直接使用,Global和Math

* -Global对象,全局对象:所有全局作用域中属性和方法都是它的。

--url编码
--eval():解析字符串代码并执行

* -Math对象

--Math.ceil():向上取整。
--Math.floor():向下取整。
--Math.round():四舍五入。

* random()方法:随机数,返回0~1之间随机数。

本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目!

위 내용은 JavaScript 참조 유형에 대한 자세한 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제