Blogger Information
Blog 11
fans 0
comment 0
visits 6709
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
细说函数和数据类型
向日葵
Original
921 people have browsed it

函数

  1. 命名函数——有名字的函数

    1. function getName(username){
    2. return 'hi '+username;
    3. }
  2. 匿名函数——没有名字的函数

    1. function (a){
    2. return a++;
    3. }

匿名函数有三种写法:

函数表达式
就是把函数声明赋值给一个变量,用这个变量调用函数

  1. const getNames = function (username) {
  2. return username + "20岁了";
  3. }

IIFE快速执行函数
立即执行函数,执行完就释放了,不会对全局带来污染,用来创建临时作用域——阅后即焚

  1. console.log((function (APP_NAME) {
  2. return APP_NAME;
  3. })("商城小程序"));

箭头函数
首先先写一个匿名函数

  1. let f1 = function (a, b) {
  2. return a + b;
  3. }

用匿名函数转化成箭头函数的关键就是:

  1. 去掉function
  2. 在参数括号(…)和大括号{…}之间加上胖箭头(=>)
  1. f1 = (a,b){return a+b};

如果函数有一个参数那么还可以继续简化,参数括号可以省略
如果函数只有一条执行语句,那大括号和return也可以省略

  1. let f2 = a => a++;

如果函数没有参数,那么括号不能省略,或用$_代替

  1. let f3 = () => "输出";
  2. //或
  3. f3 = $ => "输出";
  4. //或
  5. f3 = _ => "输出";

数据类型

基本数据类型(原始类型)

类型 名称
number 数值 1,2,3等数字
string 字符串 ‘123’
Boolean 布尔类型 true或false
undefined 声明未赋值的值 undefined
null 空对象 null

引用类型

1.数组

const arr=["手机",2,1000];

数组用一对中括号[]包裹起来,数组里可以有多种数据类型的数据,可以嵌套数组,是一个典型的多值类型;
数组的索引从0开始到length-1结束;
数组的类型判断用Array.isArray()函数来判断,如果是则返回true;
2.对象

const obj={name:"手机",num:2,price:1000}

对象更像一个语义化的数组,访问对象属性的方式可以是obj["name"] 也可以是obj.num;
当属性名出现非法标识符时,必须使用数组方式([])来正确访问;
本质上来说, 对象, 就是变量与函数的封装, 对象内部, 变量叫属性, 函数叫方法

  1. obj = {
  2. // name, num, price: 属性, 类似于变量
  3. name: "手机",
  4. num: 3,
  5. price: 7000,
  6. // total: 方法,实际上还是一个属性,只不过它的值是一个函数
  7. total: function () {
  8. // let str = obj.name + " 总计: " + obj.num * obj.price + " 元 ";
  9. // 模板字面量, 来简化, 内部有变量的字符串
  10. // let str = obj.name + " 总计: " + obj.num * obj.price + " 元 ";
  11. // 反引号声明的模板字符串, 可以插入变量/表达式, 这叫"插值"
  12. // 应该是对象内部, 使用 当前对象的一个引用, 这样才独立于外部对象
  13. // let str = `${obj.name} 总计 ${obj.num * obj.price} 元`;
  14. // this: 始终与当前对象绑定(执行环境 / 执行上下文 )
  15. // this = obj,这样我们在修改对象名称后不会影响内部方法的调用和计算
  16. let str = `${this.name} 总计 ${this.num * this.price} 元`;
  17. return str;
  18. },
  19. };

调用对象里面的方法用 obj.total()

实际工作中我们用到更多的是对象和数组组合使用的,比如:

  1. // obj是一个由三个对象构成的数组
  2. obj = [
  3. { name: "手机", num: 2, price: 5000 },
  4. { name: "电脑", num: 2, price: 5000 },
  5. { name: "相机", num: 2, price: 5000 },
  6. ];

利用高阶函数来计算一下商品总和:

  1. // 求三个商品的总和
  2. let res = obj.map(item => item.num * item.price).reduce((acc, cur) => acc + cur);

3.函数
函数本身是一种数据类型,也是对象
函数当做一种数据类型的好处有:
充当函数的返回值或参数,当参数就是个回调函数,当返回值可以创建一个闭包

  1. function f1(callback) {
  2. console.log(callback());
  3. }
  4. //函数作为参数,即f1的参数是一个函数
  5. // 调用f1,传一个匿名函数
  6. f1(function () {
  7. return "hello world";
  8. });
  9. // 函数当返回值,即返回值为一个函数
  10. function f2() {
  11. let a = 1;
  12. return function () {
  13. return a++;
  14. }
  15. }
  16. console.log(f2());//f2是一个函数
  17. const f = f2();
  18. console.log(f2()());//这种写法也可,返回值1
  19. console.log(f());//返回1
  20. console.log(f());//返回2
  21. console.log(f());//返回3
  22. console.log(f());//返回4

函数当对象来使用时就具备了对象的属性和方法

  1. function func(a, b) {
  2. return a + b;
  3. }

这样一个函数,我们可以用func.name去获取函数的函数名,func.length来获取函数的参数个数,func.email="myemial@qq.com"来给func函数添加属性,然后用func.email来调用。

js的世界是如此的高深莫测,晦涩难懂,但又有趣又神秘,希望在这片蔚蓝之海不会迷失自己吧。
继续加油!

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post