JS数据类型与函数
程序员文章站
2022-06-02 18:51:36
...
数据类型
- 原始类型/简单类型/ 基本类型: 不可再分, 是构成其它复合类型的基本单元,一个变量,存一个值;动态语言: 变量的类型, 由它的值的类型决定
- 引用类型: 都是对象,
typeof
返回类型都是object
,函数除外<function>
;类似其它语言中的”复用类型”, 集合类型;由一个或多个, 相同, 或不同类型的”原始类型”的值构造,多值类型
STT | 分类 | 类型 | 举例 |
---|---|---|---|
1 | 原始类型 | number |
123 |
2 | 原始类型 | string |
help |
3 | 原始类型 | boolean |
True/False |
4 | 原始类型 | undefined |
undefined |
5 | 原始类型 | null |
null |
6 | 引用类型 | array |
[、、、] |
7 | 引用类型 | object |
{、、、} |
8 | 引用类型 | function |
function |
数组
- 声明:
const arr = ["macBook Pro", 2, 40000];
- 查看数据类型:
console.log(typeof arr);
- 访问:
console.log(arr[索引]);
- 判断是否是数组类型:
console.log(Array.isArray(arr));
// 声明
const arr = arr = ["macBook Pro", 2, 40000];
console.log(arr);
// 数组的索引是从0开始递增的正整数, 0, 1, 2
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
// console.log(arr[3]);
console.log(typeof arr);
// 判断数组类型的正确方法
console.log(Array.isArray(arr));
对象
- 索引具有语义化的数组
- 属性: 类似于变量
- 声明: obj = {、、、}
- 访问:
console.log(obj[索引]); console.log(obj.属性名);
,当属性名是非常标识符时, 必须使用数组的方式来访问对象的属性。
对象最吸引人的,不是数组的语义化封装, 而是对数据操作的封装, 方法(语法与函数是一样的)
本质上来说, 对象, 就是变量与函数的封装, 内部, 变量->属性, 函数 -> 方法 **
// 对象 更像一个语义化的 数组
// name, num , price : 属性,类似于变量
let obj = { name: "手机", num: 2, price: 5000 };
console.log(obj);
console.log(obj["name"]);
console.log(obj["num"]);
console.log(obj["price"]);
// 因为对象的属性名称都是合法的标识符,可以使用点来访问
console.log(obj.name, obj.num, obj.price);
// 当属性名是非常标识符时, 必须使用数组的方式来访问对象的属性
obj = { "my email": "admin@php.cn" };
console.log(obj["my email"]);
// * 对象最吸引人的,不是数组的语义化封装, 而是对数据操作的封装, 方法(语法与函数是一样的)
// 本质上来说, 对象, 就是变量与函数的封装, 内部, 变量->属性, 函数 -> 方法
obj = {
// name, num, price: 属性, 类似于变量
name: "手机",
num: 3,
price: 7000,
// total: 方法,实际上还是一个属性,只不过它的值是一个函数
total: function () {
// let str = obj.name + " 总计: " + obj.num * obj.price + " 元 ";
// 模板字面量, 来简化, 内部有变量的字符串
// let str = obj.name + " 总计: " + obj.num * obj.price + " 元 ";
// 反引号声明的模板字符串, 可以插入变量/表达式, 这叫"插值"
// 应该是对象内部, 使用 当前对象的一个引用, 这样才独立于外部对象
// let str = `${obj.name} 总计 ${obj.num * obj.price} 元`;
// this: 始终与当前对象绑定(执行环境 / 执行上下文 )
// this = obj
let str = `${this.name} 总计 ${this.num * this.price} 元`;
return str;
},
};
console.log(obj.total());
console.log(typeof obj);
console.log(obj instanceof Object);
// 实际工作中, 而是将数组与对象组合起来一起用
// obj是一个由三个对象构成的数组
obj = [
{ name: "手机", num: 2, price: 5000 },
{ name: "电脑", num: 2, price: 5000 },
{ name: "相机", num: 2, price: 5000 },
];
// 求三个商品的总和
let res = obj.map(item => item.num * item.price).reduce((acc, cur) => acc + cur);
console.log(res);
函数
- 函数是一种数据类型 , 也是对象的一种
- 可以当成普通值来使用, 例如充当函数的参数,或者函数的返回值
- 也可以当参数,就是回调函数, 当返回值,可以创建一个闭包
- 函数是 js 的一等公民, 就是通过这个体现的
// ! 3. 函数
// 函数是一种数据类型 , 并且 还是 对象
console.log(typeof function () {});
// 函数即是函数, 也是对象
console.log(function () {} instanceof Object);
// (一) 函数是数据类型的优点
// 可以当成普通值来使用, 例如充当函数的参数,或者函数的返回值
// 这个很重要, 当参数,就是回调函数, 当返回值,可以创建一个闭包
// js中很多高级应用, 都严重依赖这二个功能, 这也是"高阶函数"的基本特征
// 函数是js的一等公民, 就是通过这个体现的
// 应用场景1: 函数做为参数使用, 回调
function f1(callback) {
// 参数 callback 是一个函数
console.log(callback());
}
// 调用f1, 匿名函数当成f1的参数
f1(function () {
return "Hello 朱老师";
});
// 应用场景2: 函数当成返回值, 闭包
function f2() {
let a = 1;
return function () {
return a++;
};
}
// f2()返回值是一个函数
console.log(f2());
const f = f2();
console.log(f);
console.log(f());
console.log(f());
console.log(f());
console.log(f());
console.log(f());
console.log(f());
// 函数当成对象来用
// 对象有属性和方法, 当然函数也有属性有方法
function func(a, b) {
return a + b;
}
// 查看函数名
console.log(func.name);
// 查看函数需要几个参数
console.log(func.length);
func.email = "498668472@qq.com";
console.log(func.email);
细说函数
命名函数
- 有名字的函数
- 名字命名规则:动词 + 名词
function getName(username) {
return "Hello " + username;
}
// 调用
console.log(getName("猪老师"));
匿名函数
- 没有名字的函数
- 函数表达式, 将函数声明保存到一个变量中, 以后使用这个变量来引用这个函数
执行方式 1: 立即执行,立即执行函数( IIFE ): 声明 + 执行 2 合 1
- 阅后即焚, 不会给全局环境带来任何的污染,用来创建临时作用域
- node 模块, 就是用 IIFE 来写的
执行方式 2: 保存到一个变量中,函数表达式
- 表达式: 任何一个可以计算出确定 “值” 的过程
// * 执行方式1: 立即执行
// 立即执行函数( IIFE ): 声明 + 执行 2合1
// 2.1 IIFE
// IIFE: 阅后即焚, 不会给全局环境带来任何的污染,用来创建临时作用域
// node 模块, 就是用 IIFE 来写的
(function (username) {
console.log("Hello " + username);
})("灭绝老师");
console.log(
(function (username) {
return "Hello " + username;
})("灭绝老师")
);
// 执行方式2: 保存到一个变量中,
// 2.2 函数表达式
// 表达式: 任何一个可以计算出确定 "值" 的过程, 100, 12+45, 'a'+'c',
// 现在, "函数声明", 就变成了"变量声明", 只不过, 变量的值,是一个函数声明
const getUserName = function (username) {
return "Hello " + username;
};
console.log(getUserName("马老师"));
console.log(getUserName);
箭头函数
- 用来简化匿名函数的声明
- 箭头函数的语法:: 1. 去掉 function; 2. 在参数括号(…) 与 大括号{…} 之间使用 胖箭头 => 连接
- 如果只有一条语句,return ,可以不写大括号
// 3. 箭头函数
// 匿名函数: 函数表达式, 将函数声明保存到一个变量中, 以后使用这个变量来引用这个函数
let f1 = function (a, b) {
return a + b;
};
console.log(f1(10, 20));
// 使用 箭头函数 来简化匿名函数的声明
// 匿名函数 --> 箭头函数的语法
// 1. 去掉 function
// 2. 在参数括号(...) 与 大括号{...} 之间使用 胖箭头 => 连接
f1 = (a, b) => {
return a + b;
};
console.log(f1(8, 9));
// 只有一个参数的时候, 括号可以不要了
f1 = (username) => {
return "Hello " + username;
};
// 如果只有一条语句,return ,可以不写大括号
// 因为只有一条语句,默认就是return ,所以 return 也可以不写的
f1 = (x) => {
return x * 2;
};
f1 = (x) => x * 2;
console.log(f1(40));
console.log(f1(90));
// 没有参数时, 括号一定要写上
f1 = () => "今天天气很好";
console.log(f1());
f1 = ($) => 100 + 200;
console.log(f1());
f1 = (_) => 100 + 200;
console.log(f1());
推荐阅读
-
JS回调函数 callback的理解与使用案例分析
-
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
-
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
-
C++指针与数组、函数、动态内存分配
-
php中数字、字符与对象判断函数用法实例
-
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
-
php中getservbyport与getservbyname函数用法实例
-
JS 设计模式之:工厂模式定义与实现方法浅析
-
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
-
MySQL数据库中CAST与CONVERT函数实现类型转换的讲解