前序 - 流程图

  • 一套的标准图形，用于描述程序的逻辑
    2019-06-12-10-49-09.png

绘制流程图

if判断

  1. if(条件1){
  2.     // 代码块
  3. }
  4. else if(条件2){
  5.     // 代码块
  6. }
  7. else if(条件3){
  8.     // 代码块
  9. }
  10. //....
  11. else{
  12.     // 以上条件都不满足执行的代码块
  13. }
  15. //例
  16. var score = 95;
  17. // A：>=90  B: >=70 <90  C: >=50 <70  D: <50
  18. if (score >= 90) {
  19.   console.log("A");
  20. } else if (score >= 70) {
  21.   console.log("B");
  22. } else if (score >= 50) {
  23.   console.log("C");
  24. } else {
  25.   console.log("D");
  26. }
  27. var result = prompt("请输入你的年龄");
  28. if (result === null) {
  29.     console.log("点击了取消");
  30. } else {
  31.     result = +result; //转换为数字
  32.     if (isNaN(result)) {
  33.         //不是正常的数字
  34.         console.log("输入有误");
  35.     }
  36.     else{
  37.         console.log(result, typeof result);
  38.     }
  39. }
  1. 如果某个条件满足，则直接忽略后面的所有条件
  2. else if 可以有多个（包含0个）
  3. else可以有1个或0个
  4. else可以换行，可以不换行
  5. 如果代码块只有一条语句，可以省略花括号（不推荐）
  6. if只能出现一次
  1. //例题 在计算机中输出石头剪刀布
  2. var fist = propt("请输出(石头，剪刀，布)");
  3. if(fist === '剪刀' || fist === '石头' || fist === '布'){
  4.     var  rad = Math.random();
  5.     var pcFist; //计算机随机出拳
  6.     if(rad < 0.333){ 
  7.         pcFit = '石头'
  8.     }else if(rad < 0.666){
  9.         pcFit = '剪刀'
  10.     }else{
  11.         pcFit = '布'
  12.     }
  13. }else{
  14.   console.log('输入有误')
  15. }
  16. //2. 比较胜负
  17. console.log(`你的出拳：${fist}, 电脑出拳：${pcFist}`);
  18. if(fist === "剪刀" && pcFist === '布' ||
  19. fist === "石头" && pcFist === '剪刀' ||
  20. fist === "布" && pcFist === '石头' ){
  21.  console.log('你胜利了')
  22. }else if(fist === pcFist){
  23.  console.log('平局')
  24. }else{
  25.  console.log('电脑胜利')
  26. }

switch 开关

switch的语法始终可以使用if结构替代。

  1. switch(表达式){
  2.     case 数据1:
  3.         代码块
  4.     case 数据2:
  5.         代码块
  6.     //...
  7.     default:
  8.         代码块
  9. }
  11. //例
  12. var x = 20;
  13. switch (x) {
  14.     case 1:
  15.         console.log("1");
  16.         break;
  17.     case 20:
  18.         console.log("20");
  19.         break;
  20.     case 30:
  21.         console.log("30");
  22.         break;
  23.     default:
  24.         console.log("default");
  25.         break;
  26. }
  1. 计算表达式的返回值，依次和case后面的数据进行严格相等的比较，如果某个相等，停止比较，然后运行其内部的代码块，再然后，依次运行之后的所有代码块。
  2. 在case分支内部，使用break语句，可以立即停止switch结构。
  3. default表示前面的所有case都不匹配时运行。可以省略

循环

  • 重复的运行一段代码
  • JS支持3种循环结构：while循环、do-while循环、for循环
  • 死循环：条件永远满足，永远无法退出循环。

while循环

  1. while(条件){
  2.     代码块（循环体）
  3. }
  5. // 输出100个hello world
  6. var i = 0; //当前输出的次数，初始化
  7. while(i < 100){
  8.     console.log("hello world");
  9.     i++;
  10. }

do-while循环

  1. do{
  2.   //循环体
  3. }while(条件)
  5. // 输出100个hello world
  6. var i = 0; //当前输出的次数
  7. do {
  8.     console.log("hello world");
  9.     i++;
  10. } while (i < 100);
  11. console.log("循环结束");

for循环

  1. for(初始化表达式; 条件; 条件改变表达式){
  2.   循环体
  3. }
  5. // 输出 1-100 的所有数字
  6.     for (var i = 1; i <= 100; i++) {
  7.         // 在循环体中，i的值从1变化到100
  8.         console.log(i);
  9.     }
  11. // 输出 100-1 的所有数字
  12.     for (var i = 100; i >= 1; i--) {
  13.         console.log(i);
  14.     }
  16. // 输出 1-100 的所有奇数
  17.     for (var i = 1; i <= 100; i++) {
  18.         // 判断i是不是奇数
  19.         if (i % 2 !== 0) {
  20.             console.log(i);
  21.         }
  22.     }
  24.     for (var i = 1; i <= 100; i += 2) {
  25.         console.log(i);
  26.     }

