Nice！JavaScript基础语法知识都在这儿了

Robod
1,693 阅读11分钟

好好学习，天天向上

本文已收录至我的Github仓库DayDayUP：github.com/RobodLee/DayDayUP，欢迎Star

JavaScript简介

之前我们在写网页的时候，用的是HTML+CSS，这样的网页被称作静态网页，它只是用来展示内容而已，不具备交互的功能，如果想要点击某个元素的时候执行特定的事件，就要使用到JavaScript，有了JavaScript之后，网页就可以实现更加复杂的效果，比如和服务器的交互等，这样的网页被称作动态网页。

浏览器分成渲染引擎和JS引擎两部分，渲染引擎用来解析HTML和CSS，又称作内核；而JS引擎则用来读取网页中的JavaScript代码，然后逐行解释并执行JavaScript代码。

JavaScript开胃小菜

在正式开始JavaScript之前，先来介绍一下JavaScript的一些基础知识。

JavaScript书写位置

JavaScript有行内、内嵌和外部引入三种书写方式，当内容较少时可以使用行内式去书写，这样比较方便，但是当代码比较多的时候就不推荐这种方式了。

<body>
    <button onclick="alert('Robod')" >微信公众号</button>
</body>

第二种就是内嵌式的写法，就是用<script></script>标签将JavaScript代码包裹起来，一般都会将其放在head标签或者body标签里。

<script>
    console.log("微信公众号：Robod");
</script>

最后一种外部引入就是给 script 标签一个src属性，指向需要引入的JavaScript文件，如果代码量很大的话就比较适合这种方式。

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

注释

JavaScript注释和C语言，Java一样，分为单行注释和多行注释

// 这是个单行注释
/* 
	这是个多行注释，
	用来注释多行内容
*/

输入输出语句

有过编程经验的小伙伴们肯定都在控制台或者某些地方打印过临时数据用来测试代码的运行情况，或者是给用户展示一些内容，在 JavaScript 中也提供了输入和输出的方式。

  • alert(msg)

这种方式是在浏览器中弹出一个警示框，可以用来测试代码，但多数情况下还是给予用户警示的作用。

alert('小伙伴们不要忘了点赞哦~');

  • console.log(msg)

这种方式则是在控制台中打印某些数据，在写代码的时候可以通过控制台打印一些数据查看代码的运行情况，在浏览器窗口按 F12 键再点击 Console 即可查看控制台。

console.log('微信公众号：Robod');

  • prompt(info)

通常我们可能需要用户去输入某些内容，这时候就可以弹出一个输入框，用户可以在输入框中输入内容。

prompt('这位兄台，你点赞了吗？');

变量和常量

计算机的内存是用来临时存放数据的，数据被存储在内存中的不同内存区域，每块区域都有内存地址，我们可以通过内存地址去操作对应区域中的数据，当有很多数据需要放入内存时，那么多的内存地址，记起来可不容易，所以就有了变量的概念，变量是用来存储数据的容器。可以这样去理解变量👉宾馆就相当于内存，里面有个房间的房间号是4399，4399号房里住的是王五，4399可能不太好记，给这个房间起个别名，叫Wangwu，那么Wangwu就是一个变量，指向的就是4399号房间。

变量在使用的过程中需要先声明再赋值，声明变量使用 var和let 关键字，它们两个的区别在于作用域的不同，当变量声明后，计算机会自动给变量分配内存空间，不需要我们手动地去分配，声明变量后再使用赋值号 “=” 为变量赋值。

var a;				//声明变量a
a = 10;				//为变量 a 赋值
var b = 20;			//声明变量 b 的同时给 b 赋值
var c = prompt();	//将prompt弹出输入框，并将输入框中的内容赋值给变量 c

变量的值是可以修改的，而常量指的是一经赋值就不能修改的值，用const关键字进行声明。

const a = 10;
a = 20;

如果修改常量的值就会报错。

数据类型

写过Java或者C语言的小伙伴们肯定知道，在声明变量的时候要指定数据类型，比如Java👇

