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) 返回角的正切。