原生js复习笔记（一）

1、函数中的arguments

arguments里存储了所有传进函数的实参 只有函数才有arguments对象.

// arguments里存储了所有传进函数的实参 只有函数才有arguments对象
function fn() {
    console.log(arguments);
    console.log(arguments.length);
}
fn(1,2,3,4,5);
//arguments 是一个伪数组，不是真正的数组
// 1.具有length属性
// 2.按照索引方式存储参数
// 3.没有真正数组的一些方法 pop() push()等

---

2、js预解析

js 引擎运行 js 分为两步 ： 预解析和代码执行。

预解析

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

预解析分为变量预解析（变量提升）和 函数预解析（函数提升）

1、变量提升

把所有的变量声明提升到当前作用域的最前面，不提升赋值操作（包括函数赋值）。如下面代码：

console.log(num);     //输出结果undefined     
var num = 10;

但是下面这样就可以正常打印：

num = 10;
console.log(num);          //输出结果： 10
var num;				//先提升，再顺序执行

2、函数提升

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

如：

fn();                      
function fn() {
	console.log(11);
}     
//函数声明被提升，正常输出，结果为： 11

注意！！！！

下面函数赋值同样不能被提升！

console.log(fun);           //undefined
fun();                      //报错
var fun = function() {
    console.log(22);
}

代码执行

代码执行， 按照代码书写顺序从上往下执行。

举例：

案例一：

var num = 10;
fun();
function fun() {
    console.log(num);
    var num = 20;
}

//相当于执行以下操作：
/* 
var num;
function fun() {
    var num;			//提升到当前作用域最前面
    console.log(num);	
    var num = 20;
}
num = 10;
fun();    			//输出undefined
*/

案例二：

//案例2：
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
    var a = b = c = 9 ;
    console.log(a);
    console.log(b);
    console.log(c);
}
//输出结果：
9 9 9 9 9 报错
//解析：
function f1() {
    var a;
    var a = b = c = 9 ;//相当于var a = 9; b = 9; c = 9 ; b 和 c 没有 var 声明 ， 当 全局变量 看
    console.log(a);//9
    console.log(b);//9
    console.log(c);//9
}
f1();
console.log(c);//9
console.log(b);//9
console.log(a);//报错

---

3、创建对象的三种方式

1、利用对象字面量

var obj = {}

例如：

var obj1 = {
    uname: 'victor',
    age: 18,
    sex: '男',
    sayHi: function(){
    	console.log('hi~');
	}			
}

2、利用new Object

利用 new Object创建对象,利用等号赋值方法添加属性和方法。

var obj = new Object();

例如：

var obj2 = new Object();        //空对象
obj2.uname = 'adjfks';
obj2.email = 'xxxx@xxxxx';
obj2.sayHi = function() {
    console.log('Hi~');
}

3、利用构造函数

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

例如：

//构造函数
function Star(uname,age,sex){
    this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(song){
    	console.log(song);
    }
}
//创建对象
var ldh = new Star('小明','19','男');
console.log(ldh);
ldh.sing('hhh');

注意：

1. 构造函数用于创建某一类对象，约定首字母要大写。
2. 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
3. 构造函数中不需要 return 返回结果。
4. 必须用 new 来调用构造函数

---

4、遍历对象

举例：

var obj = {
    name: 'william',
    age: 18,
    sex: '男',
    fn: function(){

    }
}

//for in 遍历
for(var k in obj){
    console.log(k);  //得到所有属性名 key
    console.log(obj[k]);
}            

---

5、js内置对象

Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及HTML5 应用的 API。

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

1、Math对象

常用的属性和方法：

Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3 
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值

2、random()随机数方法

random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1

获取两数之间的随机整数的函数

下面函数可以得到一个两数之间的随机整数，包括两个数在内：

function getRandom(min, max) {
 	return Math.floor(Math.random() * (max - min + 1)) + min; 
}

3、Date日期对象

Date 是一个构造函数，要使用new 调用创建日期对象

Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数

