Web前端之JS概述、函数和数组（6）——函数和对象

一、学习一门编程语言的基本步骤

(1)了解背景知识：历史、现状、特点、应用场景
(2)搭建开发环境：编写hello world
(3)变量和常量
(4)数据类型
(5)运算符
(6)逻辑结构
(7)通用小程序
(8)函数和对象
(9)第三方库、框架
(10)实用的项目

二、函数和对象

1.匿名函数
没有名称的函数 function(){ }
创建函数——函数声明

 function fn(){   }

(1)创建函数——函数表达式

var 函数名称=function(形参列表){ 
    函数体
    return 值;
 }

调用：函数名称(实参列表)

对比函数声明和函数表达式的区别：（位置区别）
函数声明存在函数提升，可以在任意位置创建，也可以在任意位置调用。
函数表达式不存在函数提升，存在变量提升，必须先创建再调用。
练习：使用匿名函数创建函数getSum，传递1个参数，返回1~任意数字之间所有的和。

var getSum=function(a){
	for(var i=1,sum=0;i<=a;i++){
           sum+=i;
	}
	return sum;
};
console.log(getSum(1));

(2)匿名函数自调用
自己创建自己调用，函数体内的变量和函数是与外界互不干扰的，不能被外部访问。

  (function(){   
    函数体;  //是一个局部作用域，无法被外界访问
  })();

(3)匿名函数以参数传递——回调函数

 function add(a){
   //形参a就相当于是函数名称
   a();  //调用传递的匿名函数
 }
 add(function(){ ... })

例子1：

function add(n){
	//形参用来接收实参传递的内容
	//n=function(){}
	//n调用可以得到函数的返回结果
	console.log(n());//参数的调用最后输出5
};
add(function (){
	return 5;    
});

例子2：创建函数add，传递2个参数，2个参数都是以匿名函数的形式传递，在匿名函数中分别返回俩个数字，计算俩个数字相加的和。

function add(a,b){
	//函数中调用实参
	//后台运行a=function(){return 5;}
	//        b=function(){return 3;}
	console.log(a()+b());  //输出8
};
add(
function (){
	return 5; 
},
function(){
	return 3;
}
);

2.全局函数
parseInt ~ 将数据转为整型
parseFloat ~将数据转为浮点型
encodeURI ~ 对URL进行编码 str=encodeURI(str);
decodeURI ~对已经编码的URL进行解码 decodeURI(str);
isNaN ~ 检测数据是否为NaN （是->true ，不是->false）
isFinite ~检测数据是否为有限值 （是->true ，不是->false）

console.log(-1/0);//Infinity
console.log(isFinite(1/0));//flase  正无穷大
console.log(isFinite(1/3));//true   无限值指的是正负无穷大

eval~ 执行字符串中的表达式 eval(‘1+2’) -> 3

练习：使用弹出提示框输入一组JS表达式，使用eval执行这组字符串表达式。

1.js
var str=prompt('input');
console.log(eval(str));

1.html
<script src="1.js"></script>;

3.对象
对象是一组属性(property)和方法(method)的集合。
哪能是对象？
第7教室中的电视：属性有品牌、长、宽、分辨率、显卡，方法有被观看、发声、玩游戏…
一个汽车：属性有颜色、类型、品牌、空间大小，方法有代步、行凶、取暖…
万物皆对象

(1)JS中的对象
内置对象：JS提供的
宿主对象：根据JS不同的执行环境划分
自定义对象：自己创建的对象

(2)创建自定义对象——对象直接(字面)量
使用大括号{} 创建空对象
属性名和属性值之间用冒号隔开
多组属性之间用逗号隔开
属性名中的引号可加可不加，如果有特殊字符，必须添加引号

var person={name:'tom',age:20,'come-from':'英国'};  // -是特殊字符
console.log(person);

(3)使用内置构造函数创建对象
var book=new Object(); //创建空对象
book.title=‘三国演义’; //添加属性，属性名不能加引号
book[‘author’]=‘罗贯中’;//添加属性，属性名必须加引号，如果不加引号，被认为是变量。
练习1：创建手机对象，属性有品牌，颜色，大小，产地.
练习2：创建学校对象，属性有编号，名称，地址，建校时间

//创建手机对象
var phone=new Object();
phone.brand='华为';
phone.color='white';
phone.size=6.5;
phone.madeIn='china';
//console.log(phone);
var car=new Object();
car['brand']='特斯拉';
car['color']='black';
car['length']=5;
//console.log(car);
//创建学校对象
var school=new Object();
school['sid']='100010';
school['sname']='北京大学';
school['addr']='北京市海淀区';
school['ctime']='1900';
//console.log(school);
//获取属性值
console.log(school['sname']);
console.log(school.addr);
console.log(school.size);

(4)获取对象的属性值
对象[‘属性名’]
对象.属性名
如果要获取的属性不存在，返回undefined

(5)遍历对象中的属性
获取对象中的属性名及其属性值

 for(var key in emp){
   key 要遍历的每一个属性名
   emp  要遍历的对象
   emp[key]  通过属性名来找到属性值
 }

练习：创建一个用户对象，属性有编号，用户名，密码，手机，邮箱，使用for-in遍历该对象的属性。

var user={
  uid:1,
  uname:'dangdang',
  upwd:'123456',
  phone:'18112345678',
  email:'dangdang@163.com'
  };
 //获取每一个属性的属性名及其属性值
 for(var key in user){
    //key用于存储每一个属性的名称
    //使用key来获取对应的属性值
    console.log(key);  //输出uid uname upwd phone email
    //user.key中key被认为是一个属性名，而不是变量  ！user没有key这个属性值！
    console.log(key+'---'+user.key);  //输出 属性名---undefined
    console.log(key+'---'+user[key]); //输出 属性名---属性值
  }

注意：for-in只能遍历自定义的属性，无法遍历预定义(JS自动添加)的属性

(6)检测对象中是否含有某个属性

'属性名'  in  对象                //true->存在   false->不存在
对象.hasOwnProperty('属性名')     //true->存在  false->不存在
对象.属性名===undefined           // true->不存在 false->存在

例子：

  var user={
          uid:1,
          uname:'dangdang',
          upwd:'123456',
          phone:'18112345678',
          email:'dangdang@163.com'
          };
  console.log('price' in user);     //false
  console.log(user.hasOwnProperty('uname')); //true
  //如果一个属性不存在，返回undefined
  //如果属性的值是undefined，说明属性不存在
  console.log(user.uname===undefined);   //false

(7)对象中的方法

  var person={
     name: 'tom',
     say:function(){
        this.name  //this指代当前的对象名称 person
     }
  }

 调用方法： person.say();

三、课后任务：

(1)复习今天内容，整理思维导图
(2)练习：
创建一个圆对象，包含属性有半径、圆周率；添加两个方法，计算圆的周长(getLength)和面积(getArea)；在方法中返回周长和面积。分别调用。

 //创建圆对象 
    var circle={
      r:5,
      pi:3.14,
      getLength:function(){
        return 2*this.pi*this.r;
      },
      getArea:function(){
        return this.pi*this.r*this.r;
      },
      //计算任意半径的面积
      getArea2:function(myr){
        return this.pi*myr*myr;
      }
    };
 //添加属性
 //circle.price=18;
 //console.log(circle);
 //访问对象中的方法
    console.log(circle.getLength());
    console.log(circle.getArea());
    console.log(circle.getArea2(4));

(3)预习JS中的数组