Blogger Information
Blog 16
fans 0
comment 0
visits 6164
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
数据类型与流程控制
glen
Original
354 people have browsed it

数据类型与流程控制

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

  1. 原始类型,二大特点:
  2. 1. 单值: a = 1, b='a'
  3. 2动态: 数据类型,由值的类型确定
  4. console.log(typeof 'php.cn');
  5. console.log(typeof true, typeof false);
  6. let a; // undefined是变量的默认值
  7. console.log(typeof null); /* null 返回是object类型,并非是 Null */
  8. console.log(typeof undefined);
  9. let x = 123;
  10. console.log(typeof x);
  11. x = 'php.cn';
  12. console.log(typeof x);

引用类型

1.数组: 每个成员可以是原始类型,也可以是引用类型

  1. 声明数组:const arr = ['电脑', 2, 5000];
  2. 为了看的方便一点,可以给它弄成表格形式:console.table(arr)
  3. 返回数组:console.log(arr);
  4. 返回数组中的第一个值 0console.log(arr[0]);
  5. 返回数组中的第二个值 1console.log(arr[1]);
  6. 返回数组中的第三个值 2console.log(arr[2]);
  7. 查看当前数组的长度:console.log(arr.length);
  8. 判断当前数组是不是个数组:console.log(typeof arr); 返回objectobject是个对象,
  9. console.log(Array.isArray(arr)); ArrayisArray:是数组的一个原型,,,结果如果返回true说明它是一个数组
  10. ----------------------------------------------------------------
  11. const arr = ['电脑', 2, 5000];
  12. console.table(arr);
  13. console.log(arr[0]);
  14. console.log(arr[1]);
  15. console.log(arr[2]);
  16. console.log(arr.length); /* length:查看当前数字为多少个原型/当前数组的长度 */
  17. console.log(Array.isArray(arr));

2对象

  1. const arr = ['电脑', 2, 5000];,给它语义化一下:
  2. const obj = { /* 语义化: */
  3. /* 名称 */ name: '电脑',
  4. /* 数量 */ num: 2,
  5. /* 价格 */ price: 5000,
  6. 'my email': 'a@php.cn',
  7. 拿到里的第一个值: console.log(obj['name']);
  8. };
  9. 拿到数组中的第二个值:console.log(obj.num);
  10. // 对于符合js标识符命名规范的属性名,可以用点来访问,也可以不用点,用两个单引号访问如:'my email': 'a@php.cn',
  11. }
  1. 对象最主要的功能:可以把一些常用操作给他封装进去
  2. obj123 = {
  3. /* 名称 */ name: '电脑',
  4. /* 数量 */ num: 2,
  5. /* 价格 */ price: 5000,
  6. 'my email': 'a@php.cn',
  7. total: function () { /* total: function:函数声明 */
  8. // this: 当前对象的引用, 和当前对象绑定,,不用更改obj也可以显示,因为this已经和当前对象绑定
  9. return /* :计算 */ this.name + '总价 : ' + this.num * this.price + ' 元';
  10. },
  11. };
  12. console.log(obj123.total());

  1. 通常还可以把数组跟对象混到一起用:
  2. console.log(obj123.total());
  3. /*以下是创建的一个数组,,这个数组里所有的数据都是对象;*/
  4. obj = [
  5. { name: '手机', num: 2, price: 5000 },
  6. { name: '电脑', num: 5, price: 6000 },
  7. { name: '相机', num: 4, price: 2000 },
  8. ];
  9. console.log(obj); /* 进行访问 */
  10. 进行其他操作:求和:
  11. let res = obj.map(item => item.num * item.price).reduce((acc, cur) => acc + cur);
  12. console.log(res);

3.函数:
函数既是数据类型,也是对象
1将函数当成数据类型的优点
// 1. 当成函数的参数: 回调

  1. function f1() {}
  2. function f2(f) {
  3. console.log(typeof f); /* 回调,就是将一个函数做为参数传递到另一个函数去 */
  4. }
  5. // f2是一函数, 它接受一个函数做为参数,可以将上面声明的f1传入
  6. f2(f1);
  7. 第二种方法,当作闭包来用:
  8. function f3() {
  9. return function () {
  10. return 'hello world';
  11. };
  12. }
  13. console.log(f3()());


流程控制

1.分支
分支: 本质上来说,就是有条件执行某段代码
1.单分支:

  1. let age = 28;
  2. console.log(age >= 18);
  3. if (age >= 18) {
  4. console.log('成年了允许进入');
  5. }

2.双分支:

  1. /*语法糖: 三元操作
  2. 条件 ? true : false
  3. age >= 18 ? console.log('成年了允许进入') : console.log('未成年人禁止进入');*/
  4. age = 17;
  5. console.log(age >= 18);
  6. if (age >= 18) {
  7. console.log('成年了允许进入');
  8. }
  9. // 默认选项
  10. else {
  11. console.log('未成年人禁止进入');
  12. }
  1. 多分支:
    1. age = 126;
    2. /* &&表示且,并且 */
    3. if (age >= 0 && age < 18) {
    4. console.log('未成年人禁止入内');
    5. }
    6. // 默认的第1个分支
    7. else if (age >= 18 && age < 30) {
    8. console.log('可以两人或多人结伴进入');
    9. }
    10. // 默认的第2个分支
    11. else if (age >= 30 && age < 60) {
    12. console.log('建议在孩子陪同下进入');
    13. }
    14. else if (age >=60 && age <120){
    15. console.log('不建议进入网吧')
    16. }
    17. // 默认的第3个分支,进行非法数据的过滤
    18. /*|| 表示或,或者什么什么.... */
    19. else if (age >= 120 || age < 8) {
    20. console.log('非法年龄段');
    21. }
    22. else {
    23. console.log('禁止入内');
    24. }

