From d5c8ddd4271ae4cdfa112b1c66883745125242aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=96=E6=9D=B0=E6=9E=97?= <2890111060@qq.com> Date: Mon, 17 Oct 2022 08:06:17 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...75\346\225\260\344\275\234\344\270\232.md" | 58 ++ ...71\350\261\241\344\275\234\344\270\232.md" | 16 + ...72\347\241\200\350\257\255\346\263\225.md" | 536 ++++++++++++++++++ ...13\344\270\216\346\225\260\347\273\204.md" | 146 +++++ .../2022-10-11--\345\207\275\346\225\260.md" | 233 ++++++++ ...42\345\220\221\345\257\271\350\261\241.md" | 80 +++ ...43\346\236\204\347\254\224\350\256\260.md" | 50 ++ 7 files changed, 1119 insertions(+) create mode 100644 "46\350\265\226\346\235\260\346\236\227/\344\275\234\344\270\232/2022-10-10-\345\207\275\346\225\260\344\275\234\344\270\232.md" create mode 100644 "46\350\265\226\346\235\260\346\236\227/\344\275\234\344\270\232/2022-10-12--\351\235\242\345\220\221\345\257\271\350\261\241\344\275\234\344\270\232.md" create mode 100644 "46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-06--\345\237\272\347\241\200\350\257\255\346\263\225.md" create mode 100644 "46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-10--\345\237\272\346\234\254\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\346\225\260\347\273\204.md" create mode 100644 "46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-11--\345\207\275\346\225\260.md" create mode 100644 "46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-12--\351\235\242\345\220\221\345\257\271\350\261\241.md" create mode 100644 "46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-13--\350\247\243\346\236\204\347\254\224\350\256\260.md" diff --git "a/46\350\265\226\346\235\260\346\236\227/\344\275\234\344\270\232/2022-10-10-\345\207\275\346\225\260\344\275\234\344\270\232.md" "b/46\350\265\226\346\235\260\346\236\227/\344\275\234\344\270\232/2022-10-10-\345\207\275\346\225\260\344\275\234\344\270\232.md" new file mode 100644 index 0000000..661e459 --- /dev/null +++ "b/46\350\265\226\346\235\260\346\236\227/\344\275\234\344\270\232/2022-10-10-\345\207\275\346\225\260\344\275\234\344\270\232.md" @@ -0,0 +1,58 @@ +```js +var text ='I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.' +//将上述字符串去除标点空格后统计有多少个单词 + + +// 0.将元素65 与43 调换位置 +console.log('第1题') +const arr1 = [87,85,74,70,43,59,65] +console.log(arr1); +var n = arr1[4]; +arr1[4] = arr1[6]; +arr1[6] = n; +console.log(arr1) + +// 1.移除第一个元素87，并在开头添加 元素86 +console.log('第2题') +const arr2 = [87,85,74,70,43,59,65] +arr2.shift() +arr2.unshift(86) +console.log(arr2) +// 2.移除最后一个元素43， 并在末尾添加1 +console.log('第3题') +const arr3 = [87,85,74,70,43,59,65] +arr3.pop() +arr3.push(43) +console.log(arr3) +// 3.在 70 65 之间插入 元素 68 +console.log('第4题') +const arr4 = [87,85,74,70,43,59,65] +arr4.splice(4,0,68) +console.log(arr4) +// 4.删除元素65 +console.log('第5题') +const arr5 = [87,85,74,70,43,59,65] +arr5.splice(length-1,1,) +console.log(arr5) +// 5.使用map返回一个新的数组new_arr，要求新数组new_arr比原来数组大2 +console.log('第6题') +const arr6 = [87,85,74,70,43,59,65] +const arr_6 = arr6.map( + function(item){ + return item+2 + } +) +console.log(arr_6); +// 6.筛选数组new_arr返回new_arr1,要求new_arr1: 能被2整除 +console.log('第7题') +const arr7 = [87,85,74,70,43,59,65] +const arr_7 = arr2.filter( + function (item) { + if(item%2==0){ + return item + } + } +) +console.log(arr_7); +``` + diff --git "a/46\350\265\226\346\235\260\346\236\227/\344\275\234\344\270\232/2022-10-12--\351\235\242\345\220\221\345\257\271\350\261\241\344\275\234\344\270\232.md" "b/46\350\265\226\346\235\260\346\236\227/\344\275\234\344\270\232/2022-10-12--\351\235\242\345\220\221\345\257\271\350\261\241\344\275\234\344\270\232.md" new file mode 100644 index 0000000..4bc0c9b --- /dev/null +++ "b/46\350\265\226\346\235\260\346\236\227/\344\275\234\344\270\232/2022-10-12--\351\235\242\345\220\221\345\257\271\350\261\241\344\275\234\344\270\232.md" @@ -0,0 +1,16 @@ +## 作业 + +```JS +//4.查找同时会：MongoDB， Express，React，和Node 的人，并打印其名字 +const JN=['MongoDB','Express','React','Node'] +keysArr.forEach( +function (item) { + const K=users[item].skills + var A= JN.every(item=>K.includes(item)) + if (A==true) { + console.log(item); + } +} +) +``` + diff --git "a/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-06--\345\237\272\347\241\200\350\257\255\346\263\225.md" "b/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-06--\345\237\272\347\241\200\350\257\255\346\263\225.md" new file mode 100644 index 0000000..dd5dbfd --- /dev/null +++ "b/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-06--\345\237\272\347\241\200\350\257\255\346\263\225.md" @@ -0,0 +1,536 @@ +# JS基础语法 + +## 一、JavaScript的概念和执行原理 + +**JavaScript的概念和执行原理** +（1）JavaScript也是程序语言中的一种，但是JavaScript是嵌入到HTML语言中，直接通过浏览器运行。 +（2）JavaScript的执行原理：当客户端向服务器端请求某个页面时，服务器端将整个页面中包含JavaScript的脚本代码作为响应内容，发送回客户端机器，客户端浏览器根据发回的网页文件从上往下逐行读取并解析其中的html或者脚本代码。 + +![0001](E:\JS\2022-10-06--第一节课--JS初识\01JS初识\img\0001.PNG) + +## 二、JS代码编写位置 + +（1）直接写在页面标签里面 + +``` + + + + + 脚本代码的位置：直接写在页面标签里面 + + + + + + + +``` + +（2）写在外部JS文件中 + +外部的JS文件: + +``` +alert("欢迎进入JavaScript编程的世界！"); +``` + +HTML文件: + +``` + + + + + 脚本代码的位置：写在外部js文件中 + + + + + + + +``` + +## 三、将JS脚本代码作为A标签的属性值 + +``` + + + + + 将脚本代码作为a标签的属性值 + + + + 喜欢我就点击我吧 +

