JavaScrip

JavaScrip基础语法

简介
JavaScript 是⼀种具有⾯向对象能⼒的、解释型的程序设计语⾔。更具体⼀点，它是基于对象和事件
驱动并具有相对安全性的客户端脚本语⾔。它的主要⽬的是，验证发往服务器端的数据、增加 Web 互
动、加强⽤户体验度等。

JavaScript 的组成

ECMAScript(基础语法)
JavaScript的核⼼语法ECMAScript描述了该语⾔的语法和基本对象
DOM(⽂档对象模型)
⽂档对象模型（DOM）—— 描述了处理⽹⻚内容的⽅法和接⼝
BOM(浏览器对象模型)
浏览器对象模型（BOM）—— 描述了与浏览器进⾏交互的⽅法和接⼝

开发⼯具

1. 浏览器：Chrome
2. 开发⼯具：Hbuilder X
3. 进⼊浏览器控制台 Console：F12
   控制台的作⽤:
   console对象代表浏览器的JavaScript控制台，⽤来运⾏JavaScript命令，常常⽤来显示⽹⻚运⾏
   时候的错误信息。Elements⽤来调试⽹⻚的html和css

基本⽤法
JS需要和HTML⼀起使⽤才有效果，我们可以通过直接或间接的⽅式将JS代码嵌⼊在HTML⻚⾯中。
⾏内JS : 写在标签内部的js代码
内部JS : 定义在script标签内部的js代码
外部JS : 单独的js⽂件，在HTML中通过script标签引⼊
我们可以将JavaScript代码放在html⽂件中任何位置，但是我们⼀般放在⽹⻚的head或者body部分。由
于⻚⾯的加载⽅式是从上往下依次加载的，⽽这个对我们放置的js代码运⾏是有影响的。
放在部分，最常⽤的⽅式是在⻚⾯中head部分放置元素，浏览器解析head部分就会执⾏这个代码，然
后才解析⻚⾯的其余部分。
放在部分，JavaScript代码在⽹⻚读取到该语句的时候就会执⾏

⾏内 JS：

<button onclick="alert('you clicked hered!!!')">click here</button>

内部 JS：

<script type="text/javascript" charset="utf-8">
 alert('this is inner js code')
</script>

外部 JS ⽂件：
hello.js

alert('this is a outter js document');

hello.html

<!-- 在需要使⽤js的html⻚⾯中引⼊ -->
<script src="js/hello.js" type="text/javascript" charset="utf-8"></script>

语句和注释
JavaScript程序的执⾏单位为⾏（line），也就是⼀⾏⼀⾏地执⾏。⼀般情况下，每⼀⾏就是⼀个语
语句（statement）是为了完成某种任务⽽进⾏的操作，语句以分号结尾，⼀个分号即表示⼀个语句结
束。多个语句可以写在⼀⾏内（不建议这么写代码），但是⼀⾏写多条语句时，语句必须以分号结尾
表达式不需要分号结尾。⼀旦在表达式后⾯添加分号，则JavaScript引擎就将表达式视为语句，这样会
产⽣⼀些没有任何意义的语句

单⾏注释：⽤//起头；
多⾏注释：放在/* 和 */之间。
兼容html注释⽅式：

标识符和关键字
标识符就是⼀个名字，⽤来给变量和函数进⾏命名，有特定规则和规范
规则：

由Unicode字⺟、_、$、数字组成、中⽂组成
（1）不能以数字开头
（2）不能是关键字和保留字
（3）严格区分⼤⼩写

规范：

（1）⻅名知意
（2）驼峰命名或下划线规则

关键字也称保留字，是被JavaScript征⽤来有特殊含义的单词

变量
变量即⼀个带名字的⽤来存储数据的内存空间，数据可以存储到变量中，也可以从变量中取出数据。

变量的声明
JavaScript是⼀种弱类型语⾔，在声明变量时不需要指明数据类型，直接⽤var修饰符进⾏声明。
变量声明和赋值

