JavaScript
1.script标签内写入代码
<script> //js代码 </script>
2.引入JS文件
<script src='js文件'></script>
语法规范
1.注释
// 单行注释 /* 多行注释 */
2.结束符
JavaScript中的语句要以分号 ( ; ) 为结束符.
JavaScript语法基础
变量声明
1.JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
2.声明变量使用 var + 变量名; 的格式来进行声明
var name = 'waller';
ps:变量名区分大小写,推荐使用驼峰体命名规则
注意:
ES6新增了 let 命令,用于声明变量,其用法类似 var ,区别:var 全局声明,let 局部声明
ES6新增了const 用来声明常量,一旦声明,其值就不能改变
const S = 3.14; S // 3.14 var S = 3; //报错,已经被声明为常量,不能修改
JavaScript 数据类型
拥有动态类型
var x; // 此时x是undefined var x = 1; // 此时x是数字 var x = "haha" // 此时x是字符串
一.数值(Number)
JavaScript不区分整形和浮点型,只有一种数值类型
var a = 10; var b = 3.14; typeof(a); "number" typeof(b); "number"
Not a Number 表示不是一个数字
parseInt('123');
123
parseInt('3.14');
3
parseInt('abc');
NaN
parseFloat('3.14');
3.14
二.字符串(string)
var res = 'hello world';
.length 长度
var c = 'hello'; c.length; 5
.trim 去除空白
var c = ' hello '; c.trim(); // 去除左右两侧 c.trimLeft(); // 去除左侧空白 c.trimRight(); //去除右侧空白
.charAt(n) 返回第n字符
var c = 'hello'; c.charAt(2); "l"
.concat() 拼接 推荐使用 + 号
var c = 'hello'; var w = 'world'; c.concat(w); "helloworld" var c = h + w; console.log(c) helloworld
.indexOf() 索引值
var c = 'hello'; c.indexOf('l'); 2
.substring() .slice() 切片
var c = 'hello world'; c.substring(0,7); "hello w" c.slice(0,7); "hello w" c.substring(0,-1); // 不能有负数 "" c.slice(0,-1); // 可以有负数 推荐使用 "hello worl"
.toUpperCase() 全大写
.toLowerCase() 全小写
var c = 'Hello World' c.toUpperCase(); "HELLO WORLD" c.toLowerCase(); "hello world"
.split() 分割
var res = 'a|b|c'; res.split('|'); // 按 '|' 切分成数组 (3) ["a", "b", "c"] res.split('|',2); // 第二个参数表示从切分的结果中拿出几个 (2) ["a", "b"] res.split('|',5); // 拿出的数量超了不报错,按最多显示 (3) ["a", "b", "c"]
补充:
ES6中引入了模板字符串。模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
${ } 格式化输出
var name = 'lilie'; var age = 18; var info = `he name is ${name} he age is ${age}`; info // "he name is lilie he age is 18" `普通字符串` "普通字符串"
注意：如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。
三.布尔值 (Booleam)
区别于Python，true和false都是小写。
var a = true; var b = false;
(空字符串)、0、null、undefined、NaN都是false。
null和undefined
-
null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
-
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined
null表示变量的值是空(null可以手动清空一个变量的值，使得该变量变为object类型，值为null)，undefined则表示只声明了变量，但还没有赋值。
var a = null; a null var x x undefined
四.数组
数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。
var l = [111, 222, 333, 444]; l // (4) [111, 222, 333, 444] console.log(l[2]); // 333
.length 数组长度
l.length;
4
.push() 追加元素
l.push(555); 5 l (5) [111, 222, 333, 444, 555]
.pop() 尾部删除元素
l.pop(); 555 l (4) [111, 222, 333, 444]
.unshift() 头部插入元素
l.unshift(000); 5 l (5) [0, 111, 222, 333, 444]
.shift() 头部删除元素
l.shift(); 0 l (4) [111, 222, 333, 444]
.shift() 切片
l.slice(0,2); (2) [111, 222] l.slice(-2); (2) [333, 444]
.reverse() 反转
l.reverse();
(4) [444, 333, 222, 111]
.join() 将数组元素连接成字符串
l.join('|');
"444|333|222|111"
/*
注意: python 中 列表内的元素数是字符串类型才可以拼接
js 中自动将整形转为了字符串类型
*/
.concat() 数组内插入数组
l.concat([11,22,33]);
(8) [111, 222, 333, 444, 555, 11, 22, 33]
.sort() 排序
l.sort();
(5) [111, 222, 333, 444, 555]
.splice() 切分
l.splice(0,2); (2) [111, 222] l.splice(0,2,777); // 第三个参数是在切分后的数组添加的元素 (2) [111, 222] l (4) [777, 333, 444, 555]
.forEach() 将数组的每个元素传递给回调函数
l.forEach(function(value, index, arr){ console.log(value, index, arr) }); 111 0 (4) [111, 222, 333, 444] 222 1 (4) [111, 222, 333, 444] 333 2 (4) [111, 222, 333, 444] 444 3 (4) [111, 222, 333, 444] /* 说明: value:当前元素,index:元素索引值, arr:元素所属数组 */
.map() 返回一个数组元素调用函数处理后的值的新数组
l.map(function(value, index, arr){ return value + 1 }); (4) [112, 223, 334, 445]
五.运算符
+ - * / % ++ -- var x = 10; undefined x++; x 11 var res1 = x++; // 先赋值再自增,将x赋值给res1,x在自增 res1 11 var res2 = ++x; // 先自增再赋值,x自增后再赋值给res2 res2 13
运算符
一.比较运算符
> >= < <= != == === !== 1 == “1” // true 弱等于 1 === "1" // false 强等于 //上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将 //数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误
二.逻辑运算符
&& || !
三.赋值运算符
= += -= *= /=
流程控制
if else判断
if (条件){ 代码块 } var a = 10; if (a > 5){ console.log("a > 5"); }else if (a < 5) { console.log("a < 5"); }else { console.log("a = 5"); }
switch
var x = 10; switch(x){ case 5: break console.log('haha') case 10: break console.log('heihei') } // 注意: switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
for 循环
for (条件){ 代码块 } var l = [111, 222, 333, 444]; for (let i=0;i<l.length;i++){ console.log(l[i]) } 111 222 333 444
while 循环
while (条件){ 代码块 } var x = 1; while (x < 5){ console.log(x) x++; } 1 2 3 4
三元运算
x = 条件 ? 值1:值2 // 条件成立x = 值1,不成立x = 值2 var a = 3; var b = 5; var c = a > b ? a:b; c 5
函数
函数定义
JavaScript中的函数和Python中的非常类似，只是定义方式有点区别。
区别1:JavaScript用function定义函数
区别2:JavaScript函数的传参个数可以不等于形参个数
function f(参数1,参数2...){ 代码块 return 值 }
无参函数
function f(){ console.log('hello world') } f() hello world
有参函数
function f(a,b){ console.log(arguments); console.log(a, b); } f(2, 5) Arguments(2) [2, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ] 2 5 // 说明:arguments可以获得到函数接收的所有参数(是个数组),可以根据arguments实现函数调用时参数的限制 function f(a,b){ if (arguments.length < 2){ console.log('参数过少') }else if (arguments.length > 2){ console.log('参数过多') }else{ console.log(a, b); } } f(1) 参数过少 f(1,2,3) 参数过多 f(1,2) 1 2
返回值 return
function f(a, b){ return a + b; } f(1,2) 3 // 1.不写写返回值,默认返回 undefined function f(a, b){ console.log(a,b) } var res = f(1,2) 1 2 res undefined // 2.有多个返回值时,只返回最后一个值,可以用数组的形式全部返回 function f(){ return 11,22,33; } f() 33 function f(){ return [11,22,33]; } f() (3) [11, 22, 33]
匿名函数
var s = function(a,b){ return a+b; } s(1,2) 3
立即执行函数
//书写立即执行的函数，首先先写两个括号()(),第一个()内是函数,第二个()内是参数 (function(a,b){ return a+b; })(1,2) 3
补充:
ES6中允许使用“箭头”（=>）定义函数。 var f = v => v; // 等同于 var f = function(v){ return v; }
如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分：
var f = () => 5; // 等同于 var f = function(){return 5}; var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2){ return num1 + num2; //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中 }
函数的全局变量和局部变量
局部变量：
在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
全局变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
变量生存周期：
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
作用域
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！
自定义对象
JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。
var d = {'name':'lilie','age':18}; typeof(d); "object" d.name "lilie" d['name'] "lilie" console.log(d.name); lilie console.log(d['age']); 18
new 关键字创建对象
var d = new Object; d {} d.name = 'lilie'; // d对象添加name属性 "lilie" d.age = 18; // d对象添加age属性 18 d['hobby'] = 'read'; // d对象添加hobby属性 "read" d {name: "lilie", age: 18, hobby: "read"}
for循环遍历对象,只能取到键
for(var i in d){ console.log(i,d[i]); } name lilie age 18 hobby read
json对象
// stirngify() 相当于python中的 dumps // parse() 相当于python中的 loads var str1 = '{"name": "Alex", "age": 18}'; var obj1 = {"name": "Alex", "age": 18}; // JSON字符串转换成对象 var obj = JSON.parse(str1); // 对象转换成JSON字符串 var str = JSON.stringify(obj1); obj {name: "Alex", age: 18} str "{"name":"Alex","age":18}"
正则 RegExp对象
// 定义正则表达式两种方式 var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}"); var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; // 正则校验数据 reg1.test('jason666') true reg2.test('jason666') true // 全局匹配 var s1 = 'egondsb dsb dsb'; s1.match(/s/) ["s", index: 5, input: "egondsb dsb dsb", groups: undefined] s1.match(/s/g) (3) ["s", "s", "s"] var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g reg2.test('egondsb'); true reg2.test('egondsb'); true reg2.lastIndex; 7 /*全局匹配时有一个lastIndex属性*/ // 校验是不穿参数 var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/ reg2.test(); // 不传默认是 undefined true reg2.test(undefined); true
其他
Math对象
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) 返回角的正切。
ES6 创建类
class Animal{ constructor(name, age){ this.name = name, this.age = age } func(){ console.log(this.name) } } var a = new Animal('熊大', 20) d.func(); 输出: 熊大
ES6 模块板字符串
var = 1; var = 2; var = str = `哈哈${a}呵呵${b}`; console.log(str); 输出: 哈哈1呵呵2
ES6 对象单体模式
var per ={ name:'熊大', age:20, fun(){ console.log(this); } } per.fun(); 输出: per对象 若这里的fun是箭头函数,输出的是window对象
