3.JavaScript
JavaScript介绍
JavaScript一种直译式j脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
在1995年时,由Netscape公司的Brinden Eice,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。
JavaScript引入方式
引用js文件
<script src="myscript.js"></script>
注释
// 单行注释 /* 多行注释 */
结束符
结束符用英文分号(;)
JavaScript语法基础
JavaScript的varr变量名
var name = "alex"; var age = 20;
注意:
JavaScript的变量名可以使用_,数字,字母,$符,不能以数字开头
变量名是区分大小写的
推荐使用驼峰式命名规则 如 userName
保留着不能用的变量名 如 class ,char,float
数值Number
var a = 12.34; var b = 20; var c = 123e5; // 12300000 var d = 123e-5; // 0.00123
NaN 表示不是数字(Not a Number)
parseInt("123")// 返回123 123 parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。 NaN parseFloat("123.456") // 返回123.456 123.456
字符串String
var a = "Hello"; var b = "World"; var c = a+b; console.log(c); //得到HelloWorld HelloWorld
常用方法
方法 | 说明 |
.length | 返回长度 |
.trim() | 移除空白 |
.trimLeft() | 移除左边的空白 |
.trimRight() | 移除右边的空白 |
.charAt(n) | 返回第n个字符 |
.concat(value, ...) | 拼接 |
.indexOf(substring, start) | 子序列位置 |
.substring(from, to) | 根据索引获取子序列 |
.slice(start, end) | 切片 |
.toLowerCase() | 小写 |
.toUpperCase() | 大写 |
.split(delimiter, limit) | 分割 |
var s3 = " xiaoqian 1234 "; s3 " xiaoqian 1234 " s3.length; //长度 15 s3.trim(); // 移除左右空白字符 "xiaoqian 1234" s3.trim().length; 13 s3.trimLeft(); //移除左边的字符 "xiaoqian 1234 " s3.trimRight(); //移除右边的字符 " xiaoqian 1234" s3.charAt(0); //返还第n个字符 " " s3.charAt(2); "i" s3.concat(1,2,3); //拼接 " xiaoqian 1234 123" s3.indexOf("xiao"); // 子序列位置 1 s3.substring(1,5); //根据索引获取子序列 "xiao" s3.slice(1,5);//切片 "xiao" s3.toLowerCase();//小写 " xiaoqian 1234 " s3.toUpperCase();//大写 " XIAOQIAN 1234 " s3.split(" ");//分割 (4) ["", "xiaoqian", "1234", ""] s3.split(" ",1);//取第1个 [""] s3.split(" ",3);//取前3个 (3) ["", "xiaoqian", "1234"] s3.split(" ",2); (2) ["", "xiaoqian"] s3.split(" ",4); (4) ["", "xiaoqian", "1234", ""]
slice和substring的区别
string.slice(start, stop)和string.substring(start, stop):
两者的相同点:
如果start等于end,返回空字符串
如果stop参数省略,则取到字符串末
如果某个参数超过string的长度,这个参数会被替换为string的长度
substirng()的特点:
如果 start > stop ,start和stop将被交换
如果参数是负数或者不是数字,将会被0替换
silce()的特点:
如果 start > stop 不会交换两者
如果start小于0,则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
s3.substring(2,-1); " x" s3.slice(2,-1); "iaoqian 1234"
布尔值Boolean
区别 python都是首字母大写
""(空字符串)、0、null、undefined、NaN都是false。
var a = true var b = false;
null和undefined
null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;
undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
对象Object
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
数组
作用:使用单独的变量命名来储存一系列的值。类似py列表
var a = ["123","ABC"]; console.log(a[1]); //输出ABC ABC
常用方法:
方法 | 说明 |
.length | 数组的大小 |
.push(ele) | 尾部追加元素 |
.pop() | 获取尾部的元素 |
.unshift(ele) | 头部插入元素 |
.shift() | 头部移除元素 |
.slice(start, end) | 切片 |
.reverse() | 反转 |
.join(seq) | 将数组元素连接成字符串 |
.concat(val, ...) | 连接数组 |
.sort() | 排序 |
var a1 = [1,2,3]; a1 (3) [1, 2, 3] a1[0]; 1 al[1] 2 a[1:2] VM1155:1 Uncaught SyntaxError: Unexpected token : a1.length;//数组的大小 3 a1.push("xiao");//数组的大小 4 a1 (4) [1, 2, 3, "xiao"] a1.pop();//移除尾部元素 "xiao" a1 (3) [1, 2, 3] a1.unshift(0);//头部插入元素 4 a1 (4) [0, 1, 2, 3] a1.shift();//头部移除元素 0 a1 (3) [1, 2, 3] a1.slice(1.2);//切片 (2) [2, 3] a1.slice(1,2); [2] a1.slice(1,-1); [2] a1.reverse();//反转 (3) [3, 2, 1] a1.join("+");//将数组元素连接成字符串 "3+2+1" a1.concat(1,2,3);//连接数组 (6) [3, 2, 1, 1, 2, 3] a1.concat([1,2,3]); (6) [3, 2, 1, 1, 2, 3] a1.concat([1,2,3],["a","b","c"]); (9) [3, 2, 1, 1, 2, 3, "a", "b", "c"] a1 (3) [3, 2, 1] a1.sort();//排序 (3) [1, 2, 3] a1 = [18,8,20,31]; (4) [18, 8, 20, 31] a1.sort(); (4) [18, 20, 31, 8]
sort()注意事项
如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。
如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。
function sortNumber(a,b){ return a - b }
遍历数组中的元素
var a = [10, 20, 30, 40]; for (var i=0;i<a.length;i++) { console.log(a[i]); } //输出 //10 //20 //30 //40
类型查询
typeof "abc" "string" typeof null; "object" typeof true; "boolean" typeof 123; "number"
typeof是一个一元运算符(就像++,--,!,- 等一元运算符),不是一个函数,也不是一个语句
对变量或值调用 typeof 运算符将返回下列值之一:
undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的
算数运算符
+ - * / % ++ --
比较运算符
> >= < <= != == === !==
注意
1 == "1" // ture 1 === "1" // false
逻辑运算符
&& || !
赋值运算符
= += -= *= /=
对象
var person = { name : "小钱", age : "18", sex : "男" }; person {name: "小钱", age: "18", sex: "男"} person.name; "小钱" person.age; "18" person.sex; "男"
流程控制
if-else
var a = 10; if (a > 5){ console.log("yes"); }else { console.log("no"); }
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"); }
switch
var day = new Date().getDay(); switch (day) { case 0: console.log("Sunday"); break; case 1: console.log("Monday"); break; default: console.log("...") }
注意
case句子后要加break语句,否则会继续执case后面的语句
for
for (var i=0;i<10;i++) { console.log(i); }
while
while(age<=18){ console.log("在等一年"); age++; }
三元运算
var a = 1; var b = 2; var c = a > b ? a : b
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var a = 1; var b = 2; var c = a > b ? a else b
函数
//函数定义 function foo(a,b){ console.log("a:",a); console.log("b:",b); return a + b; } var ret = foo(1,2); console.log("a+b=",ret); // 匿名函数 var func = function(a, b){ console.log("a",a); console.log("b",b); return a+b; }; func(1,2); //立即执行函数 (function(a,b){ console.log("立即执行函数"); console.log(a+b); })(1,2);
函数arguments参数
function func2(a,b){ console.log("总共有"+ arguments.length + "个参数"); var ret = 0; for(var i = 0; i<arguments.length;i++){ ret += arguments[i]; } return ret; } console.log(func2(1,2));
输出:
总共有2个参数 3
函数全局变量和局部变量
局部变量:
在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。
全局变量:
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
变量生存周期:
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
作用域
先在函数内部查找,找不到就到外层函数查找,逐步找到最外层
题目1
var city = "Changsha"; function f(){ var city = "Shanghai"; function inner(){ var city = "Shenzheng"; console.log(city); } inner(); } f();
输出:
Shenzheng
题目2
var city = "Cahngsha"; function Bar(){ console.log(city); } function f(){ var city = "Shanhai"; return Bar; } var ret = f(); ret();
输出:
Cahngsha
题目3
var city = "Changsha"; function f(){ var city = "Shanghai" function inner(){ console.log(city); } return inner; } var ret = f(); ret();
输出:
Shanghai
词法分析
JavaScript中在调用函数的那一瞬间,会先进行词法分析。
词法分析的过程:
当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面:
1:函数参数,如果有,则将此参数赋值给AO,且值为undefined。如果没有,则不做任何操作。
2:函数局部变量,如果AO上有同名的值,则不做任何操作。如果没有,则将此变量赋值给AO,并且值为undefined。
3:函数声明,如果AO上有,则会将AO上的对象覆盖。如果没有,则不做任何操作。
函数内部无论是使用参数还是使用局部变量都到AO上找。
题目4
var age = 20; function foo(){ console.log(age); var age = 22; console.log(age); } foo();
输出:
undefined
22
题目5
var age = 20; function foo(){ console.log(age); console.log("1============="); age = 22; console.log(age); console.log("2============="); function age(){ console.log("呵呵"); } console.log(age); console.log("3============="); } foo();
输出:
1=============
22
2=============
22
3=============
undefined
内置对象方法
数据类型
Number 数字对象
String 字符串对象
Boolean 布尔值对象
组合对象
Array 数组对象
Math 数学对象
Date 日期对象
高级对象
Object 自定义对象
Error 错误对象
Function 函数对象
RegExp 正则表达式对象
Global 全局对象
自定义对象
JavaScript的对象(Object)本质上是键值对的集合(Hash结构),但是只能用字符串作为键。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var person = {name: '小强', age: 38}; // 在JS的对象中,键(属性)默认不用加引号;并且自动把单引号转成双引号 console.log(person); // 单独取对象的属性 console.log("name:", person.name); console.log("age:", person.age); // 遍历对象的属性 for (var i in person){ console.log(i); console.log(person[i]); }
创建对象
var person=new Object(); // 创建一个person对象 person.name="Alex"; // person对象的name属性 person.age=18; // person对象的age属性
Date对象
//Date对象 var t1 = new Date(); console.log(t1); console.log(typeof d1); console.log(t1.toDateString());// 转成字符串格式的本地时间 console.log(typeof t1.toDateString()); var t2 = new Date("2018-10-29"); console.log(t2.toLocaleDateString());// 转成字符串格式的本地时间 console.log(t2.toUTCString());// 转成字符串格式的UTC时间 console.log(t2.getDate());//获取那一天 console.log(t2.getDay());//获取星期几 console.log(t2.getMonth());//获取月份 console.log(t2.getFullYear());//获取年 console.log(t2.getHours());//获取小时 console.log(t2.getMinutes());//获取分钟 console.log(t2.getSeconds());//获取秒 console.log(t2.getTime());//获取时间戳
JSON对象
//JSON对象 var s = '{"name":"xiaoqian","age":22}'; var ret = JSON.parse(s);// 把字符串转换成JS内部的对象 console.log(ret); console.log(typeof ret); var s1 = JSON.stringify(ret);// 把JS内部的对象转换成字符串 console.log(s1); console.log(typeof s1);
输出:
{name: "xiaoqian", age: 22}
object
{"name":"xiaoqian","age":22}
string
RegExp对象
var reg1 = new RegExp("^[a-zA-Z][a-zA-z0-9_]{5,11}$"); var regexpRet1 = reg1.test("xiaoqian"); console.log(regexpRet1);//true var regexpRet2 = reg1.test("1xiaoqiang"); console.log(regexpRet2);// false console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("xiaoqiang"));//true console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("1xiaoqiang"));// false // 坑1 (正则表达式中间一定不可以有空格) console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("xiaoqiang"));//true console.log(/^[a-zA-Z][a-zA-Z0-9_] {5,11}$/.test("xiaoqiang"));// false // 坑2 // test()不传值相当于传了一个undefined进去 // 然后test()就把这个undefined当成是"undefined"来判断 console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("undefined"));//true console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test(undefined));//true console.log(/^[0-9][a-zA-Z0-9_]{5,11}$/.test(undefined));// false console.log(/^[0-9][a-zA-Z0-9_]{5,11}$/.test("undefined"));// false // JS正则的两种模式 // 1. g 表示全局 // 2. i 忽略大小写 var ss = "xiaoqianA"; var s3 = ss.replace(/a/gi, "哈哈哈"); // 不是改变默认的字符串,而是生成了一个新的字符串 console.log(s3);//xi哈哈哈oqi哈哈哈n哈哈哈 // 坑3 // 当正则表达式使用了全局模式(g)的时候,并且你还让它去检测一个字符串,此时会引出来一个lastIndex // lastIndex会记住上一次匹配成功的位置,并把下一次要开始椒盐的位置记住 var r = /alex/g; console.log(r.test("alex")); // true console.log(r.lastIndex); // 4 console.log(r.test("alex")); // false console.log(r.lastIndex);//0 console.log(r.test("alex")); // true console.log(r.lastIndex);//4 console.log(r.test("alex")); // false
Math对象
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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) 返回角的正切。
详细:http://www.cnblogs.com/liwenzhou/p/8004649.html
好玩的代码,可修改数据
document.body.contentEditable=true