ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript 参照型の詳細な紹介 (例付き)

JavaScript 参照型の詳細な紹介 (例付き)

不言
不言転載
2019-03-29 10:11:152018ブラウズ

この記事では、JavaScript 参照型について詳しく説明します (例とともに)。これには特定の参照価値があります。必要な友人は参照できます。お役に立てば幸いです。

概念: 参照型はデータと関数を一緒に編成するために使用されるデータ構造、つまりクラスです。
オブジェクトは特別な参照型インスタンスです。新しいオブジェクトは、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"]) ; // 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(): 逆順;
sort(): 順序;
文字列を比較し、自動的に文字列に変換されます。
たとえば、「10」は「5」の前にあるため、並べ替えに比較関数を渡す必要があります。

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() スプライシング: 最初に元の配列のコピーを作成し、最後にパラメータを追加します。元の配列は変更されません。スライス(1,2): カット: パラメータ 1 の開始位置を返します。パラメータ 2 は終了位置です。後ろではなく前を折り返します。元の配列は変更されません。 solice(): 主に配列に項目を挿入します。 (配列操作の最も重要な方法):
-Delete: 任意の数の項目を削除できます。2 つのパラメーターを指定します。arg1 は削除する位置、arg2 は削除する項目の数です。例: splice (0,2): 最初の 2 つの項目を削除します;
-挿入: 3 つのパラメーター。開始位置、削除する項目の数、および挿入する項目。後で複数の項目を挿入できます。例: solice(2,0,"red","green");位置 2 から "red" と "green" を挿入します。
-置換: 上記と同様、挿入される項目の数は同じである必要はありません。削除されたアイテムの数に。
注: splice() は元の配列を変更します;

* 位置方法

indexof(): 最初から検索します
lastIndexof(): 決して検索しません
arg1 は検索対象の項目を表し、arg2は開始点の Position (オプションのパラメーター) です。見つからない場合は -1 が返され、比較時に合同が使用されます。

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

* 迭代方法

every();
filter();
forEach();
map();

* 归并方法

reduce() : 最初から
reduceRight ; from 末尾の
は、配列内のすべての項目を反復処理し、最終的な戻り項目を構築します。

3. 日付の型

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

toLocalString(): ブラウザ設定の日付;
toString();
valueof();

* 日期格式化方法:

-toDateString( ) : 週、月、日、年を特定の形式で表示;
-toTimeString(): 時、分、秒、タイムゾーン;
toLocalDateString(): 週、月、日、年を表示地域別;
toLocalTimeString() : 時、分、秒;
toUTCString() : 完全な 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 と input という 2 つの追加プロパティを返します。
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"));
* 函数的内部属性

には 2 つの特別なオブジェクトが含まれます: this と argument
-argument: には、渡されるすべてのパラメーターが含まれます。 callee 属性はポインターであり、このオブジェクトの関数を所有したいだけです。
// 階乗を計算する再帰的アルゴリズム
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 は次のことを示します。名前付きパラメータ番号を受け取りたいとします。
-プロトタイプは、tostring()、valueOf などのすべてのフォースとメソッドが保存される実際の場所であり、継承にも使用できますが、これは非常に重要です。
プロトタイプ属性は列挙可能ではないため、for-in は使用できません。

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

この関数は、特定のスコープで関数を呼び出すためのもので、実際には関数本体にこのオブジェクトの値を設定します。 2 つのメソッドは機能は同じですが、パラメータの受け取り方法が異なります。 call(): パラメータを 1 つずつ列挙する
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 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。