Blogger Information
Blog 11
fans 0
comment 0
visits 6396
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js-基础(一)变量、常量、函数与数据类型
Technology has temperature
Original
698 people have browsed it

1.变量

  1. 格式:let
  2. 作用域:代码成员的可见范围
  3. 作用域类型:块作用域,函数作用域, 全局作用域

2.常量

  1. 格式:const
  2. 命名规则写法特点:必须是: 字母,数字, 下划线"_", "$"(四种),其它字符均是非法符号;首字母不得使用"数字"
  3. 注意:声明时,必须初始化

3.函数

3.1.命名函数

  1. function getName(username) {
  2. return 'Hello ' + username;
  3. }
  4. console.log(getName('aaaa'));

3.2.匿名函数

  1. // 第一种声明方式,将匿名函数当成值赋给一个变量
  2. let getUserName = function(username) {
  3. return 'Hello ' + username;
  4. };
  5. console.log(getUserName('aaaa'));
  6. // 第二种方式将声明与调用二合一: 立即调用函数,IIFE
  7. // 表达式,是用一对括号包住的
  8. console.log(
  9. (function(username) {
  10. return 'Hello ' + username;
  11. })('aaaa')
  12. );

3.3.箭头函数用来简化匿名函数的声明

  1. // 1).标准命名函数,需修改成箭头函数
  2. function sum(a, b) {
  3. console.log(a + b);
  4. }
  5. // 2).将命名函数改成了匿名函数
  6. let add = function(a, b) {
  7. console.log(a + b);
  8. };
  9. // 3).使用箭头函数来简化匿名函数
  10. // => 胖箭头, ->
  11. // 转化方法
  12. // <1>. 去掉 function
  13. // <2>. 在参数列表与大括号之间使用 '=>'
  14. add = (a, b) => {
  15. console.log(a + b);
  16. };
  17. // 如果只有一个参数,可以不写参数列表的括号
  18. add = a => {
  19. console.log(a + 88);
  20. };
  21. // 如果没有参数,括号必须加上
  22. add = () => {
  23. console.log(34 + 88);
  24. };
  25. // 如果函数体只有一条语句, 大括号都可以不用
  26. add = () => console.log(34 + 88);
  27. add();

注意:
1. 如果函数需要多次调用, 用命名, 函数表达式, 都可以
2. 如果代码要求,必须遵循"先声明, 再调用"的规则, 那就必须用"函数表达式"
3. 如果只有完成一些特定的,一次性的工作, 不想留下任何痕迹, 用"IIFE", 模块
4. 如果调用函数时,需要一个函数充当参数,例如:回调, 就可以使用箭头函数来简化 匿名函数的 声明

4.数据类型

4.1.原始类型

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

  1. // console.log(100 + 200);
  2. console.log(typeof 100, typeof 200);
  3. console.log('hello ' + 'world');
  4. console.log(typeof('hello ' + 100));
  5. // 为什么要发生类型转换?
  6. // 因为不同的类型的数据,不能直接运算
  7. // 先转换,再运算
  8. console.log(true, false);
  9. console.log(typeof true);
  10. console.log(typeof(true + 1));
  11. // true => 1 隐式转换
  12. console.log(typeof undefined);
  13. let a;
  14. console.log(a);
  15. console.log(null);
  16. // 一个变量对应一个值,标量

4.2.引用类型

引用类型:array, object, function

4.2.1.数组

  1. // 一个变量保存的是一个集合,并非单值,访问时不能直接访问,必须通过这个变量的引用来访问
  2. // 数组
  3. // const arr = [1, 2, 3];
  4. // const arr = [1, 'admin', true];
  5. const arr = [1, 'admin', [1, 2, 3], true];
  6. console.log(arr);
  7. // 访问数据元素,必须通过数组的引用(数组名称arr)来访问(arr是一个访问入口)
  8. // 数组成员 的索引是从0开始
  9. console.log(arr[1]);
  10. console.log(arr[2][1]);
  11. // 引用类型判断不能用typeof
  12. console.log(typeof arr);
  13. console.log(Array.isArray(arr));

4.2.2.对象

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

4.2.3.函数

函数是对象,也是一个值,可以当成参数传递,也可以当成返回值

  1. //1)参数传递
  2. function f1(callback) {
  3. console.log(typeof callback);
  4. console.log(callback());
  5. }
  6. f1(function() {
  7. return 'Hello aaaa';
  8. });
  9. //2)返回值: 闭包
  10. function f2() {
  11. // a是 f2的私有变量
  12. let a = 1;
  13. return function() {
  14. // return (a += 1);
  15. // 而此时,子函数中的a并不是自己的,是父函数的
  16. return a++;
  17. };
  18. }
  19. console.log(f2());
  20. const f = f2();
  21. // console.log(f);
  22. console.log(f());
  23. console.log(f());
  24. //3)函数就是对象,对象就可以添加属性和方法
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