JavaScript函数,数组与对象

1.函数

1.1.函数的声明与调用

声明函数有多种方式，常用的有两种：

第一种方式： function 函数名( ){ //函数体; }

注意：

1. function：定义函数的关键字。
2. 函数名后的小括号中写参数。
3. 如果函数体中有return语句时，就表示函数有返回值。

function add(){
  console.log('我是一个函数');
}
add();

第二种方式： let 函数名 = function(){ //函数体; }

注意：此两种方式是完全等效的

let add = function(){
  console.log('我是一个函数');
}
add();

1.2.函数的参数与返回值

1. 由于js中参数不用声明数据类型，所以函数参数可以直接写
2. 只要函数体内有return语句，那么函数就有返回值。

//第一种方式
function add(num1,num2){
  return num1 + num2;
}
console.log(add(10,20));

//第二种方式
let add = function(num1,num2){
  return num1 + num2;
}
console.log(add(10,20));

1.3.js中的作用域

1.3.1.js中有什么样的作用域

在javaScript中，只有函数作用域，没有块级作用域。下面使用var来声明变量进行演示：

if(true){
  var num1 = 10;
}
function say(){
  var num2 = 20;
}
console.log(num1);     //10   （if块没有独立作用域，所以可以访问）
console.log(num2);     //Uncaught ReferenceError: num2 is not defined

1.3.2.声明变量时let与var的区别

为了在javaScript中也能使用块级作用域，ES6中新增了let关键词。使用let声明的变量就存在块级作用域。

if(true){
  let num1 = 10;
}
function say(){
  let num2 = 20;
}
console.log(num1);     //Uncaught ReferenceError: num1 is not defined
console.log(num2);     //Uncaught ReferenceError: num2 is not defined

2.数组

2.1.创建数组

创建数组有多种方式：

//1、创建数组时不指定长度
let arr = new Array();   
//2、创建数组时指定长度（一般不使用）
let arr = new Array(5);  
//3、创建数组时直接赋值
let arr = new Array(10,20,30);   
//4、创建数组时直接赋值
let arr = [66,80,90,77,59];

javaScript中的数组有如下特点：

1. 数组下标从0开始。
2. 虽然创建数组时，指定了长度，但实际上数组都是可变长度的，即使超出指定长度也不会有任何问题。
3. 数组存储的数据可以是任何类型。

综上所述：javaScript中的数组，更像是java中的集合。

let arr = new Array(5);  
arr[5] = 10;
arr[6] = 'hello';
console.log(arr[5]);      //10
console.log(arr[6]);      //hello

2.2.使用数组

数组中有一个属性length，此属性返回数组的长度。所以，可以使用length属性对数组进行遍历操作。

let arr = [55,23,89,65,11];  
console.log(arr.length);        //5
//遍历数组
for(let i=0;i<arr.length;i++){
  console.log(arr[i]);
}

3.常用内置对象

javaScript语言给我们内置了很多封装好的通用接口，是以对象的属性和方法、函数的形式存在。

3.1.Array 数组内置对象

类别	名称	描述
属性	length	设置或返回数组中元素的数目
方法	push( el )	将新元素添加到一个数组的尾部，并返回数组的新长度值
	unshift( el )	将新元素添加到一个数组的头部，并返回数组的新长度值
	pop( )	移除数组中的最后一个元素并返回该元素
	shift( )	移除数组中的第一个元素并返回该元素
	sort( )	对数组进行排序
	reverse( )	对数组进行反转（注意：不是倒着排序）
	concat( el )	返回一个新数组，这个新数组是由多个数组组合而成的
	join( str )	把数组的所有元素放入一个字符串中，通过一个分隔符（字符）进行连接，返回一个新字符数据
	splice( ... )	可以对数组元素做删除、插入、更新等多种操作
	slice( ... )	返回一个数组片段

下面对一些常用方法做示例：

1. push()方法：

let arr = [55,3,89,9,11];  
arr.push(99);            //向数组中追加一个元素
console.log(arr);        //55,3,89,9,11,99

1. sort()方法：

//sort()方法按照字符串规则排序
let arr1 = ['SMITH','WARD','MARTIN','CLARK','TURNER'];
arr1.sort();
console.log(arr1);     //"CLARK", "MARTIN", "SMITH", "TURNER", "WARD"
//所以，当对数字进行排序时，就会出现问题，此时，可以自定义排序规则函数进行排序
let arr2 = [55,3,89,9,11];
arr2.sort(rule);
function rule(num1,num2){
  return num1-num2;
}
console.log(arr2);     //3, 9, 11, 55, 89

1. join()方法

let arr = [2020,08,04];
let result = arr.join('-');
console.log(result);        //2020-8-4

1. splice()方法

//从数组中间删除元素：splice(开始位置,删除元素长度)
let arr1 = [1,2,3,4,5,6,7,8,9];
arr1.splice(2,3);
console.log(arr1);    //运行结果：1,2,6,7,8,9
//在数组中间插入元素：splice(开始位置,删除元素长度,新插入元素… …)
let arr2 = [1,2,3,4,5,6,7,8,9];
arr2.splice(2,0,31,32,33);
console.log(arr2);   //运行结果：1,2,31,32,33,3,4,5,6,7,8,9
//替换数组中某个元素：splice(开始位置,要替换的元素长度,替换元素… …)
let arr3 = [1,2,3,4,5,6,7,8,9];
arr3.splice(2,1,33);
console.log(arr3);    //运行结果：1,2,33,4,5,6,7,8,9

3.2.String 字符串内置对象

类别	名称	参数	描述
属性	length	-	返回字符串的长度
方法	charAt( index )	index: 要找字符索引位置	返回指定位置的单个字符
	indexOf(substr,index ) lastIndexOf(substr)	substr:子字符串 index: 开始检索的位置（可选）	返回子字符串值在字符串中首次出现的位置 如果要检索的字符串没有出现，则返回-1
	split( substr )	substr: 按照次参数化指定的字符进行分割。如果参数为空字符串，那么每个字符都将被分割	将字符串分割为字符串数组，并返回此数组
	join( arr )	arr: 数组	将数组元素按照参数指定字符连接
	substring( begin, end )	begin: 开始截取的索引位置 end: 结束位置（可选）	用于截取字符串中介于两个指定下表之间的字符
	substr( begin , length )	begin: 开始截取的索引位置 length: 截取字符的长度（可选）	用于从指定位置截取指定长度的字符串
	toUpperCase( ) toLowerCase( )	-	将字符转换成大写字符 将字符转换成小写字符
	replace(oldstr, newstr)	oldstr: 原字符串中子字符串 newstr: 替换的新字符串	用新字符串替换原字符串中的子字符串
	search( str )	str: 原字符串中子字符串	返回子字符串在原字符串中首次出现的位置

下面对一些常用方法做示例：

1. charAt()方法

let str = 'hello';
for(let i=0;i<str.length;i++){
  console.log(str.charAt(i));      //h e l l o
}

1. indexOf()方法

let str = 'hello.js';
console.log(str.indexOf('.'));       //5

1. substring()方法

let str = 'zhangsan@163.com';
console.log(str.substring(str.indexOf('@')+1));                    //163.com
console.log(str.substring(str.indexOf('@')+1,str.indexOf('.')));   //163

1. split()方法

let str = '2020-08-04';
let arr = str.split('-');
console.log(arr);             //"2020", "08", "04"

3.3.Date 日期内置对象

方法	描述
getDate( )	返回Date对象一个月中的一天，其值介于1~31之间
getDay( )	返回Date对象的星期中的一天，其值介于0~6之间
getHours( )	返回Date对象的小时数，其值介于0~23之间
getMinutes( )	返回Date对象的分钟数，其值介于0~59之间
getSeconds( )	返回Date对象的秒数，其值介于0~59之间
getMonth( )	返回Date对象的月份，其值介于0~11之间
getFullYear( )	返回Date对象的年份，其值为4位数
getTime( )	返回自1970年1月1日至某一时刻的毫秒值（时间戳）

示例：

let mydate = new Date();
console.log(mydate);  //Tue Aug 04 2020 17:15:22 GMT+0800 (中国标准时间)

实战应用：获取当前日期：

function getCurDate() {
  let now = new Date();
  let year = now.getFullYear();
  let month = now.getMonth() + 1;
  let day = now.getDate();
  month = month < 10 ? "0" + month : month;
  day = day < 10 ? "0" + day : day;
  return year + "-" + month + "-" + day;
}
console.log(getCurDate());

3.4.Math 数学内置对象

方法	说明	示例
ceil( x )	对数据进行向上取整	Math.ceil( 25.5 ); 返回: 26 Math.ceil( -25.5 ); 返回: -25
floor( x )	对数据进行向下取整	Math.floor( 25.5 ); 返回: 25 Math.floor( -25.5 ); 返回: -26
round( x )	对数据四舍五入为最接近的整数,如果想精确到小数则使用toFixed() (了解)	Math.round( 25.5 ); 返回: 26 Math.round( -25.5 ); 返回: -25 num=12.567;num.toFixed(2)返回:12.57
random( x )	返回0~1之间的随机数	Math.random( ); 结果例如：0.675847364859643754
abs( x )	返回数据的绝对值	Math.abs( -20 ); 返回：20
sqrt( x )	返回数据的平方根	Math.sqrt( -2 ); 返回：1.41.......
max( x, y )	返回两个数据的最大值	Math.max( 5 , 2 ); 返回：5
min( x, y )	返回两个数据的最小值	Math.min( 5 , 2 ); 返回：2

//返回0-9的随机整数
console.log(Math.floor(Math.random()*10));

3.5.Global内置对象

Global(全局)对象是ECMAScript中一个特别的对象，此对象不可直接访问。 在ECMAScript中，不属于任何其他对象的属性和方法，都属于Global。

1. parseInt() 将字符串转换成整形

let str = '100';
console.log(parseInt(str)+1);       //101

1. parseFloat() 将字符串转换成浮点型

let str = '100.5';
console.log(parseFloat(str)+1);       //101.5

1. eval() 将一个字符串解析为javascript代码并执行

console.log(eval('1+2'));            //3