循环中的关键字

循环控制语句

  • break; 跳出循环
  • continue; 停止当前循环体，进入下一次循环。
  1. var i = 0;
  2. while (i < 10) {
  3.     if (i === 3) {
  4.         i++;
  5.         continue;
  6.     }
  7.     console.log(i);
  8.     i++;
  9. }
  10. for (var i = 0; i < 3; i++) {
  11.     for (var j = 0; j < 3; j++) {
  12.         console.log(i, j);
  13.         if (i + j >= 2) {
  14.             break;
  15.         }
  16.     }
  17. }

循环的应用

  • 累计 (准备一个变量，初始值为0，然后1-100循环，每次循环，将数字累加到变量中)
  • 查找 (准备一个变量，记录false，表示没有找到，然后135-145进行循环，如果发现满足条件的数字，重新记录变量为true，表示找到了，然后退出循环)
  • 嵌套的循环
  1. // 1-100 所有奇数相加
  2. var sum = 0;
  3. for (var i = 1; i <= 100; i++) {
  4.     if (i % 2 !== 0) {
  5.         sum += i;
  6.     }
  7. }
  8. console.log(sum);
  10. // 135-145 之间是否存在 能整除26的数字
  11. var isFind = false; //是否找到
  12. var min = 135,
  13.     max = 145;
  14. for (var i = min; i <= max; i++) {
  15.     if (i % 26 === 0) {
  16.         isFind = true;
  17.         break;
  18.     }
  19. }
  20. if (isFind) {
  21.     console.log("存在");
  22. } else {
  23.     console.log("不存在");
  24. }
  26. // 打印1-100的所有素数
  27. for (var i = 1; i <= 100; i++) {
  28.     // 判断i是不是素数
  29.     var isFind = false; //没有找到
  30.     for (var j = 2; j < i - 1; j++) {
  31.         if (i % j === 0) {
  32.             isFind = true;
  33.             break;
  34.         }
  35.     }
  36.     if (i > 1 && !isFind) {
  37.         console.log(i);
  38.     }
  39. }

数组(源于Array.prototype)

  • 用于存放多个数据

创建

  1. 1. new Array(长度)
  2.    - 长度，数组里面的数据总数，长度一定是一个非负整数
  3.    - new Array(数据, 数据, 数据....)
  4.    - 创建一个数组，并初始化其每一项的值
  5.    - 数组项：数组其中的一项数据
  6.    - 
  7. 2. [数据,数据,数据,....]
  9. - 创建一个数据，并初始化其每一项的值
  1. var arr1 = new Array(20); //创建了一个长度为20的数组
  3. //创建一个长度为5，数据分别是1，5，354，234，11
  4. var arr2 = new Array(1, 5, 354, 234, 11);
  6. //创建一个长度为5，数据分别是1，5，354，234，11
  7. var arr3 = [1, 5, 354, 234, 11];

本质

数组的本质就是个对象

  • length属性：数组的长度，会自动变化，值为最大下标+1
  • 数字字符串属性：叫做下标，也叫做索引，相当于数组中每个数据的编号，下标从0开始排列
  • 下标
    下标通常都是连续的，下标不联系的数组叫做稀松数组
  • 注意：连续下标的取值范围：0 ~ length -1，如果给length直接赋值，会导致数组可能被截断，因此实际开发中，不要给length赋值。
  1. var arr = [3, 6, 23, 4, 66, 232, 44];
  2. arr.abc = "asdfasdfsadf";
  3. // arr.length = 200;
  4. arr[7] = 333;
  5. console.log(arr);

添加数组项

  • 数组[长度] = 数据：向数组末尾添加一个数据
  • 数组.push(数据): 向数组末尾添加一个数据
  • 数组.unshift(数据)：向数组起始位置添加一个数据，会导致数组每一项的下标向后移动
  • 数组.splice(下标, 0, 添加的数据): 从指定下标位置开始，删除0个，然后在该位置插入添加的数据，如果下标超过范围，则按照范围的边界进行处理。

