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

1. 尾部添加一个或多个元素（用逗号隔开）
2. 会改变原数组的长度
3. 也可以添加对象

第二种：unshift()

1. 向头部添加一个或多个元素（用逗号隔开）
2. 会改变原数组的长度
3. 也可以添加对象

第三种：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('&nbsp;&nbsp;')
		// 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('&nbsp;&nbsp;')
 		// 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} &nbsp;中马: ${y} &nbsp;小马: ${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}&nbsp;香皂: ${y}&nbsp;牙刷: ${z}&nbsp;<br>`)
			}
		}
	}
}