int a = 10;
String s = "微信公众号：Robod";
float b = 3.14f;

但是JavaScript在声明变量的时候只需要写var或者let关键字，但这并不意味着JavaScript没有数据类型，而是因为JavaScript是一种弱类型的语言，在程序运行的过程中，数据的类型会被自动确定，不需要手动地指定。

可能有的小伙伴没学过其它语言，我简单提一嘴什么是数据类型，前面提到过变量是用来存储数据的容器，既然是容器，肯定要为容器贴个标签，不贴标签可能会出现问题，就和化学试验室里的药剂瓶一样，不贴标签万一把盐酸当水喝了怎么办~

不同的数据类型所占用的内存大小是不一样的，区分数据类型一方面可以降低系统的出错率，另一方面是为了更好地利用内存空间。

基本数据类型

基本数据类型有5个

类型说明默认值
Number数字型0
Boolean布尔值类型false
String字符串类型""
Undefined只声明了变量但是还没有赋值undefined
Null声明的时候赋值为nullnull
  • Number

Number就是数字型，整数和小数都是数字型，默认是十进制，也可以用来表示二进制、八进制以及十六进制。

var a = 10; //整形值
var b = 3.14; //浮点型
var c = 0b10; //二进制，以0b开头
var d = 077; //八进制，以0开头      
var e = 0x11; //十六进制，以0x开头
var f = Number.MAX_VALUE; //数值类型的最大值,1.7976931348623157e+308
var g = Number.MIN_VALUE; //数值类型的最小值,5e-324
var h = Infinity; //无穷大
var i = -Infinity; //无穷小
var j = NaN; //Not a Number 非数字
  • String

String就是字符串，顾名思义，就是一串字符，这串字符是用引号包裹起来的，单引号双引号都可以，推荐用单引号。既然引号是被用来表示字符串的，那么我想在字符串中表示引号怎么做？JavaScript为我们提供了转移字符，可以通过 “\” 加上特定的符号表示特定的字符：

如果想要获取一个字符串的长度，可以通过其 length 属性，多个字符串可以通过 “+” 去进行拼接，但字符串用的更多的还是字符串与变量之间进行拼接。

var s1 = "微信公众号: Robod";
var len = s1.length; //获取字符串s1的长度
var s2 = "s1的长度为：" + len; //s1的长度为：11
  • Boolean

布尔值有两个：true(真)和false(假)，Boolean与Number进行运算的时候表示为1和0。

var a = true;
var b = 1 < 0; //false
var c = 5 + a - b * 3; //6
  • Undefined 和 Null

一个只声明但未赋值的变量其类型就是 Undefined ，Null则表示一个空对象，就是什么都没有的意思。

typeof 关键字

当我们不知道一个变量的数据类型是什么的时候，就可以使用 typeof 关键字去获取它的数据类型。

var a = "微信公众号：Robod";
console.log(typeof a); //string
var b = 33.33;
console.log(typeof b); //number

数据类型的转换

有三种方式可以将其它类型的数据转换为字符串类型。

//1.toString()
var a = 10;
var s1 = a.toString(); //数字a转换为了字符串 '10'
//2.String()
var b = true;
var s2 = String(b); //boolean类型的b转换为了字符串 'true'
//3.最后一种就是前面提到过的 “+” 拼接字符串
var c = undefined;
var s3 = c + ''; //与空字符串拼接将其转换为字符串 'undefined'

既然数字可以转换为字符串，那么字符串同样也可以转换为数字型

//1.parseInt()，转换为整数，小数部分会舍去
var num1 = parseInt('666'); //将字符串 '666' 转换为数字 666
//2.parseFloat()，转换为小数
var num2 = parseFloat('6.668'); //将字符串 '6.668'转换为浮点数 6.668
//3.Number()，整数浮点数都可以转换
var num3 = Number('33'); //字符串 '33' 转换为数字型 33
//3.使用运算符进行隐式转换
var num4 = '3.14' * 1; //将字符串 '3.14' 转换为数字型 3.14

