JavaScript 常用的函数类型和数据类型
JavaScript 常用的函数类型和数据类型(1)函数
命名函数:
function
函数声明:
function sum(a,b){
return a + b;
}
含税调用
console.log(sum(1,2)); // 输出:3
// 可以使用模板字面量,自定义输出格式,让结果更直观
// php:双引号中的变量会被解析
// js:反引号中的变量会被解析
// js:字符串拼接用:+
function sum2(a,b){
return `${a} + ${b} = ` + (a +b);
// 模板字面量还支持表达式
// return `${a} + ${b} = ${a + b} `; 这样写结果一样
}
console.log(sum2(2,5)); // 输出:2 + 5 = 7
// 注意,命名函数存在声明提升现象,即在命名含税声明前可以使用。
// 如果要遵循“先声明后再调用”的编程规格,可以使用匿名函数来解决
匿名函数:
fn = function (){}
// 匿名函数不存在声明提升,可以将一个匿名函数赋值给一个 let / const 声明的变量/常量。
// let / const 不存在声明提升,所以它引用的函数也不会声明提升
// 函数声明
const sum = function (a,b){
return `${a} + ${b} = ${a + b}`;
}
// 函数调用
console.log(sum(2,5)); // 输出:2 + 5 = 7
箭头函数:
fn = ()=>{}
// 箭头函数是匿名函数的简写
// 1,删除 function
// 2,(){} 简化为 () => {}
let sum = (a,b) => {
return `${a} + ${b} = ${a + b}`;
}
console.log(sum(2,6)); // 输出:2 + 6 = 8
// 参数简化
// 1,单参数,可以省略括号
let userName = (uname) => {
return `Hello ${uname}`;
}
// 可以简化为
let userName = uname => {
return `Hello ${uname}`;
}
console.log(userName('Tom')); // 输出:Hello Tom
// 2,无参数,一定要加括号
let greeting = () =>{
return "Hello World!";
}
console.log(greeting()); // 输出:Hello World!
// 返回值简化
// 如果只有一条 return 语句,可以不写{} 和 return
let sum = (a,b) => `${a} + ${b} = ${a + b}`;
console.log(sum(1,2)); // 输出:1 + 2 = 3
// 注意事项
// 1,箭头函数没有自己的 this,不能用于构造函数
// 2,它的 this 由它的上下文确定(执行环境)
立即执行函数:
(function(){})()
// 声明与调用二合一(声明时立即调用):IIFE
// 写完就执行完了,所以时一次性的,肯定时匿名函数
let result = (function (a,b){
return `${a} + ${b} = ${a + b}`;
})(1,2);
console.log(result); // 输出:1 + 2 = 3
原始类型:
string
,number
,boolean
,null
,undefined
// 原始类型:原子类型、基本类型,单值
// 1,number 数值,不区分整数、浮点 (10-4,15:50)
console.log(123, typeof 123); // 输出:123 'number'
console.log(3.14, typeof 123); // 输出:3.14 'number'
// number 类型中有一个特殊的值:NaN(Not a Number),表示不是一个数字的值
console.log(NaN, typeof NaN); // 输出:NaN 'number'
// 2,string 字符串
console.log('php.cn', typeof 'php.cn'); // 输出:php.cn string
// 3,boolean 布尔型,true / false
console.log(true, typeof true); // 输出:true 'boolean'
// 4,null 空值,返回的是 object,这是一个千年 bug,不会再改了。
// 可以用于将变量置空等操作
stuName = null;
console.log(stuName, typeof stuName); // 输出:null 'object'
// 5,undefined 未定义型,变量声明后未赋值,则默认为 undefined
let admin;
console.log(admin, typeof admin); // 输出:undefined 'undefined'
引用类型(对象):
array
,object
,function
/* 1,数组 */
// 一组数据集合,每个数据称为数组元素。
// 数组元素由键(索引)、值组成,键默认为数字(0、1、2...)
// 数组的元素个数成为数组长度(length)
const arr = [10, 'admin', true];
console.log(arr);
/* 输出如下:
* (3) [10, 'admin', true]
* 0: 10
* 1: "admin"
* 2: true
* length: 3
*/
// 访问数组元素:[key]
console.log(arr[1]); // 输出:admin
// 如何判断是否为数组:Array.isArray()
console.log(typeof arr); // 输出:object,无法判断为数组
console.log(Array.isArray(arr)); // 返回 true:是数组;返回 false:不是数组
/* 2,对象 */
// 与数组是由区别的,可以视为键为语义化的数组,类似 php 中的关联数组
// 对象元素包括属性和方法
let user ={
// 属性
id: 10,
uname: 'admin',
isMarried: true,
'my email': 'email@qq.com'
}
// 访问对象元素,同数组访问方式:['key']
console.log(user['id']);
// 如果键名都是合法标识符,可用"."来访问元素
console.log(user.uname);
// 如果键名是非法标识符,则必须用数组访问方式:['key']
console.log(user['my email']);
// 对象可用将一个方法(函数)进行封装
let user ={
// 属性
id: 10,
uname: 'admin',
// 方法
show: function (){
return `id = ${this.id}, uname = ${this.uname}`;
}
}
console.log(user.show()); // 输出:id = 10, uname = admin
// 注意,定义方法的匿名函数不能简化为箭头函数,因为箭头函数没有自己的 this。
/* 3,函数 */
// 定义一个空的匿名函数 fn
let fn = function (){};
console.log(fn); // 输出:ƒ (){}
// 因为函数也是对象,所以可用添加属性
fn.price = 18;
fn.uname = 'admin';
console.log(fn.price); // 输出:18
// 也可以添加方法
fn.greet = function (uname){
return 'Hello, ' + uname;
}
console.log(fn.greet('Tony')); // 输出:Hello, Tony