序言:
1、JS和python一样,是秉持“一切皆对象原则”的相面对象的语言。
2、JS和python一样,是动态型语言:一个变量名开始被赋值某数据类型后,后面可以动态更改,而非动态型语言,变量名初次赋值后类型则不可再更改。
一、数值类型---number:
1、在JS中,整数和小数统一归为number类型:
var a = 1; typeof a; // ===> "number" var b = 1.1; typeof b; // ===> "number"
2、类型转换:整数和小数有所区别。
var a = '1'; parseInt(a); // ===> 1 var b = '1.1'; parseFloat(b); // ===> 1.1
3、类型转换只匹配开头:只要开头捕捉到整数或者小数就能完成转换,并且只截取捕捉到的开头部分。
var a = '1aaa'; parseInt(a); // ===> 1 var b = '1.1'; parseInt(a); // ===> 1 var c = 1.1; parseInt(c); // ===> 1 var d = '1.1aaa'; parseFloat(d); // ===> 1.1 var e = 'a1'; parseInt(e); // ===> NaN // NaN 代表这是一个无法转换成数值类型的字符串类型 var f = 'a1.1'; parseFloat(f); // ===> NaN
4、自加运算:
var a = 1; var x = a++; // 先赋值再自加1 x; // ===> 1 a; // ===> 2 var b = 1; var y = ++b; // 先自加1再赋值 y; // ===> 2 b; // ===> 2
5、比较运算:
var x = 1; var y = '1'; x == y; // 软等式,字符串和数值比较时会自动转换 // ===> true x != y; // ===> false x === y; // 硬等式,不会自动转换 // ===> false x !== y; // ===> true
6、赋值运算:=,+=,-=,*=,之类的,同python
二、字符串类型---string:
1、与python一样,单引号和双引号都可以:
var a = 'aaa'; typeof(a); // ===> "string" var b = "aaa"; typeof(b); // ===> "string"
2、模板字符串:可以多行书写,并且可以格式化字符串。
var a = ` aaa bbb ccc `; typeof(a); // ===> "string" var name = 'tom'; var age = 18; var introduce = `he name is ${name} and age is ${age}`; typeof introduce; // ===> "string" introduce; // ===> "he name is tom and age is 18"
3、字符串拼接:JS中推荐直接用+号。
var a = 'aaa'; var b = '111'; var c = a + b; typeof c; // ===> "string" c; // ===> "aaa111"
三、字符串类型的常用方法:
1、获取字符串的长度属性:
var a = 'abcdef'; var l = a.length; l; // ===> 6
2、获取移除结果:
var a = ' abc '; var x = a.trim(); // 获取字符串移除两侧空白后的结果 x; // ===> "abc" var y = a.trimLeft(); // 获取字符串只移除左侧空白后的结果 y; // ===> "abc " var z = a.trimRight(); // 获取字符串只移除右侧空白后的结果 z; // ===> " abc" // 只能移除空白,不可以指定移除符
3、按索引获取字符:
var a = 'abcdef'; var x = a.charAt(3); x; // ===> "d"
var y = a[3]; // 也可以直接按索引取值,不支持负索引号 y; // ===> "d"
4、获取某个字符在字符串中的位置:
var a = 'abcdef'; var n = a.indexOf('d'); n; // ===> 3 var n2 = a.indexOf('de'); n2; // ===> 3 // 即使用多个字符去匹配,也只以首个字符为准
5、截取字符串中的部分字符:
var a = 'abcdef'; var x = a.substring(1,5); // 1号索引开始,4号索引结束 x; // ===> "bcde" var y = a.slice(1,5); // 与substring效果一致 y; // ===> "bcde" var z = a.slice(2,-2); // 2号索引开始,-3号索引结束,而string无法用负号索引 z; // ===> "cd"
6、获取转大小后的结果:
var a = 'aBcDe'; var x = a.toLowerCase(); x; // ===> "abcde" var y = a.toUpperCase(); y; // ===> "ABCDE"
7、以某个字符为隔断,对字符串进行分组,获取分组后的数组:
var a = 'aaa+bbb+ccc+ddd+eee+fff'; var x = a.split('+'); x; // ==> (6) ["aaa", "bbb", "ccc", "ddd", "eee", "fff"] var y = a.split('+', 3); // 可以指定只获取分组后的前几个元素组成的数组 y; // ===> (3) ["aaa", "bbb", "ccc"]
8、获取其他字符串拼接进来后组成的新字符串:
var a = 'adc'; var b = 'def'; var x = a.concat(b); x; // ===> "adcdef" var c = 111; // 若用于拼接的不是字符串类型,会自动转成字符串类型再拼接,用+号的方式同理 var y = a.concat(c); y; // ===> "adc111"
四、布尔类型---boolean:
1、python中True/False ===> JS中true/false
var a = (2 > 1); a; // ===> true typeof a; // ===> "boolean" var b = (2 < 1); b; // ===> false typeof b; // ===> "boolean"
2、隐式布尔值:空数据,0,null,underfined,NaN的隐式布尔值是false,其余的都是true
3、null与underfined:
①null代表值为空:一般用于新建一个空数据,或者清空一个非空数据。
var a = null; var b = 'abc'; var b = null;
②undefined:
a:定义了一个变量,但是没有赋值。
var a; a; // ===> undefined
b:没有定义返回值的函数默认的返回值也是undefined
4、逻辑运算:&&,||,!---与,或,非,适用短路原则。
var a = 1; var b = 2; var c = 0; a && b; // ===> 2 c && a; // ===> 0 a || b; // ===> 1 c || a; // ===> 1 !a; // ===> false !c; // ===> true
五、数组:类似于python中的列表。
var l = [1, 1.1, 'aaa', true]; typeof l; // ===> "object" // JS中,数组以及其他一些类型统属于object类型 l[2]; // 按索引取值,不支持负索引号 // ===> "aaa" var ll = [l, 'bbb']; // 可以数组中嵌套数组 ll; // ===> (2) [Array(4), "bbb"] typeof ll; // ===> "object"
六、数组的常用方法:
1、数组的长度属性:
var a = [1, 2, 3]; var l = a.length; l; // ===> 3
2、尾部添加元素:
var a = [1, 2, 3]; var b = 'aaa'; a.push(b); a; // ===> (4) [1, 2, 3, "aaa"]
3、移出尾部元素:
var a = [1, 2, 3]; var x = a.pop(); x; // ===> 3 a; // ===> (2) [1, 2]
4、头部添加元素:
var a = [1, 2, 3]; var b = 'aaa'; a.unshift(b); a; // ===> (4) ["aaa", 1, 2, 3]
5、移出头部元素:
var a = [1, 2, 3]; var x = a.shift(); x; // ===> 1 a; // ===> (2) [2, 3]
6、截取数组的部分元素组成新数组:机理类似于字符串的方法。
var a = [1, 2, 3, 4, 5, 6]; var x = a.slice(1,5); x; // ===> (4) [2, 3, 4, 5] var y = a.slice(2,-2); y; // ===> (2) [3, 4]
7、获取反序数组:
var a = [2, 3, 1]; var x = a.reverse(); x; // ===> (3) [1, 3, 2]
8、将指定字符串插入数组每个元素之间,获取组成的字符串:
var a = ['a', 123, 'b']; // 数值会被转化为字符串处理 var x = a.join('+'); // 此处语法与python正好相反---'+'.join(a) x; // ===> "a+123+b"
9、将其他数组加入尾部,获取组合数组:
var a = [1, 2, 3]; var b = ['aaa', 'bbb', 'ccc']; var x = a.concat(b); x; // ===> (6) [1, 2, 3, "aaa", "bbb", "ccc"]
10、排序数组:
var a = [2, 3, 1]; a.sort(); a; // ===> (3) [1, 2, 3]
11、forEach遍历:分别依次取出数组中每个元素的值/索引/源数组放入函数中执行,有,只拿值,拿值/索引,拿值/索引/源数组,这三种用法。
var a = ['aaa', 'bbb', 'ccc'];
a.forEach(function(value){console.log(value)}); // ==> aaa bbb ccc a.forEach(function(value, index){console.log(value, index)}); // ===> aaa 0 bbb 1 ccc 2 a.forEach(function(value, index, arr){console.log(value, index, arr)}); // ===> aaa 0 (3) ["aaa", "bbb", "ccc"] bbb 1 (3) ["aaa", "bbb", "ccc"] ccc 2 (3) ["aaa", "bbb", "ccc"]
12、map遍历:取出数组每个元素放入函数中执行,将所有返回值组成新数组。
var a = ['aaa', 'bbb', 'ccc']; var x = a.map(function(value){return value + 'sss'}); x; // ===> (3) ["aaasss", "bbbsss", "cccsss"]
13、移花接木:
var a = [1, 2, 3, 4, 5, 6]; var x = a.splice(1, 4); // 移出数组某部分元素,这里是1号索引到4号索引 x; // ===> (4) [2, 3, 4, 5] a; // ===> (2) [1, 6] var b = [1, 2, 3, 4, 5, 6]; var c = 'aaa'; var y = b.splice(1, 4, c); // 移出数组某部分元素,并在移出的位置补上元素 y; // ===> (4) [2, 3, 4, 5] b; // ===> (3) [1, "aaa", 6]
七、流程控制:
1、if判断:
var a = 15; if (a < 10){ console.log('触发事件1') } else if (a < 20){ console.log('触发事件2') } else { console.log('触发事件3') }; // ===> 触发事件2
2、switch选择:预先将条件与执行代码配对。
var a = 2; switch(a){ case(1): console.log('触发事件1') break; // 若不加break,则满足条件后会继续执行后续代码 case(2): console.log('触发事件2') break; case(3): console.log('触发事件3') break; default: console.log('所有预备条件都未满足,则触发本事件') }; // ===> 触发事件2
3、for循环:
for(var n = 1; n < 4; n++){ console.log(n) }; // ===> 1 2 3
4、while循环:
var a = 1; while (a < 4){ console.log(a) a++ }; // ===> 1 2 3
5、三元表达式:
var res1 = 2 > 1?'真聪明':'继续努力'; res1; "真聪明" var res2 = 1 === 2?'真聪明':'继续努力'; res2; "继续努力"
八、函数
1、基本格式:function 函数名(形参1,形参2,...(可无参)){函数体代码}
2、JS之奇:
①实参多传不会报错,多余的实参无效。
②实参少了也不会报错,未传值的形参等于传了undefined
3、函数体内arguments数据:用于收取函数收到的所有参数。
function ShowInfo(name, age){ var info = `my name is ${name} and my age is ${age}`; console.log(arguments); console.log(info) }; ShowInfo('tom', 18); // ===> Arguments(2) ["tom", 18, callee: ƒ, Symbol(Symbol.iterator): ƒ] // ===> my name is tom and my age is 18
4、也可以用关键字return设置返回值。
function func1(a, b, c){ return a, b, c }; var res1 = func1('111', '222', '333'); res1; // ===> "333" // 无法返回多个值,若声明多个,只会返回最后一个
5、匿名函数:不给函数起名,若要使用该函数,需要用一个变量名接收一下。
var func = function(){ console.log('a u ok?') }; func(); // ===> a u ok?
6、箭头函数:var 函数名 = 形参 => 返回值表达式。
var func = (a, b) => a*b; var res = func(3, 5); res; // ===> 15
7、名称空间作用域:与python查找顺序一致---由内而外。
九、自定义对象:可以看成python中的字典,比字典使用更方便。
1、创建自定义对象的两种方式:
var a = {}; a; // ===> {} typeof a; // ===> "object" var b = new Object(); b; // ===> {} typeof b; // ===> "object"
2、自定义对象添加元素和查找元素的方式:
var a = {}; a['name'] = 'tom'; a.age = 18; a; // ===> {name: "tom", age: 18} a['name']; // ===> "tom" a.age; // ===> 18
十、日期对象
1、创建日期对象的三种方式:
var a = new Date(); a; // ===> Mon May 18 2020 13:35:12 GMT+0800 (中国标准时间) // 获取当前时间,初始格式 a.toLocaleString(); // ===> "2020/5/18 下午1:35:12" // 转化为易查看格式 var b = new Date('1998/3/3 12:34:56'); b; // ===> Tue Mar 03 1998 12:34:56 GMT+0800 (中国标准时间) b.toLocaleString(); // ===> "1998/3/3 下午12:34:56" var c = new Date(2008, 10, 15, 12, 34, 56); // 此法创建日期输入的月份比实际小1 c; // ===> Sat Nov 15 2008 12:34:56 GMT+0800 (中国标准时间) c.toLocaleString(); // ===> "2008/11/15 下午12:34:56"
2、时间对象的常用方法:
var a = new Date(); a.toLocaleString(); // ===> "2020/5/18 下午1:45:22" a.getDate(); // 日期号 // ===> 18 a.getDay(); // 星期号 // ===> 1 a.getMonth(); // 月份-1 // ===> 4 a.getFullYear(); // 年号 // ===> 2020 a.getHours(); // 小时 // ===> 13 a.getMinutes(); // 分钟 // ===> 45 a.getSeconds(); // 秒数 // ===> 22 a.getMilliseconds(); // 毫秒 // ===> 299 a.getTime(); // 时间戳 // ===> 1589780722299
十一、JSON对象:
var a = {'name':'tom', 'age':18}; var b = JSON.stringify(a); // 序列化 b; // ===> "{"name":"tom","age":18}" typeof b; // ===> "string" var c = JSON.parse(b); // 反序列 c; // ===> {name: "tom", age: 18}
十二、正则对象
1、创建正则对象的两种方式:
var a = new RegExp('^[a-zA-Z][a-zA-Z0-9]{1,3}'); a; // ===> /^[a-zA-Z][a-zA-Z0-9]{1,3}/ var b = /^[a-zA-Z][a-zA-Z0-9]{1,3}/; b; // ===> /^[a-zA-Z][a-zA-Z0-9]{1,3}/
2、正则对象的常用方法
var a = /^[a-zA-Z][a-zA-Z0-9]{1,3}/; a.test('a123'); // ===> true
3、正则对象的几个注意点:
①全局匹配模式下有一个lastIndex属性,会导致多次匹配结果不同。
②匹配内容为空的时候,会把“undefined”作为内容匹配。
十三、数学对象
abs(x) 返回数的绝对值。 exp(x) 返回 e 的指数。 floor(x) 对数进行下舍入。 log(x) 返回数的自然对数(底为e)。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次幂。 random() 返回 0 ~ 1 之间的随机数。 round(x) 把数四舍五入为最接近的整数。 sin(x) 返回数的正弦。 sqrt(x) 返回数的平方根。 tan(x) 返回角的正切。