// 先声明再赋值
var a ; 
a = 10;
// 声明同时赋值
var b = 20;

变量的注意点
（1）若只声明⽽没有赋值，则该变量的值为undefined。

var box;
console.log(box);

（2）变量要有定义才能使⽤，若变量未声明就使⽤，JavaScript会报错，告诉你变量未定义。

console.log(box2);

（3）可以在同⼀条var命令中声明多个变量。

var a, b, c = 10;
console.log(a,b,c);

（4）若使⽤var重新声明⼀个已经存在的变量，是⽆效的

var box = 10
var box;

（5）若使⽤var重新声明⼀个已经存在的变量且赋值，则会覆盖掉前⾯的值

var box = 10;
var box = 25;

（6）JavaScript是⼀种动态类型、弱类型语⾔，也就是说，变量的类型没有限制，可以赋予各种类型的
值。

var box = 'hello world';
box = 10;

变量提升
JavaScript 引擎的⼯作⽅式是，先解析代码，获取所有被声明的变量，然后再⼀⾏⼀⾏地运⾏。这造
成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。

console.log(msg);
var msg = "so easy";
// 变量提升，相当于下⾯的代码

var msg;
console.log(msg);
msg = "so easy";
// 说明： 最后的结果是显示undefined，表示变量msg已声明，但还未赋值

注意：变量提升只对 var 命令声明的变量有效，如果变量不是⽤ var 命令声明的，就不会发⽣变量提升

console.log(msg);
msg = "error";

数据类型
虽说 JS 是弱类型语⾔，变量没有类型，但数据本身是有类型的。针对不同的类型，我们可以进⾏不同
的操作。
JavaScript 中有 6 种数据类型，其中有五种简单的数据类型：Undefined、Null、布尔、数值和字符
串。⼀种复杂数据类型Obj

undefined
undefined 类型的值是 undefined。
undefined 是⼀个表示"⽆"的原始值，表示值不存在。
出现undefined的常⻅情况：
（1）当声明了⼀个变量⽽没有初始化时，这个变量的值就是 undefined

var box;
console.log(box); //undefined

（2）调⽤函数时，该函数有形参，但未提供实参，则该参数为 undefined。

function noData(str) { // js函数形参只需要变量名即可
 console.log(str); // undefined
}
noData(); // 调⽤⽅法时，未传递参数

（3）函数没有返回值时，默认返回 undefined。

// ⽅法没有返回值
function noData() {
 console.log("Hello");
}
var re = noData();// 定义变量接收⽆返回值的⽅法
console.log(re);

null
null类型是只有⼀个值的数据类型，即特殊的值null。它表示空值，即该处的值现在为空，它表示⼀个
空对象引⽤。使⽤Null类型值时注意以下⼏点：
1）使⽤ typeof 操作符测试null返回object字符串。
2）undefined 派⽣⾃ null，所以等值⽐较返回值是true。未初始化的变量和赋值为null的变量相等。

console.log(undefined == null);
var box = null; // 赋值为null的变量
var a; // 未初始化的变量
console.log(a == box); // 两个的值相等

布尔类型
布尔类型有两个值：true、false。常⽤来做判断和循环的条件

数值型
数值型包含两种数值：整型和浮点型。
1）所有数字（整型和浮点型）都是以 64 位浮点数形式储存。所以，JS中1 与 1.0 相等，⽽且 1 加上
1.0 得到的还是⼀个整数。浮点数最⾼精度是17位⼩数，由于浮点数运算时可能不精确，尽量不要使⽤
浮点数做判断。
2）在存储数值型数据时⾃动将可以转换为整型的浮点数值转为整型。

console.log(1 == 1.0); // true
console.log(1 + 1.0); // 2
var num = 8.0; // ⾃动将可以转换为整型的浮点数转为整型
console.log(num); // 8

字符串
使⽤ ’ ’ 或 " "引起来，如：‘hello’，“good”。
使⽤加号 ‘+’ 进⾏字符串的拼接，如：console.log(‘hello’ + ’ everybody’);

