python 之 前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数）
11.4 JavaScript
11.41 变量
1、声明变量的语法
// 1. 先声明后定义 var name; // 声明变量时无需指定类型，变量name可以接受任意类型 name= "egon"; // 2. 声明立刻定义 var age = 18;
2、变量名命名规范
1、由字母、数字、下划线、$ 组成,但是不能数字开头，也不能纯数字
2、严格区分大小写
3、不能包含关键字和保留字（以后升级版本要用的关键字）。
如：
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
4、推荐驼峰命名法：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母写
5、匈牙利命名：就是根据数据类型单词的的首字符作为前缀
3、ES6中let
ES6之前js没有块级作用域，ES6新增了let命令，用于声明变量（声明的变量属于块级作用域），流程控制语句的{}就是块级作用域。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令
for(let i=1;i<=5;i++){ console.log(i); } //1 2 3 4 5
4、常量
ES6新增const用来声明常量。一旦声明，其值就不能改变。
const PI = 3.1415926; PI=3 //TypeError: "PI" is read-only
11.42 数据类型
11.421 数值(Number)
JavaScript不区分整型和浮点型，就只有一种数字类型，即number
var x = 3; var y = 3.1; var z = 13e5; var m = 13e-5; var n = NaN; // typeof n结果"number" //四舍五入 var num=1.3456 num.toFixed(2) // "1.35" //字符串类型转成数字 parseInt("123") // 返回123 parseInt("ABC") // 返回NaN NaN属性是代表非数字值的特殊值,该属性用于指示某个值不是数字。 console.log(parseInt("18林海峰")); //18 带有自动净化的功能；只保留字符串最开头的数字，后面的中文自动消失 console.log(parseInt("林海峰18")); // NaN 只去末尾的中文，不会去开头的 parseInt("123.456") // 返回123 parseFloat("123.456") // 返回123.456 字符串中的数字转浮点 var a = parseInt("1.3") + parseInt("2.6"); //a=3 自动带有截断小数的功能：取整，不四舍五入 var a = parseFloat("1.3") + parseFloat("2.6"); //a=3.9 //数字类型转成字符串 var x=10; var y='20'; var z=x+y; // z='1020' typeof z; //String var m=123; var n=String(m)//'123' var a=123; var b=a.toString()//'123'
11.422 字符串(String)
var a = "Hello"; var b = "world"; var c = a + b; console.log(c); // 得到Helloworld
常用方法：
| 方法 | 说明 |
|---|---|
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value, ...) | 拼接,拼接字符串通常使用“+”号 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根据索引获取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(',', 2) | 根据逗号分割，但只显示前两个 |
substirng()与silce()的区别：
substirng()的特点： 如果 start > stop ，start和stop将被交换 如果参数是负数或者不是数字，将会被0替换 silce()的特点： 如果 start > stop 不会交换两者 如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符) 如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
补充：
ES6中引入了模板字符串：模板字符串（template string）是增强版的字符串，用反引号（`）标识，它的用途为
1、完全可以当做普通字符串使用 var msg = `my name is egon` 2、也可以用来定义多行字符串 var info = ` name:egon age:18 sex:male ` 3、并且可以在字符串中嵌入变量 var name = "egon"; var age = 18; var msg = `my name is ${name}, my age is ${age}`; // "my name is egon, my age is 18"
注意：
如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义
11.423 布尔值
var a = true; var b = false; //布尔值为false的数据类型 Boolean('') Boolean(0) Boolean(null) Boolean(undefined) Boolean(NaN) //其余数据类型的布尔值均为true Boolean([]) Boolean(123)
null 和 undefined :
null:表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null; undefined:表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。 null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。
11.43 内置对象
11.431 数组对象Array
数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。
var x = ["egon", "hello"]; console.log(x[1]); // 输出"hello"
常用方法：
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 删除尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val, ...) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice(1,2,"新的值") | 删除元素，并向数组添加新元素。 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
提供比较函数进行排序，该函数应该具有两个参数 a 和 b，接收传入的a和b，执行函数体代码，然后返回一个值用于说明a和b的大小
返回值 < 0 ：代表a小于b
返回值 =0 : 代表a等于b
返回值 > 0 ：代表a大于b
function sortNumber(a,b){ return a - b } var arr = [123,9,1211,11] arr.sort(sortNumber) //[9, 11, 123, 1211]
遍历数组中的元素：
var arr = [11, 22, 33, 44]; for (var i=0;i<arr.length;i++) { console.log(arr[i]); } //11 22 33 44
forEach() :
语法：forEach( function ( 当前元素, 当前元素索引, 当前元素所属数组arr), thisValue)
var arr=['aa','bb','cc','dd','ee'] arr.forEach(function(v,i,arr){ console.log(v,i,arr); console.log(this[0]); },"hello") //aa 0 ["aa", "bb", "cc", "dd", "ee"] h //bb 1 ["aa", "bb", "cc", "dd", "ee"] h //cc 2 ["aa", "bb", "cc", "dd", "ee"] h //dd 3 ["aa", "bb", "cc", "dd", "ee"] h //ee 4 ["aa", "bb", "cc", "dd", "ee"] h
splice() :
语法：splice ( 起始元素索引 , 删除的个数, 添加的新元素)
var arr=['aa','bb','cc','dd','ee'] arr.splice(1,3,'xxxx') //删除‘bb’，‘cc’，’dd‘这三个值，然后插入’xxxx‘ arr //["aa", "xxxx", "ee"]
map() ：
语法：map(function ( 当前元素, 当前元素索引, 当前元素所属数组arr), thisValue)
//字符串反转 var str = '12345'; Array.prototype.map.call(str, function(x) { //同时利用了call()方法 return x; }).reverse().join(''); // "54321"
11.432 Date日期对象
创建日期对象只有构造函数一种方式,使用new关键字
//方法1：不指定参数 var d1 = new Date(); console.log(d1.toLocaleString()); // 2020/8/9 下午8:24:06 //方法2：参数为日期字符串 var d2 = new Date("2018/01/27 11:12:13"); console.log(d2.toLocaleString()); // 2018/1/27 上午11:12:13 var d3 = new Date("01/27/18 11:12:13"); // 月/日/年 时分秒 console.log(d3.toLocaleString()); // 2018/1/27 上午11:12:13 //方法3：参数为毫秒数 var d4 = new Date(7000); console.log(d4.toLocaleString()); // 1970/1/1 上午8:00:07 console.log(d4.toUTCString()); // Thu, 01 Jan 1970 00:00:07 GMT //方法4：参数为：年，月，日，时，分，秒，毫秒 var d5 = new Date(2018,1,27,11,12,13,700); console.log(d5.toLocaleString()); //毫秒并不直接显示 // 2018/2/27 上午11:12:13
常用方法:
| 方法 | 含义 |
|---|---|
| getDate() | 根据本地时间返回指定日期对象的月份中的第几天（1-31） |
| getMonth() | 根据本地时间返回指定日期对象的月份（0-11） |
| getFullYear() | 根据本地时间返回指定日期对象的年份（四位数年份时返回四位数字） |
| getDay() | 根据本地时间返回指定日期对象的星期中的第几天（0-6） |
| getHours() | 根据本地时间返回指定日期对象的小时（0-23） |
| getMinutes() | 根据本地时间返回指定日期对象的分钟（0-59） |
| getSeconds() | 根据本地时间返回指定日期对象的秒数（0-59） |
| getMilliseconds() | 根据本地时间返回指定日期对象的获取毫秒 |
| getTime() | 返回累计毫秒数(从1970/1/1午夜) |
编写代码，将当前日期按“2017-12-27 11:11 星期三”格式输出:
const WEEKMAP = { 0: "星期日", 1: "星期一", 2: "星期二", 3: "星期三", 4: "星期四", 5: "星期五", 6: "星期六", }; function showTime() { var d1 = new Date(); var year = d1.getFullYear(); var month = d1.getMonth() + 1; var day = d1.getDate(); var hour = d1.getHours(); var minute = d1.getMinutes() < 10 ? "0"+d1.getMinutes() :d1.getMinutes(); var week = WEEKMAP[d1.getDay()]; // 0~6的星期 var dateStr = ` ${year}-${month}-${day} ${hour}:${minute} ${week} `; console.log(dateStr) } showTime(); // 2020-8-9 20:37 星期五
11.433 Math对象
| 方法 | 含义 |
|---|---|
| Math.floor() | 向下取整,如5.1取整为5 |
| Math.ceil() | 向上取整,如5.1取整为6 |
| Math.max(a,b) | 求a和b中的最大值 |
| Math.min(a,b) | 求a和b中的最小值 |
| Math.random() | 随机数,默认0-1之间的随机数,若想求min~max之间的数，公式为：min+Math.random()*(max-min) |
11.434 JSON对象
// 对象转成JSON字符串 var obj2={"name":"egon","age":18}; str2=JSON.stringify(obj2); // "{"name":"egon","age":18}" // JSON格式的字符串转成对象 var str1='{"name":"egon","age":18}'; var obj1=JSON.parse(str1); console.log(obj1.name); // 'egon' console.log(obj1["name"]); // 'egon'
11.435 RegExp对象
1. 创建正则对象的方式1 参数1 正则表达式 参数2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一个匹配后停止)和i(忽略大小写) var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); // 匹配用户名只能是英文字母、数字和_ reg1.test("egon_123") // true //首字母必须是英文字母,长度最短不能少于6位 最长不能超过12位。 注意：正则放到引号内，{}内的逗号后面不要加空格 2. 创建正则对象的方式2 var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; // 不要加引号 reg2.test("egon_123") // true 3. String对象与正则结合的4个方法 var s1="hello world"; s1.match(/l/g) // 符合正则的内容["l", "l", "l"] s1.search(/h/g) // 符合正则的内容的第一个索引0 s1.split(/ /) // ["hello", "world"]，默认全部切割 s1.replace(/l/g,'L') // "heLLo worLd" 4. 匹配模式g与i var s2="name:Egon age:18" s2.replace(/e/,"赢") // "nam赢:Egon age:18" s2.replace(/e/g,"赢") // "nam赢:Egon ag赢:18" s2.replace(/e/gi,"赢") //"nam赢:赢gon ag赢:18"
5.注意1：
1、如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。 2、该属性值默认为0，所以第一次仍然是从字符串的开头查找。 3、当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。 4、当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。 5、因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。 6、如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。 var reg3 = /egon/g; reg3.lastIndex 0 reg3.test("egon") // true，匹配成功 true reg3.lastIndex // 匹配成功reg3.lasIndex=4 4 reg3.test("egon") // 从4的位置开始匹配，本次匹配失败 false reg3.lastIndex // 匹配失败，lastIndex归为0 0 reg3.test("egon") // 再次匹配成功 true
6.注意2：
当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test("undefined"), 且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true
11.44 运算符
//算数运算符: + - * / % ++ -- //比较运算符: > >= < <= != == === !== //逻辑运算符 && || ! //赋值运算符 = += -= *= /=
11.45 流程控制
if...else :
var age=18; if(age > 18){ console.log('too old'); } else if(age == 18){ console.log('花姑娘,吆西'); } else { console.log('too young'); } // 花姑娘,吆西
switch :
switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句
var day = new Date().getDay(); switch (day) { case 0: console.log("星期天，出去浪"); break; case 6: console.log("星期六，也出去浪"); break; default: console.log("工作日，正常上班") } //工作日，正常上班
while:
let i=0; undefined while (i<=3){ console.log(i); i++; }
三元运算:
var x=1; var y=2; var z=x>y?x:y // 2
11.46 函数
1、函数的定义与调用（与python类同）
// 无参函数 function f1() { console.log("Hello world!"); }; f1(); // 有参数函数 function f2(a, b) { console.log(arguments); // 内置的arguments对象 console.log(arguments.length); console.log(arguments[0],arguments[1]); console.log(a, b); }; f2(10,20); // 带返回值的函数 function sum(a, b){ return a + b; } sum(1, 2); // 匿名函数 var sum = function(a, b){ return a + b; } sum(1, 2); // 立即执行函数 (function(a, b){ return a + b; })(1, 2);
注意：
函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回