使用Boolean()函数可以将其它类型的数据转换为布尔型，代表空以及否定的值会被转换为false，如 ''、0、NaN、null、undefined，其它的则会被转换为true。

运算符

运算符是用来实现赋值、比较和执行算数运算等功能的符号。

算数运算符

用于执行两个变量或值得算数运算的符号被称作算符运算符。

运算符描述示例
+加1 + 1 = 2
-减2 - 1 = 1
*乘5 * 6 = 30
/除30 / 5 = 6
%取余数7 % 2 = 1

递增和递减运算符

递增运算符是 ++ ，递减运算符是 -- ，配合变量进行使用，分为前置递加(递减)和后置递加(递减)。

//递增操作，递减也是同样的道理
var a = 10;
//后置递增，先将a赋值给b，再执行自增操作，a=11，b=10
var b = a++;
//前置递增，先将b执行自增操作，再将b的值赋值给c，b=11，c=11
var c = ++b;

比较运算符

又称关系运算符，是两个数据进行比较的时候所使用的运算符，比较后，返回一个布尔值作为比较的结果。

运算符描述
<小于
>大于
>=大于等于
<=小于等于
==等于，会转型⭐
!=不等于
===全等
!==非全等
? :三元运算符

和Java中的比较运算符有点不同的是 "==" 并不是完全等于的意思，只比较内容是否相等，不比较数据类型； "==="才和Java中的 “==”是一个意思，当值与数据类型完全一致的时候结果才是true。

var num = 10;
var s = '10';
//先将字符串转换为数值类型再进行比较，所以结果是 true
var bool1 = num == s;
//数据类型不一致，结果是 false
var bool2 = num === s;

三元运算符有点特殊，它由三个表达式组成。

/*
	语法：条件表达式 ? 语句1 : 语句2;
	首先判断条件表达式的结果，如果是true，则取语句1的值，false则取语句2的值
*/
var a = (10 > 5) ? (12 / 2) : 3; //10>5的结果是true，所以a=12/2,结果是6

逻辑运算符

用来进行布尔值运算的运算符被称作逻辑运算符，它的返回值也是布尔值。

运算符说明
&&逻辑与
``逻辑或
!逻辑非

**&&和||的左右两侧都跟着一个表达式，!**的右侧跟着一个表达式。

//左右两侧都为true时结果为true，有一个为false结果就是false
var a = (5 > 3) && (5 === 4); //false
//只要有一个为true结果就是true
var b = (2 < 1) || (3 > 1); //true
//取表达式结果的相反结果
var c = !(5 > 3); //false

逻辑运算符两边的表达式不仅可以是布尔值，也可以是其它类型的值。

//当第一个表达式表示0，空等含义时，返回第一个表达式的结果，反之返回第二个表达式的结果
var a = '' && 456; //a=''
var b = 123 && (5 + 5); //b=10
//当第一个表达式表示0，空等含义时，返回第二个表达式的结果,之返回第一个表达式的结果
var c = 123 || 456; //c=123
var d = undefined || 456; //d=456

需要注意的是，逻辑运算符采用的是短路运算，即第一个表达式可以确定最终结果时，第二个表达式不进行计算。

var num = 5;
//a=null,num=5，前面一个表达式可以确定结果，++num不执行
var a = null && ++num;

赋值运算符

用来把数据赋值给变量的运算符。

运算符说明
=把赋值号右边的值赋给左边
+=、-=加减一个值后再进行赋值
*=、/=、%=乘除取余一个值后在进行赋值
var age = 10;
age += 5; //相当于age=age+5; age=15
age -= 5; //相当于age=age-5; age=10
age *= 10; //相当于age=age*10; age=100

运算符优先级

在小学的时候我们都学过，一个式子中加减和乘除同时存在时，先算乘除再算加减，有括号先算括号里的内容，这就是运算符的优先级，优先级高的先算，优先级小的后算。

流程控制

流程控制就是用来控制代码按照什么顺序来执行。

