前端 之 JavaScript基础

JavaScript 简介

avaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

Javascript的引入方式

第一种：外部引入：js代码块出现在外部js文件中,需要通过script标签src属性进行链接。

<script type="text/javascript" src="路径/文件名.js"></script> 

第二种：内部引入：js代码块需要出现在script标签中。

<script type="text/javascript">js代码</script> 

第三种：行内引入：js代码块需要出现在事件中 。

<input type="button" value="行内引入方式" onclick="javascript:alert('我是行内引入方式');"> 

三种方式不存在优先级,谁在逻辑下方,谁起作用。

Javascript的语法

注释

// 单行注释 /* 多行注释 */ 

变量

变量名的命名规范：
可以由字母,数字,_,$组成,但是不能以数字开头(可以包含中文,采用小驼峰命名法)；区分大小写；不能与关键字保留字重名。

声明方式：

1、使用var（关键字）+变量名(标识符)的方式在function外部声明，即为全局变量，否则在function声明的是局部变量。

var lin='这是一个全局变量'; function test() { var wow='这是一个局部变量'; } 

2、没有使用var，直接给标识符test赋值，这样会隐式的声明了全局变量test。即使该语句是在一个function内，当该function被执行后test变成了全局变量。

lin='这是一个全局变量'; function test() { wow='这也是一个全局变量'; } 

3、使用window全局对象来声明，全局对象的属性对应也是全局变量。

 window.test = '利用window声明的全局变量'; 

ES6新增了let命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令。

for (let i=0;i<arr.length;i++){...} 

JavaScript有一些保留字，不能用作标识符：

arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。 

另外，还有三个词虽然不是保留字，但是因为具有特别含义，也不应该用作标识符：Infinity、NaN、undefined。

常量

const也是ES6中新增的命令，const用于修饰常量，定义的变量不可修改，而且必须初始化，声明位置不限（通常声明在js开头）

const linwow = "这是测试常量"; alert(linwow); linwow = "我要改变常量值"; //报错无法修改 

输出数据

JavaScript 可以通过不同的方式来输出数据：

• 使用 window.alert() 弹出警告框。

var wow='hello javascript'; alert(wow); 

• 使用 document.write() 方法将内容写到 HTML 文档中。

var wow='hello javascript'; document.write(wow); 

• 使用 console.log() 写入到浏览器的控制台。

var wow='hello javascript'; console.log(wow); 

数据类型

JavaScript的数据类型有：字符串（String）、数值(Number)、布尔(Boolean)、数组(Array)、空（Null）、未定义（Undefined）。在JavaScript中，我们可以用typeof运算符来确定一个值到底是什么类型。

12 //数字 1.2 //小数 "hello world" //字符串 true //布尔值 null //空 

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x; // x 为 undefined var x = 5; // 现在 x 为数字 var x = "linWoW"; // 现在 x 为字符串 

字符串

字符串可以是引号中的任意文本，可以使用单引号或双引号。

属性和方法

• length属性：length属性返回字符串的长度。
• charAt()：charAt方法返回指定位置的字符，参数是从0开始编号的位置。如果参数为负数，或大于等于字符串的长度，charAt返回空字符串。
• charCodeAt()：charCodeAt方法返回给定位置字符的Unicode码点（十进制表示）
• concat()：用于连接两个字符串，返回一个新字符串，不改变原字符串。该方法可以接受多个参数，如果参数不是字符串，concat方法会将其先转为字符串，然后再连接。
• slice()：用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（不含该位置）。如果省略第二个参数，则表示子字符串一直到原字符串结束。如果参数是负值，表示从结尾开始倒数计算的位置，即该负值加上字符串长度。如果第一个参数大于第二个参数，slice方法返回一个空字符串。
• substring()：用于从原字符串取出子字符串并返回，不改变原字符串。方法的第一个参数表示子字符串的开始位置，第二个位置表示结束位置。如果省略第二个参数，则表示子字符串一直到原字符串的结束。如果第二个参数大于第一个参数，substring方法会自动更换两个参数的位置。
• substr()：用于从原字符串取出子字符串并返回，不改变原字符串。方法的第一个参数是子字符串的开始位置，第二个参数是子字符串的长度。如果省略第二个参数，则表示子字符串一直到原字符串的结束。如果第一个参数是负数，表示倒数计算的字符位置。如果第二个参数是负数，将被自动转为0，因此会返回空字符串。
• indexOf()，lastIndexOf()：这两个方法用于确定一个字符串在另一个字符串中的位置，都返回一个整数，表示匹配开始的位置。如果返回-1，就表示不匹配。两者的区别在于，indexOf从字符串头部开始匹配，lastIndexOf从尾部开始匹配。
• trim()：用于去除字符串两端的空格，返回一个新字符串，不改变原字符串。该方法去除的不仅是空格，还包括制表符（\t、\v）、换行符（\n）和回车符（\r）。
• toLowerCase()，toUpperCase()：用于将一个字符串全部转为小写，toUpperCase则是全部转为大写。它们都返回一个新字符串，不改变原字符串。
• localeCompare()：方法用于比较两个字符串。它返回一个整数，如果小于0，表示第一个字符串小于第二个字符串；如果等于0，表示两者相等；如果大于0，表示第一个字符串大于第二个字符串。
• match()：用于确定原字符串是否匹配某个子字符串，返回一个数组，成员为匹配的第一个字符串。如果没有找到匹配，则返回null。
• search()：用法等同于match，但是返回值为匹配的第一个位置。如果没有找到匹配，则返回-1。
• replace()：用于替换匹配的子字符串，一般情况下只替换第一个匹配（除非使用带有g修饰符的正则表达式）。
• split()：按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。