多分支的语法糖: switch

  1. 区间判断,并非单值,一定用true才能进入分支
  2. 必须要用true做为switch入口判断条件
  3. /* switch (条件){
  4. 每个分支用 case 表示,如第一个分支:case 1;
  5. case 1;
  6. /* 语句......*/
  7. break; 跳出该分支 */
  8. /* 最后还有一个默认分支:
  9. default: */
  10. 代码如下:
  11. switch (true) {
  12. case age >=1 && age <18:
  13. console.log('未成年人')
  14. case age >= 18 && age < 35: /* 条件 */
  15. console.log('成年人');/* 语句 */
  16. break;/* 跳出 */
  17. case age >= 35 && age < 60:
  18. console.log('中年人');
  19. break;
  20. case age >= 60 && age < 120:
  21. console.log('老年人');
  22. break;
  23. case age >= 120 || age < 8:
  24. console.log('非法年龄段');
  25. break;
  26. default:
  27. console.log('未成年人');
  28. }

经典应用: 单值判断:

  1. let language = 'html';
  2. language = 'Css';/*都会被转为小写*/
  3. // 实现js/javascript都能正确输出
  4. language = 'javascript';
  5. // language = 'php';
  6. switch (language.toLowerCase()) {
  7. case 'html':
  8. console.log('超文本标记语言');
  9. break;
  10. case 'css':
  11. console.log('层叠样式表');
  12. break;
  13. case 'js':
  14. // case之间没有break,会连续输出,按顺序输出
  15. case 'javascript':
  16. console.log('前端通用脚本语言');
  17. break;
  18. default:
  19. console.log('未定义的选项');


循环:
  1. const colors = ['red', 'green', 'blue'];
  2. console.log(colors);
  3. console.log(colors.length);
  4. console.log(colors[0], colors[1], colors[2]);
  5. // 最后一个元素的索引是 当前数组的长度减一: 2=colors.length-1
  6. console.log(colors.length - 1);
  7. console.log(colors[colors.length - 1]);/* 最后一个元素可以用length - 1拿到 */
  8. console.log(colors[colors.length]);
  9. // !号进行 取反
  10. if (!undefined) {
  11. console.log(true);
  12. }
  13. // 数组的遍历:
  14. // 数组起始索引:
  15. let i = 0;
  16. // 遍历的条件:
  17. let length = colors.length;
  18. /* if (i < length) {
  19. console.log(colors[i]);
  20. 必须要更新循环条件,否则进入死循环
  21. i = i + 1;
  22. }
  23. if (i < length) {
  24. console.log(colors[i]);
  25. 必须要更新循环条件,否则进入死循环
  26. i = i + 1;
  27. i += 1;
  28. i++;
  29. }
  30. if (i < length) {
  31. console.log(colors[i]);
  32. 必须要更新循环条件,否则进入死循环
  33. i = i + 1;
  34. }
  35. if (i < length) {
  36. console.log(colors[i]);
  37. 必须要更新循环条件,否则进入死循环
  38. i = i + 1;
  39. } else {
  40. console.log('遍历结束');
  41. } */
  42. 用循环来简化以上操作:
  43. console.log('----------------');
  44. i = 0;
  45. // 入口判断
  46. while (i > length) {
  47. console.log(colors[i]);
  48. // 必须要更新循环条件,否则进入死循环
  49. i++;
  50. }
  51. console.log('----------------');
  52. console.log(i);
  53. i = 0;
  54. // 出口判断, 至少要执行一次循环体中的代码,哪必条件为false/假
  55. do {
  56. console.log(colors[i]);
  57. // 必须要更新循环条件,否则进入死循环
  58. i++;
  59. } while (i > length);
  60. console.log('===============');
  1. 循环三要素:
  2. /* 1. 索引初始化: 0
  3. 2. 循环条件: i < length
  4. 3. 更新循环条件: i++
  5. for 可以看成 while 语法糖或简化 */
  6. for (let i = 0; i < length; i++) //{全部写进for中
  7. console.log(colors[i]);
  8. }
  9. // es6 : for-of
  10. for (let item of colors) {
  11. console.log('phpcn: ' + item);
  12. }
  1. // 用循环方式来遍历对象
  2. const obj = {
  3. a: 1,
  4. b: 2,
  5. c: function () {},
  6. }
  7. // 不能用for-of, 要用 for -in
  8. for (let key in obj) {
  9. console.log(obj[key]);
  10. }
  11. // 数组也是对象, 也可以用for in
  12. for (let key in colors) {
  13. console.log(colors[key]);
  14. }
  15. // 数组可以用while,for,for-of,for-in
  16. // 对象用for-in
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