数据类型及流程控制

数据类型

1.原始类型：number(数值)、string(字符串)、boolean(布尔值)、undefined(变量默认值)、null(空)
特点：单值；动态（由值的类型决定）

 console.log(100);
 // 数值(1,2,3...)
 // 'typeof'操作符，用来判断数据类型！
 console.log(typeof 100);
 // 字符串（utf-8,utf-16...）
 console.log(typeof 'php');
 // 布尔值（只有两种false(假)，true(真)）
 console.log(typeof true);
 // 变量默认值
 let a;
 console.log(a);

2.引用类型：array(数组)、object(对象)、function(函数)
2.1数组：每个成员可以是原始类型，也可以是引用类型

const arr=['电脑',2,5000]
console.log(arr);
// table表格输出
console.table(arr);
// 索引
console.log(arr [0]);
console.log(arr [1]);
console.log(arr [2]);
// length数组长度
console.log(arr .length);

2.2对象

// 常量
const obj={
    name:'电脑',
    num:2,
    price:5000
};
console.log(obj ['name']);
//  符合JS命名规范的的属性名可以用（.）来访问
console.log(obj .name);

 // 变量,添加一个函数
 let obj={
     name:'电脑',
     num:2,
     price:5000,
     total:function(){
         // this当年对象的引用，和当前对象绑定
         return this.name+'总价：'+this.num*this.price+'元';
     },
 };
 console.log(obj .total());

 // 数组+对象
 let obj=[
     { name:'手机',num:2,print:5000},
     { name:'电脑',num:5,print:6000},
     { name:'相机',num:4,print:2000},
 ];
 console.log(obj);

2.3函数：函数即是数据类型也是对象
例：将函数当成数据类型的优点
1.当函数的参数：回调
2.当函数的返回值：闭包

流程控制

1.分支：有条件的执行某段代码

1.1单分支

// 单分支
let age=28;
console.log(age>=18);
if(age>=18){
    console.log('可以上网');
}

1.2双分支

// 双分支
age=17;
console.log(age>=18);
if(age>=18){
console.log('可以上网');
}
// else默认
else{
    console.log('不可以上网');
}
// 双分支语法糖:三元操作（条件 ？true :false）
let res=age>=18?'可以上网':'不可以上网'
console.log(res);
console.log(age>=18?'可以上网':'不可以上网');

1.3多分支

// 多分支
age=13;
if(age>=18&&age<45){
    console.log('允许上网');
}
if(age>=45&&age<55){
    console.log('上网不超过8小时');
}
if(age>=55&&age<70){
    console.log('上网不超过2小时');
}
if(age>=70||age<14){
    console.log('年龄不允许');
}
else{
    console.log('不可以上网');
}
// 多分支语法糖：switch
age=35; 
// 区间判断必须使用（true）作为switch入口判断条件
switch(true){
    case age>=18&&age<45:
    console.log('允许上网');
    break;
    case age>=45&&age<55:
    console.log('上网不超过8小时');
    break;
    case age>=55&&age<70:
    console.log('上网不超过2小时');
    break;
    case age>=70||age<14:
    console.log('年龄不允许');
    break;
    default:console.log('不可以上网');
}

案例：单值判断

// 单值判断
let language='js';
// (toLocaleLowerCase())将全部的字母改为小写
switch(language.toLocaleLowerCase()){
    case 'html':
    console.log('超文本标记语言');
    break;
    case 'css':
    console.log('层叠样式表');
    break;
    case 'js':
        // 两个（case）之间没有（break）会按顺序执行
    case 'javascript':
    console.log('前端通用脚本语言');
    break;
    default:console.log('未定义选项');
}

2.循环

const colors=['red','green','blue']
console.log(colors);
console.log(colors[0],colors[1],colors[2]);
// 快速获取最后一个元素(长度-1)
console.log(colors[colors.length-1]);

2.1数组遍历(while/for/for-of/for-in都可以使用）

// 数组起始索引
let i=0;
// 遍历条件
let length=colors.length;
if(i<length){
    console.log(colors[i]);
    i++;
}
if(i<length){
    console.log(colors[i]);
    i++;
}
if(i<length){
    console.log(colors[i]);
    i++;
}

循环简化

2.1.1while循环

// 1.while循环
i=0;
// 入口判断
while(i<length){
    console.log(colors[i]);
    i++;
}
// 出口判断
do{
console.log(colors[i]);
i++;
}
while(i<length);

循环三要素：
1.索引初始化：0
2.循环条件：i<length
3.更新循环条件：i++

2.1.2for循环，while循环的语法糖/简化

 for(let i=0;i<length;i++){
     console.log(colors[i]);
 }

2.1.3ES6:for-of

  // 3.ES6:for-of
 // 只看值
 for(let item of colors.values()){
 console.log('values:'+item);
 }
 // 只看键/索引
 for(let item of colors.keys()){
 console.log('values:'+item);
 }
 // 键值都看
 for(let item of colors.entries()){
 console.log('key-values:'+item);
 }

2.2对象遍历(只能用for-in)

  const obj={
     a:1,
     b:2,
     f:function(){}
 };
  // 用for-in
 for(let key in obj){
     console.log(obj[key]);
 }