对象

对象是⼀组数据和功能的集合。
说明：
{}：表示使⽤对象字⾯量⽅式定义的对象。空的⼤括号表示定义包含默认属性和⽅法的对象。

类型转换

⾃动类型转换
函数转换
parseInt()
在转换之前，首先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数字，
如果不是，则直接返回NaN，不再继续，如果是则继续，直到找到非字符

var a = "123";
   var b = "129.45";
   var c = "abc";
   console.log(parseInt(a));
   console.log(parseInt(b));
   console.log(parseInt(c));

parseFloat()
​ 该方法与 parseInt() 方法的处理方式相似，从位置 0 开始查看每个字符，直到找到第一个非有效的字符为止，
然后把该字 符之前的字符串转换成数字。不过，对于这个方法来说，第一个出现的小数点是有效字符。
如果有两个小数点，第二个小数点将被看作无效的，parseFloat()方法会把这个小数点之前的字符串转换成数字。

     //parseFloat() 
   var a = "123";
   var b = "129.45";
   var c = "130.45.67";
   var d = "abc";
   console.log(parseFloat(a));
   console.log(parseFloat(b));
   console.log(parseFloat(c));
   console.log(parseFloat(d));

显示转换
​ 几乎每个数对象都提供了toString()函数将内容转换为字符串形式，其中Number提供的toString()函数可以将数字转换为字符串。
​ Number还提供了**toFixed()**函数将根据小数点后指定位数将数字转为字符串，四舍五入

 //toString
   var a = 10;
   var b = true;
   console.log(a.toString());
   console.log(b.toString());
   console.log(typeof(b) + "========");
   var c1;
   var c2 = null;

//toFixed
   var a = 1.4;
   console.log(a.toFixed(0));
   var a = 2.8944;
   console.log(a.toFixed(1));
   
   console.log(Number(undefined));

数组
数组是按次序排列的⼀组数据，每个值的位置都有编号（从0开始），整个数组⽤⽅括号表示。
数组定义
JS 中定义数组的三种⽅式如下（也可先声明再赋值）

var arr = [值1,值2,值3]; // 隐式创建
var arr = new Array(值1,值2,值3); // 直接实例化
var arr = new Array(size); // 创建数组并指定⻓度

基本操作
数组的⻓度可以通过length属性来获取，并可以任意更改

数组名.length
数组名.length = 新⻓度

数组中的每⼀个元素都可以被访问和修改，甚⾄是不存在的元素，⽆所谓越界

数组名[下标]
数组名[下标] = 新值

数组遍历

数组的遍历即依次访问数组的每⼀个元素 ，JS提供三种遍历数组的⽅式：
普通的for循环遍历

for(var i=0; i<=数组.length-1; i++){
 
}
如：
for(var idx=0;idx<arr.length;idx++){
 console.log(arr[idx]);
}

for … in

for(var 下标(名称任意) in 数组名){
 数组名[下标]是获取元素
} // 下标(名称任意)
如：
for(var idx in arr){
 console.log(arr[idx]);
}

forEach

 数组名.forEach(function(element,index){
 // element(名称任意)：元素，index(名称任意)：下标
}) 
如：
arr.forEach(function(elem,idx){
 console.log(idx + "-->" + elem);
});

了解

数组在使⽤的时候建议⼤家规矩来⽤。在存放数据时，从下标0开始顺序的存放数组元素。 如果下标：
1.为⾮负整数(包括整数字符串)：⾃动从0开始,不存在添加 undefined
2.为负数、⼩数、⾮数字符串：这些内容不计算在⻓度内，当成"属性"处理，相当于⾃定义属性。 数组⾮常灵活，使⽤数组元素
1.下标: ⾮负整数(包括整数字符串)： 数组.下标 数组[下标]
2.下标：负数、⼩数、⾮数字字符串： 数组[属性] * for --> 不遍历属性

• foreach -->不遍历属性和索引中的undefined
• for in -->不遍历索引中的undefined