+ 喜欢我就点击我吧 + + +``` + +## 四、JS中数据类型和变量 + +（1）JavaScript是弱类型语言，在定义变量的时候不用确定数据类型，在赋值的时候根据值自动确定其类型 。 + +（2）数据类型有：undefined，number，boolean，string，object + +（3） var是声明变量的关键字 。 + +（4）给变量命名的时候，需要遵循如下规则： + +​ 【1】 第一个字符必须是一个字母、下划线（_）或一个美元符号$。 + +​ 【2】 后面的字符可以是字母、下划线、美元符号或数字。 + +​ 【3】 区分大小写。 + +​ 【4】 不能与关键字同名 ，如while、for和if等。 + +**代码演示：** + +``` +var msg; +alert(typeof msg); //undefined类型 +alert(typeof xyz); //undefined类型 +``` + +``` +var num = 211; //number类型 +alert(typeof num); + +var num = 211.11; //number类型 +alert(typeof num); + +v = 2; +var y = 'a'; +var r = v * y; +//结果为not a number,但是数据类型仍然为number类型 +alert(r); //NaN +alert(typeof r); //number类型 +``` + +``` +var flag = true; //boolean类型,取值只能是true或者false +alert(typeof flag); +``` + +``` +var str = "JavaScript"; //string类型 +alert(typeof str); + +var str = 'JavaScript'; //string类型 +alert(typeof str); +``` + +``` +var now = new Date(); //获取当前时间:object类型 +alert(now + "\n" + typeof now); + +var obj = null; +alert(typeof obj + "\n" + obj); //object类型 + +var arr = [11,22,33,44]; //object类型 +alert(typeof arr); +``` + +``` +//创建你自己的个人资料，把各项资料放入相应变量中，并使用表格打印出来。 +//个人资料包括 学号、姓名、出身年月、身份证号码、HTML考试成绩 +var myNo = "001"; +var myName = "刘德华"; +var myBirth = "1977-8-7"; +var myCode = "420109197708071547"; +var htmlScore = 95; +document.write(""); + document.write(""); + document.write(""); + document.write(""); + document.write(""); + document.write(""); + document.write(""); + document.write(""); + document.write(""); + document.write(""); + document.write(""); +document.write("
学号 姓名 出身年月 身份证 HTML考试成绩
"+myNo+""+myName+""+myBirth+""+myCode+""+htmlScore+"
"); +``` + +## 五、运算符 + +**（1）算数运算符** + + 算术运算符用在数学表达式中，它们的作用和在数学中的作用一样。下表列出了所有的算术运算符。 + + 表格中的实例假设整数变量A的值为10，变量B的值为20： + +| 操作符 | 描述 | 例子 | +| :----- | :-------------------------------- | :------------------------------------ | +| + | 加法 - 相加运算符两侧的值 | A + B 等于 30 | +| - | 减法 - 左操作数减去右操作数 | A – B 等于 -10 | +| * | 乘法 - 相乘操作符两侧的值 | A * B等于200 | +| / | 除法 - 左操作数除以右操作数 | B / A等于2 | +| ％ | 取余 - 左操作数除以右操作数的余数 | B%A等于0 | +| ++ | 自增: 操作数的值增加1 | B++ 或 ++B 后B等于 21（区别详见下文） | +| -- | 自减: 操作数的值减少1 | B-- 或 --B 后B等于 19（区别详见下文） | + +其中+运算符，除了数学运算，还可以进行数据的拼接，例如： + +``` +var a = 10; +var b = "10"; +alert(a+b); //此处不进行数学运算，进行拼接，结果将打印1010 +``` + +此处和强类型语言不同，强类型语言例如C#，此结果应该为2，但是在JS中结果为2.5，例如： + +``` +var a = 5; +var b = 2; +alert(a/b); //将打印结果2.5 +``` + +自增++运算符和自减--运算符，符号写在前面和后面的区别如下： + +++在前，先自增，在运算； ++在后，先运算，在自增 （--运算符同理） + +``` +var a = 10; +++a; //或者a++,执行结果一样 +alert(a); //打印11 +``` + +``` +var a = 10; +var b = a++; +alert(a); //打印结果11 +alert(b); //打印结果10 +``` + +``` +var a = 10; +var b = ++a; +alert(a); //打印结果11 +alert(b); //打印结果11 +``` + +**（2）赋值运算符** + +| 操作符 | 描述 | 例子 | +| :----- | :----------------------------------------------------------- | :--------------------------------------- | +| = | 简单的赋值运算符，将右操作数的值赋给左侧操作数 | C = A + B将把A + B得到的值赋给C | +| + = | 加和赋值操作符，它把左操作数和右操作数相加赋值给左操作数 | C + = A等价于C = C + A | +| - = | 减和赋值操作符，它把左操作数和右操作数相减赋值给左操作数 | C - = A等价于C = C - A | +| * = | 乘和赋值操作符，它把左操作数和右操作数相乘赋值给左操作数 | C * = A等价于C = C * A | +| / = | 除和赋值操作符，它把左操作数和右操作数相除赋值给左操作数 | C / = A，C 与 A 同类型时等价于 C = C / A | +| ％= | 取模和赋值操作符，它把左操作数和右操作数取模后赋值给左操作数 | C％= A等价于C = C％A | + +例如： + +``` +var a = 1; //正确 +// =赋值运算符左边只能是变量，不能是数据常量。 +1 = a; //错误 +a + 1 = 2; //错误 +``` + +``` +var a = 10; +var b = 5; +a += b; // 等价 a = a + b; +alert(a); //打印15 +alert(b); //打印5 +``` + +**（3）关系运算符** + +表格中的实例整数变量A的值为10，变量B的值为20： + +| 运算符 | 描述 | 例子 | +| :----- | :----------------------------------------------------------- | :--------------- | +| == | 检查如果两个操作数的值是否相等，如果相等则条件为真。 | （A == B）为假。 | +| != | 检查如果两个操作数的值是否相等，如果值不相等则条件为真。 | (A != B) 为真。 | +| > | 检查左操作数的值是否大于右操作数的值，如果是那么条件为真。 | （A> B）为假。 | +| < | 检查左操作数的值是否小于右操作数的值，如果是那么条件为真。 | （A = | 检查左操作数的值是否大于或等于右操作数的值，如果是那么条件为真。 | （A> = B）为假。 | +| <= | 检查左操作数的值是否小于或等于右操作数的值，如果是那么条件为真。 | （A <= B）为真。 | + +=与==的区别： + +``` +a = b; //代表将b的值赋给a +a == b //代表比较a和b的值是否相等 +``` + +**（4）逻辑运算符** + +下表列出了逻辑运算符的基本运算，假设布尔变量A为true，变量B为false + +| 操作符 | 描述 | 例子 | +| :----- | :----------------------------------------------------------- | :------------------ | +| && | 称为逻辑与运算符。当且仅当两个操作数都为真，条件才为真。 | （A && B）为假。 | +| \| \| | 称为逻辑或操作符。如果任何两个操作数任何一个为真，条件为真。 | （A \| \| B）为真。 | +| ！ | 称为逻辑非运算符。用来反转操作数的逻辑状态。如果条件为true，则逻辑非运算符将得到false。 | ！（A && B）为真。 | + +例如： + +``` +var a = 20; +var b = 500; +alert(a > b && a > 0); //打印false +alert(a > b || a > 0); //打印true +alert(!(a > b || a > 0)); //打印false +``` + +**（5）三目运算符** + + 该运算符有3个操作数，并且需要判断布尔表达式的值。该运算符的主要是决定哪个值应该赋值给变量。 + +**条件表达式 ？结果1 ：结果2** （表达式成立，执行结果1，否则执行结果2），例如： + +``` +var a = 10; +var b = 20; +var c = a > b ? a : b; +alert(c); //此处打印20 +``` + +## 六、选择分支结构 + +**（1）IF单分支结构** + +获取当前日期，判断当前日期是否为自己的生日，如果是则提示"生日快乐" + +``` +var now = new Date(); +var nowMonth = now.getMonth(); +var nowDay = now.getDate(); +if(nowMonth+1==6 && nowDay==22) //月份从0开始编号 + alert("生日快乐！"); +``` + +**（2）IF双分支** + +获取当前时间，判断是否为星期六，星期日，如果是提示"我要出去浪",否则提示"努力工作" + +``` +var now = new Date(); +var nowWeek = now.getDay(); //星期从0开始编号，并且星期天是一个星期第一天 +if(nowWeek == 0 || nowWeek == 6) + alert("我要出去浪!"); +else + alert("努力工作!"); +``` + +**（3）if多分支** + +获取当前时间，如果0点-12点提示：早上好；如果12点-14点提示：中午好；如果14点-18点提示：下午好；剩下时间提示：晚上好。 + +``` +var now = new Date(); +var nowHour = now.getHours(); +if(nowHour < 12) + alert("早上好!"); +else if(nowHour < 14) + alert("中午好!"); +else if(nowHour < 18) + alert("下午好!"); +else + alert("晚上好!"); +``` + +**（4）if嵌套** + +获取当前时间： + +如果是工作日（星期一到星期五） + +​ 10点之前提示："开会中..." 10点之后提示:"努力敲代码中..." + +如果是双休日（星期六星期天） + +​ 10点之前提示："还在睡梦中..." 10点之后提示:"游戏中..." + +``` +var now = new Date(); +var nowWeek = now.getDay(); +var nowHour = now.getHours(); +if(nowWeek >=1 && nowWeek <=5) +{ + if(nowHour < 10) + alert("开会中..."); + else + alert("努力敲代码中..."); +} +else +{ + if(nowHour < 10) + alert("还在睡梦中..."); + else + alert("游戏中..."); +} +``` + +**（5）switch case结构** + +获取当前时间星期几，自动提示当天的课表信息，课表如下： + +星期一：语文、体育、英语 +星期二：数学、化学、计算机 +星期三：政治、历史、物理 +星期四：语文、数学、英语 +星期五：计算机、英语、美术 +星期六和星期天：休息 + +``` +var now = new Date(); +var nowWeek = now.getDay(); +switch(nowWeek) +{ + case 1: alert("语文、体育、英语"); break; + case 2: alert("数学、化学、计算机"); break; + case 3: alert("政治、历史、物理"); break; + case 4: alert("语文、数学、英语"); break; + case 5: alert("计算机、英语、美术"); break; + default: alert("休息"); break; +} +``` + +## 七、循环结构 + +**（1）while循环和do...while循环** + +while循环打印1-10. + +``` +var i = 1; +while(i <= 10) +{ + document.write(i+"
") + i++; +} +``` + +do...while循环打印1-100. + +``` +var i = 1; +do +{ + document.write(i+"
") + i++; +}while(i <= 10); +``` + +while和do...while区别： + +【1】while先判断后执行,do...while先执行后判断 + +【2】如果将上述程序修改成var i = 11,while循环将一次都不执行,而do...while会至少执行一次。 + +**利用while或do...while循环解决如下问题：** + +假设迟到一次罚款10元，第二次罚款20元，第三次40元，依次翻倍罚款，计算迟到第几次的时候总罚款金额会超过10000元,并显示总罚款金额。 + +``` +var fakuan = 10; +var sum = 10; +var i = 1; +do +{ + i++; + fakuan = fakuan*2; + sum = sum + fakuan +}while(sum < 10000); +alert("第" + i + "次罚款总金额超过10000,罚款总金额为:" + sum); +``` + +**（2）for循环** + +for循环打印1-10： + +``` +for(var i = 1;i<= 10;i++) +{ + document.write(i+"
"); +} +``` + +**使用for循环打印九九乘法表:** + +``` +for(var i = 1;i<=9;i++) +{ + for(var j = 1;j<=i;j++) + { + document.write(i + "*" + j + "=" + i*j); + if(i*j <=9) + document.write("   "); + else + document.write("  "); + } + document.write("
"); +} +``` + +**（3）break和continue** + +break和continue区别： + +【1】break:退出整个循环 + +【2】continue:退出本次循环，马上进入下一次循环 + +例： + +``` +for(var i = 1;i<=10;i++) +{ + if(i == 5) + break; + alert(i); +} +//备注：对话框弹出4次 +``` + +``` +for(var i = 1;i<=10;i++) +{ + if(i == 5) + continue; + alert(i); +} +//备注：对话框弹出9次，i=5的时候对话框不会弹出 +``` + +**1-100之间偶数相加，求加到几的时候和超过1000：** + +``` +var sum = 0; +for(var i=1;i<=100;i=i+2) +{ + sum = sum + i; + if(sum > 1000) + { + alert("加到" + i + "的时候，和超过1000，结果为：" + sum); + break; + } +} +``` + +**1-100之间偶数相加，能被7整除的数字不参加累加运算，求和：** + +``` +var sum = 0; +for(var i = 1;i <= 100;i=i+2) +{ + if(i%7 == 0) + continue; + sum = sum + i; +} +alert("结果为:" + sum); +``` + diff --git "a/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-10--\345\237\272\346\234\254\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\346\225\260\347\273\204.md" "b/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-10--\345\237\272\346\234\254\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\346\225\260\347\273\204.md" new file mode 100644 index 0000000..ebf423b --- /dev/null +++ "b/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-10--\345\237\272\346\234\254\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\346\225\260\347\273\204.md" @@ -0,0 +1,146 @@ +## 基本数据类型 + +#### 基本数据类型 + +##### Number - Integer,float + +##### Boolean + +##### Null + +##### Undefined + +##### Symbol + +##### String + +​ 1.**字符串转义** + +```js +\n:换行 +\t:Tab键 +\\:斜杠 +\':单引号 +\":双引号 +``` + +​ **2.字符串下标** + +![](https://gitee.com/snailclass/tuchuang/raw/master/img/string_indexes-2022-10-709:26:49.png) + +​ 第一个元素: string[0] 最后一个元素: string[string.length-1] + + + +​ **3.String常用方法** + +```javascript +let js = 'JavaScript' +//1)获取字符串的长度: js.length + +//2)将英文字母全转为大写: js.toUpperCase() +//2.1)将英文字母全转为小写: js.toLowerCase() + +//3)截取字符串:substr(startIndex,counts) startIndex:起始索引位置 counts:截取字符串的个数 +//3.1)截取字符串:substring(startIndex,endIndex) startIndex:起始索引位置 endIndex:截止索引位置(不包含) + +//4)拆分字符串: split() +var string = 'life is now'; + +//5)去除开头或者结尾的空格: trim() + +//6)查看是否字符串中是否包含includes() indexof() +``` + +## 数据类型转换 + +#### 1.将字符串转为整型/浮点型 + +- parseInt() /parseFloat() +- Number() +- Plus sign(+) + + + + + + + + + +## 引用类型 + +#### 数组(Array) + +##### 1.创建数组 + +```javascript +//1.1创建空数组 +//使用数组构造器 +const arr = Array() +const arr = [] + +//1.2 带元素数组 +const numbers = [0, 3.14, 9.81, 37, 98.6, 100]; +const fruits = ['banana', 'orange', 'mango', 'lemon'] +const arr = [ + 'Asabeneh', + 250, + true, + { country: 'Finland', city: 'Helsinki' }, + { skills: ['HTML', 'CSS', 'JS', 'React', 'Python'] } +] +//使用字符串的split方法创建数组 +let js = 'JavaScript' +const charsInJavaScript = js.split('') +``` + +##### 2.修改数组的元素 + +```javascript +const numbers = [1, 2, 3, 4, 5] +numbers[0] = 10 +numbers[1] = 20 +``` + +##### 3.数组中常用的方法 + +```javascript +//获取数组长度 length + + +//concat:将两个数组合并在一起 +const firstList = [1, 2, 3] +const secondList = [4, 5, 6] +const thirdList = firstList.concat(secondList) + +//indexof:查找数组的元素，返回-1表示不存在,与之相同的查找方法还有includes,lastindexof + +//toString():将数组转成字符串 + +//join():添加指定字符后转成字符串 转成json常用 + +//slice():表示切片，参数个数：0 1 2 返回一个数组对象 + +//splice(): 接收 0 2 多 个参数 表示移除，替换元素 + + +//数组的添加元素：push unshift +//数组的删除元素: shift pop + +//reverse() ：反转 +//sort() + +//forEach():数组为每个数组元素调用一次函数（回调函数）。 +//map() +//filter()：匹配符合条件的元素 +//reduce()： 汇总数据，返回是一个数据 +//every():检查所有数组值是否通过测试 +``` + +#### 二维数组 + +```javascript +const arrayOfArray = [[1, 2, 3], [1, 2, 3]] +``` + diff --git "a/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-11--\345\207\275\346\225\260.md" "b/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-11--\345\207\275\346\225\260.md" new file mode 100644 index 0000000..744de79 --- /dev/null +++ "b/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-11--\345\207\275\346\225\260.md" @@ -0,0 +1,233 @@ +# 函数 + +### 1.声明函数 + +```js +//声明 + 函数名（自定义）|参数--》形参 +function functionName() { + } +//调用 +functionName()--》实参 +``` + +//实际参数： 传入变量值，不传变量名 + +//形式参数： 接收变量值 + + + + + +### 2.函数类型 + +##### 1.无参无返回 + +```js +function functionName() { + let a = 2; + let b = 4; + let zo = a+b; + //zo = a*b.......加减乘除 + console.log(zo) + } +functionName() +``` + +##### 2.无参有返回 + +```js +function functionName() { + let a = 2; + let b = 4; + let zo = a+b; + //zo = a*b.......加减乘除 + return zo + } +console.log(functionName()) +``` + +##### 3.带参返回多个值 + +```js +function GetName(name) { + let name_arr = name.split('') + return name_arr +} +let [x,m,n] = GetName('叶小杰') //[叶, 小, 杰] 用数组接收 +console.log('姓:'+x + ' 名:'+m+n); + + +function GetName(name) { + let x = name[0]; + let b = name[1]+name[2]; + return '${x},${m}' //${}转义 +} +console.log(GetName('叶小杰')) +``` + +##### 4.带不确定个数参数 + +```js +//方法一 +function GetSum1() { + let sum = 0 + //遍历数组 for(var e of 数组 ) 带不确定个数参数进来为数组 + for(var e of arguments){ + sum += e + } + return sum +} + +console.log(GetSum1(1,2,3,4,5,6,7,8)); +//方法二 +//带不确定个参数 ...args:代表传入的是不确定个数的值 +function GetSum2(...args) { + let sum = 0 + //遍历数组 for(var e of 数组 ) + for(var e of args){ + sum += e + } + return sum +} +``` + + + +### 3.匿名函数（无方法名的函数） + +```js +//无参 +//声明 +//即使是函数类型但是需要一个值去接收 +const anonymousFun1 = function() { + console.log( + '这是一个匿名函数' ) +} +//调用 +console.log(anonymousFun1()) + +//有参 +//声明 +//即使是函数类型但是需要一个值去接收 +const anonymousFun1 = fun ction(a,b) { + return a+b +} +//调用 +console.log(anonymousFun1(1,2)) + + +``` + +```js +//表达式函数 +const square = function(n) { + return n * n +} +var mn = square(5) //有返回值可以定义变量接收 +console.log(mn); +``` + +### 4.箭头函数（也是匿名函数）（有返回值的几乎都可以用箭头函数） + +```js +//const FunctionName = (接收的参数) => (方法体) +//1.如果不带参数,接收参数需要写一个小括号(不能省略) +const arrowFunc = () => {console.log('这是一个匿名函数');} +//调用 +arrowFunc() + +//2.方法体：如果方法体有多条语句 +const arrowFunc1 = (n1,n2) => { + let result = n1 + n2; + return result +} +console.log('结果是:'+arrowFunc1(5,6)); + +//2.1如果方法体中只有一个返回语句 可以直接加减乘除 +const arrowFunc2 = (n1,n2) => n1+n2 + +console.log('Func2结果是:'+arrowFunc2(5,6)); + +``` + +###### 1.map使用匿名函数 + +```js +//map ： 都+2 +const arra = [1,2,9,5,6,7] +//原语句 +arra.map(function(item){ + return item+2 +}) +//新箭头函数语句 +const new_arra = arra.map((item) => item+2) +//调用 +console.log(arra); +console.log(new_arra); +``` + +###### 2.reduce方法 + +```js +//reduce(pre,cur) +//arra: 表示将要原数组 +//pre:表示上一次调用回调时的返回值，或者初始值init +//cur:表示当前正在处理的数组元素 +arra.reduce( + function(pre,cur){ + return (pre+cur)*2 + } +) +//新箭头函数语句 +var new_arra1 = arra.reduce( (pre,cur) => (pre+cur)*2 ) +console.log(new_arra1); +``` + +###### 3.filter + +```js +//filter（过滤器） +const new_arra2 = arra.filter( (item) => item%2==0 ) +console.log(new_arra2); +``` + +###### 4.接收多个参数 + +```js +var result = (...args) => { + let sum=0 + for(var e of args){ + sum+=e + } + return sum +} +console.log(result(1,2,3,4,5,6,7));//多个参数 +``` + +### 5.自带默认值函数 + +将默认值传递给形参，当调用函数时，如果不传递实参，则默认使用默认值. 声明函数与箭头函数都可以有一个或多个默认值. + +```js +//声明 +function functionName(param = value) { + //codes + } +//calling function +functionName()//如果无参数 ，则值为默认值 +functionName(arg)//如果有参数传入 则改变为functionName(param = 所改变的值) + +//试例 +function OutPut(name='小杰') { //此时小杰为默认值 + console.log('welcome'+name); +} +//不带参调用 +OutPut() // 此时打印 小杰 +//带参调用 +OutPut('周飘') // 此时打印 周飘 带参会把之前的默认值覆盖掉 +//默认值改成箭头函数 +const OutPut1 = (name='小杰') => {console.log('welcome: +OutPut1('钰锋') +``` + diff --git "a/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-12--\351\235\242\345\220\221\345\257\271\350\261\241.md" "b/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-12--\351\235\242\345\220\221\345\257\271\350\261\241.md" new file mode 100644 index 0000000..277e76d --- /dev/null +++ "b/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-12--\351\235\242\345\220\221\345\257\271\350\261\241.md" @@ -0,0 +1,80 @@ +# 面向对象 + +1.全局变量局部变量 + +~~~js +var str1 = "hello1"; //定义一个全局变量 + function a() { + var str2 = "hello2"; //定义一个局部变量 + str3 = "hello3"; //定义一个全局变量 + } + a() //结果：我是局部变量 + + console.log(str1); //结果：全局变量 + console.log(str3); //结果：我也是全局变量 + //console.log(str2); //局部变量，在函数外使用会报错 +``` +~~~ + +#### 对象 + +```js +设定（键值对） +var obj={ + name:'孙悟空', + age:18, + gender:'男', + address:'花果山' +} +对象中包含属性，为数组与字符串 + graduating : function(){ + //programmer + this.title = 'Programmer' , + this.isGraduated = true + }, + breakingup : function(){ + this.ex = this.bf, + this.bf = '' + }, + makenewboy:function(name){ + //先判断目前有没有男朋友 + if(this.bf.length === 0){ + this.bf = name + } + } +``` + +#### 构造函数（构造和覆盖）this的使用与意义 + +```js +构造函数 + function Person(name,age){ + //this: 指代当前的对象 + //var this = {} + this.name = name, + this.age = age + //return 123 //返回的值是基本数据类型 会自动忽略 + //return {} //如果返回的是对象，那么覆盖返回的this + //return this + } + var zj1 = new Person('张三',26) + var zp = new Person('里斯',26) + zp.gender = '女' +``` + +#### 增删改查 + +```js + //查 + // 通过 . 查询 或者 中括号的形式 + console.log(zj.age); + console.log(zj['qq number']); + + zj['qq number'] = '7952125' + zj.age = 26 + + //删 + delete zj['qq number'] + //可直接改 + zj.isMarried = false; +``` \ No newline at end of file diff --git "a/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-13--\350\247\243\346\236\204\347\254\224\350\256\260.md" "b/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-13--\350\247\243\346\236\204\347\254\224\350\256\260.md" new file mode 100644 index 0000000..d63da58 --- /dev/null +++ "b/46\350\265\226\346\235\260\346\236\227/\347\254\224\350\256\260/2022-10-13--\350\247\243\346\236\204\347\254\224\350\256\260.md" @@ -0,0 +1,50 @@ +## 对象解构 + +```js +var student = { + name: 'zj', + age: 26, + skill: { + Java: 2021, + C: 2022 + } +} +//let personName = student.name, perAge = student.age; +//1.如果需要另起名字 +//相当于把对象student里面属性的值直接赋给 自己定义的变量 +let { name: personName, age: personAge } = student +//2.如果不需要另起名字 也可直接使用 +let { name, age } = student +console.log(name, age); +``` + +#### 嵌套解构 + +```js +var student = { + name: 'zj', + age: 26, + skill: { + Java: 2021, + C: 2022 + } +} +//取Java掌握的年份 +//当属性里面有多个值的时候 需要再次嵌套一个{} +let { skill: { Java: getYear } } = student + console.log(getYear); +``` + +#### 拷贝 + +```js +//浅拷贝：拷贝过来的是地址(指针) +//arr与arr2的地址一致 无论是arr改变还是arr2改变 其两者都会改变 +const arr = [1,23,55,87,9]; +var arr2 = arr; +arr2[0] = 'java'; + +//深拷贝：将整个对象复制过来 +//相当于开辟一个新的空间 改变arr2 不会影响arr +``` + -- Gitee