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
s
网友评论