参考：JavaScript数据类型

数值

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带。极大或极小的数字可以通过科学计数法来书写。NaN用来表示非数字值,不等于任何值包括它自己。isNaN方法可以用来判断一个值是否为NaN。

布尔

布尔（逻辑）只能有两个值：true 或 false，都是小写。""(空字符串)、0、null、undefined、NaN都是false。

数组

数组用[]来定义，数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推

Undefined 和 Null

• undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

• null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;

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

函数

在JavaScript中，函数即对象，可以随意地被程序操控，函数可以嵌套在其他函数中定义，这样可以访问它们被定义时所处的作用域中的任何变量。

函数定义：

function命令

function func() { 函数内代码 } 

函数表达式

var func = function(x){ console.log(x); } 

通过Function()构造函数来定义

var func=new Function('x','y','return x+y'); 等价于： var func=function(x,y){ return x+y; } 

立即执行函数

(function(x, y){ return x + y; })(1, 2); 

使用“箭头”（=>）定义函数

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只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中 } 

函数声明语句也会“被提前”到外部脚本或外部函数作用域的顶部，所以以这种方式声明的函数，可以被在它定义之前出现的代码所调用。

f1() function f1(){ console.log('linwow') } 上面的代码不会报错。 f(); var f = function (){ console.log('linwow') }; // TypeError: f is not a function 

函数的参数

function add(a,b){ console.log(a+b); console.log(arguments.length); console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1 } add(1,2) 输出： 3 2 1 

函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。

函数作用域

作用域（scope）指的是变量存在的范围。Javascript只有两种作用域：一种是全局作用域，变量在整个程序中一直存在，所有地方都可以读取；另一种是函数作用域，变量只在函数内部存在。 在函数外部声明的变量就是全局变量（global variable），它可以在函数内部读取。

流程控制

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中的语句。

for

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

while

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

三元运算

var a = 1; var b = 2; var c = a > b ? a : b //这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用； 

对象

对象是一种复合值：它将很多值集合在一起，可通过名字访问这些值。对象也可看做一种无序的数据集合，由若干个“键值对”（key-value）构成。对象的所有键名都是字符串，所以加不加引号都可以。如果键名是数值，会被自动转为字符串。

var obj={ lin:'wow' } 

创建对象

对象直接量： var obj={}; 关键字new： var obj=new Object(); Object.create()函数： var obj=Object.create(null) 

属性

对象的每一个“键名”又称为“属性”（property），它的“键值”可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用。

读取对象的属性，有两种方法，一种是使用点运算符，还有一种是使用方括号运算符。数值键名不能使用点运算符（因为会被当成小数点），只能使用方括号运算符。

var obj = { func: function(x){ return x+1; } }; obj.func(2) 输出：3 

通过Object.keys方法可以查看一个对象本身的所有属性。

var obj = { name:'linwow', age:20 }; Object.keys(o) //['name','age'] 

delete运算符可以删除对象的属性。delete运算符只能删除自有属性，不能删除继承属性。删除一个不存在的属性，delete不报错，而且返回true。只有一种情况，delete命令会返回false，那就是该属性存在，且不得删除。

var obj = { name:'linwow', age:20 }; delete o.name //true 

Array 对象

对象方法

方法	描述
concat()	连接两个或更多的数组，并返回结果。
every()	检测数组元素的每个元素是否都符合条件。
filter()	检测数组元素，并返回符合条件所有元素的数组。
indexOf()	搜索数组中的元素，并返回它所在的位置。
join()	把数组的所有元素放入一个字符串。
lastIndexOf()	返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	反转数组的元素顺序。
shift()	删除数组的第一个元素。
slice()	选取数组的的一部分，并返回一个新数组。
some()	检测数组元素中是否有元素符合指定条件。
sort()	对数组的元素进行排序。
splice()	从数组中添加或删除元素。
toString()	把数组转换为字符串，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值。

Date（日期） 对象

Date 对象用于处理日期与时间，创建 Date 对象： new Date().

以下四种方法同样可以创建 Date 对象：

var d =new Date(); var d =new Date(milliseconds); var d =new Date(dateString); var d =new Date(year, month, day, hours, minutes, seconds, milliseconds); 

对象方法

getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setTime()	setTime() 方法以毫秒设置 Date 对象。
toDateString()	把 Date 对象的日期部分转换为字符串。
toGMTString()	已废弃。请使用 toUTCString() 方法代替。
toISOString()	使用 ISO 标准返回字符串的日期格式。
toJSON()	以 JSON 数据格式返回日期字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString()	据本地时间格式，把 Date 对象转换为字符串。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toUTCString()	根据世界时，把 Date 对象转换为字符串。
UTC()	根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

Math 对象

Math 对象用于执行数学任务。

Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。

方法

方法	描述
abs(x)	返回 x 的绝对值。
acos(x)	返回 x 的反余弦值。
asin(x)	返回 x 的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 Ex 的指数。
floor(x)	对 x 进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y,z,…,n)	返回 x,y,z,…,n 中的最高值。
min(x,y,z,…,n)	返回 x,y,z,…,n中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	把数四舍五入为最接近的整数。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。

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}$/; 

修饰符

修饰符用于执行区分大小写和全局匹配:

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

JSON对象

var str1 = '{"name": "linwow", "age": 20}'; var obj1 = {"name": "linwow", "age": 20}; // JSON字符串转换成对象 var obj = JSON.parse(str1); // 对象转换成JSON字符串 var str = JSON.stringify(obj1);