顺序结构

顺序结构就是按照代码的先后顺序执行，没有特定的语法结构。

分支结构

分支结构就是在代码执行的过程中根据不同的条件执行不同的代码路径，从而得到不同的结果，就像开车的时候遇到一个分岔路口一样，走不同的路会去往不同的地方。JavaScript中提供了if语句和switch语句这两种分支结构语句。

if语句由if、else和else if三个组成

//当表达式1为true时，执行花括号里的语句1
if (表达式1) {
    语句1;
}
//当表达式2中的语句为true时，执行语句2，为false执行语句3
if (表达式2) {
    语句2;
} else {
    语句3;
}
/* 依次判断，当有一个表达式为true时执行对应花括号里的语句，然后跳出分支结构；
如果都不符合执行最后面的else里的语句 */
if (表达式3) {
    语句4
} else if (表达式4) {
    语句5
} else if (表达式5) {
    语句6
} else {
    语句7
}

前面提到了三元表达式其实就和分支结构差不多。

switch语句和if else if一样也是多分支结构，它基于不同的条件来执行不同的代码

//通过表达式的值去选择对应的value，然后执行对应的语句，都不符合执行最后的default中的语句
switch (表达式) {
    case value1:
        语句1
        break;
    case value2:
        语句2
        break;
    ......
    default:
        执行最后的语句;
}

循环结构

在写程序的过程中，经常会遇到一些具有规律性的重复操作，所以有了循环结构后就可以重复执行某些操作，减少代码量。在JavaScript中有三种循环语句。JavaScript的循环和java中的循环是一样的，所以有Java编程经验的小伙伴可以略过这一节。

第一种是for循环。

/*
for (初始化变量; 条件表达式; 操作表达式) {
    //循环体
}
*/
for(var i=0;i<10;i++) {
    console.log('微信公众号：Robod');
}

上面这个例子中，首先 i 的值初始化为0，然后由条件表达式进行判断，符合条件执行花括号里的代码，然后执行操作表达式，再由条件表达式进行判断，符合条件再次执行花括号里的代码，直到不符合条件表达式时跳出循环。

第二种是while循环。

/*
while (条件表达式) {
    //循环体
}
*/
var i = 0;
while (i < 10) {
    console.log('微信公众号：Robod');
    i++;
}

首先判断是否符合条件表达式，符合则执行花括号里的代码，然后再进行判断，直到不符合条件时跳出循环。

最后一种是do while循环。

/*
do {
    //循环体
} while (条件表达式)
*/
var i = 0;
do {
    console.log('微信公众号：Robod');

} while (++i < 10);

和while循环不同的是，do while循环不管符不符合条件都会先执行一遍花括号里的代码，然后再进行条件判断，直到不符合条件时退出循环，相较于前两种循环结构，do while循环用的就比较少了。

在执行循环的时候可能会遇到一种情况，在循环执行的时候，不符合某些条件时结束这一次循环直接执行下一次循环，可以使用continue关键词。

//假设现在有个需求，按学号顺序筛选出身高大于170的同学
//在下面这段代码中，遇到身高不符的同学时，跳过该名同学，下面的代码不执行，直接看下一名同学
for (var i = 1; i <= 50; i++) {
    if (同学i的身高 < 170cm) {
        continue;
    }
    //把这位同学拎出来
}

与continue相对应的是break，当遇到break的时候直接结束循环。

//现在有另一个需求，按照学号顺序挑出一名身高在170以上的同学即可
//下面这段代码中，当找到有一个同学的身高在170以上时就使用break结束循环
for (var i = 0; i <= 50; i++) {
    if (同学i的身高 >= 170cm) {
        console.log('同学i');
        break;
    }
}

数组

数组，顾名思义，就是一组数据的集合，和Java不同的是，JavaScript的数组可以存放任意类型的数据，数组的创建有两种方式，一种是使用new关键字创建，另一种是使用数组字面量创建。

