JS循环 函数 数组

for  循环

for(初始化; 退出条件; 最终表达式){

//执行重复条件

}

输出1到10 

for(var i=1 ; i<=10; i++){ 

console.log(i);

}

输出10到1

for(var i = 10 ; i > 1;  i-- ){

console.log(i);

}

输出偶数下标字符

var ssc='溜溜你你在在娜娜玉玉兰兰为为哎哎';

for(var i = 0 ; i < ssc.length ; i+=2){

console.log(ssc[i] );

}


while  在表达式为真的情况下循环执行一段代码

条件表达式会在代码块。

var n = 1 ;   //变量

while(n <= 10){       // n 为真的话, 执行下面的代码

console.log(n); 

n +=1 ;

}

while (true){

//一直被循环的代码                 // 死循环   需要break终止

}

while(false){

//永远不会被执行的代码

}


用while 和indexOf 来统计在字符串中某个字符出现的次数

var str='To be, or no ttobe, thatisthequestion.';

var count= 0 ;

var pos= 0 ;

while(pos !==-1 ){      // 循环判断找不到-1就一直循环,

pos = str.indexOf('e' , pos);        // 寻找  e

if (pos!== -1 ){   // 看是否找到了  e 找到了则判断,

pos+=1;  //找到了则在找到的位置前面一个下标继续寻找,

count+=1 ;// 找到了 则在count  +1  

}

}console.log(count);           // 出现了4个


break   

出现在循环, 用来终止当前循环。

break出现在循环, 用来终止当前循环。

while(true){       //无限死循环

let  numder = prompt('请输入一个偶数');//弹出一个可以输入字符的框

if(number % 2 === 0 ){  //如果输入了偶数则

break;  // 跳出循环

}

}





函数 Function

函数是一小段可重用的代码,可用于封装操作,计算结果并返回。函数最有趣的地方在于:它可以调用它自身,即递归


函数声明

以下是一个计算直角三角形斜边长的函数

function xc(a,b){

var  a2 = a*a;

var b2 = b*b;

return Math.sqrt(a2+b2);      // Math.sqrt() 用于开平方

}


有时候参数是可选的

>['HTML', 'CSS', 'JavaScript'].join()

→"HTML,CSS,JavaScript"

>['HTML', 'CSS', 'JavaScript'].join(' ')

→"HTML CSS JavaScript"


函数的默认参数值

调用函数时如果没有给参数赋值,则参数值是undefined。使用=可以给参数设置默认值。ES6

function say(mass){

console.log(mass);

}

function say(mass = 1 ){

undefined

console.log(mass);

}


参数列表 arguments

在函数内部可通过arguments对象访问参数列表,在参数个数不确定时一般通过遍历arguments访问各个参数。

arguments是一个貌似数组的对象,具有length属性,可以通过下标访问元素,但没有数组的方法。

以下函数sum()接受任意数目的(数字)参数,并返回这些参数的和。

function suv(){

var result = 0 ;

for ( var i = 0 ; i < arguments.length ; i++ ){          //参数列表 arguments

result += arguments[i];

}

return result

}


函数返回值

在函数中使用return返回值。

若函数中没有return或只是通过return;结束函数的执行,则函数的返回值是undefined。

若函数中包含return且有具体的返回值,如return a + b;,则函数的返回值是return后面的表达式的值。

永远不要在return和返回值之间添加换行。

当返回的表达式较长时,你可能会想把它放到下一行。以下代码会使函数返回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);

函数返回值



函数表达式

函数表达式



匿名函数

匿名函数在 JavaScript 中被广泛使用,尤其是在监听浏览器事件时。

//浏览器窗口大小改变时,输出窗口宽高。addEventListener 用于添加事件监听器

window.addEventListener('resize',function() {

console.log(`当前窗口宽度:${window.innerWidth}px 高度:${window.innerHeight}px`);

}

);



IIFE

IIFE 全称 Immediately-Invoked Function Expression,译作立即执行の函数表达式

创建一个新的函数作用域

IIFE



函数作用域

函数作用域




内置函数

isNaN()

alert()

prompt()

confirm()

console.log()

console.warn()

console.error()

...



函数VS方法

形如console.log()的函数更准确的称谓是方法。定义在对象(Object)内部的函数称为方法。

方法的显著特征是调用时前面有 . 。


箭头函数

箭头函数(Arrow Function)ES6比函数表达式更简洁且以词法方式绑定this。箭头函数总是匿名的。

》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))

→  [ "?" , "!!" , "..." ]





数组 

遍历数组

用for循环 遍历数组

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 的遍历数组方法 。

