Blogger Information
Blog 29
fans 0
comment 0
visits 14068
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
常用函数类型和数据类型学习小结
P粉317509817
Original
519 people have browsed it

常用函数类型

常用函数类型

第一种函数定义方法(命名函数):

  1. // 1.命名函数
  2. function getName(username){
  3. return 'hello' + username;
  4. }
  5. console.log(getName('彭于晏'))

第二种函数定义方法(匿名函数):

  1. // 2.匿名函数
  2. // 第一种匿名函数定义方法
  3. let getUserName = function(username){
  4. return 'hello' + username;
  5. }
  6. console.log(getUserName('姜文'))
  7. // 第二种定义方式:将声明与调用二合一,立即调用函数
  8. console.log(
  9. (function(username){
  10. return 'hello' + username;
  11. })('姜武')
  12. )

运行结果:

第三种函数定义方法(箭头函数简化匿名函数):

  1. // 3.箭头函数,用来简化匿名函数
  2. // 3.箭头函数,用来简化匿名函数
  3. // 原命名函数
  4. function sum(a,b){
  5. console.log(`${a+b}`)
  6. }
  7. // 改成匿名函数
  8. let SUM=function(a,b){
  9. console.log(a + b)
  10. }
  11. // 改成箭头函数
  12. // 转化方法
  13. // 1. 去掉 function
  14. // 2. 在参数列表与大括号之间使用 '=>'
  15. add=(a,b)=>{
  16. console.log(`${a} + ${b}`)
  17. }
  18. // 如果只有一个参数,可以不用写参数括号
  19. add1=a=>{
  20. console.log(a + 9)
  21. }
  22. // 没有参数,括号必须保留
  23. add2=()=>{
  24. console.log(90 + 1);
  25. }
  26. sum(1,2);
  27. SUM(3,4);
  28. add(5,6);
  29. add1(0);
  30. add2();

运行结果:

数据类型

原始数据类型:number, string, boolean,undefined, null

  1. // typeof 查看数据类型
  2. console.log(100 + 200);
  3. console.log(typeof 100, typeof 200);
  4. console.log('hello ' + 'world');
  5. console.log(typeof('hello ' + 100));//这里会发生隐式转换
  6. //注意:null的类型是obj

运行结果:

引用类型, array, object, function

1、数组

  1. // 数组
  2. // 访问数据元素,必须通过数组的引用(数组名称arr)来访问(arr是一个访问入口)
  3. // 数组成员 的索引是从0开始
  4. const arr = [1, 'admin', [1, 2, 3], true];
  5. console.log(arr);//结果Array(4)
  6. console.log(arr[1]);//结果admin
  7. console.log(arr[2][1]);//结果2
  8. console.log(Array.isArray(arr));//true

运行结果:

2、对象

  1. // 对象
  2. let obj = {
  3. id: 1,
  4. username: 'jack',
  5. num: [1, 2, 3],
  6. isOk: true,
  7. 'my email': '498668472@qq.com',
  8. };
  9. console.log(arr[1]);
  10. console.log(obj['username']);
  11. // 为了简化,并与数组区别,对象有自己的成员访问符: .
  12. console.log(obj.username);
  13. console.log(obj['my email']);
  14. // 对象字面量
  15. obj2 = {
  16. id: 1,
  17. username: 'jack',
  18. num: [1, 2, 3],
  19. isOk: true,
  20. 'my email': '498668472@qq.com',
  21. // 将一个函数转为对象的方法,封装到对象中
  22. getUser: function() {
  23. // 在对象中,使用变量this来引用对象自身
  24. return 'id =' + this.id + ', username =' + this.username;
  25. },
  26. };
  27. console.log(obj2.getUser());

运行结果

3、函数

  1. // 函数
  2. // 函数是对象,也是一个值,可以当成参数传递,也可以当成返回值
  3. console.log(typeof
  4. function() {});
  5. function f1(callback) {
  6. console.log(typeof callback);
  7. console.log(callback());
  8. }
  9. f1(function() {
  10. return 'Hello 猪老师';
  11. });
  12. // 函数当返回值: 闭包
  13. function f2() {
  14. // a是 f2的私有变量
  15. let a = 1;
  16. return function() {
  17. // return (a += 1);
  18. // 而此时,子函数中的a并不是自己的,是父函数的
  19. return a++;
  20. };
  21. }
  22. console.log(f2());
  23. const f = f2();
  24. // console.log(f);
  25. console.log(f());
  26. console.log(f());
  27. console.log(f());
  28. console.log(f());
  29. console.log(f());
  30. console.log(f());
  31. // 函数就是对象,对象就可以添加属性和方法
  32. let f3 = function() {};
  33. f3.myemail = 'admin@php.cn';
  34. console.log(f3.myemail);
  35. f3.getEmail = function() {
  36. console.log(this.myemail);
  37. };
  38. f3.getEmail();

运行效果:

函数闭包的概念:

闭包函数:声明在一个函数中的函数,叫做闭包函数。
闭包:内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后。

特点

  • 让外部访问函数内部变量成为可能;
  • 局部变量会常驻在内存中;
  • 可以避免使用全局变量,防止全局变量污染;
  • 会造成内存泄漏(有一块内存空间被长期占用,而不被释放)

理解闭包自行代入这句话

结论:闭包找到的是同一地址中父级函数中对应变量最终的值

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