1、new Date()获取当前时间

如果没有输入任何参数，则Date的构造器会依据系统设置的当前时间来创建一个Date对象。

var date = new Date();
console.log(date);
//输出：
//Mon Oct 18 2021 16:00:31 GMT+0800 (中国标准时间)

2、三种日期传入方式

如果Date()里面写参数，就返回括号里面输入的时间

例如日期格式字符串为2021-10-18，可以写成new Date('2021-10-18') 或 者 new Date('2021/10/18')

例如：

var date2 = new Date('2021-10-5 20:20:35');
console.log(date2); 
//Tue Oct 05 2021 20:20:35 GMT+0800 (中国标准时间)

但是用逗号隔开传入参数，得到的月份数会多一个月，因为月份从0开始计算。

var date1 = new Date(2021,10,5);
console.log(date1); 
//输出
//返回的是11月  Fri Nov 05 2021 00:00:00 GMT+0800 (中国标准时间)

3、日期对象中的方法

1、getFullYear()

获取当年

var date3 = new Date();
console.log(date3.getFullYear());
console.log(typeof(date3.getFullYear()));
//输出：
// 2021 number 
//输出的是数字型（number）

2、getMonth()

获取当月（0-11）

//现在实际月份是10月份 仍然使用date3演示
console.log(date3.getMonth());
console.log(typeof(date3.getMonth()));
//输出：
//9 number
//所以我们要获取真实的月份要+1
console.log(date3.getMonth() + 1);

3、getDate()

获取当天日期（几号）

4、getHours()

5、getMinutes()

6、getSwconds()

console.log(date3.getDate());
console.log(date3.getDay());
console.log(date3.getHours());
console.log(date3.getMinutes());
console.log(date3.getSeconds());
//输出：
//18 1 16 21 13
//解释：18号 星期一 16点 21分 13秒

4、获取时间戳的方法

1、valueof()

2、getTime()

var date = new Date();
//获取时间戳 距离1970.1.1总的毫秒数
//1.使用 valueOf getTime
console.log(date.valueOf());
console.log(date.getTime());

//输出：（number）
//1634545859174
//1634545859174

3、+ new Date()

//2.简单的写法（最常用）
var date1 = +new Date();
console.log(date1);

//1634545859174

4、now() HTML5

//3. H5 新增
console.log(Date.now());

//1634545859174

5、格式化日期函数

1、格式化时分秒

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());
//16:35:58

2、倒计时

输入一个时间，输出距离该时间还有几时几分几秒

function countDown(time){
    var nowTime = +new Date();
    var inputTime = +new Date(time);
    var count = (inputTime - nowTime) / 1000;
    d = parseInt(count / 60 / 60 / 24);
    d = d < 10 ? '0' + d : d;
    h = parseInt(count / 60 / 60 % 24);
    h = h < 10 ? '0' + h : h;
    m = parseInt(count / 60 % 60);
    m = m < 10 ? '0' + m : m;
    s = parseInt(count % 60);
    s = s < 10 ? '0' + s : s;
    return d + '天' + h + '时' + m + '分' + s + '秒';
        }

4、数组对象

1.创建数组的两种方式

字面量

var arr = [1,23,45,6];

new Array()

var arr1 = new Array(2); //数组长度为2
console.log(arr1);
var arr2 = new Array(2,3) //两个数组元素2 和 3
console.log(arr2);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N03osKzW-1634658042744)(./原生js复习笔记/array.png)]

2.检测是否为数组的两种方式

instanceof

var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);

//true false

Array.isArray(参数)

H5新增方法，ie9以上支持

console.log(Array.isArray(arr));
console.log(Array.isArray(obj));

//true false

3.添加删除数组元素的方法

push()

末尾添加

var arr = [1,2,3];
console.log(arr.push(4,'pink'));    //返回值是添加元素后的数组长度
console.log(arr);

// 5 [1, 2, 3, 4, "pink"]

unshift()

