核心知识点:
1.ES6/7标准的意思
2.JS的两种引入方式、两种注释方式(单行注释和多行注释)、变量的命名、语言规范(以分号结尾)
3.数字类型
a.parseInt()
b.parseFloat()
4.字符串类型
方法:length() trim() trimLeft() trimRight() concat() indexOf() charAt() substring() slice() split() tolowerCase() toupperCase()
5.数组
方法:length() concat() join() push() pop() unshift() shift() sort() reverse() slice()
6.布尔类型(true、false)
7.对象(类似python中的字典)
8.undefined和null的区别
9.运算符:算术运算符、比较运算符、逻辑运算符、赋值运算符
10.流程控制
a.if-else 如果-否则
b.if-else if-else 如果-或-否
c.witch多选一
d.for循环
e.while循环
f.三元运算符(表达式?值1:值2)
一、概论
1.JavaScript的历史
1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中),后将其改名ScriptEase(客户端执行的语言)。
Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator2.0产品中开发出一套livescript的脚本语言。Sun和Netscape共同完成,后改名叫Javascript。
微软随后模仿在其IE3.0的产品中搭载了一个Javascript的克隆版叫Jscript。
为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范,国际标准化组织及国际电工委员会(ISO/IEC)也采纳ECMAScript作为标准(ISO/IEC-16262)。从此Web浏览器就开始努力将ECMAScript作为JavaScript实现的基础,EcmaScript就是规范。
2.ECMAScript
尽管ECMAScript是以一个重要的标准,但它并不是JavaScript唯一部分,当然,也不是唯一被标准化的部分。实际上,一个完整的JavaScript实现是由一下3个不同部分组成的:
- 核心(ECMAScript)
- 文档对象模型(DOM)Document object model(整合js,css,html)
- 浏览器对象模型(BOM)Broswer object model(整合js和浏览器)
- Javascript在开发中绝大多数情况是基于对象的,也是面向对象的
简单的说,ECMAScript描述了以下内容:
- 语法
- 类型
- 语句
- 关键字
- 保留字
- 运算符
- 对象(封装、继承、多态)基于对象的语言使用对象
二、JavaScript的基础知识
1.JavaScript引入方式
一般来说JavaScript有两种引入方式:
(1)Script标签内写代码
<script> // 在这里写你的JS代码 </script
(2)引入额外的JS文件
<script src="myscript.js"></script>
2.JavaScript的注释方式
注释同样有两种方式,一种是单行注释,一种是多行注释。
// 这是单行注释
/*
这是
多行注释
*/
3.JavaScript的语言规范
JavaScript中的语句要以分号(;)为结束符。
4.JavaScript的变量规范
JavaScript的变量名可以使用_,数字,字母,$组成,不能以数字开头。
声明变量使用var 变量名;格式来进行声明。
#先声明变量然后赋值 var name; name = "kebi"; #直接赋值 var name2 = "maoxian";
注意:变量名是区分大小写的,推荐使用驼峰式命名规则。
三、JavaScript数据类型
JavaScript拥有动态类型
var user; //属于undefined,就没没有值 var name3 = "xiaoniao"; //字符串类型 var age = 18; //数字类型
1.数字类型
JavaScript不区分整形和浮点型,就只有一种数字类型。
var a = 12.34; var b = 20; var c = 123e5; // 12300000 var d = 123e-5; // 0.00123
常用方法:
parseInt("123") // 返回123 parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。 parseFloat("123.456") // 返回123.456
2.字符串
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(delimiter,limit) | 分割 |
//1.length //长度 var s = "kebi shaibi" s.length 11 //2.trim() //去空格 var s = " kebi shaibi " s.trim() "kebi shaibi" //3.trimLeft() //去左边空格 s.trimLeft() "kebi shaibi " //4.trimRight() //去右边空格 s.trimRight() " kebi shaibi" //5.charAt() //根据索引返回对应的元素 s2 "kebi shaibi" s2.length 11 s2.charAt(0) "k" s2.charAt(10) "i" //6.concat() //连接字符串 s2.concat("Ge") "kebi shaibiGe" //7.indexOf() //返回某个元素匹配的第一个的索引位置 s2 "kebi shaibi" s2.indexOf(" ") 4 s2.indexOf("i") 3 s2.indexOf("i",4) //可以指定开始匹配的位置 8 s2.indexOf("bi") 2 //8.substring s2.substring(2,4) //切片 "bi //9.slice s2.slice(2,4) "bi" s2.slice(-4,-1) "aib //slice和substring都可以用来切片,区别是substring不能使用负值 //10.toLowerCase() //返回小写 s3.toLowerCase() "kebi shuai ge ge //11.toUpperCase() //返回小写 s3.toUpperCase() "KEBI SHUAI GE GE" //12.split() //将一个字符串切割,返回列表类型 s3.split() ["kebi shuai ge ge"] s3.split(" ",1) ["kebi"] s3.split(" ",2) (2) ["kebi", "shuai"] s3.split(" ",8) (4) ["kebi", "shuai", "ge", "ge"]
3.布尔类型
与python不同的是,true和false都是小写。
var a = true; var b = false;
4.数组
var a = [123, "ABC"]; console.log(a[1]); // 输出"ABC"
数组常用的方法:
方法 | 说明 |
length() | 数组的大小 |
push() | 尾部追加元素 |
pop() | 获取尾部的元素 |
unshift() | 头部插入元素 |
shift() | 头部移除元素 |
slice() | 切片 |
reverse() | 反转 |
join() | 将数组元素连接成字符串 |
concat(val,...) | 连接数组 |
sort() | 排序 |
var a = [1,2,3,4]; //基本切片 a[0] 1 a[2] 3 var b = [12,34,"kebi"] b[2] "kebi" a (4) [1, 2, 3, 4] //获取长度 a.length 4 //追加一个元素 a.push(666) 5 a (5) [1, 2, 3, 4, 666] //删除一个元素 a.pop() 666 a (4) [1, 2, 3, 4] //头部插入一个元素 a.unshift(‘one‘) 5 a (5) ["one", 1, 2, 3, 4] //从头部删除一个元素 a.shift() "one" a (4) [1, 2, 3, 4] //切片 a.slice(0,2) (2) [1, 2] //反转 a.reverse() (4) [4, 3, 2, 1] //拼接 a.join() "4,3,2,1" a (4) [4, 3, 2, 1] b //将多个数组的元素放在一起 a.concat(b) (7) [4, 3, 2, 1, 12, 34, "kebi"] a (4) [4, 3, 2, 1] //排序 a.sort() (4) [1, 2, 3, 4]
遍历数组中的元素:
var a = [10, 20, 30, 40]; for (var i=0;i<a.length;i++) { console.log(i); }
5.对象
类似于python中的字段数据类型
var a = {"name":"kebi","age":25} a.name "kebi" a.age 25
遍历对象中的内容:
for (var i in a) { console.log(i,a[i]); } name kebi age 25
6.null和undefined
- undefined表示的是当声明的变量未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
- null表示之不存在
undefuned表示声明了变量,但是还没有赋值。null声明了变量并且变量时空值。
7.类型查询
typeof "abc" // "string" typeof null // "object" typeof true // "boolean" typeof 123 // "number"
typeof是一个一元运算符,不是一个函数,也不是一个语句。
四、运算符
1.算数运算符(+ - * / ++ --)
//加法 5+3 8 //减法 5-3 2 //乘法 5*3 15 //除法 5/3 1.6666666666666667 //取余 5%3 2
这里把++ -- 单独拿出来
var i = 1 i ++ //i++先取值,后运算,此次返回值是计算之前的结果 1 i //计算之后的结果 2 // ++i //先计算后取值,返回的就是计算后的结果 3 i 3 i-- //先取值在计算 3 i 2 --i //先计算再取值 1 i 1
2.比较运算符(> >= < <= != == === !==)
1 > 2 false 1 >= 2 false 1 < 2 true 1 <= 2 true 1 != 2 true 1 == 2 false 1 === 2 false 1 == "1" true 1 === "1" false 1 !== "1" true
注意:=== 和==的区别在于,==是比较值是否相同,===不仅要比较值还要比较类型。
3.逻辑运算符(&& || !)
4.赋值运算符(= += -= *= /=)
五、流程控制
1.if-else
if (a > 5) { console.log("yes"); }else { console.log("no"); }
yes
2.if-else if-else
var a = 10; if (a > 5){ console.log("a > 5"); }else if (a < 5) { console.log("a < 5"); }else { console.log("a = 5"); }
3.switch
var day = new Date().getDay(); switch (day) { case 0: console.log("Sunday"); break; case 1: console.log("Monday"); break; default: console.log("...") }
4.for
for (var i=0;i<10;i++) { console.log(i); }
5.while
var i = 0; while (i < 10) { console.log(i); i++; }
6.三元运算
var a = 1; var b = 2; var c = a > b ? a : b; c 2
六.函数
1.定义
Javascript中函数的定义和shell脚本中函数的定义非常类似
// 普通函数定义 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);
2.函数中的变量和作用域
全局变量:定义在函数外部,并且推荐使用var进行显示声明
局部变量:定义在函数内部,并且必须使用var进行显示声明
作用域:首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。
七、常用模块和方法
1.date
var d = new Date(); //getDate() 获取日 //getDay () 获取星期 //getMonth () 获取月(0-11) //getFullYear () 获取完整年份 //getYear () 获取年 //getHours () 获取小时 //getMinutes () 获取分钟 //getSeconds () 获取秒 //getMilliseconds () 获取毫秒 //getTime () 返回累计毫秒数(从1970/1/1午夜)
2.JSON
var str1 = ‘{"name": "Alex", "age": 18}‘; var obj1 = {"name": "Alex", "age": 18}; // JSON字符串转换成对象 var obj = JSON.parse(str1); // 对象转换成JSON字符串 var str = JSON.stringify(obj1);
3.RegExp
//RegExp对象 // 在表单验证时使用该对象验证用户填入的字符串是否符合规则. //创建正则对象方式1 参数1 正则表达式 参数2 验证模式 g global / i 忽略大小写. //参数2一般填写g就可以,也有“gi”. // 用户名 首字母必须是英文, 除了第一位其他只能是英文数字和_ . 长度最短不能少于6位 最长不能超过12位 //----------------------------创建方式1 /* var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g"); // //验证字符串 var str = "bc123"; alert(reg1.test(str));// true //----------------------------创建方式2 /填写正则表达式/匹配模式; var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g; alert(reg2.test(str));// true */ //-------------------------------正则对象的方法------------------- //test方法 ==> 测试一个字符串是否复合 正则规则. 返回值是true 和false. //-------------------------String 中与正则结合的4个方法------------------. // macth search split replace var str = "hello world"; //alert(str.match(/o/g)); //查找字符串中 复合正则的 内容. //alert(str.search(/h/g));// 0 查找字符串中符合正则表达式的内容位置 //alert(str.split(/o/g)); // 按照正则表达式对字符串进行切割. 返回数组; alert(str.replace(/o/g, "s")); // hells wsrld 对字符串按照正则进行替换.
4.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) 返回角的正切。