//1.使用new关键字
var array1 = new Array(); //创建了空数组
var array2 = new Array(1, 'Robod', true); //创建数组的时候添加数组元素
//2.利用数组字面量创建数组
var array3 = []; //创建空数组
var array4 = [1, 'Robod', true]; //创建数组的时候添加数组元素

每个数组元素都有一个编号，这个编号就是索引，按照元素插入的顺序从0开始递增，通过**数组名[索引]**的方式可以访问数组元素。

var array = new Array(1, 'Robod', true); //索引从0开始，从左向右索引依次是0,1,2
var name = array[1]; //获取索引为1的值赋值给变量name，name='Robod'

通过数组的length属性可以获取数组的长度。

var array = new Array(1, 'Robod', true);
var len = array.length; //通过length属性获取数组的长度
//结合循环可以实现数组的遍历
for (var i = 0; i < len; i++) {
    console.log(arr[i]);
}

JavaScript中，数组是可以实现扩容的，比如本来的容量是3，容量不够用了，可以通过扩容的方式再向数组里添加数据。

var array = new Array(1, 'Robod', true); //数组的容量是3
//1.通过修改数组的length属性实现数组的扩容
array.length = 4; //将数组容量修改为4，第四个元素的值是undefined
//2.直接通过数组名[索引]的方式向数组追加数据，也可以实现数组的扩容
array[4] = '666'; //之前数组容量是4，现在直接给第五个元素赋值即可将数组容量扩充至5

函数

平常在写代码的过程中，经常会在不同的地方编写一些功能相同的代码，那么这些代码可以将它们提取出来，封装成一个个不同的函数，当需要用到这段某个函数时，直接调用就可以了，这样可以减少很大一部分代码量。

函数需要先声明再使用，声明函数使用function关键字。

/*声明函数：
    function 函数名() {
        函数体
    }
*/
function f() { //声明函数
    console.log('Robod');
}
/*调用函数通过 函数名() 的方式*/
f(); //调用函数

👆的例子中是没有参数和返回值的情况，所谓参数就是在函数调用时给函数指定的条件，比如一个函数的作用是求两个数的和，那么在调用函数时肯定要把要相加的两个数传给函数；返回值则是函数执行完毕后给调用方一个反馈，用的是return关键字。

function add(a, b) { //a,b是形式参数，形参就是从调用方传递过来的
    var result = a + b;
    return result;
}
var sum = add(20, 30); //括号里的是实际参数，实参就是传递给函数的

👆的例子中形参和实参是一一对应的，JavaScript允许形参和实参个数不对应

function add(a, b) {
    var result = a + b;
    return result;
}
//1.实参个数大于形参时，多余的实参将被舍弃，也就是40被舍弃了,结果是50
var sum1 = add(20, 30, 40);
//2.实参个数小于形参时，多余的形参值为undefined，该例的计算结果为NaN
var sum2 = add(20);

JavaScript中还给我们提供了一个非常好用的东西——arguments，它是函数的内置对象，每个函数都有这样一个内置对象，它的作用就是存储了传递的所有实参，它采用了伪数组的方式存储实参，也就是说，我们在声明函数时可以不指定形参，通过arguments就可以获取到传递过来的所有实参。

//计算任意个数的参数的和
function add() {
    var result = 0;
    for (let i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }
    return result;
}
var sum = add(20, 30, 40, 50);

👆的例子中，arguments长👇这样

声明函数还有另一种方式，就是函数表达式，又称匿名函数。

var f = function () {
    //函数体
}
f(); //通过 “变量名()” 的方式调用函数

这种方式声明的函数没有函数名，只有变量名，函数的调用是通过 变量名() 的方式，函数调用时也是可以携带参数的。两种声明方式差不多。

作用域

代码中所使用到的变量名都有一个适用范围，超过范围就访问不了。就和WiFi信号一样，超过信号覆盖范围就连接不上了。

全局作用域

全局作用域在任何一个地方都能使用，全局变量会一直在内存中驻留，直到浏览器关闭时才会被销毁。在函数外部使用var关键字声明的变量就是全局变量，它在任意一个函数中都可以访问。

