js_中级

数组

1.创建数组

(1)利用new创建数组

var 数组名 = new Array(); //空数组
var arr = new Array(5);//这个5表示数组的长度为5
var arr1 = new Array(5,2);//等价于[5,2]，创建的这个数组存了两个数组元素5，2

(2)利用数组字面量创建数组

var 数组名 = [];
var 数组名 = ['小白',12,true];

2.获取数组元素

格式：数组名[索引号]

3.数组长度

格式：数组名.length

4.新增数组元素

• 利用length修改长度
• 修改索引号，追加数组元素

5.检测是否为数组

(1)instanceof

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

(2)Array.ifArray(参数)

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

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

(1)push()

在数组的末尾添加一个或多个数组元素。

• push()参数直接写要追加的新元素；
• push()完毕之后，返回的结果是新数组的长度；
• 原数组也会发生变化；

var arr = [1,2,3];
console.log(arr.push(4,'dkf'));
console.log(arr);

(2)unshift()

在数组的开头添加一个或多个数组元素

• unshift()参数直接写要追加的新元素；
• unshift()完毕之后，返回的结果是新数组的长度；
• 原数组也会发生变化；

console.log(arr.unshift('ted',5));
console.log(arr);

(3)pop()

删除数组的最后一个元素。

• pop是可以删除数组的最后一个元素，一次只能删除一个元素；
• pop()没有参数；
• pop完毕后，返回的结果是 删除的那个元素；
• 原数组也会发生变化；

(4)shift()

• shift是可以删除数组的第一个元素，一次只能删除一个元素；
• shift()没有参数；
• shift完毕后，返回的结果是 删除的那个元素；
• 原数组也会发生变化；

7.数组排序

(1)数组翻转

var arr = [1,2,3,4,5];
arr.reverse();
console.log(arr);

(2)数组排序

var arr = [3,2,6,4,2,7,3];
arr.sort(function(a,b)){
         return a - b;//升序排序
         // return b - a;降序排序
         }
console.log(arr);

8.数组索引方法

indexOf(数组元素)

lastIndexOf(数组元素)

返回该数组元素的索引号。

• 只返回第一个满足条件的索引号；
• 如果在该数组里面找不到元素，则返回 -1；

9.数组转换为字符串

(1)toString()

var arr = [1,3,2,4];
console.log(arr.toString());

(2)join(分隔符)

var arr1 = ['a','s','d'];
console.log(arr1.join());//a,s,d
console.log(arr1.join(-));//a-s-d
console.log(arr1.join(&));//a&s&d

10.例子

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

基本包装类型

字符串的不可变

函数

1.声明函数

• function 函数名() {函数体代码 }
• var 变量名 = function(){函数体代码}

var fun = function(a){
	console.log('dsf');
	console.log(a);
}
fun('dfs');//调用
//注：fun是变量名不是函数

2.调用函数

//调用函数
函数名();

3.函数形参和实参个数不匹配问题

• 实参数 = 形参数 正常输出
• 实参数 > 形参数 只取到形参个数
• 实参数 < 型参数 多大形参定义为undefined，结果为NaN

注 ：在JavaScript中形参默认值是undefined。

4.函数的返回值格式

function 函数名(){
	return 需要返回的结果;
}
函数名;

注：

• return之后代码不执行；
• return只返回一个值，若用都好隔开多个值，以最后一个为准；
• 函数若没有return返回undefined；

5.arguments的使用

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

function fn(){//这里没有形参
    console.log(arguments);//里面存了所有传递过来的实参
    console.log(arguments.length);
}
fu(1,2,3,4);

arguments展现形式是一个伪数组：

• 具有length属性；
• 按索引方式存储数据；
• 不具有数组的push、pop等方法；

//按照数组的方式遍历arguments
for(var i = 0;i < arguments.length;i++){
	console.log(arguments[i]);
}

//求任意个数的最大值
function getMax(){
	var max = arguments[0];
	for(var i = 1;i < arguments.length;i++){
		if(arguments[i] > max){
			max = atguments[i];
		}
	}
	return max;
}

变量的作用域

1.全局变量

• 全局变量在代码的任何位置都可以使用；
• 在全局作用域下var声明的变量是全局变量；
• 特殊情况下，在函数内不使用var声明的变量也是全局变量；

2.局部变量

• 只能在该函数内部使用；
• 在函数内部var声明的变量是局部变量；
• 函数的形参实际上是局部变量；

**区别：**全局变量只有在浏览器关闭时才会被销毁，比较占内存。

预解析

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

代码从上往下执行；

对象

1.创建对象

