JavaScript

懵懂的女人 提交于 2020-02-05 19:38:52

JavaScript

JavaScript引入方式

script标签内写代码

<script>在这里写JS代码</script>

引入额外的JS文件

<script src="myscript.js"></script>

JavaScript语言规范

注释

// 单行注释

/*
多行注释
*/

JavaScript语言基础

变量声明

  1. JavaScript的变量名可以使用数字、字母、_、$组成,但是不能以数字开头。
  2. 声明变量使用var 变量名;的格式来声明。
var name="xiaowu";
var age=18;

注意

  1. 变量名是区分大小写的。
  2. 推荐使用驼峰式命名规则。
  3. 保留字(关键字)不能用做变量名。

JavaScript数据类型

JavaScript拥有动态类型

var x;  // 此时x是underfined
var x=1;  // 此时x是数字
var x="xiaowu";  // 此时x是字符串

数值(Number)

JavaScript不区分整型和浮点型,只有一种数字类型。

var a=18;
var b=18.18;
var c=123e3;  // 123000
var d=123e-3  // 0.123

还有一种NaN,表示不是一个数字(Not a Number)。

常用方法:

parseInt("123")  // 返回123
parseInt("abc")  // 返回NaN,指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

字符串(String)

var a="xiao"
var b="wu"
var c=a+b
console.log(c)  // 得到小吴

常用方法:

方法 说明
.length 返回长度
.trim() 移除空白
.trimLeft() 移除左边的空白
.trimRight() 移除右边的空白
.charAt(n) 返回第n个字符
.concat(value, ...) 拼接
.indexOf(substring, start) 子序列位置
.substring(from, to) 根据索引获取子序列
.slice(start, end) 切片
.toLowerCase() 小写
.toUpperCase() 大写
.split(delimiter, limit) 分割

拼接字符串一般使用“+”

// slice和subtring的区别
string.slice(start, stop)和string.substring(start, stop):

两者的相同点:
如果start等于end,返回空字符串
如果stop参数省略,则取到字符串末
如果某个参数超过string的长度,这个参数会被替换为string的长度

两者的不同点:
substring()的特点:
如果start>stop,start和stop会交换
如果参数是负数或者不是数字,会用0替换

slice()的特点:
如果start>stop,start和stop不会交换
如果start小于0,则切割从字符串末尾往前数的第abs(start)个字符开始(包含该位置的字符)
如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置的字符)

布尔值(Boolean)

区别于python,JavaScript的true和false都是小写。

var a=true;
var b=false;

""(空字符串)、0、null、underfined、NaN都是false。

null和underfined的区别:

  • null表示值是空,一般在需要指定或清空一个变量时才会使用,如name=null;
  • underfined表示当声明一个变量但未初始化时,该变量的默认值是underfined。还有就是函数无明确的返回值时,返回的也是underfined。

null表示变量的值是空(null可以手动清空一个变量的值,使得该变量变为object类型,值为null),underfined则表示只声明了变量,但还没有赋值。

对象(Object)

JavaScript中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript还允许自定义对象。

JavaScript提供了多个内建对象,比如String、Date、Array等等。

对象只是带有属性和方法的特殊数据类型。

数组

数组对象的作用是:使用单独的变量名来存储一系列的值。类似于python中的列表。

var a=[123,"asd"];
console.log(a[1]);
// 输入"asd"

常用方法:

方法 说明
.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"值。如果这个参数为空,"underfined"会传递个"this"值。

splice()

语法:

splice(index, howmany, item1, ..., itemX)

参数:
参数 描述
index 必需。规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字。但可以是"0"。如果未规定此参数,则删除从index开始到原数组结尾的所有元素。
item1, ..., itemX 可选。要添加到数组的新元素。

map()

语法:

map(function(currentValue, index, arr), thisValue)

参数:
参数 描述
function(currentValue, index, arr) 必须。函数,数组中的每个元素都会执行这个函数。函数参数:currentValue:必须,当前元素的值;index:可选,当前元素的索引值;arr:可选,当前元素属于的数组对象
thisValue 可选,对象作为该执行回调时使用,传递给函数,用作"this"的值。如果省略了thisValue,"this"的值为"underfined"

运算符

算数运算符

+(加)
-(减)
*(乘)
/(除)
%(取余)
++(加加)
--(减减)

i++和++i的区别:i++是先赋值再自增,++i是先自增再赋值

比较运算符

>
>=
<
<=
!=
==
===
!==

注意:
1 == "1"  //true 弱等于
1 === "1"  // false 强等于
// JavaScrip是一门弱类型语言(会自动转换数据类型),所以用两个等号进行比较时,JS内部会自动先将数值类型的1转换成字符串类型的1在进行比较,所以以后写JS涉及到比较尽量用三等号来限制类型,防止判断错误

逻辑运算符

&&(与,相当于python中and)
||(或,相当于python中or)
!(非,相当于python中not)

赋值运算符

=
+=
-=
*=
/=

流程控制

if-else

var x=0;
if (x>9){
    console.log("1");
}else {
    console.log("2");
}

if-else if-else

var x=10;
if (x>7){
    console.log("1");
}else if {
    console.log("2");
}else {
    console.log("3");
}

switch

var x=10;
switch (a) {
    case 0;
    console.log(1);
    break;
    case 1;
    console.log(2);
    break;
    default:
    console.log(3);
}

for

for (var i=0;i<10;i++) {
    console.log(i);
}

while

var x=0;
while (x<10) {
    console.log(i);
    i++;
}

三元运算

var a=1;
var b=2;
var c=a>b?a:b
// 三元运算顺序是先写判断条件a>b,再写条件成立返回的值为a,条件不成立返回的值为b

// 三元运算可以嵌套使用
var a=10;
var b=20;
var x=a>b?a:(b=="20")?a:b

函数

函数定义

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);

补充:ES6中允许使用箭头(=>)定义函数。

var f=v => v;  // 等同于
var f = function(v) {
    return v;
}

函数的全局变量和局部变量

局部变量

在JavaScript函数内部声明的变量(使用var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。

全局变量

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

变量生存周期

JavaScript变量的生命周期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭以后被删除。

作用域

首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。与python的作用域关系一样。

内置对象和方法

Date对象

创建Date对象

// 方法1:不指定参数
var d1 = new Date();

// 方法2:参数为日期字符串
var d2 = new Date("2019/10/14 21:35");
console.log(d2.toLocaleString());
var d3 = new Date("19/10/14 21:38");
console.log(d3.toLocaleString());

// 方法3:参数为毫秒数
var d4 = new Date(5000);
console.log(d4.toLocaleString());
console.log(d4.toUTCString());

// 方法4:参数为年月日小时分钟秒毫秒
var d5 = new Date(2019,10,14,21,41,0,5000);
console.log(d5.toLocaleString());  // 毫秒并不直接显示

Date对象的方法

var d = new Date();
//getDate() 获取日
//getDay() 获取星期
//getMonth() 获取月(0-11)
//getFullYear 获取完整年份
//getYear() 获取年
//getHours() 获取小时
//getMinutes() 获取分钟
//getSeconds() 获取秒
//getMilliseconds() 获取毫秒
//getTime() 返回累计毫秒数(从1970/1/1午夜开始)

JSON对象

var str1='{"name": "xiaowu", "age": 18}'
var obj1={"name": "xiaowu", "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}$/;

/*第一个注意事项,正则表达式不能有空格*/

/*第二个注意事项,全局匹配的时候有一个lastIndex属性*/
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!