局部作用域

局部作用域又称函数作用域，只有在函数的内部才可以访问，在函数外面就访问不了了。

function f() {
    var a = 10;
}
console.log(a);

比如上面一段代码，在函数 f 内部定义了一个变量a，如果在函数外面去访问它就会报错。

块级作用域

在其它很多语言都会有块级作用域的概念，比如Java和C语言等，而JavaScript一开始是没有块级作用域的，直到ES6中才通过新增let关键字实现了块级作用域。块级作用域指的就是用花括号 “{}” 包裹起来的区域。

if (true) {
    var a = 10;
    let b = 20;
    console.log(b); //20
}
console.log('a=' + a); //a是全局变量，可以访问
console.log('b=' + b); //b的作用域是块级作用域，在花括号外面访问不了

作用域链

JavaScript中，函数是可以嵌套声明的，这样就会存在一个问题，当多个函数中都存在同名变量，访问的时候访问的是哪一个变量？

function f1() {
    var num = 10;
    function f2() {
        var num = 20;
        function f3() {
            console.log('f3:' + num); //20
        }
        f3();
        console.log('f2:' + num); //20
    }
    f2();
    console.log('f1:' + num); //10
}
f1();

每个函数都有一个作用域，如果函数内还有函数，那么在这个作用域中又会诞生一个作用域，内部函数可以访问外部函数的变量，这用用链式查找决定哪些数据能被内部函数访问，就称为作用域链。

比如上面的例子，f3 中没有名为num的变量，所以它就会去访问上一级的 f2 中的变量num，如果还没有的话就会再去上一级访问，以此类推。而 f2 和 f1 中各自都有名为num的变量，所以就会访问自己的变量num。

预解析

js引擎分为预解析和代码执行，预解析的意思就是会把js代码里所有的var还有function提升到当前作用域的最前面。预解析分为变量预解析(变量提升)和函数预解析(函数提升)。

变量预解析

先看这样一段代码👇

console.log(a); //undefined
var a = 10;

它的打印结果是undefined，按理说打印的时候变量还没有被声明，应该报错的呀，不是声明了但未赋值的变量打印结果才是undefined吗？因为变量提升是把变量的声明提升到当前作用域的最前面，但是不提升赋值操作，就相当于下面这段代码：

var a;
console.log(a); //undefined
a = 10;

所以打印的结果才是undefined。

函数预解析

函数提升是把函数声明提升到当前作用域最前面。

f();
function f() {
    console.log('微信公众号：Robod');
}

上面这段代码中的函数声明是放在函数调用后面的，也可以正常执行，因为函数声明被js引擎放在的前面，相当于下面这段代码：

function f() {
    console.log('微信公众号：Robod');
}
f();

但是用函数表达式的方式声明函数可不是这样，比如下面这段代码：

f();
var f = function () {
    console.log('微信公众号：Robod');
}

👆这段代码执行起来的话则会报错，函数表达式的预解析过程与变量预解析一样，它相当于下面这段代码：

var f;
f();
f = function () {
    console.log('微信公众号：Robod');
}

所以函数表达式的调用要放在函数表达式的下面。

对象

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。对象就是一个具体的事物，对象由属性和方法组成，属性是对象的某些特质，是名词；方法是对象的行为，是名词。比如狗是对象吗，狗不是对象，它是一个泛指，但是一条叫小明的狗就是一个对象，它拥有年龄，体重等属性，也拥有吃饭，跑，跳等方法。

对象的创建有三种方式

字面量

创建对象使用的字面量是 “{}”，里面包含了对象的属性和方法。

/* 语法：
var 对象名 = {
    属性名1: 属性值,
    属性名2: 属性值,	//用逗号隔开
    ......,
    方法名1: function () {
        ...
    },
    方法名2: function (参数) {
        ...
    }
    ......
}*/
var robod = {
    name: 'robod',
    height: 180,
    yanzhi: 'max',
    eat: function (rice) {
        console.log('干饭人！干饭魂！干饭都是人上人！');
    }
}

