JavaScript—基础Day3
JavaScript—基础Day3
一、for循环
1. for无限循环
for( ; ;)与while(true)一样，构造无限循环
2. for和while的区别：
- 当如果明确循环次数的时候推荐使用for循环
- 当不明确循环次数的时候推荐使用while循环
二、数组
1. 数组定义
数组：一种可以按顺序保存数据的数据类型
2. 遍历数组
1. for循环
for(let i=0;i<数组名.length;i++){数组名[i] }
2. forEach循环
arr.forEach((正在遍历的对象value,正在遍历的对象的索引index,正在遍历的数组array)=>{//缺点：无法中途跳出forEach循环，break命令或return命令都不能奏效。// forEach接收一个回调函数作为参数。item是每个元素,index元素在数组中的下标,arr数组本身。没有返回值！ })
3. map循环
var brr= arr.map((item,index,arr)=>{//代码 map是有返回值的。他的返回值是一个新数组return item * 2;})
4. for-of循环
for(var item of arr){//代码}
5. filter
var arr = [{name:'张三',age:'20'},{name:'李四',age:"50"}]arr.filter(item=>{return item.name;//返回值是 arr本身，所以元素的name都为true})arr.filter(item=>{return item.age>30;//[{name:"李四",age:"50"}]})//接受一个回调函数作为参数,返回值是一个新数组
6. every循环
// every()是对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true。(全部符合条件)var arr=[50,6,70,80];arr.every((item,index,arr)=>{return item > 50; //每一项数据都要大于50})//false
7. some循环
// some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。(只要有一个符合)var arr=[50,6,70,80];arr.some((item,index,arr)=>{return item > 50; //只要有一项数据都要大于50})//true
8. find循环
// find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined var stu = [{name: '张三',gender: '男',age: 20},{name: '王小毛',gender: '男',age: 20},{name: '李四',gender: '男',age: 20} ]function getStu(element){return element.name == '李四'}stu.find(getStu)//返回结果为//{name: "李四", gender: "男", age: 20}
3. 增加数组新的元素
第一种：push()
- 尾部添加一个或多个元素（用逗号隔开）
- 会改变原数组的长度
- 也可以添加对象
第二种：unshift()
- 向头部添加一个或多个元素（用逗号隔开）
- 会改变原数组的长度
- 也可以添加对象
第三种：splice(参数1，参数2，参数3)
splice(索引位置，删除元素的个数，要添加的元素)
let arr=[1,2,3,4] arr.splice(4,0,'red') console.log('arr',arr) //[1,2,3,4,'red']
第四种：arr.length
let arr=[1,2,3,4,5]; arr[arr.length]=6 console.log("arr", arr); //[1,2,3,4,6]
第五种：concat()方法
let arr = [1, 2, 3, 4]; arr = arr.concat(5,6,7); /*添加多个元素*/ console.log("arr", arr);//[1,2,3,4]
let arr = [1, 2, 3, 4]; let newArr = arr.concat([10,20]); /*添加数组*/ console.log("newArr", newArr);//[1,2,3,4,10,20] console.log("arr", arr);//[1,2,3,4]
第六种：使用展开运算符 […[],50,60],返回新数组，不会改变原数组
let arr = [1, 2, 3, 4]; let newArr = [...arr,50,60]; console.log("newArr", newArr);//[1,2,3,4,50,60] console.log("arr", arr);//[1,2,3,4]
4. 删除数组元素
第一种：arr.length
let arr=[1,2,3,4,5]; arr.length=4 console.log( arr); //[1,2,3,4]
第二种：pop() 栈方法
let arr = ['red', 'blue', 'pink']; arr.pop() // 返回删除的最后一个元素 console.log(arr); // ['red', 'blue']
第三种：shift() 队列方法
let arr = ['red', 'blue', 'pink']; arr.shift() // 返回删除的第一个元素 console.log(arr); // ['blue', 'pink']
第四种：splice 操作方法
let arr = ['red', 'blue', 'pink']; arr.splice(0, 2) // splice(索引位置，删除元素的个数) console.log(arr); // ['pink']
5. 冒泡排序
6. 数组经典案例
1. 三角形
// 正三角形
for (let i = 0; i < 5; i++) {for (let j = 0; j <= i; j++) {document.write('*')}document.write('<br>')
}// 倒三角形
for (let i = 0; i < 5; i++) {for (let j = 5; j > i; j--) {document.write('*')}document.write('<br>')
}
2. 金字塔
for (let i = 0; i < 5; i++) {for (let ij = 4; ij > i; ij--) {document.write(' ')// document.write('#')}for (let j = 1; j <= 2 * i - 1; j++) {document.write('*')}document.write('<br>')}
for (let i = 0; i < 5; i++) {for (let ij = 0; ij < i; ij++) {document.write(' ')// document.write('#')}for (let j = 5; j >= 2 * i - 1; j--) {document.write('*')}document.write('<br>')
}
3. 九九乘法表
let res = 0;for (let a = 1; a <= 9; a++) {for (let b = 1; b <= a; b++) {res = a * b;document.write(`<span>${b}*${a}=${res}</span>`)}document.write('<br>');
}
span {display: inline-block;width: 125px;height: 30px;border: 1px solid #000;text-align: center;line-height: 30px;}
4. 大马驮2石粮食，中马驮1石粮食，两头小马驮一石粮食，要用100匹马，驮100石粮食，如何分配？
let num = 0;for (let x = 1; x < 50; x++) {for (let y = 1; y < 100; y++) {for (let z = 1; z < 200; z++) {if (x + y + z == 100 && 2 * x + y + 1 / 2 * z == 100) {num++document.write(`大马: ${x} 中马: ${y} 小马: ${z}<br>`)}}}}
document.write(`一共有${num}种情况`)
5. 小明单位发了100元的购物卡，小明到超市买三类洗化用品，洗发水（15元），香皂（2元），牙刷（5元）。要把100元整好花掉，可如有哪些购买结合？
for (let x = 0 ; x <= 100 ; x++) {for (let y = 0 ; y <= 100 ; y++) {for (let z = 0 ; z <= 100 ; z++) {if (15 * x + 5 * y + 2 * z == 100) {document.write(`洗发水: ${x} 香皂: ${y} 牙刷: ${z} <br>`)}}}
}
JavaScript—基础Day3相关推荐
- JavaScript基础笔记集合（转）
JavaScript基础笔记集合 JavaScript基础笔记集合 js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译 js存放的位置 html脚本必须放在< ...
- javascript基础语法——表达式
前面的话 一般地,关于javascript基础语法,人们听得比较多的术语是操作符和语句.但是,其实还有一个术语经常使用,却很少被提到,这就是javascript表达式(expression).本文将详 ...
- Javascript基础与面向对象基础~第四讲 Javascript中的类对象
今天来说JS中如何实现类(class),事实上本应该昨天晚上写的,可我失言了,在些说一声"抱歉"!JS中的类是JS面向对象的基础,也是我最拿手的东西,你写的代码能否提高一个层次,一 ...
- javascript基础系列(入门前须知)
-----------------------小历史---------------------------- javascript与java是两种语言,他们的创作公司不同,JavaScript当时是借 ...
- JavaScript基础系列---闭包及其应用
闭包(closure)是JavaScript中一个"神秘"的概念,许多人都对它难以理解,我也一直处于似懂非懂的状态,前几天深入了解了一下执行环境以及作用域链,可戳查看详情,而闭包与 ...
- 夯实JavaScript基础之prototype, __proto__, instanceof
function New(f){return function(){var o = {'__proto__': f.prototype};f.apply(o, arguments);return o; ...
- JavaScript基础，Cookies,Sessions
php和JavaScript,掌握JavaScript基础,自定义函数,流程控制语句,事件,调用JavaScript脚本,在PHP中使用JavaScript. JavaScript是网景公司开发的,是 ...
- JavaScript基础一
1.1 javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) J ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
最新文章
- 将NumPy数组转储到csv文件中
- 菠萝派php示例,菠萝派 - 美食杰 - 美食,菜谱 - 中国最全的家常菜谱美食网
- My1stServlet
- hash算法的介绍 【清晰易懂】
- 制造领域的人工智能技术
- 微信小程序6 - 页面之间传参及通知系统封装
- 前端学习（1271）:async/await处理多个异步请求
- S/4HANA生产订单增强WORKORDER_UPDATE方法BEFORE_UPDATE参数分析 1
- centos7 python3安装numpy_centos下pip3安装numpy
- Python 实现的下载op海贼王网的图片（网络爬虫）
- JavaScript正则表达式之分组匹配 / 反向引用
- Python 好玩代码
- UE4(虚幻4) 教学网站等资源推荐
- 先学python还是r-r语言和python学哪个？
- 乔布斯的创新故事_创新工作的真实故事
- selenium: 网页打开最大化
- 第七周 项目四-队列数组
- vue项目的简体繁体切换
- h5 苹果IOS端 播放mp3 没声音
- Linux下2D、3D的测试软件glxgears