一、数组

数组(Array)是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

//普通变量一次只能存储一个值
var num = 10;
//数组一次可以存储多个值
var arr =[1,2,3,4,5];

1、创建数组

JavaScript 中创建数组有两种方式：

1、利用 new 创建数组
2、利用数组字面量创建数组

1、利用 new 创建数组

var 数组名 = new Array();
var arr = new Array(); //创建一个新的空数组

2、利用数组字面量创建数组

// 1.利用数组字面量方式创建空的数组
var 数组名 =[];
// 2.使用数组字面量方式创建带初始值的数组
var 数组名 =['小白','小黑','小黄','瑞奇'];
// 3.数组中可以存放任意类型的数据，例如字符串，数字，布尔值等
var arrStus =['小白',12,true,28.9];

1、数组的字面量是方括号 []
2、声明数组并赋值称为数组的初始化
3、这种字面量方式也是我们以后最多使用的方式

2、访问数组元素

索引(下标):用来访问数组元素的序号。索引从 0 开始

//定义数组
var arrStus = [1,2,3];
//获取数组中的第2个元素
alert(arrStus[1]);

如果访问数组时没有和索引值对应的元素(数组越界)，返回值为undefined

3、遍历数组

我们可以通过 for 循环索引遍历数组中的每一项

// 数组索引访问数组中的元素
var arr = ['red','green', 'blue'];
console.log(arr[0]) // red
console.log(arr[1]) // green
console.log(arr[2]) // blue// for循环遍历数组
var arr = ['red','green', 'blue'];
for (var i = 0; i < arr.length; i++){console.log(arrStus[i]);
}

4、数组的长度

使用“数组名.length”可以访问数组元素的数量（数组长度）

var arrStus = [1,2,3];
alert(arrStus.length);  // 3

注意：

1、此处数组的长度是数组元素的个数，不要和数组的索引号混淆

2、当我们数组里面的元素个数发生了变化，这个 length 属性跟着一起变化

5、一些案例

1.请将 [“关羽”,“张飞”,“马超”,“赵云”,“黄忠”,“刘备”,“姜维”]; 数组里的元素依次打印到控制台

var arr = ["关羽","张飞","马超","赵云","黄忠","刘备","姜维"];
// 遍历  从第一个到最后一个
for(var i = 0; i < arr.length; i++ )  { console.log( arr[i] );
}

2.求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值

①声明一个求和变量 sum。
①遍历这个数组，把里面每个数组元素加到 sum 里面。
①用求和变量 sum 除以数组的长度就可以得到数组的平均值。

var arr = [2, 6, 1, 7, 4];
var sum = 0;
var average = 0;
for (var i = 0; i < arr.length; i++) {sum += arr[i];
}
average = sum / i; //此时i为5
//      average = sum / arr.length;
console.log('和为' + sum);
console.log('平均值为' + average);

3.求数组[2,6,1,77,52,25,7]中的最大值

①声明一个保存最大元素的变量 max。
②默认最大值可以取数组中的第一个元素。
③遍历这个数组，把里面每个数组元素和 max 相比较。
④如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
⑤最后输出这个 max。

var arr = [2,6,1,77,52,25,7];
var max = arr[0]; // 用来保存最大元素,默认最大值是数组中的第一个元素
// 从0 开始循环数组里的每个元素
for(var i = 0;i< arr.length; i++){// 如果数组里当前循环的元素大于 max，则保存这个元素和下标if(arr[i] > max){max = arr[i]; // 保存数值到变量 maxNum}
}
console.log('最大值为' + max);

4.将数组 [‘red’, ‘green’, ‘blue’, ‘pink’] 里面的元素转换为字符串

思路：就是把里面的元素相加就好了，但是注意保证是字符相加

①需要一个新变量 str 用于存放转换完的字符串。
②遍历原来的数组，分别把里面数据取出来，加到字符串变量 str 里面。

var arr = ['red','green','blue','pink'];
var str ='';
for(var i = 0; i < arr.length; i++){str += arr[i];
}
console.log(str);
// redgreenbluepink

5.将数组 [‘red’, ‘green’, ‘blue’, ‘pink’] 转换为字符串，并且用 | 或其他符号分割

①需要一个新变量用于存放转换完的字符串 str。
①遍历原来的数组，分别把里面数据取出来，加到字符串里面。
①同时在后面多加一个分隔符。

var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
var separator = '|';
for (var i = 0; i < arr.length; i++) {str += arr[i] + separator;
}
console.log(str);
// red|green|blue|pink

6、数组中新增元素

1、通过修改 length 长度新增数组元素

1、可以通过修改 length 长度来实现数组扩容的目的
2、length 属性是可读写的

var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);

其中索引号是 4，5，6 的空间没有给值，就是声明变量未给值，默认值就是 undefined

