數組
數組方法##
- push：在數組末尾添加新元素弧岳。
- pop：移除數組的最后一個元素凳忙。
- shift：移除數組的第一個元素。
- unshift：在數組開頭添加新元素禽炬。
數組的添加刪除.png
- join：將數組元素連接為字符串涧卵，連接符號可選，默認為逗號(,)腹尖。
- split：將字符串拆分為數組柳恐。
數組-字符串.png
字符串-數組.png
用 splice 實現(xiàn) push、pop热幔、shift乐设、unshift##
arr.splice(鍵位,長度,添加參數,添加參數,添加參數);
長度為0添加,長度為1替換,長度>1刪除再添加
function push(arr,val){
arr.splice(arr.length,0 ,val);
return arr.length;
}
function pop(arr){
return arr.splice(arr.length-1,1)[0];
}
function shift(arr){
return arr.splice(0,1)[0];
}
function unshift(arr,val){
arr.splice(0,0 ,val);
return arr.length;
}
使用數組拼接實現(xiàn)html(字符串)##
var prod = {
name: "女裝",
styles: ["短款","冬季","春裝"]
};
function getTplStr(data){
var htmls = [];
htmls.push("<dl class=product>");
htmls.push("<dt>"+data.name+"</dt>");
for (var i = 0; i < data.styles.length; i++) {
htmls.push("<dd>"+data.styles[i]+"</dd>")
}
htmls.push("</dl>");
return htmls.join(" ");
};
result為下面的字符串
<dl class=product>
<dt>女裝</dt>
<dd>短款</dd>
<dd>冬季</dd>
<dd>春裝</dd>
</dl>
.indexOf查找數組內指定元素位置##
PS:lastIndexOf從尾部到頭部反向搜索
var arr = [ "test", 2, 1.5, false ]
function find(arr,val){
return arr.indexOf(val);
}
效果如下
find(arr, "test") // 0
find(arr, 2) // 1
find(arr, 0) // -1
.filter(function())選取數組的子集##
var arr = ["a", "b", 1, 3, 5, "b", 2];
function filterNumeric(arr){
return arr.filter(function(i){
return typeof(i) === "number";
})
}
newarr = filterNumeric(arr); // [1,3,5,2]
對象obj有個className屬性，里面的值為的是空格分割的字符串(和html元素的class特性類似)绎巨，寫addClass近尚、removeClass函數，有如下功能：##
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"
}
function addClass(obj,val){
var str = (obj.className);
if (str.search(val) === -1){
str =str + " " + val;
}
return obj.className = str;
}
//錯誤方法,.search只能做到搜索字符,所以單詞me不能添加,應為單詞menu含有"me"
嘗試方法一正確
function addClass(obj,val){
var arr = obj.className.split(" ");
if (arr.indexOf(val) === -1) {
arr.push(val);
}
obj.className = arr.join(" ");
}
function removeClass(obj,val){
var arr = obj.className.split(" ");
if (arr.indexOf(val) !== -1) {
arr.splice(arr.indexOf(val),1);
}
obj.className = arr.join(" ");
}
寫一個camelize函數戈锻，把my-short-string形式的字符串轉化成myShortString形式的字符串##
function camelize(str){
arr = str.split("-");
for (var i = 1; i < arr.length; i++) {
arr[i] = arr[i].substring(0,1).toUpperCase() + arr[i].substring(1);
}
return str = arr.join("");
}
// camelize("background-color") == 'backgroundColor'
// camelize("list-style-image") == 'listStyleImage'
如下代碼輸出什么？為什么?##
arr = ["a", "b"];
arr.push( function() { alert(console.log('hello hunger valley')) } );
arr[arr.length-1]()
輸出結果.png
console.log打印hello hunger valley 值為undefined,alert彈出前者的值undefined且自身值為undefined
寫一個ageSort函數實現(xiàn)如下功能##
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 ]
代碼如下:
function ageSort(arr){
arr.sort(function(a,b){
return a.age - b.age;
})
return arr;
}
寫一個filter(arr, func) 函數用于過濾數組和媳，接受兩個參數格遭，第一個是要處理的數組，第二個參數是回調函數(回調函數遍歷接受每一個數組元素留瞳，當函數返回true時保留該元素拒迅，否則刪除該元素)。實現(xiàn)如下功能：##
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的整數
代碼如下:
function filter(arr,func){
for (var i = 0; i < arr.length; i++) {
if (!func(arr[i])) {
arr.splice(i,1);
i -= 1;
}
}
return arr;
}
字符串
寫一個 ucFirst函數撼港，返回第一個字母為大寫的字符##
function ucFirst(str){
return str.replace(str[0],str[0].toUpperCase());
}
寫一個函數truncate(str, maxlength), 如果str的長度大于maxlength坪它，會把str截斷到maxlength長，并加上...帝牡，如
truncate("hello, this is hunger valley,", 10)) == "hello, thi...";
truncate("hello world", 20)) == "hello world"
代碼如下:
function truncate(str,maxlength){
if (str.length > maxlength) {
str = str.substr(0,maxlength) + "..."
}
return str;
}
數學函數
寫一個函數limit2往毡，保留數字小數點后兩位，四舍五入##
function limit2(num) {
return Math.round(num * 100)/100;
}
寫一個函數靶溜，獲取從min到max之間的隨機數开瞭，包括min不包括max##
function Random(min,max){
return Math.random()*(max-min)+ min;
}
寫一個函數，獲取從min到max之間的隨整數罩息，包括min包括max##
function Random(min,max){
return Math.floor(Math.random()*(max-min+1) + min);
}
寫一個函數嗤详，獲取一個隨機數組，數組中元素為長度為len瓷炮，最小值為min葱色，最大值為max(包括)的隨機數##
function Random(len,min,max){
var arr = [];
for (var i = 0; i < len; i++) {
arr.push(Math.random()*(max-min+1)+ min);
}
console.log(arr);
}
