for? 循環(huán)
for(初始化; 退出條件; 最終表達式){
//執(zhí)行重復(fù)條件
}
輸出1到10?
for(var i=1 ; i<=10; i++){?
console.log(i);
}
輸出10到1
for(var i = 10 ; i > 1; ?i-- ){
console.log(i);
}
輸出偶數(shù)下標(biāo)字符
var ssc='溜溜你你在在娜娜玉玉蘭蘭為為哎哎';
for(var i = 0 ; i < ssc.length ; i+=2){
console.log(ssc[i] );
}
while ?在表達式為真的情況下循環(huán)執(zhí)行一段代碼
條件表達式會在代碼塊。
var n = 1 ; ? //變量
while(n <= 10){ ? ? ? // n 為真的話份乒， 執(zhí)行下面的代碼
console.log(n);?
n +=1 ;
}
while (true){
//一直被循環(huán)的代碼 ? ? ? ? ? ? ? ? // 死循環(huán) ? 需要break終止
}
while(false){
//永遠不會被執(zhí)行的代碼
}
用while 和indexOf 來統(tǒng)計在字符串中某個字符出現(xiàn)的次數(shù)
var str='To be, or no ttobe, thatisthequestion.';
var count= 0 ;
var pos= 0 ;
while(pos !==-1 ){ ? ? ?// 循環(huán)判斷找不到-1就一直循環(huán)找默，
pos = str.indexOf('e' , pos); ? ? ? ?// 尋找 ?e
if (pos!== -1 ){ ? // 看是否找到了 ?e 找到了則判斷弹谁，
pos+=1; ?//找到了則在找到的位置前面一個下標(biāo)繼續(xù)尋找，
count+=1 ;// 找到了 則在count ?+1 ?
}
}console.log(count); ? ? ? ? ? // 出現(xiàn)了4個
break ??
出現(xiàn)在循環(huán)改览， 用來終止當(dāng)前循環(huán)并淋。
break出現(xiàn)在循環(huán)， 用來終止當(dāng)前循環(huán)侥啤。
while(true){ ? ? ? //無限死循環(huán)
let ?numder = prompt('請輸入一個偶數(shù)');//彈出一個可以輸入字符的框
if(number % 2 === 0 ){ ?//如果輸入了偶數(shù)則
break; ?// 跳出循環(huán)
}
}
函數(shù) Function
函數(shù)是一小段可重用的代碼，可用于封裝操作茬故，計算結(jié)果并返回。函數(shù)最有趣的地方在于：它可以調(diào)用它自身蚁鳖，即遞歸磺芭。
函數(shù)聲明
以下是一個計算直角三角形斜邊長的函數(shù)
function xc(a,b){
var ?a2 = a*a;
var b2 = b*b;
return Math.sqrt(a2+b2); ? ? ?// Math.sqrt() 用于開平方
}
有時候參數(shù)是可選的
>['HTML', 'CSS', 'JavaScript'].join()
→"HTML,CSS,JavaScript"
>['HTML', 'CSS', 'JavaScript'].join(' ')
→"HTML CSS JavaScript"
函數(shù)的默認參數(shù)值
調(diào)用函數(shù)時如果沒有給參數(shù)賦值，則參數(shù)值是undefined醉箕。使用=可以給參數(shù)設(shè)置默認值钾腺。ES6
function say(mass){
console.log(mass);
}
function say(mass = 1 ){
undefined
console.log(mass);
}
參數(shù)列表 arguments
在函數(shù)內(nèi)部可通過arguments對象訪問參數(shù)列表，在參數(shù)個數(shù)不確定時一般通過遍歷arguments訪問各個參數(shù)讥裤。
arguments是一個貌似數(shù)組的對象放棒，具有l(wèi)ength屬性，可以通過下標(biāo)訪問元素己英，但沒有數(shù)組的方法间螟。
以下函數(shù)sum()接受任意數(shù)目的(數(shù)字)參數(shù)，并返回這些參數(shù)的和。
function suv(){
var result = 0 ;
for ( var i = 0 ; i < arguments.length ; i++ ){? ? ? ? ? //參數(shù)列表 arguments
result += arguments[i];
}
return result
}
函數(shù)返回值
在函數(shù)中使用return返回值厢破。
若函數(shù)中沒有return或只是通過return;結(jié)束函數(shù)的執(zhí)行荣瑟，則函數(shù)的返回值是undefined。
若函數(shù)中包含return且有具體的返回值摩泪，如return a + b;笆焰，則函數(shù)的返回值是return后面的表達式的值。
永遠不要在return和返回值之間添加換行见坑。
當(dāng)返回的表達式較長時嚷掠，你可能會想把它放到下一行。以下代碼會使函數(shù)返回undefined荞驴，
return
(1+2+3+4+5+6+7+8+9+10+11+12+13+14+15);
因為它等價于以下代碼不皆。
return;?
?(1+2+3+4+5+6+7+8+9+10+11+12+13+14+15);
函數(shù)表達式
匿名函數(shù)
匿名函數(shù)在 JavaScript 中被廣泛使用，尤其是在監(jiān)聽瀏覽器事件時戴尸。
//瀏覽器窗口大小改變時粟焊，輸出窗口寬高。addEventListener 用于添加事件監(jiān)聽器孙蒙。
window.addEventListener('resize',function() {
console.log(`當(dāng)前窗口寬度：${window.innerWidth}px 高度：${window.innerHeight}px`);
}
);
IIFE
IIFE 全稱 Immediately-Invoked Function Expression项棠，譯作立即執(zhí)行の函數(shù)表達式。
創(chuàng)建一個新的函數(shù)作用域
函數(shù)作用域
內(nèi)置函數(shù)
isNaN()
alert()
prompt()
confirm()
console.log()
console.warn()
console.error()
...
函數(shù)VS方法
形如console.log()的函數(shù)更準(zhǔn)確的稱謂是方法挎峦。定義在對象(Object)內(nèi)部的函數(shù)稱為方法香追。
方法的顯著特征是調(diào)用時前面有?.?。
箭頭函數(shù)
箭頭函數(shù)(Arrow Function)ES6比函數(shù)表達式更簡潔且以詞法方式綁定this坦胶。箭頭函數(shù)總是匿名的透典。
》var ?ls = (a,b) => a*b
》ls(4,8)
> 32
> ?var square=x=>x*x;
→ undefined
> ?square(3)
→9
> ? ?['?','!','.'].map((m,i)=>m.repeat(i+1))
→ ?[ "?" , "!!" , "..." ]
數(shù)組?
遍歷數(shù)組
用for循環(huán) 遍歷數(shù)組
var sxs = ['1','2','3','4','5','6','7','8','9','10','11','12'];
for( var i = 0 ; i <sxs.length; i++){
console.log('sssss'+sxs[i])
};
EC5 的遍歷數(shù)組方法 。
forEach ? ? ? ? ?(function(每一個數(shù)組, 每一個數(shù)組的下標(biāo), 列表 ?不常用 ){ ??})
var sxs=['1','2','3','4','5','6','7','8','9','10','11','12'];
sxs.forEach(function(i,l){
console.log(i+(l+1));
})
for ?of ? ?EC6的方法
let ?sxs = ["??","??","??","??","??","??","??","??","??","??","??","??"];
for(let sx of sxs) {console.log(`十二生肖之${sx}`);}
數(shù)組 api
數(shù)組與字符串
split將通過特定符號(如逗號,)隔開內(nèi)容的字符串分拆成一個數(shù)組顿苇。
String.prototype.split()?將通過特定符號(如逗號,)隔開內(nèi)容的字符串分拆成一個數(shù)組峭咒。
"格物致知".split('')?→ ?["格","物","致","知"]
"We is for of split join".split(' ') →? ["we","is","for","of","split","join"]? //按空格來分拆成一個數(shù)組
join將數(shù)組元素連接成一個字符串并返回，數(shù)組本身不會因此改變
Array.prototype.join()將數(shù)組元素連接成一個字符串并返回纪岁，數(shù)組本身不會因此改變凑队。
["we","is","for","of","split","join"].join('') ?//按字符串連接在一起
"weisforofsplitjoin"
["we","is","for","of","split","join"].join(' ')? //按空格連接在一起
"we is for of split join"
數(shù)組API
數(shù)組常用API
判定
Array.isArray() ? ES5方法用于.判斷某個值是否數(shù)組
Array. isArray('') ? ? ? false
Array. isArray([]) ? ? ? true
Array.pretotype.some() ES5 方法是用于判定中是否有? 部分的元素? 通過條件的測試
>[95,85,100,90,82,100,99,98,95].some(score=>score===100)
→true
>['劉備','關(guān)羽','張飛','曹操','孫權(quán)'].some(function(name) {
return name.endsWith('瑜'); })// endsWith方法返回的測試該字符串是否以指定的后綴 結(jié)束， 是的話返回true幔翰， 否的話則返回false
→false
Array.pretotype.every()ES5 方法用于判定數(shù)組的 ? ?所有元素 ? 是否通過了條件函數(shù)的測試
['劉備','劉于','劉飛','劉操','劉奇','劉索'].every(function(name){return name.startsWith('劉');})
// startsWith 方法返回的測試該字符串是否以指定的前綴開始漩氨， 是的話返回true， 否的話則返回false
true
遍歷
Array.prototype.forEach()ES5方法用于遍歷數(shù)組遗增，并將提供的函數(shù)作用在每個元素上
var ls=['蘋果','香蕉','芒果','西瓜'].forEach(function(ll,xx){console.log(`我喜歡吃的水果${xx+1}位是${ll}`);})
修改
Array.prototype.push()方法將一個 叫惊， 或者多個元素添加到 數(shù)組末尾，并返回數(shù)組的最新長度做修。
ls = ['鼠','牛','龍','虎','狗']
ls.push('雞','羊')?
?["鼠", "牛", "龍", "虎", "狗", "雞", "羊"]
Array.prototype.pop()方法將一個 霍狰， 數(shù)組末尾的數(shù)組刪除抡草，并返回數(shù)組的最新長度。 pop 會修改數(shù)組長度
>var ns = ['華為5','iphone 6','iphone 7']
>ns
-['華為5','iphone 6','iphone 7']
>var si = ns.pop()
>si?
?-iphone 7
>ns
['華為5','iphone 6']
Array.pretotype.shift()方法是將數(shù)組的 ?第一個元素刪除 ?蚓耽， 并返回該元素的值渠牲，數(shù)組的長度 length因此改變。
var stas= ['笑','哭','不','得']
stas.shift()
"得"
stas
['笑'步悠，'哭','不'}
Array.pretotype.unshift() 方法是 將一個或多個元素添加到數(shù)組開頭签杈，并返回數(shù)組的最新長度。
var learn = ['CSS','HTML']
learn.unshift('JavaScript')
learn?
['JavaScript','CSS','HTML']
Array.prototype.splice()方法通過刪除現(xiàn)有的元素和 鼎兽， 或添加元素來更改一個數(shù)組答姥。
copyWithin? ? ? ? ? ? ES6的 API? 用來復(fù)制更換某個元素
>var蜀=['劉備','關(guān)羽','張飛'];
→undefined>
蜀.splice(1,0,'諸葛亮','龐統(tǒng)')//諸葛亮龐統(tǒng)先后拜入劉備帳下 ?// ?
→ []
>蜀
→ ["劉備","諸葛亮","龐統(tǒng)","關(guān)羽","張飛"]
>蜀.splice(2,1)//龐統(tǒng)戰(zhàn)死于雒城
→ ["龐統(tǒng)"]>
蜀→ ["劉備","諸葛亮","關(guān)羽","張飛"]
>蜀.splice(2,2,'劉嬋','趙云','廖化')//關(guān)羽張飛先后被殺
→ ["關(guān)羽","張飛"]
>蜀→ ["劉備","諸葛亮","劉嬋","趙云","廖化"]
>蜀.copyWithin(0,2,3).splice(2,1)//劉備去世，劉嬋繼位 ? ? ? //copyWithin(更換的元素,復(fù)制的元素位置,復(fù)制的元素位置到哪的數(shù)字)? ES6的 API? 用來復(fù)制更換某個元素
→ ["劉嬋"]
>蜀→ ["劉嬋","諸葛亮","趙云","廖化"]
排序
Array.pretotype.sort()? 方法對數(shù)組進行排序并返回谚咬，默認排序順序是根據(jù)字符串Unicode碼點
>['c','p','w','g','h','a','b','r']
→["a", "b", "c", "g", "h", "p", "r", "w"]
> [1, 12, 200, 23, 2].sort() ? ? ? ? //數(shù)字排序不了鹦付，需要添加一個函數(shù)來進行排序
→[1, 12, 200, 23, 2]
>[1, 12, 200, 23, 2].sort(function(a,b){return a-b }) //添加函數(shù)表達式，使用A-B择卦， 如果A-B結(jié)果小于0則不變敲长，如果A-B結(jié)果大于0 則更換位置， ? ? 數(shù)字小的排序在前面秉继。數(shù)字大在后面
→[1, 2, 12, 23, 200]
>[1, 12, 200, 23, 2].sort(function(a,b){return b-a }) //添加函數(shù)表達式祈噪，使用B-A則得到和a-b相反，
→[[200, 23, 12, 2, 1]
搜索
Array.pretotype.indexOf()方法是用于搜索 查找的元素的下標(biāo)?
映射
Array.pretoty.map()ES5 方法是返回一個新數(shù)組尚辑，新數(shù)組中的每個元素都是映射函數(shù)作用在原數(shù)組元素上的結(jié)果
>[1,2,3,4,5,6].map(function(x){return x*x})
-[1, 4, 9, 16, 25, 36]
>['冷','熱','痛','痛'].map(function(stri){return stri.repeat(3);})
-["冷冷冷", "熱熱熱", "痛痛痛", "痛痛痛"]
歸納
Arrat.pretotype.reduce(）
將數(shù)組里的值求和
var sum = [0, 1, 2, 3].reduce(function (a, b) {
return a + b;
}, 0);
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
function(a, b) {
return a.concat(b);
})? // flattened is [0, 1, 2, 3, 4, 5]
MapReduce
MapReduce是Google提出的一個軟件架構(gòu)辑鲤，用于大規(guī)模數(shù)據(jù)集（大于1TB）的并行運算。 概念“Map（映射）”和“Reduce（歸納）”杠茬，及他們的主要思想月褥，都是從函數(shù)式編程語言借來的，還有從矢量編程語言借來的特性瓢喉。
MapReduce 用于購物車總價結(jié)算
var items = [ ? ? ? //購物車里面的產(chǎn)品價格數(shù)量
{title:'蘋果',price:5,puantity:3 }, ? //產(chǎn)品數(shù)量宁赤，價格
{title:'雪梨',price:8,puantity:6 },
{title:'香蕉',price:6,puantity:8 },
]
console.log(items.map(fruit => fruit.price* fruit.puantity).reduce((a,b)=> a+b ))//使用MapReduce完成購物車總價格計算
篩選
Aray.pretoty.filter() ES5 ?方法返回一個包含滿足條件函數(shù)的數(shù)組元素組成的新數(shù)組。
>[1,2,3,4,5,6,7,8,9,10].filter(function(n) {returnn%2===0; })
→ [2,4,6,8,10]
>['王維','劉禹錫','王勃','白居易','王之渙','賀知章','陳子昂'].filter(name=>name.startsWith('王'))
→ ["王維","王勃","王之渙"]
查找
Array.prototype.find()ES6方法返回數(shù)組中第一個滿足條件函數(shù)的元素的值栓票，沒有則返回undefined礁击。
>[2,8,32,7,15,23,36,45].find(x=>x%3===0)
→15
>['劉備','關(guān)羽','張飛','曹操','孫權(quán)'].find(name=>name.endsWith('瑜')) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//endsWith方法返回的測試該字符串是否以指定的后綴 結(jié)束， 是的話返回true逗载， 否的話則返回false
→undefined
s?