(1)利用对象字面量创建对象{}

//var obj = {};  创建了一个空对象
var obj = {
    uname: '张三',
    age: 18,
    sex: '男',
    sayHi: function(){  //匿名函数
        console.log('hi');
    }
}

(2)利用 new Object 创建对象

var obj = new Object();
obj.uname = '张三';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function(){
    conosole.log('Hi');
}

(3)利用构造函数创建对象

格式：

function 构造函数名（）{
    this.属性 = 值；
    this.属性 = function(){
        
    }
}
new 构造函数名();

• 构造函数名字首字母大写；
• 构造函数不需要return就可以返回结果；
• 调用构造函数必须用new；

例子：

function Star(uname,age,sex){
    this.name = uname;
    this.age = age;
    this.sex = sex;
}
var ldh = new Star('刘德华',18,'男');
console.log(ldh.name);
console.log(ldh['sex']);

2.使用对象

(1)对象名.属性名

(2)对象名[‘属性名’]

(3)对象名.方法名()

console.log(obj.uname);
console.log(obj['age']);
obj.sayHi();

3.遍历对象

格式：for (变量名 in 对象){}

for (var k in obj){
    console.log(k);//k 变量 输出得到属性名
    console.log(obj[k]);//obj[k]得到属性值
}

• for in 里面的变量，我们习惯写k或key

Math

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

1.常用方法

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

2.Math对象随机数方法

random()返回一个随机的小数 （0<= x <1)

获得一个两数之间的随机整数：

function getRandomInt(min,max){
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;//不含最大值，含最小值
}

获得一个两数之间的随机整数，包括两个数在内：

function getRandomIntInclusive(min,max){
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;//含最大值，含最小值
}

Date()

Date() 日期对象，是一个构造函数 必须使用new来调用创建我们的日期对象。

1.使用Date()

var date = new Date();//如果没有参数 返回当前系统的当前时间
console.log(date);

2.参数的常用写法

数字型：2019,10,01

var date = new Date(2001,10,1);
console.log(date);//返回的是11月不是10，一月是从0开始

字符串型：‘2019-10-1 8:8:8’

var date = new Date('2019-10-1 8:8:8');

3.日期格式化

方法	简介
getFullYear()	获得年
getMonth()	获得当月（0-11）
getDate()	获得当天日期
getDay()	获得星期几（周日 0 到周六 6）
getHours()	获得小时
getMinutes()	获得分钟
getSeconds()	获得秒

//写一个 x年x月x日星期x
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth();
        var dates = date.getDate();
        var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var day = date.getDay();
        console.log('今天是：' + year + '年' + month + '月' + dates + '日' + arr[day]);

//封装一个函数返回当前的时分秒
        function getTime(){
            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(getTime());

4.获得Date总毫秒数（时间戳）

不是当前时间的毫秒，而是距离1970.01.01过了多少毫秒。

• 通过valueOf()或getTime()获得

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

• 简单写法（最常用写法）

var date = +new Date();//+new Date()返回的就是总的毫秒数
console.log(date);

• H5新增的获得总的毫秒数的方法

console.log(Date.now());

//倒计时
function countDown(time){
            var nowTime = +new Date();
            var inputTime = +new Date(time);
            var times = (inputTime - nowTime) / 1000;
            var d = parseInt(times / 60 / 60 / 24);
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2021-10-10 13:00:00'));

字符串操作方法

1.根据字符返回位置

str.indexOf(‘要查找的字符’，[起始的位置])

2.根据位置返回字符

(1)charAt(index)

var str = 'andy';
console.log(str.charAt(3));

//遍历所以有字符
for(var i = 0;i < str.length;i++){
    console.log(str.charAt(i));
}

(2)charCodeAt(index)

返回相应索引号的字符ASCII值 目的：判断用户按下了哪个键

var str = 'andy';
console.log(str.charCodeAt(0));//97

(3)str[index]

H5 新增

var str = 'andy';
console.log(str[0]);//a

3.连接字符串

语法：concat(‘字符串1‘,‘字符串2’,’字符串2’…)

var str = 'andy';
console.log(str.concat('red'));

4.截取字符串

语法：substr(‘截取的起始位置’, ‘截取几个字符’)

var str = 'asdf';
console.log(str.substr(2,2));//df

5.替换字符

格式：replace(‘被替换的字符’, ‘替换为的字符’)

• 只替换第一个字符；

6.字符转换为数组

格式：split(‘分隔符’)

• split没有分隔符无法转换；
• 区分join()把数组转换为字符串

var str = '1,2,3,4';
console.log(str.split(','));