对象属性以及方法的调用👇

//通过 “对象名.属性名” 的方式调用对象的属性
console.log(robod.name);
//通过 “对象名['属性名']” 的方式调用对象的属性 
console.log(robod['yanzhi']);
//通过 “对象名.方法名()” 的方式调用对象的方法
robod.eat();

new Object()

Java里创建对象用的是new关键字，JavaScript也可以new一个对象。

//先创建一个空对象
var robod = new Object();
//再通过 “=” 赋值的方式添加属性及方法
robod.name = 'robod';
robod.height = 180;
robod.yanzhi = 'max';
robod.eat = function () {
    console.log('干饭人！干饭魂！干饭都是人上人！');
}

构造函数

前面两种方式一次只能创建一个对象，如果有两个对象的和方法是一样的，只能复制代码了，这样会使得代码比较臃肿。用构造函数的方式创建对象就变得比较简单，这和Java类似，就是将对象中一些相同的属性和方法抽出来封装到一个构造函数中。

function LiangZai(name, height, yanzhi, rice) {
    this.name = name; //this.属性名 = 传递过来的参数
    this.height = height;
    this.yanzhi = yanzhi;
    this.eat = function () { //this.方法名
        console.log(rice);
    }
}
var robod = new LiangZai('Robod', 180,
    'max', '干饭人！干饭魂！干饭都是人上人！');
var xiaoming = new LiangZai('小明', 175, '大帅比', '小米');

构造函数泛指某一大类，比如上面的构造函数就泛指靓仔这一类，而创建的对象则是一个具体的实例，比如上面创建了robod和xiaoming两位靓仔，构造函数其实就相当于Java中Class的概念。

遍历对象

有时候我们可能需要遍历对象中的属性以及属性值，可以通过for in的方式，这种方式也是可以遍历方法的

var robod = {
    name: 'robod',
    height: 180,
    yanzhi: 'max',
    eat: function () {
        console.log('干饭人！干饭魂！干饭都是人上人！');
    }
}
for (const key in robod) { //in前面的key遍历时代指属性名和方法名，后面的是对象名
    console.log(key);
    console.log(robod[key]); //格式为 “对象名[key]” 
}

内置对象

内置对象是指JavaScript中自带的一些对象，这些对象提供了一些常用的方法，可以简化我们的开发工作。

Math对象

Math封装了一些数学中的常数和常用的方法，比如求绝对值，取整等。Math不用new，里面的属性和方法都是静态的可以直接调用，相当于Java中的静态类。

Math.PI; //圆周率
Math.floor(); //向下取整
Math.ceil(); //向上取整
Math.random(); //四舍五入就近取整
Math.abs(); //绝对值
Math.max(); //求最大值
Math.min(); //求最小值

日期对象 Date

Date里封装了一些和日期相关的方法，比如获取一个日期字符串，返回从1970年1月1日到现在的毫秒数等。Date对象在使用前要用new去进行实例化。

var date = new Date();
//获取Date总的毫秒数，从1970年1月1日到现在过了多少毫秒
//1.valueOf()方法
date.valueOf();
//2.getTime()方法
date.getTime();
//3.now()方法，静态方法，直接调用
Date.now();
//4.简单的写法
+new Date();

数组对象 Array

Array对象在前面已经说过了，是用来创建数组的，它里面包含了一些和数组相关的方法，比如删除元素，添加元素等。

