前回のプログラミング言語ランキングでは、これから変わろうとしているJavaScript言語を紹介しましたが、その記事で説明したように、JavaScriptは最も動的なスクリプト言語であるだけでなく、最も便利なプログラミング言語の1つでもあります。ほとんどのブラウザに対応しているため、これらのブラウザでご利用いただけます。 JavaScript は非常にシンプルで広く使用されているため、急速に受け入れられています。多くのプログラマーは、JavaScript は「おもちゃの言語」であると考えていましたが、AJAX は市場に参入した後、JavaScript がまったく異なる機能と機能を発揮できるようになりました。
この発明のおかげで、プログラマーはデスクトップ アプリケーションの効果を持つ Web アプリケーションを作成できるようになりました。これは、データをより速く変更できるため有益です。ここでは、初心者が JavaScript をより上手に使用できるようにするための小さなヒントをいくつか紹介します。 JavaScript は幅広い用途で使用されており、スタイルも非常に多いため、さまざまなトリックを行うことができます。また、プログラミング手法は数多くありますが、初心者が JavaScript を理解するための出発点として適していると思われるテクニックを 10 個だけ厳選しました。
1、配列の末尾に要素を追加します
このトリックを使用すると、Length プロパティを使用して配列の末尾に要素を追加できます。これは、Length プロパティが配列の末尾より小さいためです。配列の最後の要素をさらに 1 つマークします。この方法は「プッシュ」方法と同じです。例:
var myArray = []; myArray[myArray.length] = 'New Element';
2、配列の長さを調整します
Length プロパティは読み取り専用ではないため、Length プロパティの値を設定できます。さらに、これを使用して配列の長さを増減することもできます。例:
var myArray = [1,2,3]; myArray.length // 3 myArray.length = 2; //Delete the last element myArray.length = 20 // add 18 elements to the array; the elements have the undefined value.
3、「!!」を使用して任意のデータ型をブール値に変換します。
このテクノロジーにより、「!!」を使用して任意のデータ型を変換できます。 (文字列、数値、整数など) をブール値に変換します。例:
var myString = '23255'; typeof myString; //String myString = !!myString; typeof myString //Boolean
4、数値を文字列に変換
このトリックを使用すると、数値の末尾に空の文字列を追加して、数値を文字列に変換できます。次に例を示します。
var mynumber = 234; typeof mynumber; //Number mynumber += ''; typeof mynumber; //String
5. 関数に必要な変数の数を知る
これは、関数に必要な変数の数を正確に知ることができる素晴らしいトリックです。例:
function add_nums(num1, num2){
return num1 + num2;
}
add_nums.length // 2 is the amount of parameters expected by the function add_nums6、「arguments」オブジェクトを使用して、関数が受け取るパラメーターの数を理解します。
この手法により、「arguments」オブジェクトを使用して理解することができます。関数 受け取ったパラメータの数。例:
function add_nums(){
return arguments.length;
}
add_nums(23,11,32,56,89,89,89,44,6); //this return the number 9この手法は、パラメーターの数の妥当性をチェックする必要がある場合、またはパラメーターの数が不確かな関数を作成する必要がある場合に役立ちます。
function sum_three_nums( ){
if(arguments.length!=3) throw new Error('received ' + arguments.length + ' parameters and should work with 3');
}
sum_three_nums(23,43); //Return the error message
function sum_num(){
var total = 0;
for(var i=0;i<arguments .length;i++){
total+=arguments[i];
}
return total;
}
sum_num(2,34,45,56,56);7. オブジェクトをパラメーターとして使用して関数を整理および改善する
現代の Web 開発におけるオブジェクトの最も一般的な使用法の 1 つは、オブジェクトを関数のパラメーターとして使用することです。 。関数パラメータのこのルールを覚えるのは常に困難ですが、オブジェクトを使用すると、パラメータのルールを気にする必要がなくなるため、非常に有益です。さらに、より整理されており、ユーザーは私たちがやろうとしていることをよりよく理解できるようになります。このメソッドを使用すると、オブジェクトをパラメータとして取得することで機能を整理および改善できます。例:
function insertData(name,lastName,phone,address){
code here;
}リファクタリングされたコードは次のようになります:
function insertData(parameters){
var name = parameters.name;
var
lastName = parameters.lastName;
var phone = parameters.phone;
var
address = parameters.address;
}これは、デフォルト値を使用したい場合にも非常に便利です。例:
function insertData(parameters){
var name = parameters.name;
var
lastName = parameters.lastName;
var phone = parameters.phone;
var
address = parameters.address;
var status = parameters.status || 'single'
//If status is not defined as a property
//in the object the variable status
take single as value
}この関数の使用は非常に簡単です。次の 2 つの方法でデータを送信できます。
//Example 1
insertData({name:'Mike', lastName:'Rogers',
phone:'555-555-5555',address:'the address', status:'married'});
//Example 2
var myData = { name:'Mike',
lastName:'Rogers',
phone:'555-555-5555',
address:'the address',
status:'married'
};
insertData(myData);8、関数はデータです。
関数は、関数パラメーターとして渡すことができる文字列や数値などのデータであり、非常に驚くべき「素晴らしい」Web アプリケーションを作成できます。この方法は非常に便利で、ほとんどすべての主流フレームワークで使用されています。例:
function byId(element, event, f){
Document.getElementById(element).['on'+event] = f; //f is the function that
we pass as parameter
}
byId('myBtn','click',function(){alert('Hello
World')});
Another example of functions as data:
//Example 1
function msg(m){
Alert(m);
}
//Example 2
var msg =
function(m){ alert(m);}これらの関数はほぼ同じです。唯一の違いは使用方法です。例: 最初の関数は宣言する前に使用できますが、2 番目の関数は宣言した後にのみ使用できます:
//Example 1
msg('Hello world'); //This will work
function msg(m){
alert(m);
}
//Example 2
msg('Hello world'); //Does not work
because JavaScript cannot find the function msg because is used before is been
declared.
var msg = function(m){ alert(m)}9、ローカル オブジェクト を拡張します。
一部の JavaScript リーダーはこの手法を推奨していませんが、一部のフレームワークではすでに使用されています。 JavaScript をターゲットにすることができます いくつかの補助メソッドを作成するための API。
//We create the method prototype for our arrays
//It only sums numeric
elements
Array.prototype.sum = function(){
var len = this.length;
total = 0;
for(var i=0;i<len ;i++){
if(typeof this[i]!= 'number')
continue;
total += this[i];
}
return total;
}
var myArray =
[1,2,3,'hola'];
myArray.sum();
Array.prototype.max = function(){
return Math.max.apply('',this);
}10、ブール値
スクリプトのデバッグ時間を節約できるため、これらの違いに注意してください。
'' == '0' // false 0 == '' // true 0 == '0' // true false == 'false' // false false == '0' // true false == undefined // false false == null // false null == undefined // true true == 1 // true '' == null // false false == '' // true
これらのスクリプトを他の場所で見たことがある場合は、これらのヒントがコツを掴むのに役立ちます。これらのヒントは JavaScript でできることの表面をなぞったものではありませんが、入門にはなります。コメント、質問、追加のヒントや懸念事項をお気軽に残してください。ただし、これは初心者向けの記事であることを忘れないでください。 ！他の開発者からの意見をぜひ聞きたいです!お楽しみください!
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
