Blogger Information
Blog 35
fans 0
comment 0
visits 16982
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS数据类型、分支和循环
三九三伏
Original
327 people have browsed it

一、常用数据类型

1. 数字、字符串、布尔型、null

  1. ...
  2. <script>
  3. console.log(100);
  4. console.log(typeof(100));
  5. console.log(typeof(100.1));
  6. console.log(typeof('100'));
  7. console.log(typeof(true));
  8. let a;
  9. console.log(typeof(a));
  10. // null返回的是object不是null
  11. console.log(typeof(null));
  12. // 变量由值类型决定,而且可以变化
  13. let n = 123;
  14. console.log(typeof(n));
  15. n = '123'
  16. console.log(typeof(n));
  17. </script>

2. 引用

2.1 数组

数组的每个成员可以是普通类型,也可以是引用。

  1. ...
  2. <script>
  3. ...
  4. const arr = ['电脑','2','5000']
  5. console.table(arr);
  6. // 分别打印数组成员
  7. console.log(arr[0]);
  8. console.log(arr[1]);
  9. console.log(arr[2]);
  10. // 测试数组长度
  11. console.log(arr.length);
  12. // 判断数组的类型,对数组、函数、对象的引用都返回object。
  13. console.log(typeof(arr));
  14. // 准确判断数组的方法,返回true则表示是数组。
  15. console.log(Array.isArray(arr));
  16. ...
  17. </script>


2.2 对象

  1. ...
  2. <script>
  3. ...
  4. obj = {
  5. name:'电脑',
  6. num: 2,
  7. price: 5000,
  8. 'contact email': 'mail@mail.com',
  9. total:function(){
  10. return this.name+'的价格是'+this.price;
  11. },
  12. };
  13. console.log(obj.name);
  14. console.log(obj.price);
  15. // 对于不规范的命名要使用[]引用
  16. console.log(obj['contact email']);
  17. // 对象中函数的调用
  18. console.log(obj.total());
  19. ...
  20. </script>

2.3 函数

既是数据类型也是对象

  1. ...
  2. // 数据类型:函数
  3. console.log(typeof(function(){}));
  4. // 函数也是对象
  5. console.log(function(){} instanceof Object);
  6. ...

将函数当成数据类型的优点
优点1 当成函数的参数:回调
优点2 当成函数返回值:闭包

  1. ...
  2. function f1(){}
  3. // 把函数当成参数
  4. function f2(f){
  5. console.log(typeof f);
  6. }
  7. f2(f1);
  8. // 把函数当成返回值:闭包
  9. function f3(){
  10. return function(){
  11. return 'hello world';
  12. };
  13. };
  14. //注意三种打印的不同
  15. console.log(f3);
  16. console.log(f3());
  17. console.log(f3()());
  18. ...

二、条件

  1. ...
  2. <script>
  3. ...
  4. // 单分支
  5. if (true) console.log('这是单分支');
  6. // 双分支
  7. if(true){
  8. console.log('这是多分支的true');
  9. }else{
  10. console.log('这是多分支的false');
  11. }
  12. // 双分支的简化写法
  13. console.log( true ?'条件为true':'条件为false');
  14. // 多分支
  15. let condition;
  16. if(condition == true){
  17. console.log('条件为true');
  18. }else if(condition == false){
  19. console.log('条件为false');
  20. }else{
  21. console.log('不知道啥条件');
  22. }
  23. // switch多分支
  24. switch(condition){
  25. case true:
  26. console.log('条件为true');
  27. break;
  28. case false:
  29. console.log('条件为false');
  30. break;
  31. default:
  32. console.log('不知道啥条件');
  33. }
  34. ...
  35. </script>
  36. ...

三、循环

循环三要素:
1、索引初始化
2、循环条件
3、更新循环条件
例,数组遍历

  1. ...
  2. <script>
  3. ...
  4. const colors = ['red','green','blue'];
  5. // 索引初始化
  6. let i = 0;
  7. // 数组长度
  8. let length = colors.length;
  9. // 入口判断循环条件
  10. while(i < length){
  11. console.log(colors[i]);
  12. // 更新循环条件
  13. i++;
  14. }
  15. // 出口判断循环条件,最少执行一次。
  16. i = 0;
  17. do{
  18. console.log(colors[i]);
  19. i++;
  20. }while(i < colors.length)
  21. // for循环
  22. for(i = 0; i < colors.length; i++){
  23. console.log(colors[i]);
  24. }
  25. // for-of方式打印数组成员
  26. for(let item of colors.values()){
  27. console.log('成员:'+item);
  28. }
  29. // for-of方式打印数组键值
  30. for(let item of colors.keys()){
  31. console.log('键值:'+item);
  32. }
  33. // 键值都打印
  34. for(let item of colors.entries()){
  35. console.log('键值+成员:'+item);
  36. }
  37. // for-in遍历数组
  38. for(let key in colors){
  39. console.log(colors[key]);
  40. }
  41. ...
  42. </script>
  43. ...

例,对象遍历
对象不能用for-of,用for-in。

  1. ...
  2. <script>
  3. ...// for-in遍历对象
  4. const obj = {
  5. a:1,
  6. b:2,
  7. f:function (){},
  8. }
  9. for(let key in obj){
  10. console.log(obj[key]);
  11. }
  12. ...
  13. </script>
  14. ...
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:常用的数据少了一个 undefined
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