JS入门之类型和流程

博客已迁移至自建网站,此博客已废弃.请移步至:https://blog.ours1984.top/posts/jstype/ 欢迎大家访问

• 有了数据类型,才能解析数据
• 相同数据类型才有比较意义,进行运算

原始类型

类型	举例
number	123.5
string	“123”
boolean	true
undefined	未初始化变量
null	是object类型

1. 单值: a = 1, b=’a’
2. 动态: 数据类型由值的类型确定

let x = 123;
//   console.log(typeof x);
x = 'php.cn';
//   Number -> String
//   console.log(typeof x);

引用类型

array数组

每个成员可以是原始类型,也可以是引用类型.每个成员类型可以不一样,同样可变

const arr = ['电脑', 2, 5000];
//   console.log(arr);
console.table(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr.length);
console.log(typeof arr);
console.log(Array.isArray(arr));

object对象

相当于类,对于符合js标识符命名规范的属性名,可以用.来访问.使用键名通用访问方式可访问所有成员

obj123 = {
    name: '电脑',
    num: 2,
    price: 5000,
    'my email': 'a@php.cn',
    total: function () {
        // this: 当前对象的引用,和当前对象绑定
        return this.name + '总价 : ' + this.num * this.price + ' 元';
    },
};
console.log(obj123.total());

数组和对象混合使用

obj = [
    { name: '手机', num: 2, price: 5000 },
    { name: '电脑', num: 5, price: 6000 },
    { name: '相机', num: 4, price: 2000 },
];
console.log(obj);
let res = obj.map(item => item.num * item.price).reduce((acc, cur) => acc + cur);
console.log(res);

function函数

函数既是数据类型,也是对象

将函数当成数据类型的优点

• 当成函数的参数: 回调
• 当成函数返回值: 闭包

// 1. 当成函数的参数: 回调
function f1() {}
function f2(f) {
    console.log(typeof f);
}
//   f2是一函数, 它接受一个函数做为参数,可以将上面声明的f1传入
f2(f1);
// 2. 当成函数返回值: 闭包
function f3() {
    return function () {
        return 'hello world';
    };
}
console.log(f3()());

const

const 的本质: const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。下面的代码并不会报错：

// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"};
// 修改属性:
car.color = "red";
// 添加属性
car.owner = "Johnson";
// 但是我们不能对常量对象重新赋值：
const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};    // 错误

流程控制

分支

if else if else switch case

区间判断,并非单值,一定用true才能进入分支 必须要用true做为switch入口判断条件

switch (true) {
case age >= 18 && age < 35:
    console.log('允许单独观看');
    break;
case age >= 35 && age < 60:
    console.log('允许二人或多人观看');
    break;
case age >= 60 && age < 120:
    console.log('建议在孩子的陪同下观看');
    break;
case age >= 120 || age < 8:
    console.log('非法年龄段');
    break;
default:
    console.log('少儿不宜');
}
switch (language.toLowerCase()) {
case 'html':
    console.log('超文本标记语言');
    break;
case 'css':
    console.log('层叠样式表');
    break;
case 'js':
// case之间没有break,会连续输出
case 'javascript':
    console.log('前端通用脚本语言');
    break;
default:
    console.log('未定义的选项');
}

循环

while do while for

数组可以用while,for,for-of,for-in 对象用for-in

const colors = ['red', 'green', 'blue'];
// es6 : for-of
for (let item of colors) {
    console.log('phpcn: ' + item);
}
// 完整语法: 只看值
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-value: ' + item);
}
const obj = {
    a: 1,
    b: 2,
    f: function () {},
};
// 不能用for-of, 用 for -in
for (let key in obj) {
    console.log(obj[key]);
}
// 数组也是对象, 数组能否用for-in ? 可以的
for (let key in colors) {
    console.log(colors[key]);
}