JavaScript—基础Day3
一、for循环
1. for无限循环
for( ; ;)与while(true)一样，构造无限循环
2. 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)
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>`)
}
}
}
}