forEach          (function(每一个数组, 每一个数组的下标, 列表  不常用 ){   })

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}`);}


数组 api


数组与字符串

split将通过特定符号(如逗号,)隔开内容的字符串分拆成一个数组。

String.prototype.split() 将通过特定符号(如逗号,)隔开内容的字符串分拆成一个数组

"格物致知".split('') →  ["格","物","致","知"]

"We is for of split join".split(' ') →  ["we","is","for","of","split","join"]  //按空格来分拆成一个数组


join将数组元素连接成一个字符串并返回,数组本身不会因此改变

Array.prototype.join()将数组元素连接成一个字符串并返回,数组本身不会因此改变。

["we","is","for","of","split","join"].join('')  //按字符串连接在一起

"weisforofsplitjoin"


["we","is","for","of","split","join"].join(' ')  //按空格连接在一起

"we is for of split join"


数组API

数组常用API

判定

Array.isArray()   ES5方法用于.判断某个值是否数组

Array. isArray('')       false

Array. isArray([])       true

Array.pretotype.some() ES5 方法是用于判定中是否有  部分的元素  通过条件的测试

>[95,85,100,90,82,100,99,98,95].some(score=>score===100)

→true

>['刘备','关羽','张飞','曹操','孙权'].some(function(name) {

return name.endsWith('瑜'); })// endsWith方法返回的测试该字符串是否以指定的后缀 结束, 是的话返回true, 否的话则返回false

→false

Array.pretotype.every()ES5 方法用于判定数组的    所有元素   是否通过了条件函数的测试

['刘备','刘于','刘飞','刘操','刘奇','刘索'].every(function(name){return name.startsWith('刘');})

// startsWith 方法返回的测试该字符串是否以指定的前缀开始, 是的话返回true, 否的话则返回false

true

遍历

Array.prototype.forEach()ES5方法用于遍历数组,并将提供的函数作用在每个元素上

var ls=['苹果','香蕉','芒果','西瓜'].forEach(function(ll,xx){console.log(`我喜欢吃的水果${xx+1}位是${ll}`);})


修改

Array.prototype.push()方法将一个 , 或者多个元素添加到 数组末尾,并返回数组的最新长度。

ls = ['鼠','牛','龙','虎','狗']

ls.push('鸡','羊') 

 ["鼠", "牛", "龙", "虎", "狗", "鸡", "羊"]

Array.prototype.pop()方法将一个 , 数组末尾的数组删除,并返回数组的最新长度。 pop 会修改数组长度

>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()方法是将数组的  第一个元素删除  , 并返回该元素的值,数组的长度 length因此改变。

var stas= ['笑','哭','不','得']

stas.shift()

"得"

stas

['笑','哭','不'}

Array.pretotype.unshift() 方法是 将一个或多个元素添加到数组开头,并返回数组的最新长度。

var learn = ['CSS','HTML']

learn.unshift('JavaScript')

learn 

['JavaScript','CSS','HTML']



Array.prototype.splice()方法通过删除现有的元素和 , 或添加元素来更改一个数组。

copyWithin            ES6的 API  用来复制更换某个元素

>var蜀=['刘备','关羽','张飞'];

→undefined>

蜀.splice(1,0,'诸葛亮','庞统')//诸葛亮庞统先后拜入刘备帐下  //  

→ []

>蜀

→ ["刘备","诸葛亮","庞统","关羽","张飞"]

>蜀.splice(2,1)//庞统战死于雒城

→ ["庞统"]>

蜀→ ["刘备","诸葛亮","关羽","张飞"]

>蜀.splice(2,2,'刘婵','赵云','廖化')//关羽张飞先后被杀

→ ["关羽","张飞"]

>蜀→ ["刘备","诸葛亮","刘婵","赵云","廖化"]

>蜀.copyWithin(0,2,3).splice(2,1)//刘备去世,刘婵继位       //copyWithin(更换的元素,复制的元素位置,复制的元素位置到哪的数字)  ES6的 API  用来复制更换某个元素

→ ["刘婵"]

>蜀→ ["刘婵","诸葛亮","赵云","廖化"]

排序

Array.pretotype.sort()  方法对数组进行排序并返回,默认排序顺序是根据字符串Unicode码点

>['c','p','w','g','h','a','b','r']

→["a", "b", "c", "g", "h", "p", "r", "w"]

> [1, 12, 200, 23, 2].sort()         //数字排序不了,需要添加一个函数来进行排序

→[1, 12, 200, 23, 2]

>[1, 12, 200, 23, 2].sort(function(a,b){return a-b }) //添加函数表达式,使用A-B, 如果A-B结果小于0则不变,如果A-B结果大于0 则更换位置,     数字小的排序在前面。数字大在后面

→[1, 2, 12, 23, 200]


>[1, 12, 200, 23, 2].sort(function(a,b){return b-a }) //添加函数表达式,使用B-A则得到和a-b相反

→[[200, 23, 12, 2, 1]

搜索

Array.pretotype.indexOf()方法是用于搜索 查找的元素的下标 

映射

Array.pretoty.map()ES5 方法是返回一个新数组,新数组中的每个元素都是映射函数作用在原数组元素上的结果

>[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()

将数组里的值求和

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提出的一个软件架构,用于大规模数据集(大于1TB)的并行运算。 概念“Map(映射)”和“Reduce(归纳)”,及他们的主要思想,都是从函数式编程语言借来的,还有从矢量编程语言借来的特性。

MapReduce 用于购物车总价结算

var items = [       //购物车里面的产品价格数量

{title:'苹果',price:5,puantity:3 },   //产品数量,价格

{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  方法返回一个包含满足条件函数的数组元素组成的新数组

>[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方法返回数组中第一个满足条件函数的元素的值,没有则返回undefined。

>[2,8,32,7,15,23,36,45].find(x=>x%3===0)

→15

>['刘备','关羽','张飞','曹操','孙权'].find(name=>name.endsWith('瑜'))                                                  //endsWith方法返回的测试该字符串是否以指定的后缀 结束, 是的话返回true, 否的话则返回false

→undefined



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,726评论 2 17
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,058评论 1 10
  • 函数声明和函数表达式有什么区别 (*)解析器会率先读取函数声明,并使其在执行任何代码之前可以访问;函数表达式则必须...
    coolheadedY阅读 385评论 0 1
  • Javascript有很多数组的方法,有的人有W3C的API,还可以去MDN上去找,但是我觉得API上说的不全,M...
    顽皮的雪狐七七阅读 4,068评论 0 6
  • 《慕僧》 足踏灵性之水,身心 自在轻安。 一如,坛城之中 莲足轻履的兜罗绵。 法喜,无量无边, 谁慕? 谁赞? ...
    娑婆如斯阅读 753评论 27 73