2、通过修改数组索引新增数组元素

1、可以通过修改数组索引的方式追加数组元素
2、不能直接给数组名赋值，否则会覆盖掉以前的数据
3、这种方式也是我们最常用的一种方式

var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);

7、数组中新增元素案例

1.新建一个数组，里面存放10个整数（ 1~10），要求使用循环追加的方式输出： [1,2,3,4,5,6,7,8,9,10]

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

2.将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组

①声明一个新的数组用于存放新数据。
②遍历原来的数组，找出大于等于 10 的元素。
③依次追加给新数组 newArr。

方法1：

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
// 定义一个变量 用来计算 新数组的索引号
var j = 0;
for (var i = 0; i < arr.length; i++) {if (arr[i] >= 10) {// 给新数组newArr[j] = arr[i];// 索引号 不断自加j++;}
}
console.log(newArr);

方法2：

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {if (arr[i] >= 10) {// 给新数组newArr[newArr.length] = arr[i];}
}
console.log(newArr);

8、删除指定数组元素

将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一个不包含 0 的新数组。

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for(var i = 0; i <arr.length; i++){if(arr[i] != 0){newArr[newArr.length] = arr[i];}
}
console.log(newArr);

9、翻转数组

将数组 [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’] 的内容反过来存放

// 把旧数组索引号的第4个取过来(arr.length - 1),给新数组索引号第0个元素(newArr.length)var arr = ['red','green','blue','pink','purple'];
var newArr = [];
for (var i = arr.length -1; i>=0; i--){newArr[newArr.length] = arr[i];
}
console.log(newArr);

10、数组排序（冒泡为例）

冒泡排序

将数组 [5, 4, 3, 2, 1]中的元素按照从小到大的顺序排序，输出： 1，2，3，4，5

var arr = [5,4,3,2,1];
for (var i = 0; i < arr.length-1; i++){ //外层循环管趟数，5个数共交换4躺for (var j = 0; j < arr.length - i - 1; j++){//里层循环管每一趟交换的次数//前一个和后面一个数组元素相比较if(arr[j] > arr[j+1]){var temp = arr[j];arr[j] = arr[j+1];arr[j+1] = temp;}  }
}
console.log(arr);

函数做法：

function sort(arr) {for(var i = 0; i < arr.length - 1; i++) {for(var j = 0; j < arr.length - 1 - i; j++) {if (arr[j] > arr[j+1]){var temp = arr[j];arr[j] = arr[j+1];arr[j+1] = temp;}}}return arr;}var arr1 = sort([1,4,2,9]); console.log(arr1);//1 2 4 9

二、函数

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

1、函数的使用

函数在使用时分为两步：声明函数和调用函数

1、声明函数

//声明函数
function 函数名(){//函数体代码
}

1、function 是声明函数的关键字,必须小写
2、由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum
3、函数不调用，自己不执行

2、调用函数

//调用函数
函数名(); //通过调用函数名来执行函数体代码

2、函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

3、函数的参数

1、形参和实参

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。

参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔// 函数体
}// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);

例如：利用函数求任意两个数的和

// 声明函数
function getSum(num1,num2){console.log(num1+num2)
}// 调用函数
getSum(1,3) //4
getSum(6，5) //11

1、函数调用的时候实参值是传递给形参的
2、形参简单理解为:不用声明的变量
3、实参和形参的多个参数之间用逗号(,)分隔

2、形参和实参个数

function sum(num1, num2) {console.log(num1 + num2);
}
sum(100, 200);             // 300，形参和实参个数相等，输出正确结果sum(100, 400, 500, 700);   // 500，实参个数多于形参，只取到形参的个数sum(200);                  // 实参个数少于形参，多的形参定义为undefined，结果为NaN

注意：在JavaScript中，形参的默认值是undefined

3、小结

1、函数可以带参数也可以不带参数
2、声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
3、调用函数的时候，函数名括号里面的是实参
4、多个参数中间用逗号分隔
5、形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配

4、函数的返回值

1、return语句

有的时候，我们会希望函数将值返回给调用者，此时通过使用 return 语句就可以实现。

return 语句的语法格式如下

// 声明函数
function 函数名（）{...return  需要返回的值;
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值

1、在使用 return 语句时，函数会停止执行，并返回指定的值
2、如果函数没有 return ，返回的值是 undefined

// 声明函数
function sum(){...return  666;
}
// 调用函数
sum();      // 此时 sum 的值就等于666，因为 return 语句会把自身后面的值返回给调用者
//最后还要打印函数，因为函数存储的是值，不打印是没有结果的
console.log(sum());

案例

1.利用函数求任意两个数的最大值

function getMax(num1, num2) {return num1 > num2 ? num1 : num2;
}
console.log(getMax(1, 2));
console.log(getMax(11, 2));

2.求数组 [5,2,99,101,67,77] 中的最大数值

//定义一个获取数组中最大数的函数
function getArrMax(arr){var max = arr[0];for(var i = 0; i < arr.length;i++){if(arr[i]>max){max = arr[i];}}return max;
}
var arr = [5,2,99,101,67,77];
var re = getArrMax(arr);  //这个实参是个数组
console.log('最大值为' + re);

2、return 终止函数

return 语句之后的代码不被执行

function add(num1，num2){//函数体return num1 + num2; // 注意：return 后的代码不执行alert('我不会被执行，因为前面有 return');
}
var resNum = add(21,6); // 调用函数，传入两个实参，并通过 resNum 接收函数返回值
alert(resNum);          // 27

3、return 的返回值

return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准，可以用数组或对象保存多个值

function add(num1，num2){//函数体return num1,num2;
}
var resNum = add(21,6); // 调用函数，传入两个实参，并通过 resNum 接收函数返回值
alert(resNum);          // 6  返回最后一个值

案例：
创建一个函数，实现两个数之间的加减乘除运算，并将结果返回

var a = parseFloat(prompt('请输入第一个数'));
var b = parseFloat(prompt('请输入第二个数'));function count(a,b){var arr = [a + b, a - b, a * b, a / b];return arr;
}
var result = count(a,b);
console.log(result)

4、小结

函数都是有返回值的

1、如果有 return ，则返回 return 后面的值
2、如果没有 return，则返回 undefined

5、区别

break、continue、return 的区别

1、break ：结束当前循环体(如 for、while)
2、continue ：跳出本次循环，继续执行下次循环(如for、while)
3、return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

5、arguments的使用

当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

1、arguments存放的是传递过来的实参2、arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点

①：具有 length 属性

②：按索引方式储存数据

③：不具有数组的 push , pop 等方法

// 函数声明
function fn() {console.log(arguments);  //里面存储了所有传递过来的实参console.log(arrguments.length); // 3console.log(arrguments[2]); // 3
}// 函数调用
fn(1,2,3);

例如：利用函数求任意个数的最大值

 function maxValue() {var max = arguments[0];for (var i = 0; i < arguments.length; i++) {if (max < arguments[i]) {max = arguments[i];}}return max;
}
console.log(maxValue(2, 4, 5, 9)); // 9
console.log(maxValue(12, 4, 9)); // 12

6、函数练习

1.利用函数封装方式，翻转任意一个数组

function reverse(arr) {var newArr = [];for (var i = arr.length - 1; i >= 0; i--) {newArr[newArr.length] = arr[i];}return newArr;
}
var arr1 = reverse([1, 3, 4, 6, 9]);
console.log(arr1);

2.利用函数封装方式，对数组排序 – 冒泡排序

function sort(arr) {for (var i = 0; i < arr.length - 1; i++) {for (var j = 0; j < arr.length - i - 1; j++) {if (arr[j] > arr[j+1]) { var temp = arr[j];arr[j] = arr[j + 1]; arr[j + 1] = temp;}}}return arr;
}
var arr1 = sort([1, 3, 4, 6, 9]);
console.log(arr1);

3.输入一个年份，判断是否是闰年（闰年：能被4整除并且不能被100整数，或者能被400整除）

function isRun(year) {var flag = false;if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {flag = true;}return flag;
}
console.log(isRun(2010));
console.log(isRun(2012));

函数调用另外一个函数
因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数相互调用的情况。具体演示在下面。

4、用户输入年份，输出当前年份2月份的天数，如果是闰年，则2月份是 29天，如果是平年，则2月份是 28天

function backDay() {var year = prompt('请您输入年份:');if (isRun(year)) { //调用函数需要加小括号alert('你输入的' + year + '是闰年，2月份有29天');} else {alert('您输入的' + year + '不是闰年，2月份有28天');}
}
backDay();
//判断是否是闰年的函数
function isRun(year) {var flag = false;if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {flag = true;}return flag;
}

7、函数的两种声明方式

1、自定义函数方式(命名函数)

利用函数关键字 function 自定义函数方式。

// 声明定义方式
function fn() {...}// 调用
fn();

1、因为有名字，所以也被称为命名函数
2、调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

2、函数表达式方式(匿名函数)

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...};// 调用的方式，函数调用必须写到函数体下面
fn();

1、因为函数没有名字，所以也称为匿名函数
2、这个fn 里面存储的是一个函数
3、函数调用的代码必须写到函数体后面

三、作用域

定义：通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。
**作用：**作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

JavaScript (ES6前) 中的作用域有两种：

1、全局作用域
2、局部作用域(函数作用域)

1、全局作用域

作用于所有代码执行的环境(整个 script 标签内部)，或者是一个独立的 js 文件

2、局部（函数）作用域

作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域

补充：JS 没有块级作用域(在ES6之前)，ES6新增了let

3、变量的作用域

在JavaScript中，根据作用域的不同，变量可以分为两种：

1、全局变量
2、局部变量

1、全局变量

在全局作用域下声明的变量叫做全局变量**（在函数外部定义的变量）**

1、全局变量在代码的任何位置都可以使用

2、在全局作用域下 var 声明的变量是全局变量

3、特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

2、局部变量

在局部作用域下声明的变量叫做局部变量**（在函数内部定义的变量）**

1、局部变量只能在该函数内部使用

2、在函数内部 var 声明的变量是局部变量

3、函数的形参实际上就是局部变量

3、从执行效率两种变量的区别

1、全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存

2、局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

4、作用域链

1、只要是代码，就至少有一个作用域

2、写在函数内部的叫局部作用域

3、如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域

4、根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

// 作用域链: 内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构我们称为作用域链表var num = 10;
funtion fn() { //外部函数var num = 20;function fun() { //内部函数console.log(num);  // 20 ,一级一级访问}
}

作用域链：采取就近原则的方式来查找变量最终的值。

四、预解析

首先来看几段代码和结果

console.log(num);  // 结果是多少？
//会报错 num is not defined

console.log(num);  // 结果是多少？
var num = 10;
// undefined

// 命名函数(自定义函数方式):若我们把函数调用放在函数声明上面
fn();               //11
function fn() {console.log('11');
}

// 匿名函数(函数表达式方式):若我们把函数调用放在函数声明上面
fn();
var  fn = function() {console.log('22'); // 报错
}//相当于执行了以下代码
var fn;
fn();      //fn没赋值，没这个，报错
var  fn = function() {console.log('22'); //报错
}

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

1、预解析：js引擎会把js里面所有的 var 还有 function 提升到当前作用域的最前面

2、代码执行：从上到下执行JS语句

预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined，为什么在函数声明之前就可以调用函数。

1、变量预解析(变量提升)

1、变量预解析也叫做变量提升、函数提升

2、变量提升: 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升

console.log(num);  // 结果是多少？
var num = 10;
// undefined//相当于执行了以下代码
var num;        // 变量声明提升到当前作用域最上面
console.log(num);
num = 10;      // 变量的赋值不会提升
// undefined

2、函数预解析(函数提升)

函数提升： 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

fn();                //11
function fn() {console.log('11');
}

3、解决函数表达式声明调用问题

对于函数表达式声明调用需要记住：函数表达式调用必须写在函数声明的下面

// 匿名函数(函数表达式方式):若我们把函数调用放在函数声明上面
fn();
var  fn = function() {console.log('22'); // 报错
}//相当于执行了以下代码
var fn;
fn();      //fn没赋值，没这个，报错
var  fn = function() {console.log('22'); //报错
}

五、对象

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的：

1、属性：事物的特征，在对象中用属性来表示（常用名词）
2、方法：事物的行为，在对象中用方法来表示（常用动词）

为什么需要对象

1、保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组，如果保存一个的完整信息呢？
2、为了更好地存储一组数据，对象应用而生；对象中为每项数据设置了属性名称，可以访问数据更语义化，数据结构清晰，表意明显，方便开发者使用。

  var obj = {"name":"LTY","sex":"male","age":18,"height":155}

1、创建对象

在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：

1、利用字面量创建对象
2、利用 new Object创建对象
3、利用构造函数创建对象

1、利用字面量创建对象

对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法

{ } 里面采取键值对的形式表示

1、键：相当于属性名
2、值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

var star = {name : 'pink',age : 18,sex : '男',sayHi : function(){alert('大家好啊~');}
};
// 多个属性或者方法中间用逗号隔开
// 方法冒号后面跟的是一个匿名函数

2、利用 new Object 创建对象

跟之前的 new Array() 原理一致：var 对象名 = new Object();

使用的格式：对象.属性 = 值

var obj = new Object(); //创建了一个空的对象
obj.name = '张三丰';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {console.log('hi~');
}//1.我们是利用等号赋值的方法添加对象
//2.每个属性和方法之间用分号结束
console.log(obj.name);
console.log(obj['sex']);
obj.sayHi();

3、利用构造函数创建对象

**构造函数：**是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

在 js 中，使用构造函数要时要注意以下两点：

1、构造函数用于创建某一类对象，其首字母要大写
2、构造函数要和 new 一起使用才有意义

//构造函数的语法格式
function 构造函数名() {this.属性 = 值;this.方法 = function() {}
}
new 构造函数名();

//1. 构造函数名字首字母要大写
//2. 构造函数不需要return就可以返回结果
//3. 调用构造函数必须使用 new
//4. 我们只要new Star() 调用函数就创建了一个对象
//5. 我们的属性和方法前面必须加this
function Star(uname,age,sex) {this.name = uname;this.age = age;this.sex = sex;this.sing = function(sang){console.log(sang);}
}
var ldh = new Star('刘德华',18,'男');
console.log(typeof ldh) // object对象，调用函数返回的是对象console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨');
//把冰雨传给了sangvar zxy = new Star('张学友',19,'男');

总结：
1、构造函数名字首字母要大写
2、函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
3、构造函数中不需要 return 返回结果。
4、当我们创建对象的时候，必须用 new 来调用构造函数。

2、对象的调用

1、对象里面的属性调用 : 对象.属性名，这个小点 . 就理解为“ 的 ”

2、对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号，我们后面会用

3、对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号

console.log(star.name)     // 调用名字属性
console.log(star['name'])  // 调用名字属性
star.sayHi();              // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

3、变量、属性、函数、方法总结

1、变量：单独声明赋值，单独存在
2、属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
3、函数：单独存在的，通过“函数名()”的方式就可以调用
4、方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。

4、构造函数和对象

1、构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）
2、创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化

5、new关键字的作用(面试题)

new 在执行时会做四件事:

1.在构造函数代码开始执行之前，创建一个空对象；
2.修改this的指向，把this指向创建出来的空对象；
3.执行构造函数内的代码，给这个新对象添加属性和方法
4.在函数完成之后，返回这个创建出来的新对象(所以构造函数里面不需要return)

6、遍历对象的属性

for…in 语句用于对数组或者对象的属性进行循环操作
语法如下

for(变量 in 对象名字){// 在此执行代码
}

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

for(var k in obj) {console.log(k);       //这里的 k 是属性名console.log(obj[k]);//这里的 obj[k] 是属性值
}

var obj = {name: '秦sir',age: 18,sex: '男',fn:function() {};
};
console.log(obj.name);
console.log(obj.age);
console.log(obj.sex);//for in 遍历我们的对象
//for (变量 in 对象){}
//我们使用for in 里面的变量 我们喜欢写k 或者key
for(var k in obj){console.log(k); // k 变量 输出得到的是属性名console.log(obj[k]); // obj[k] 得到的是属性值
}

六、内置对象（重要）

1、JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象2、内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能3、JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

1、查文档

学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询

MDN: https://developer.mozilla.org/zh-CN/

如何学习对象中的方法

1、查阅该方法的功能
2、查看里面参数的意义和类型
3、查看返回值的意义和类型
4、通过 demo 进行测试

2、Math对象

Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

注意：上面的方法必须带括号

1.练习：封装自己的数学对象

利用对象封装自己的数学对象，里面有PI 最大值和最小值

var myMath = {PI: 3.141592653,max: function() {var max = arguments[0];for (var i = 1; i < arguments.length; i++) {if (arguments[i] > max) {max = arguments[i];}}return max;},min: function() {var min = arguments[0];for (var i = 1; i < arguments.length; i++) {if (arguments[i] < min) {min = arguments[i];}}return min;}
}
console.log(myMath.PI);
console.log(myMath.max(1, 5, 9));
console.log(myMath.min(1, 5, 9));

2.Math绝对值和三个取整方法

1、Math.abs() 取绝对值
1、三个取整方法：
1、Math.floor() : 向下取整
2、Math.ceil() : 向上取整
3、Matg.round() : 四舍五入，其他数字都是四舍五入，但是5特殊，它往大了取

//1.绝对值方法
console.log(Math.abs(1));  // 1
console.log(Math.abs(-1)); // 1
console.log(Math.abs('-1')); // 1 隐式转换，会把字符串 -1 转换为数字型
//2.三个取整方法
console.log(Math.floor(1.1)); // 1 向下取整，向最小的取值 floor-地板
console.log(Math.floor(1.9)); //1console.log(Math.ceil(1.1)); //2 向上取整，向最大的取值 ceil-天花板
console.log(Math.ceil(1.9)); //2 //四舍五入 其他数字都是四舍五入，但是5特殊，它往大了取console.log(Math.round(1.1)); //1 四舍五入
console.log(Math.round(1.5)); //2
console.log(Math.round(1.9)); //2
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // -1

3.随机数方法random()

1、random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1
2、得到一个两数之间的随机整数，包括第一个数，不包括第二个数

// 得到两个数之间的随机整数，并且包含这两个整数
function getRandom(min,max) {return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1,10));

1.随机点名

var arr = ['张三', '李四','王五','秦六']；
console.log(arr[getRandom(0,arr.length - 1)]);

2.猜数字游戏

function getRandom(min,max) {return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1,10);
while(true) { //死循环 ，一直会执行，需要退出循环条件var num = prompt('请输入1~10之间的一个整数:');if(num > random) {alert('你猜大了');}else if (num < random) {alert('你猜小了');}else {alert('你猜中了');break; //退出整个循环}
}

3、Data()日期对象

1、Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
2、Date 实例用来处理日期和时间

1、Date()方法的使用

1、获取当前时间必须实例化

var date = new Date();
console.log(date);

2、Date()构造函数的参数

如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为 ‘2019-5-1’，可以写成new Date(‘2019-5-1’) 或者 new Date(‘2019/5/1’)

1、如果Date()不写参数，就返回当前时间
2、如果Date()里面写参数，就返回括号里面输入的时间

// 1.如果没有参数，返回当前系统的当前时间
var now = new Date();
console.log(now);// 2.参数常用的写法 数字型 2019,10,1  字符串型 '2019-10-1 8:8:8' 时分秒
// 如果Date()里面写参数，就返回括号里面输入的时间
var data = new Date(2019,10,1);
console.log(data);  // 返回的是11月不是10月var data2 = new Date('2019-10-1 8:8:8');
console.log(data2);

2、日期格式化

我们想要 2019-8-8 8:8:8 格式的日期，要怎么办？

需要获取日期指定的部分，所以我们要手动的得到这种格式

var date = new Date();
console.log(date.getFullYear()); // 返回当前日期的年 2019
console.log(date.getMonth() + 1);  //返回的月份小一个月 记得月份 +1
console.log(date.getDate); //返回的是几号
console.log(date.getDay());  //周一返回1 周6返回六 周日返回0// 写一个 2019年 5月 1日 星期三
var date = new Date();
var year =  date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
console.log('今天是' + year +'年' + month + '月' + dates +'日' );// 封装一个函数返回当前的时分秒 格式 08:08:08
function getTimer() {var time = new Date();var h = time.getHours();h = h < 10 ? '0' + h : h;var m = time.getMinutes();m = m < 10 ? '0' + m : m;var s = time.getSeconds();s = s < 10 ? '0' + s : s;return h + ':' + m + ':' + s;
}
console.log(getTimer());

3、获取日期的总的毫秒形式（时间戳）

1、date.valueOf() ：得到现在时间距离1970.1.1总的毫秒数
2、date.getTime() ：得到现在时间距离1970.1.1总的毫秒数

// 获取Date总的毫秒数 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数// 实例化Date对象
var date = new Date();// 1 .通过 valueOf()  getTime() 用于获取对象的原始值
console.log(date.valueOf());  //得到现在时间距离1970.1.1总的毫秒数
console.log(date.getTime());// 2.简单的写法
var date1 = +new Date();  // +new Date()返回的就是总的毫秒数，
console.log(date1);// 3. HTML5中提供的方法 获得总的毫秒数 有兼容性问题
console.log(Date.now());

4、倒计时效果

function countDown(time) {var nowTime = +new Date(); //没有参数，返回的是当前时间总的毫秒数var inputTime = +new Date(time); // 有参数，返回的是用户输入时间的总毫秒数var times = (inputTime - nowTime) / 1000; //times就是剩余时间的总的秒数var d = parseInt(times / 60 / 60 / 24); //天数d < 10 ? '0' + d : d;var h = parseInt(times / 60 / 60 % 24); //小时h < 10 ? '0' + h : h;var m = parseInt(times / 60 % 60); //分m < 10 ? '0' + m : m;var s = parseInt(times % 60); //秒s < 10 ? '0' + s : s;return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2020-11-09 18:29:00'));
var date = new Date;
console.log(date); //现在时间

4、数组对象（重要）

1、数组对象的创建

创建数组对象的两种方式

1、字面量方式
2、new Array()

2、检测是否为数组

1、instanceof 运算符，可以判断一个对象是否属于某种类型
2、Array.isArray() 用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

3、添加删除数组元素

// 1.push() 在我们数组的末尾，添加一个或者多个数组元素 push 推
var arr = [1, 2, 3];
arr.push(4);
console.log(arr);
console.log(arr.push(4));
console.log(arr);
// push 完毕之后，返回结果是新数组的长度// 2. unshift 在我们数组的开头 添加一个或者多个数组元素
arr.unshift('red');
console.log(arr);// pop() 它可以删除数组的最后一个元素，一次只能删除一个元素
arr.pop(); //不加参数
// shift() 它剋删除数组的第一个元素,一次只能删除一个元素
arr.shift(); //不加参数

案例：筛选数组

有一个包含工资的数组[1500,1200,2000,2100,1800],要求把数组中工资超过2000的删除，剩余的放到新数组里面

var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {if (arr[i] < 2000) {newArr.push(arr[i]);}
}
console.log(newArr);

4、数组排序

// 1.翻转数组
var arr = ['pink','red','blue'];
arr.reverse();
console.log(arr);// 2.数组排序(冒泡排序)
var arr1 = [3,4,7,1];
arr1.sort();
console.log(arr1);// 对于双位数
var arr = [1,64,9,61];
arr.sort(function(a,b) {return b - a;  //降序的排列return a - b; //升序})

5、数组索引

//返回数组元素索引号方法 indexOf(数组元素)  作用就是返回该数组元素的索引号
//它只发返回第一个满足条件的索引号
//如果找不到元素，则返回-1
var arr = ['red','green','blue','pink','blue'];
console.log(arr.indexOf('blue'));  // 2console.log(arr.lastIndexOf('blue')); // 4  返回的是索引号

案例：数组去重

分析：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重。

核心算法：我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加。

我们怎么知道该元素没有存在？ 利用新数组.indexOf(数组元素) 如果返回是 -1 就说明新数组里面没有改元素

// 封装一个去重的函数 unique 独一无二的
function unique(arr) {var newArr = [];for (var i = 0; i < arr.length; i++) {if (newArr.indexOf(arr[i]) === -1) {newArr.push(arr[i]);}}return newArr;
}
var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']);
console.log(demo);

6、数组转化为字符串

// 1.toString() 将我们的数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
// 2.join('分隔符')
var arr1 = ['green', 'blue', 'red'];
console.log(arr1.join()); // 不写默认用逗号分割
console.log(arr1.join('-')); //  green-blue-red
console.log(arr1.join('&')); // green&blue&red

7、其他方法

5、字符串对象

1、基本包装类型

为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。

基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

我们看看下面代码有什么问题吗？

var str = 'andy';
console.log(str.length);

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为 js 会把基本数据类型包装为复杂数据类型，其执行过程如下：

// 1.生成临时变量,把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2.赋值给我们声明的字符变量
str = temp;
// 3.销毁临时变量
temp = null;

2、字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间

var str = 'abc';
str = 'hello';
// 当重新给 str 赋值的时候，常量'abc'不会被修改，依然在内存中
// 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
// 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
var str = '';
for(var i = 0; i < 10000;  i++){str += i;
}
console.log(str);
// 这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间

3、根据字符返回位置indexOf()

字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串

 // 字符串对象  根据字符返回位置  str.indexOf('要查找的字符', [起始的位置])var str = '改革春风吹满地，春天来了';console.log(str.indexOf('春')); //默认从0开始查找 ，结果为2console.log(str.indexOf('春', 3)); // 从索引号是 3的位置开始往后查找，结果是8

案例：返回指定字符出现的位置和次数

查找字符串 “abcoefoxyozzopp” 中所有o出现的位置以及次数

1、核心算法：先查找第一个o出现的位置
2、然后只要 indexOf返回的结果不是 -1 就继续往后查找
3、因为 indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找

var str = "oabcoefoxyozzopp";
var index = str.indexOf('o');
var num = 0;
// console.log(index);
while (index !== -1) {console.log(index);num++;index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是: ' + num);

4、根据位置返回字符

案例：返回出现次数最多的字符，并统计其次数

判断一个字符串 “abcoefoxyozzopp” 中出现次数最多的字符，并统计其次数

1、核心算法：利用 charAt() 遍历这个字符串
2、把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就 +1
3、遍历对象，得到最大值和该字符

<script>// 有一个对象 来判断是否有该属性 对象['属性名']var o = {age: 18}if (o['sex']) {console.log('里面有该属性');} else {console.log('没有该属性');}//  判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。// o.a = 1// o.b = 1// o.c = 1// o.o = 4// 核心算法：利用 charAt() 遍历这个字符串// 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1// 遍历对象，得到最大值和该字符var str = 'abcoefoxyozzopp';var o = {};for (var i = 0; i < str.length; i++) {var chars = str.charAt(i); // chars 是 字符串的每一个字符if (o[chars]) { // o[chars] 得到的是属性值o[chars]++;} else {o[chars] = 1;}}console.log(o);// 2. 遍历对象var max = 0;var ch = '';for (var k in o) {// k 得到是 属性名// o[k] 得到的是属性值if (o[k] > max) {max = o[k];ch = k;}}console.log(max);console.log('最多的字符是' + ch);
</script>

5、字符串操作方法

<script>// 1. concat('字符串1','字符串2'....)var str = 'andy';console.log(str.concat('red'));// 2. substr('截取的起始位置', '截取几个字符');var str1 = '改革春风吹满地';console.log(str1.substr(2, 2)); // 第一个2 是索引号的2   第二个2 是取几个字符  春风
</script>

6、replace()方法

replace() 方法用于在字符串中用一些字符替换另一些字符

其使用格式：replace(被替换的字符,要替换为的字符串)

<script>// 1. 替换字符 replace('被替换的字符', '替换为的字符')  它只会替换第一个字符var str = 'andyandy';console.log(str.replace('a', 'b'));// 有一个字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替换为 *var str1 = 'abcoefoxyozzopp';while (str1.indexOf('o') !== -1) {str1 = str1.replace('o', '*');}console.log(str1);
</script>

7、split()方法（字符转换为数组）

split() 方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。

例如下面代码：

var str = 'a,b,c,d';
console.log(str.split(','));
// 返回的是一个数组 ['a', 'b', 'c', 'd']

<script>
// 2. 字符转换为数组 split('分隔符')    前面我们学过 join 把数组转换为字符串var str2 = 'red, pink, blue';console.log(str2.split(','));var str3 = 'red&pink&blue';console.log(str3.split('&'));
</script>

8、大小写转换

1、toUpperCase() 转换大写
2、toLowerCase() 转换小写

七、简单数据类型和复杂数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

1、简单类型（基本数据类型、值类型）：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null

2、复杂数据类型（引用类型）：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；

1、堆和栈

堆栈空间分配区别

1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；
简单数据类型存放到栈里面
2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
复杂数据类型存放到堆里面

2、简单数据类型的存储方式

值类型变量的数据直接存放在变量（栈空间）中

3、复杂数据类型的存储方式

引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

4、简单类型传参

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

function fn(a) {a++;console.log(a); }var x = 10;fn(x);console.log(x)；

运行结果如下

5、复杂数据类型传参

函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

 function Person(name) {this.name = name;}function f1(x) { // x = pconsole.log(x.name); // 2. 这个输出什么 ?    x.name = "张学友";console.log(x.name); // 3. 这个输出什么 ?    }var p = new Person("刘德华");console.log(p.name);    // 1. 这个输出什么 ?   f1(p);console.log(p.name);    // 4. 这个输出什么 ?

运行结果如下

JavaScript基础复习下（51st）相关推荐

Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
JavaScript基础复习之数据类型，解读数据类型不为人知的一面
<=> 朋友你好,这里是小毅的前端日记, 分享代码日常 ! <=> 本文目标:查缺补漏Javascript数据类型,解读数据类型不为人知的一面 <=> 卑微的大三前 ...
[前端基础] JavaScript 基础篇(下)
DOM 和 BOM DOM 指的是文档对象模型,它指的是把文档当做一个对象来对待,这个对象主要定义了处理网页内容的方法和接口.BOM 指的是浏览器对象模型,它指的是把浏览器当做一个对象来对待,这个对象 ...
javascript基础复习之函数，定时器，erval函数
Function对象 JS中函数就是Function对象函数名就是指向Function对象的引用使用函数名就可以访问函数的对象函数名()是调用函数 function 函数名 ([参数]) {函数 ...
菜鸟学前端--javascript基础
在学习过css相关的知识,有了前端工程师的一些基础知识.但要较好的掌握前端,必须要学习好javascript的知识. 下面将从基本语法.变量.关键字.保留字.语句.函数.BOM等角度阐释. 一.基本语 ...
十三、JavaScript面向对象（下） - 章节课后练习题及答案
第一章链接:初识JavaScript - 章节课后练习题及答案第二章链接:JavaScript 基础(上) - 章节课后练习题及答案第三章链接:JavaScript 基础(下) - 章节课后练习题 ...
JavaScript基础学习、复习笔记
文章目录前言一.js基础知识 (变量.数据类型.运算符) 1.变量 1.1 声明变量及初始化 1.2 变量更新 1.3 变量语法拓展 1.4 变量命名 1.5 交换两个变量的值 2. 数据类型(重 ...
JavaScript-百炼成仙(第1节掌握JavaScript基础1.1-1.21)
文章目录 1.1 第一章初入宗门 1.2 第二章直接量 1.3 第三章数据类型 1.4 第四章数据类型扩展内容: 1.5 第五章基础考核 1.6 第六章何老 1.7 第七章对象数据类型 ...
javascript百炼成仙第一章掌握JavaScript基础 1.12 JavaScript运算符
题目一出,真是几家欢喜几家愁,那些复习得好的,自然可以款款而谈,可是那些本身基础就薄弱的弟子,立刻尴尬地说不出话来.甚至有的弟子已经举双手表示要放弃比赛.这些举动立刻引来了场外那些大弟子的哄笑.尤其是 ...
JavaScript 基础1入门、变量、运算符、表达式、进制
JavaScript 基础1 1.什么是javascript? 2.JavaScript能做什么? 3.JavaScript的历史 4.JavaScript入门 5.编写JS及如何运行JS 5.1.外 ...