数组提供的操作⽅法
Array对象为我们提供了⼀些⽅法，可以很⽅便地操作数组

函数
函数，即⽅法。就是⼀段预先设置的功能代码块，可以反复调⽤，根据输⼊参数的不同，返回不同的值。函数也是对象。
函数的定义
有三种函数定义的⽅式：函数声明语句、函数定义表达式、Function构造函数

function 函数名([参数列表]){
 
}
例如：
function foo(){
 console.log(1);
}
foo();

该种⽅式定义的函数具有声明提升的效果

foo(); 
function foo(){
 console.log(1);
}
// 变量声明提升
console.log( a ); 
var a = 2;

函数定义表达式
以表达式⽅式定义的函数，函数的名称是可以不需要的

var 变量名 = function ([参数列表]) {
 
}
变量名();
例如：
var fun = function(){
 console.log("Hello");
}
fun();

这种写法将⼀个匿名函数赋值给变量。这时，这个匿名函数⼜称函数表达式，因为赋值语句的等号右侧只能放表达式。

Function构造函数
Function构造函数接收任意数量的参数，但最后⼀个参数始终都被看成是函数体，⽽前⾯的参数则列举出了新函数的参数

var add = new Function('x','y','return (x + y)');
// 等同于
function add(x, y) {
 return (x + y);
}
add();

注意：

1. js中的函数没有重载，同名的函数，会被后⾯的函数覆盖。
2. js中允许有不定数⽬的参数，后⾯介绍arguments对象

函数的参数、调⽤和return语句
参数
函数运⾏的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参
数，定义时的参数称为形参，调⽤时的参数称为实参
实参可以省略，那么对应形参为undefined
若函数形参同名（⼀般不会这么⼲）：在使⽤时以最后⼀个值为准。
可以给参数默认值：当参数为特殊值时，可以赋予默认值。
参数为值传递，传递副本 ；引⽤传递时传递地址，操作的是同⼀个对象

// 调⽤函数时，实参可以省略，则对应形参为undefined
function add(a , b) {
 console.log(a + "+" + b + "=" + (a + b));
}
add(3,4,5)//3+4=7
add(1);//1+undefined=NaN
add();//undefined+undefined=NaN

// 若函数形参同名（⼀般不会这么⼲）：在使⽤时以最后⼀个值为准
function add2(a , a) {
 console.log(a);
}
add2(1,2);

// 给参数默认值
function defaultValue(a){
 a = a || "a";
 return a; }
console.log(defaultValue());
function f(a){
 //若参数a不为undefined或null，则取本身的值，否则给⼀个默认值
 (a !== undefined && a !== null) ? a = a : a = 1;
return a; }

console.log(f());
// 值传递
var num = 12;
function change(n) {
 n = 30; }
change(num);
console.log(num);
// 引⽤传递
var obj = {name: "tom"};
function paramter(o) {
 o.name = 2; }
paramter(obj);
console.log(obj.name);
// 给形参o赋予了新的数组
var obj2 = [1, 2, 3];
function paramter2(o){
 o = [2, 3, 4];
 o[1] = 3; }
paramter2 (obj2);
console.log(obj2)

函数的调⽤
1. 常⽤调⽤⽅式

 函数名([实参]);

存在返回值可以变量接收，若接收⽆返回值函数则为undefined。
2. 函数调⽤模式

function add(a,b){
 return a+b; }
var sum = add(1,2)
console.log(sum);

3. ⽅法调⽤模式

var o = {
 m: function(){
 console.log(1);
 }
};
o.m(); 

return

函数的执⾏可能会有返回值，需要使⽤return语句将结果返回。return 语句不是必需的，如果没有的话，该函数就不返回任何值，或者说返回 undefined。

作⽤：

1. 在没有返回值的⽅法中，⽤来结束⽅法。
2. 有返回值的⽅法中，⼀个是⽤来结束⽅法，⼀个是将值带给调⽤者。

