THU.JavaScript
JavaScript语言基础
变量声明
-
JavaScript的变量名可以使用 _,数字,字母,$组成,不能以数字开头
-
声明变量使用 var,let 变量名 ; 的格式来进行声明
注意
1.变量名是区分大小写的。
2.推荐使用驼峰式命名规则。
3.保留字不能用做变量名。
补充:
1.ES6 新增了 let 命令,用于声明变量。其用法类似于var,但是所声明的变量只在let命令所在的代码块内有效。例如:for循环的计数器就很适合使用let命令。
2.ES6 新增 const 用来声明常量,一旦声明,其值就不能改变
JavaScript数据类型
- JavaScript拥有动态类型
var x; // 此时x是undefined
var x = 1; // 此时x是数字
var x = "Alex" // 此时x是字符串
数值
- JavaScript不区分整型和浮点型,就只有一种数字类型。
var a = 12.34;
var b = 20;
var c = 123e5; // 12300000, e5 表示 10 的五次方
var d = 123e-5; // 0.00123, e-5 表示 10 的 -5 次方
字符串
常用方法
方法 | 说明 |
---|---|
.length | 返回长度 |
.trim() | 移除空白 |
.trimLeft() | 移除左边的空白 |
.trimRight() | 移除右边的空白 |
.charAt(n) | 返回第n个字符 |
.concat(value, …) | 拼接 |
.indexOf(substring, start) | 子序列位置 |
.substring(from, to) | 根据索引获取子序列 |
.slice(start, end) | 切片 |
.toLowerCase() | 小写 |
.toUpperCase() | 大写 |
.split(delimiter, limit) | 分割 |
- 拼接字符串一般使用"+"
补充
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) 个字符结束(不包含该位置字符)
布尔值
- 区别于 Python,true 和 false 都是小写
- " "(空字符串)、0、null、undefined、NaN 都是 false。
null 和 undefined
- null 表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;
- undefined 表示当声明一个变量但未初始化时,该变量的默认值是 undefined。还有就是函数无明确的返回值时,返回的也是 undefined。
null表示变量的值是空 (null 可以手动清空一个变量的值,使得该变量变为 object 类型,值为 null),undefined 则表示只声明了变量,但还没有赋值。
对象
- 对象只是带有属性和方法的特殊数据类型,JavaScript 提供多个内建对象,比如 String、Date、Array 等等。但 JavaScript 允许自定义对象。
数组
- 数组对象的作用是:使用单独的变量名来存储一系列的值。类似于Python中的列表
常用方法
方法 | 说明 |
---|---|
.length | 数组的大小 |
.push(ele) | 尾部追加元素 |
.pop() | 获取尾部的元素 |
.unshift(ele) | 头部插入元素 |
.shift() | 头部移除元素 |
.slice(start, end) | 切片 |
.reverse() | 反转 |
.join(seq) | 将数组元素连接成字符串 |
.concat(val, …) | 连接数组 |
.sort() | 排序 |
.forEach() | 将数组的每个元素传递给回调函数 |
.splice() | 删除元素,并向数组添加新元素。 |
.map() | 返回一个数组元素调用函数处理后的值的新数组 |
forEach()
- forEach(function(currentValue, index, arr), thisValue)
参数
参数 | 描述 |
---|---|
function(currentValue, index, arr) | 必需。 数组中每个元素需要调用的函数。 函数参数:参数描述currentValue必需。当前元素index可选。当前元素的索引值。arr可选。当前元素所属的数组对象。 |
thisValue | 可选。传递给函数的值一般用 “this” 值。 如果这个参数为空, “undefined” 会传递给 “this” 值 |
let arr=[11, 22, 33, 44]
console.log(arr)
arr.forEach(function (value, index)
{
console.log(value, index)
})
// 11 0
// 22 1
// 33 2
// 44 3
Splice()
splice(index,howmany,item1,…,itemX)
参数
参数 | 描述 |
---|---|
index | 必需。规定从何处添加/删除元素。 该参数是开始插入和(或)删除的数组元素的下标,必须是数字。 |
howmany | 必需。规定应该删除多少元素。必须是数字,但可以是 “0”。 如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。 |
item1, …, itemX | 可选。要添加到数组的新元素 |
var arr = [111, 'abc', true, 222]
arr.splice(0, 2, [999,888]) // 第一个参数表示起始位置,第二个参数表示删除的个数,第三个参数表示添加的新元素
console.log(arr)
var a = [[999,888, [777,666,555]] ,true, 222] // 三维数组,有几层[]即几维数组
Map()
map(function(currentValue,index,arr), thisValue)
参数
参数 | 描述 |
---|---|
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数 函数参数: 参数描述currentValue必须。当前元素的值index可选。当期元素的索引值arr可选。当期元素属于的数组对象 |
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。 如果省略了 thisValue ,“this” 的值为 “undefined” |
- 用法与 forEach() 相同
类型查询
typeof 是一个一元运算符(就像++,--,!,- 等一元运算符),不是一个函数,也不是一个语句。用法与 Python 中的 type 相同
对变量或值调用 typeof 运算符将返回下列值之一:
- undefined - 如果变量是 Undefined 类型的
- boolean - 如果变量是 Boolean 类型的
- number - 如果变量是 Number 类型的
- string - 如果变量是 String 类型的
- object - 如果变量是一种引用类型或 Null 类型的
运算符
算数运算符
+ - * / % ++ --
var i = 10
console.log(i)
var res1=i++
console.log(res1) // 10
var res2=++i
console.log(res2) // 12
这里由于的 i++ 和 ++i 在出现赋值运算式,i++ 会先赋值再进行自增1运算,而 ++i 会先进行自增运算再赋值
比较运算符
> >= < <= != == === !==
1 == “1” // true 弱等于
1 === "1" // false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型),所以当你用两个等号进行比较时,JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较,所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误
逻辑运算符
&& || !
&& = and
|| = or
! = not
赋值运算符
= += -= *= /=
流程控制
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("...")
}
- switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句
- 能用 if 就不要使用 switch
for
for (var i=0;i<10;i++) {
console.log(i);
}
for 循环先执行()内的条件,执行结束后运行 console.log(i),且 for 循环是整体循环,包含 console.log(i)
while
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
- 能用 for 解决尽量不使用 while,容易陷入死循环
算元运算符
var a = 1;
var b = 2;
var c = a > b ? a : b
1.这里的三元运算顺序是先判断条件a>b,若条件成立返回 ? 后的值 -- a,条件不成立返回 : 后的值 -- b
2.三元运算可以嵌套使用
var a=10,b=20;var x=a>b ?a:(b=="20")?a:b;
x10
函数
函数定义
- JavaScript中的函数和Python中的非常类似,只是定义方式有点区别
// 普通函数定义
function f1() {
console.log("Hello world!");
}
// 带参数的函数
function f2(a, b) {
console.log(arguments); // 内置的arguments对象
console.log(arguments.length);
console.log(a, b);
}
// 带返回值的函数
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);
补充:
- 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只能返回一个值,如果想返回多个值需要自己手动给他们包一个数组或对象中
}
函数中的arguments参数
function add(a,b){
console.log(a+b);
console.log(arguments.length);
console.log(arguments[0]);//arguments相当于将出传入的参数全部包含,这里取得就是第一个元素1
}
add(1,2)
// 3
// 2
// 1
注意:
函数的全局变量和局部变量
局部变量:
- 在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。
全局变量:
- 在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
变量生存周期:
-
JavaScript 变量的生命期从它们被声明的时间开始。
-
局部变量会在函数运行以后被删除。
-
全局变量会在页面关闭后被删除。
作用域
- 首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。与python作用域关系查找一模一样!
词法分析(尝试理解)
- JavaScript中在调用函数的那一瞬间,会先进行词法分析。
词法分析的过程:
-
当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面:
- 函数参数,如果有,则将此参数赋值给AO,且值为undefined。如果没有,则不做任何操作。
- 函数局部变量,如果AO上有同名的值,则不做任何操作。如果没有,则将此变量赋值给AO,并且值为undefined。
- 函数声明,如果AO上有,则会将AO上的对象覆盖。如果没有,则不做任何操作。
函数内部无论是使用参数还是使用局部变量都到AO上找。
JavaScript 中的词法分析相当于 Python 函数中语法分析,即在函数定义的过程当中,函数不执行代码,只进行语法检测,而函数只能先定义后调用,若先调用后定义即使函数外部作用域(包括全局作用域)有同名变量也同样会造成语法错误。
函数体代码必须先定义再调用
内置对象和方法
-
JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。在JavaScript 中,对象是拥有属性和方法的数据
-
注意 var s1 = “abc” 和 var s2 = new String(“abc”) 的区别:typeof s1 --> string 而 typeof s2 --> Object
自定义对象
- JavaScript的对象(Object)本质上是键值对的集合(Hash结构),但是只能用字符串作为键。
var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);
遍历对象中的内容:
var a = {"name": "Alex", "age": 18};
for (var i in a){
console.log(i, a[i]);
}
创建对象:
var person=new Object(); // 创建一个person对象
person.name="Alex"; // person对象的name属性
person.age=18; // person对象的age属性
注意:
-
ES6中提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当做键
-
也就是说,Object结构提供了“字符串–值”的对应,Map结构提供了“值–值”的对应,是一种更完善的Hash结构实现
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);
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')
reg2.test('jason666')
/*第一个注意事项,正则表达式中不能有空格*/
// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项,全局匹配时有一个lastIndex属性*/
// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);
var reg3 = /undefined/;
reg3.test();
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) 返回角的正切