ホームページ >ウェブフロントエンド >htmlチュートリアル >JavaScript の配列文字列演算関数
JavaScript の配列文字列演算関数
- php中世界最好的语言オリジナル
- 2018-03-08 15:24:291824ブラウズ
今回は、JavaScriptの配列-文字列-数学関数、JavaScript配列-文字列-数学関数を使用する際の注意事項について、実際の事例を紹介します。
配列メソッドのプッシュ、ポップ、シフト、シフト解除、結合、分割の機能は何ですか?
push() メソッドは、1 つ以上の要素を配列の末尾に追加し、配列の新しい長さ (length 属性値) を返します。
pop() メソッドは、配列内の最後の要素を削除し、この要素を返します。
shift() メソッドは、配列の最初の要素を削除し、この要素を返します。このメソッドは配列の長さを変更します。
unshift() メソッドは、1 つ以上の要素を配列の先頭に追加し、配列の新しい長さの値を返します。
join() メソッドは、配列内のすべての要素を文字列に結合します。
**split() ** メソッドは、文字列を部分文字列に分割することによって、String オブジェクトを文字列配列に分割します。
コードの質問
配列
splice を使用してプッシュ、ポップ、シフト、およびシフト解除メソッドを実装する
定義と使用法
splice() メソッドは、配列の要素を挿入、削除、または置換するために使用されます。
構文
arrayObject.splice(index,howmany,element1,.....,elementX)
パラメータの説明
index 必須。要素を追加/削除する場所を指定します。このパラメータは、挿入および/または削除を開始する配列要素のインデックスであり、数値である必要があります。
必要な数。削除する要素の数を指定します。数値である必要がありますが、「0」でも構いません。このパラメータが指定されていない場合、元の配列のインデックスから末尾までのすべての要素が削除されます。 element1 はオプションです。配列に追加する新しい要素を指定します。 Index が指すインデックスから挿入を開始します。
要素X オプション。複数の要素を配列に追加できます。
戻り値
arrayObjectから要素が削除された場合、削除された要素を含む配列が返されます。
splice->push var a = [1,2,3,4,5] var b = [1,2,3,4,5] console.log(a); console.log(b); a.push(6); b.splice(5,1,6); console.log(a); console.log(b); splice->pop var a = [1,2,3,4,5] var b = [1,2,3,4,5] console.log(a); console.log(b); a.pop(); b.splice(4,1); console.log(a); console.log(b); splice->shift var a = [1,2,3,4,5] var b = [1,2,3,4,5] console.log(a); console.log(b); a.shift(); b.splice(0,1); console.log(a); console.log(b); splice->unshift var a = [1,2,3,4,5] var b = [1,2,3,4,5] console.log(a); console.log(b); a.unshift(-1); b.splice(0,0,-1); console.log(a); console.log(b);
配列を使用して次の文字列を結合します
var prod = { name: '女装', styles: ['短款', '冬季', '春装']
};function getTpl(data){//todo...};var result = getTplStr(prod); //result为下面的字符串
<dl class="product">
<dt>女装</dt>
<dd>短款</dd>
<dd>冬季</dd>
<dd>春装</dd>
</dl>コード:
var prod = {
name: '女装',
styles: ['短款', '冬季', '春装']
};
function getTplStr(data){
var htmls = [];
htmls.push('<dl class="product">','<dt>'+data,name+'<dt>');
for(i=0;i<data.styles.length;i++){
htmls.push('<dd>'+data.styles[i]+'<dd>')
}
htmls.push('<dl>');
var htmls = htmls.join('')
return htmls
};
var result = getTplStr(prod); //result为下面的字符串
console.log(result)次の関数を実装する検索関数を作成します
var arr = [ "test", 2, 1.5, false ] find(arr, "test") // 0 find(arr, 2) // 1 find(arr, 0) // -1
コード:
var arr = [ "test", 2, 1.5, false ]
var find = function(a,b){
console.log(a.indexOf(b))
}
find(arr, "test") // 0
find(arr, 2) // 1
find(arr, 0) // -1次の関数を実装する関数filterNumericを作成します
arr = ["a", 1,3,5, "b", 2]; newarr = filterNumeric(arr); // [1,3,5,2]
コード:
メソッド 1:
arr = ["a", 1,3,5, "b", 2];
var filterNumberic = function(data){
var a = [];
for(i=0;i<data.length;i++){
if(typeof data[i] === 'number'){
a.push(data[i]);
}
}
return a
}newarr = filterNumberic(arr); // [1,3,5,2]
console.log(newarr)
メソッド 2:
arr = ["a", 1,3,5, "b", 2];
function isNumber(element) {
return typeof element === 'number';
}
var newarr = arr.filter(isNumber)
console.log(newarr) オブジェクト obj はclassName 属性。内部の値はスペース区切りの文字列です (HTML 要素の class 属性と同様)。次の関数を持つ addClass 関数とremoveClass 関数を記述します。 Camelize 関数を使用して、my- を配置します。 short-string 形式の文字列は、次のような myShortString 形式の文字列に変換されます。
var obj = {className: 'open menu'}addClass(obj, 'new') // obj.className='open menu new'addClass(obj, 'open') // 因为open已经存在，此操作无任何办法addClass(obj, 'me') // obj.className='open menu new me'console.log(obj.className) // "open menu new me"
removeClass(obj, 'open') // obj.className='menu new me' removeClass(obj, 'blabla') // 不变 コード:
var obj = {className: 'open menu'}var addClass = function(a,b){var name = a.className.split(" ");if(name.indexOf(b) === -1) {name.push(b);}else{console.log("因为"+b+"已经存在，此操作无任何办法");}a.className = name.join(" ");console.log('obj.className='+a.className);}var removeClass = function(a,b){var name = a.className.split(" ");if(name.indexOf(b) !== -1){name.splice(name.indexOf(b),1)a.className = name.join(" ");console.log('obj.className='+a.className)}else{console.log('不变')}}
addClass(obj, 'new') // obj.className='open menu new' addClass(obj, 'open') // 因为open已经存在，此操作无任何办法 addClass(obj, 'me') // obj.className='open menu new me' console.log(obj.className) // "open menu new me" removeClass(obj, 'open') // obj.className='menu new me' removeClass(obj, 'blabla') // 不变 次のコードは何を出力しますか?なぜですか?
camelize("background-color") == 'backgroundColor'
camelize("list-style-image") == 'listStyleImage' なぜなら、 arr.push( function() {alert(console.log('hello Hanger Valley')) } ); をプッシュするからです。 arr[] の最後の桁、arr[arr.length-1]() は配列の最後の桁を取得し、関数をすぐに実行します。 valley')) ログはコンソールでのみ開くことが許可されているため、結果は未定義です
配列内の数値をフィルタリングし、数値以外を削除する関数 filterNumericInPlace を作成します
function camelize(string){
return string.replace(/-/g,'')
}
console.log(camelize("background-color"))
camelize("background-color") == 'backgroundColor'
camelize("list-style-image") == 'listStyleImage' コード:
arr = ["a", "b"];
arr.push( function() { alert(console.log('hello hunger valley')) } );
arrarr.length-1 // ? 次の関数を実装する ageSort 関数を作成します:
arr = ["a", 1,3,4,5, "b", 2]; //对原数组进行操作，不需要返回值 filterNumericInPlace(arr); console.log(arr) // [1,3,4,5,2]
コード:
方法 1:
arr = ["a","d", 1,3,4,5, "b", 2];
//对原数组进行操作，不需要返回值
function filterNumericInPlace(data){
for(i=0;i<data.length;i++){
if(typeof data[i] === 'string'){
data.splice(i,1);
i--;//splice指针减少1，否则获取不了数组中全部元素。
}
}
}
filterNumericInPlace(arr);
console.log(arr) // [1,3,4,5,2]方法 2:
var john = { name: "John Smith", age: 23 }
var mary = { name: "Mary Key", age: 18 }
var bob = { name: "Bob-small", age: 6 }
var people = [ john, mary, bob ]
ageSort(people) // [ bob, mary, john ]2 つのパラメーターを受け入れて配列をフィルターする filter(arr, func) 関数を作成します。 1 つ目は処理される配列で、2 つ目のパラメータは
コールバック関数 (コールバック関数は各配列要素を走査して受け入れ、関数が true を返した場合は要素を保持し、それ以外の場合は要素を削除します) で、次の関数を実装します。
function ageSort(arr){
arr.sort(function(a,b){return a.age-b.age})
return arr
}
var john = { name: "John Smith", age: 23 }
var mary = { name: "Mary Key", age: 18 }
var bob = { name: "Bob-small", age: 6 }
var people = [ john, mary, bob ]
ageSort(people) // [ bob, mary, john ]
console.log(ageSort(people))コード: Write。最初の文字が大文字である文字を返すucFirst関数。function isNumeric (el){return typeof el === 'number';}arr = ["a",3,4,true, -1, 2, "b"]
arr = filter(arr, isNumeric) ; // arr = [3,4,-1, 2], 过滤出数字 arr = filter(arr, function(val) { return val > 0 }); // arr = [2] 过滤出大于0的整数の場合、関数を書き込みます。 str の長さが maxlength より大きい場合、str は maxlength に切り捨てられ、Add... のようになります: function filter(data,callback){return data.filter(callback)}
function isNumeric (el){ return typeof el === 'number'; } arr = ["a",3,4,true, -1, 2, "b"] arr = filter(arr, isNumeric) ; // arr = [3,4,-1, 2], 过滤出数字 console.log(arr) arr = filter(arr, function(val) { return val > 0 }); // arr = [2] 过滤出大于0的整数 console.log(arr) コード:
ucFirst("hunger") == "Hunger"数学関数
function ucFirst(string){
return string[0].toUpperCase()+string.slice(1);
}
console.log(ucFirst("hunger"))
ucFirst("hunger") == "Hunger"コード: truncate("hello, this is hunger valley,", 10)) == "hello, thi...";
truncate("hello world", 20)) == "hello world"最小値を含み、最大値を除く最小値から最大値までの乱数を取得する関数を作成します。コード:
function truncate(str,maxlength){
if(str.length>maxlength){
var sub = str.substring(maxlength)
str = str.replace(sub,'...');
} return str;
}
console.log(truncate("hello, this is hunger valley,", 10));
truncate("hello, this is hunger valley,", 10) == "hello, thi...";
truncate("hello world", 20) == "hello world"ランダムな整数を取得する関数を作成します。最小値から最大値まで (最小値と最大値を含む) コード:
var num1 = 3.456 limit2( num1 ); //3.46 limit2( 2.42 ); //2.42ランダムな配列を取得する関数を作成します。配列の要素は、長さ len、最小値、最大値の乱数です。
コード:
var num1 = 3.456
function limit2(data){
var num = Math.round(data*100);
return num/100
}
limit2( num1 ); //3.46
limit2( 2.42 ); //2.42
console.log(limit2(num1));
console.log(limit2(2.42));
console.log(limit2(-1.15555555)) この記事のケースを読んだことがあるかと思います。この方法をマスターしたら、よりエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事に注目してください。
JSのクロージャーとタイマー
以上がJavaScript の配列文字列演算関数の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。