函数的作⽤域
函数作⽤域：全局 (global variable) 和 局部 (local variable)
1. 全局变量与局部变量同名问题

var box =1; // 全局变量
function display(box){
 var box = 3; // 此处box与全局变量box没有关系，这⾥的box为传递的参数，相当于新声明的局部变量
 var b = 2; // 局部变量
 console.log("box-->" + box);
}
display();
// b 不能访问
console.log("b-->" + b);
 

2. 在函数中定义变量时，若没有加var关键字，使⽤之后⾃动变为全局变量

function fun(){
 a = 100; }
fun();
alert(a);

内置对象

String

Math

Date

// 获取⽇期 ◦ getFullYear() 年 ◦ getMonth() ⽉ ◦ getDate() 日。 ◦
getHours() 时 ◦ getMinutes() 分 ◦ getSeconds() 秒 // 设置⽇期 ◦
setYear() ◦ setMonth() ◦ setDate() ◦ setHours() ◦ setMinutes() ◦
setSeconds() ◦ toLoacaleString() 转换成本地时间字符串

说明：

1. getMonth()：得到的值：0_11（1⽉12⽉）
2. setMonth()：设置值时0~11
3. toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果

对象

对象（object）是 JavaScript 的核⼼概念，也是最重要的数据类型。JavaScript 的所有数据都可以被视为对象。JavaScript 提供多个内建对象，⽐如 String、Date、Array 等等。对象是带有属性和⽅法的特殊数据类型。

对象的创建

JS 创建⾃定义对象，主要通过三种⽅式：字⾯量形式创建对象、通过new Object对象创建 、通过Object对象的create⽅法创建对象。

字⾯量形式创建

var 对象名 = {};//创建⼀个空的对象
var 对象名 = {键:值,键2:值2,...}
var obj = {
 'name' : 'hello',
 age : 12,
 sayHello : function () {
 console.log("我是对象中的⽅法");
 },
 courses : {
 javase : 4,
 javascript : 3
 },
 isLike : true,
 members : [
 {name : "⼩红",age : 20},
 {name : "⼩绿",age : 22},
 {name : "⼩蓝",age : 27},
 {name : "⼩⻩"}
 ]
}

通过new Object创建

var 对象名 = new Object(); // 创建⼀个空的对象
var obj = new Object();
obj.name = 'zs';
obj.age = 18;
console.log(obj);

通过Object对象的create⽅法创建

var 对象名 = Object.create(null);
var obj = Object.create(null);
obj.name = 'ls';
obj.gender = true
console.log(obj);

var objn = Object.create(obj);
objn.age = 18;
console.log(objn);
console.log(objn.gender)

序列化即将JS对象序列化为字符串，反序列化即将字符串反序列化为JS对象。JS中通过调⽤JSON⽅法，可以将对象序列化成字符串，也可以将字符串反序列化成对象 。

// 序列化对象，将对象转为字符串 JSON.stringify(object);

// 反序列化，将⼀个Json字符串转换为对象。 JSON.parse(jsonStr);

this
this是JavaScript语⾔的⼀个关键字。
它代表函数运⾏时，⾃动⽣成的⼀个内部对象，只能在函数内部使⽤。
随着函数使⽤场合的不同，this的值会发⽣变化。但是有⼀个总的原则，那就是this指的是，调⽤函数的那个对象。

在函数中使⽤this

在函数中使⽤this属于全局性调⽤，代表全局对象，通过window对象来访问

function test () {
 this.x = 1;
 console.log(this.x);
}
test();
console.log(x); // 相当于定义在全局对象上的属性
var x = 10;
console.log(x) // 10
function test (){
 console.log(this.x) // 10
 this.x = 1;
 console.log(this.x) // 1
 console.log(this) 
 }
 
test();
console.log(x); // 1
console.log(this);

在对象中使⽤this

在对象中的函数使⽤this，代表当前的上级对象。

var obj = {
 name : '张三',
 age : 20,
 sayHello : function () {
 console.log(this.name)
 console.log(this)
 } }
obj.sayHello();