实例演示分支与循环结构,对象字面量的简化,解构
分支与循环解构1. 分支
分支主要分为:单分支,双分支,多分支.
1 . 单分支
let status = true;
if (status){
console.log('hello,world');
}
2 . 双分支
status = false;
if(status){
console.log('hello,world');
}
else{
console.log('false');
}
// 三元运算符,双分支语法糖
status?console.log('hello,world'):console.log('false');;
3 . 多分支
2. 循环结构
let time=10;
if (time>=0 &&time<8){
console.log('现在是凌晨');
}else if (time>=8 &&time<12){
console.log('现在是上午');
}else if(time>=12 && time<=14){
console.log('现在是中午');
}else if(time>14 && time<18){
console.log('现在是下午');
}else if(time>=18 && time<=24){
console.log('现在是晚上');
}else {
console.log('时间输入错误');
}
// 多分支语法糖switch,如果是做区间查询,switch()不是单值,就只需填上true switch(true)
time=20;
switch(true){
case time>=0 && time<8:
console.log('现在是凌晨');
break;
case time>=8 && time<12:
console.log('现在是上午');
break;
case time>=12 && time<=14:
console.log('现在是中午');
break;
case time>14 && time<18:
console.log('现在是下午');
break;
case time>=18 && time<=24:
console.log('现在是晚上');
break;
default:
console.log('时间输入错误');
}
循环结构主要分为,while和for.
循环三要素:
- 初始化,从哪里开始,从哪里入口
- 条件:从哪里结束,true继续执行,false停止执行
- 更新条件:避免死循环
1 . while
和for
// 从索引0开始
let i=0 //初始化,从哪里开始,入口
while(i<arr.length){ //条件,ture继续执行,false停止执行
console.log(arr[i]); //执行代码
i++; //更新条件,避免死循环
}
// while的语法糖,for
for(let i=0; i<arr.length;i++){
console.log(arr[i]);
}
2 . for - of
// for-of :只能遍历数组
for(let value of arr){
console.log(value);
}
3 . for - in
// for-in:遍历对象
let obj = {
name:'张三',
年龄:18,
工资:5000,
}
for(let key in obj){
console.log(key+':'+obj[key]);
}
4 . forEach
// forEach 遍历数组
// 语法:forEach(function(值,该值的说索引,正在遍历的数组))
arr.forEach(function(item,index,arr){
console.log(item,index,arr);
})
//实际中,只有第一个参数是必选的,后面的2个参数可选
arr.forEach(function(item){
console.log(item);
})
//匿名函数,所以可以用箭头函数简化
arr.forEach((item)=>console.log(item))
console.log('以下是map遍历数组');
5 . map
3. 对象字面量简化
//map:遍历数组
//map和forEach 使用方法一样,不同的是map有返回值(正在被遍历的数组)
arr.map((item)=>console.log(item))
//以下是map简化后的- 遍历数组
let res = arr.map(item=>item) ;
console.log(res);
对象字面量简化包含属性简化和方法简化:
4. 解构赋值与应用场景(克隆与传参)1. 解构赋值
let username = '张五';
let user= {
username:username,
fn:function(){
return `hello,${this.username}`;
}
}
console.log(user.username);
//对象字面量简化
/**
* 属性简化:
* 1 .属性值如果来自同一作用域中的变量,可以只写属性名
* 2. 属性与变量名同名,可以只写属性,不写变量
* 方法简化:
* 删除":function"
*/
//简化后,代码如下
username = '张五';
user= {
username,
fn(){
return `hello,${this.username}`;
}
}
console.log(user.username);
2. 应用场景
let [uname,email] = ['admin','admin@qq.com']
console.log(uname,email);
//变量不足,默认值
[uname,email,age=20] = ['admin','admin@qq.com']
console.log(uname,email,age);
//数据过多,剩余参数"..."
[uname,email,...arr] = ['admin','admin@qq.com',40,5000]
console.log(uname,email,arr);
【感谢龙石为本站提供数据共享平台 http://www.longshidata.com/pages/exchange.html】
// 1. 克隆对象
let item = {name:'手机',price:1900}
let{...obj} = item;
// obj 就是由item克隆而来的fuzhipin,不是同一个
console.log(item);
console.log(obj);
console.log(item==obj); //返回false .说明不是同一个对象
// 2. 传参
let show = function(item){
//item是object
return `${item.name}:${item.price}`;
}
console.log(show({name:'手机',price:1900}));