var arr = [1, 2, 3, 4, 5];
//末尾添加一个或多个元素
arr.push(6, 7); //1, 2, 3, 4, 5, 6, 7
//删除数组最后一个元素
arr.pop(); //1, 2, 3, 4, 5, 6
//向数组的开头添加一个或多个元素
arr.unshift(-1, 0); //-1, 0, 1, 2, 3, 4, 5, 6
//删除数组的第一个元素
arr.shift(); //0, 1, 2, 3, 4, 5, 6
//数组中给定元素的第一个索引,不存在返回-1
console.log(arr.indexOf(3));
arr.indexOf(3); //3
//数组中给定元素的最后一个索引,不存在返回-1
console.log(arr.lastIndexOf(3)); //3
//把数组转换成字符串，用逗号分隔每一项
console.log(arr.toString()); //0,1,2,3,4,5,6
//把数组转换成字符串，用指定分隔符分隔每一项
console.log(arr.join('￥$￥')); //0￥$￥1￥$￥2￥$￥3￥$￥4￥$￥5￥$￥6

字符串对象

JavaScript中的字符串和Java中的字符串一样，也是具有不可变性的，所以字符串对象中的所有方法都不会修改字符串本身，操作完成后会返回一个新的字符串。

var s = '干饭人，干饭魂，干饭都是人上人';
//查找指定内容的下标,indexOf('要查找的字符或字符串', 从哪个位置开始查找(可省略))
console.log(s.indexOf('饭', 3)); //5
//从后往前查找，lastIndexOf('要查找的字符或字符串', 从哪个位置开始查找(可省略))
console.log(s.lastIndexOf('干饭', 5)); //4
//获取指定位置的字符，charAt(字符的索引号)
console.log(s.charAt(6)); //魂
//获取指定位置的字符,str[索引号]
console.log(s[6]); //魂
//拼接两个或多个字符串，等同于 “+”
'干饭人'.concat('干饭魂', '干饭都是人上人'); //干饭人干饭魂干饭都是人上人
//截取字符串，substr(起始位置的索引号,截取的字符个数)
console.log(s.substr(4, 3)); //干饭魂
//截取字符串，slice(起始位置，结束位置(不包含结束位置的字符))
console.log(s.slice(4, 7)); //干饭魂
//替换字符，replace('被替换的字符或字符串','替换为的字符或字符串')，只会替换第一个
console.log(s.replace('饭', 'rice')); //干rice人，干饭魂，干饭都是人上人
//转换为数组，split('分隔符')
console.log(s.split('，')); //["干饭人", "干饭魂", "干饭都是人上人"]

文档查询

上面我所提到的方法只是一小部分，更多的内容可以参考MDN的网站（developer.mozilla.org/zh-CN/），只要在搜索框内搜索对应的关键字就会出现对应的内容，上面有详细的属性、方法及用法等的说明。

但是直接使用MDN的网站还是有些不太方便，有一种更加简单的方法。我在之前的《写文章一年了，我用到的工具都在这儿了！》一文中安利过一款非常好用的软件——uTools。它里面有一款插件叫做JavaScript 文档，通过这款插件就可以很迅速的查找MDN中的内容。

看见没，只要按快捷键Alt+空格调出uTools，然后输入js后按回车就会打开JavaScript 文档插件，之后再输入想要搜索的内容就是在搜索MDN的内容了。

总结

其实之前就学过JavaScript，但是好长时间没看了，当时也没做笔记，好多东西都忘了，所以这几天趁着放假赶紧把JavaScript重温了一下，然后写了篇笔记记录一下JavaScript中的知识点，怕时间长了又忘了。这一篇主要是将JavaScript的基础语法的，操作页面元素的内容会放在下一篇文章中。文中有什么不对的地方欢迎指正！

码字不易，可以的话，给我来个点赞，收藏，关注

如果你喜欢我的文章，欢迎关注微信公众号 『 R o b o d 』

本文已收录至我的Github仓库DayDayUP：github.com/RobodLee/Da…，欢迎Star

avatar
文章
阅读
粉丝
相关推荐
由浅入深，66条JavaScript面试知识点
295k阅读
 · 
5.1k点赞
近一万字的ES6语法知识点补充
120k阅读
 · 
2.5k点赞
高级前端基础-JavaScript抽象语法树AST
28k阅读
 · 
410点赞
JavaScript基础知识总结
23k阅读
 · 
213点赞
这一次，彻底弄懂 JavaScript 执行机制
332k阅读
 · 
7.9k点赞