数组开头添加元素

console.log(arr.unshift('red',0));  //返回值是添加元素后的数组长度
console.log(arr);

// 7 ["red", 0, 1, 2, 3, 4, "pink"]

pop()

弹出并返回最后一个元素

console.log(arr.pop());
console.log(arr);
//pink ["red", 0, 1, 2, 3, 4]

shift()

弹出并返回第一个元素

console.log(arr.shift());
console.log(arr);
// red [0, 1, 2, 3, 4]

4.数组翻转和排序

reverse()翻转数组

会改变原来的数组

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

sort()

var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {
 	return b - a; // 降a序
 	// return a - b; // 升序
});
console.log(arr);

5.数组索引方法

indexOf()

返回第一个索引 找不到返回-1，也可用于返回字符串中字符的索引

var arr = ['red' , 'green' , 'blue' , 'pink' , 'blue'];
console.log(arr.indexOf('blue')); 
// 2

lastIndexOf()

console.log(arr.lastIndexOf('blue'));
// 4

6.数组转换字符串

toString()

join(分隔符)

// 1.toString()
var arr = ['green' , 'red' , 'blue'];
console.log(arr.toString());        //green,red,blue

//2. join(分隔符)   分隔符默认 ","
console.log(arr.join('&'));     //green&red&blue

7.连接字符串

concat()

连接两个或多个数组，返回新数组，不影响原数组

var arr1 = [1,2,3,4,5];
var arr2 = [6,7,8,9];
console.log(arr1.concat(arr2));   //返回新数组
//[1, 2, 3, 4, 5, 6, 7, 8, 9]

slice(start,end)

该方法并不会修改数组，而是返回一个子数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

var arr1 = [1,2,3,4,5];
var arr3 = arr1.slice(1,3);
console.log(arr3);
//[2, 3]

splice()

splice() 方法向/从数组添加/删除项目，并返回删除的项目组成的新数组。

语法：

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

var arr1 = [0,1,2,3,4,5,6,7,8];
arr2 = arr1.splice(1 , 3 , "a" , "b");
console.log(arr1);
//[0, "a", "b", 4, 5, 6, 7, 8]

5. 字符串对象

不可变性

字符串的值变化时是新开辟空间存放新值，旧值的空间还在，因此不要大量修改和拼接字符串。

返回字符索引

indexOf(‘字符’,[起始的位置])

lastIndexOf()

从后往前查找

找不到都返回-1

var str1 = 'vofnoaavooafeoxoo';
function findO(str){
    var count = 0;
    temp = str.indexOf('o');
    while(temp!=-1){
        count += 1;
        temp = str.indexOf('o',temp+1);
	}
	return count;
}
console.log(findO(str1));
//7

查找字符

charAt(index)

根据位置返回字符

charCodeAt(index)

返回字符ASCII值

应用：判断用户按了哪个键。

str[index]

字符串操作方法

concat()

不改变原字符串

substr(start,length)

与数组的splice一起记忆

var str1 = 'victorcoding.top';
console.log(str1.substr(2,3));
//cto

replace()

str.replace('被替换的字符' , '替换为的字符')

var str2 = 'andyandy';
console.log(str2.replace('a','b'));         //只替换第一个字符
console.log(str2);      //不影响原字符串
//bndyandy
//andyandy

split(‘分隔符’)

字符转换为数组

var str4 = 'red,pink,blue';
console.log(str4.split(','));
//["red", "pink", "blue"]

toUpperCase()

toUpperCase() 方法用于把字符串转换为大写

返回：一个新的字符串，在其中 stringObject 的所有小写字符全部被转换为了大写字符。

toLowerCase()

大写转小写

---

6、基本包装类型

值类型

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型如： string ，number，boolean，undefined，null

引用类型

引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型

通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

函数传参

简单数据类型

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

简单数据类型null 返回的是一个空对象 object, 这是设计js之初的一个bug。

创建的空对象可以先指向null

复杂数据类型传参

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