push、unshift、splice可以添加多个数据

  1. var arr = [1, 2, 3, 4];
  2. // arr[arr.length] = "afasf"; //向末尾添加一项
  3. // arr[arr.length] = "afasf1"; //向末尾添加一项
  4. // arr[arr.length] = "afasf2"; //向末尾添加一项
  5. // arr[arr.length] = "afasf3"; //向末尾添加一项
  7. // arr.push("abc", "bcd");
  8. // arr.push("bcd");
  9. // arr.push({
  10. //     name: "Adsf",
  11. //     age: 18
  12. // });
  13. // console.log(arr);
  14. // arr.unshift(1, 2, 3);
  16. arr.splice(2, 0, "abc", "bcd");
  17. console.log(arr);

删除数据

  • delete 数组[下标]: 这种做法不会导致数组其他的属性发生变化，因此，该做法会导致产生稀松数组，所以不推荐使用该做法。
  • 数组.pop(): 删除数组的最后一项，该表达式返回最后一项的数据
  • 数组.shift()：删除数组第一项，该表达式返回第一项的数据
  • 数组.splice(下标, 删除的数量, 添加的数据): 从指定下标位置开始，删除指定数量，然后在该位置插入添加的数据，如果下标超过范围，则按照范围的边界进行处理。返回一个新数组，该数组记录被删除的数据。
  1.  var arr = [];
  2.   // delete arr[3];
  3.   // var n = arr.pop();
  5.   // var n = arr.shift();
  6.   var n = arr.splice(1, 1000);
  7.   console.log(arr, n);

其他操作

  • 数组.slice(起始位置下标, 结束位置下标)：将起始位置到结束位置之间的数据拿出来，得到一个新的数组，该函数不会改变原数组；注意：结束下标取不到

下标可以写负数，如果是负数，则从数组的末尾开始计算。

如果不写结束下标，则直接取到末尾。

  • 数组清空

数组.splice(0, 数组.length);

数组.length = 0;

  • 查找数组中某一项的下标

数组.indexOf(数据)

从数组中依次查找对应的数据，查找时使用严格相等进行比较。找到第一个匹配的下标，返回。如果没有找到，则得到-1；

数组.lastIndexOf(数据)

功能和indexOf类似，只是查找的是最后一个匹配的下标

  • 数组.fill

数组.fill(数据)：将数组的所有项，填充为指定的数据

数组.fill(数组, 开始下标): 将数组从开始下标起，到数组的末尾，填充为指定的数据

数组.fill(数组, 开始下标，结束下标): 将数组从开始下标起，到数组的结束下标（取不到），填充为指定的数据

  1. var arr1 = [1, 2, 3, 4, 5, 6, 7];
  2. var newArr = arr.slice(-4);
  3. arr1.splice(0, arr.length);
  4. console.log(newArr, arr1);
  7. var arr2 = [1, 2, 3, 4, 3, 6, 3];
  8. var index = arr2.lastIndexOf(3);
  9. console.log(arr2, index);
  11. var arr3 = new Array(100);
  12. arr.fill("abc");
  14. for (var i = 0; i < arr3.length; i++) {
  15.     arr3[i] = "abc";
  16. }
  17. for (var index in arr) {
  18.     arr3[index] = "abc";
  19. }
  21. console.log(arr3);

数组的静态成员

  • from方法：可以将一个伪数组转换为真数组
  • isArray方法：判断一个给定的数据，是否为一个真数组
  • of方法：类似于中括号创建数组，依次赋予数组每一项的值
  1. //伪数组转换为真数组
  2. function test(){
  3.     console.log(Array.isArray(arguments));
  4.     var newArr = Array.from(arguments);
  5.     console.log(newArr, Array.isArray(newArr));
  6. }
  8. test(1,4,6,57,89,33)

数组的实例成员

  • fill方法：用某个数据填充数组
  • pop：从数组中删除最后一个元素，并返回该元素的值
  • push: 将一个或多个元素添加到数组的末尾，并返回该数组的新长度
  • reverse：将当前数组颠倒顺序
  • shift: 从数组中删除第一个元素，并返回该元素的值
  • sort：对数组进行排序
  • splice: 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容
  • unshift: 将一个或多个元素添加到数组的头部，并返回该数组的新长度
  • 以上方法会改变原数组
  1. var arr = new Array(6); //fill 数组填充
  2. console.log(arr.fill('a')); //[a,a,a,a,a,a]
  4. var arr1 = [1,2,3,4,5]; //pop 返回删除的元素，并且改变了原数组
  5. console.log(arr.pop(1),arr1); //5,[1,2,3,4]
  7. var arr2 = ['a','b']; //push 由数组末尾添加元素,并且返回数组新的长度
  8. console.log(arr2.push('c'),arr2); //3，[a,b,c]
  9. console.log(arr2.reverse()); //[c,b,a];
  10. console.log(arr2.shift(),arr2),//c, [b,a]
  12. //sort //数组排序
  13. var arr3 = [3, 211, 32, 11, 5, 4];
  14. arr3.sort(function(a, b) {
  15.     return Math.random() - 0.5;
  16. });
  17. console.log(arr3);
  19. //splice 
  20. var arr4 = [1,2,3,4];
  21. console.log(arr4.splice(2,1),arr4); //[3],[1,2,4]
  23. //unshift
  24. var arr1 = [1,2,3,4,5]; 
  25. console.log(arr.unshift(1),arr1); // 1 [2,3,4,5]
  • 纯函数、无副作用函数：不会导致当前对象发生改变
  • concat 两个或者多个数组进行合并
  • includes: 数组中是否包含满足条件的元素 结果返回的类型为Boolear
  • join: 将一个数组的所有元素连接成一个字符串并返回这个字符串
  • slice 提取源数组的一部分并返回一个新数组
  • indexOf 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回 -1
  • lastIndexOf 返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1
  • forEach: 遍历数组
  • every：是否所有元素都满足条件
  • some：是否至少有一个元素满足条件
  • filter：过滤，得到满足条件的元素组成的新数组
  • find: 查找第一个满足条件的元素，返回元素本身，如果没有找到，返回undefined
  • findIndex: 查找第一个满足条件的元素，返回元素的下标
  • map：映射，将数组的每一项映射称为另外一项
  • reduce：统计，累计
  1. var arr = [1,2,3,4,5]; var arr2 = ['a','b','c'];
  2. var newArr = arr.concat(arr2);
  3. console.log(newArr); // [1,2,3,4,5,'a','b','c'] 数组合并
  5. var arr3 = [32, 6, 67, 3, 23, 4];
  6. // 从数组下标3的位置开始寻找，目标是67
  7. console.log(arr3.includes(67, 3)); //false 
  9. var arr4 = [1,2,3,4,5];
  10. console.log(arr4.join(','));//1,2,3,4,5
  12. //arrLice 
  13. var arrLice = [1,2,3,4];
  14. console.log(arrLice.slice(1)); //[2,3,4]
  16. var arr5 = [1,2,3,4,5];
  17. arr5.forEach(function(v){
  18.     console.log(v);
  19. }); //类似于for循环
  21. var arr6 = [37, 25, 48, 55, 30];
  22. //判断是否所有同学都及格
  23. // var result = arr6.every(function(item) {
  24. //     return item >= 60;
  25. // });
  26. // console.log(result);
  28. //判断是否至少有一个同学及格
  29. console.log(arr6.some(function(item) {
  30.     return item >= 60;
  31. }));
  33. var arr7 = [1, 2];   
  34. var sum = arr7.reduce(function(s, item) {
  35. return s + item;
  36. }, 0);
  37. console.log(sum);
  39. var arr8 = [55, 66, 22, 33, 44, 88];
  40. //得到一个新数组，新数组的每一项是一个对象
  41. //对象中包含两个属性：name、score
  42. var newArr4 = arr8.map(function(item, i) {
  43.     return {
  44.         name: "学生" + (i + 1),
  45.         score: item
  46.     }
  47. });
  48. console.log(newArr4);
  50. // 链式编程：每一个函数调用返回的类型一致
  51. var arr81 = [22, 33, 44, 55, 66, 77, 88];
  53. // 先对数组进行随机排序
  54. // 只取及格的分数
  55. // 得到学生对象的数组（每个学生对象包含姓名和分数）
  57. var result6 = arr81.sort(function() {
  58.     return Math.random() - 0.5;
  59. }).filter(function(item) {
  60.     return item >= 60;
  61. }).map(function(item, i) {
  62.     return {
  63.         name: `学生${i+1}`,
  64.         score: item
  65.     }
  66. });
  67. console.log(result6);

补充

  • in关键字

判断某个属性是否存在
属性名 in 对象

  1.   // var obj = {
  2.   //     a: 1,
  3.   //     b: 324,
  4.   //     c: "asdfas"
  5.   // };
  7.   // console.log("a" in obj);
  9.   var arr = [23, 65, 7, 7];
  10.   console.log(arr);
  11.   console.log(23 in arr);
  • for-in 循环

取出对象的所有属性名，每次循环将其中一个属性名赋值给变量prop，运行循环体。

  1.   for(var prop in 对象){
  2.       //循环体
  3.   }
  5.   // 利用该特点，可以实现数组的遍历
  6.   var arr = ["abc", "bcd", "234", , , , 54, 2, 1];
  7.   console.log(arr);
  8.   // for (var i = 0; i < arr.length; i++) {
  9.   //     console.log(arr[i]);
  10.   // }
  12.   for (var index in arr) {
  13.       console.log(index, typeof index, arr[index]);
  14.   }