JavaScript数组、函数与对象

数组的概念

所谓数组,就是将多个元素(通常是同一类型)按一定顺序排列放到一个集合中,那么这个集合我们就称之为数组。

数组的定义 Array

数组是一个有序的列表,可以在数组中存放任意的数据,并且数组的长度可以动态的调整。

通过数组字面量创建数组

获取数组元素

var arr = ['red', 'blue', 'yellow'];
arr[0];
arr[3];
格式
 数组名[下标(索引)]
数组索引从0开始

遍历数组

遍历:遍及所有,对数组的每一个元素都访问一次就叫遍历。

数组遍历的基本语法:

for(var i = 0; i < arr.length; i++) {
	// 数组遍历的固定结构
}
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
for (var i = arr.length - 1; i >= 0; i--)

数组中新增元素

var arr = ['red', 'blue', 'yellow'];
arr[3] = 'pink';

案例:冒泡排序

<script type="text/javascript">
		// 冒泡排序  从小到大
		var numbers = [2, 4, 1, 7, 9, 6];
		
		//外层循环,	控制遍历次数,每一次找一个最大值
		//内层循环,控制比较的次数,把大往后放,把小的往前放
		for (var i = 0; i < numbers.length - 1; i++) {
			for (var j = 0; j < numbers.length - i; j++) {
				//两两比较
				if (numbers[j] > numbers[j + 1]) {
					//交换位置
					var tmp = numbers[j];
					numbers[j] = numbers[j + 1];
					numbers[j + 1] = tmp;
				}
			}
		}

		for (var i = 0; i < numbers.length; i++) {
			console.log(numbers[i]);
		}

	
	</script>

函数

为什么要有函数

想要在多个地方用到求和,怎么办

1.提高代码复用性

什么是函数

把一段相对独立的具有特定功能的代码块封装起来,形成一个独立实体,就是函数,起个名字(函数名),在后续开发中可以反复调用

函数的作用就是封装一段代码,将来可以重复使用

函数的定义

  • 函数声明
function 函数名() {
  // 函数体
}
  • 函数表达式
var fn = function () {
  // 函数体
}

特点: 1.函数声明的时候,函数体并不会执行

​ 2.函数名应该时一个动词

函数的调用

  • 调用函数的语法:
函数名();

可以调用多次

函数的参数

  • 语法:
function 函数名(形参1, 形参2, 形参3...) {
  // 函数体
}

形参:在函数声明时,为了使函数的功能更加灵活,通常设置参数,这个参数没有任何具体的值,仅仅起到一个占位的作用,通常称之为形式参数
实参:在声明时设置了形参,在调用方法就需要传入对应的参数,也就是实际参数,我们称之为实参

案例

  • 判断一个数是否是素数(又叫质数,只能被1和自身整数的数)

    <script type="text/javascript">
    		//判断一个数是否是素数(又叫质数,只能被1和自身整数的数)
    		function judgeSushu(number) {
    			var isSushu = true; // flag 
    			for (var i = 2; i < number; i++) {
    				if (number % i == 0) {
    					isSushu = false;
    					break;
    				}	
    			}
    			if (isSushu) {
    				console.log("质数");
    			} else {
    				console.log("不是质数");
    			}
    		}
    
    		judgeSushu(19);
    	</script>
    

函数的返回值

当函数执行完的时候,并不是所有时候都要把结果打印。我们期望函数给我一些反馈(比如计算的结果返回进行后续的运算),这个时候可以让函数返回一些东西。也就是返回值。函数通过return返回一个返回值

返回值语法:

function 函数名(形参1, 形参2, 形参3...) {
  //函数体
  return 返回值;
}

//可以通过变量来接收这个返回值
var 变量 = 函数名(实参1, 实参2, 实参3...);

函数的调用结果就是返回值,因此我们可以直接对函数调用结果进行操作。

案例

  • 求1!+2!+3!+…+n!

    <script type="text/javascript">
    		//求1!+2!+3!+....+n!
    		//1.求阶乘
    		//2.求和
    		var k = 0;
    		function getMu(num) {
    			var result = 1;
    			for (var i = 1; i <= num; i++) {
    				result*= i;
    			}
    			console.log(k);
    			return result;
    		}
    
    		//console.log(getMu(4));
    		//2.求和
    		function getSum(num) {
    			var sum = 0;
    			for (var i = 1; i <= num; i++) {
    				sum += getMu(i);
    			}
    
    			return sum;
    			console.log(11111);
    		}
    		console.log(getSum(3));
    		console.log(i);
    	</script>
    

arguments的使用

JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有的实参。arguments是一个伪数组,因此及可以进行遍历

  • 案例

求任意个数的最大值
求任意个数的和

<script type="text/javascript">
		function getSum() {
			var sum = 0;
			for (var i = 0; i < arguments.length; i++) {
				sum += arguments[i];
				console.log(arguments[i]);
			}
			return sum;
		}
		var sum = getSum(1, 2, 3);
		console.log(sum);
	</script>

函数其它

匿名函数

匿名函数:没有名字的函数

匿名函数如何使用:

将匿名函数赋值给一个变量,这样就可以通过变量进行调用

自调用函数

匿名函数不能通过直接调用来执行,因此可以通过匿名函数的自调用的方式来执行

函数是一种数据类型

function fn() {}
console.log(typeof fn);

  • 函数作为参数

因为函数也是一种类型,可以把函数作为两一个函数的参数,在另一个函数中调用

  • 函数做为返回值

因为函数是一种类型,所以可以把函数可以作为返回值从函数内部返回。

function fn(b) {
  var a = 10;
  return function () {
    alert(a+b);
  }
}
fn(15)();

代码规范

1.命名规范	
	变量、函数 的命名 必须要有意义
	变量一般名词
	函数一般用动词
	
2.变量规范   
	操作符的前后要有空格
3.注释规范
	// 这里是注释
4.空格规范
	if (true) {
      
	}
	for (var i = 0; i <= 100; i++) {
      
	}
5.换行规范
	var arr = [1, 2, 3, 4];
	if (a > b) {
      
	}
	for (var i = 0; i < 10; i++) {
      
	}
	function fn() {
      
	}

作用域

作用域:变量可以起作用的范围

全局变量和局部变量

  • 全局变量

    在任何地方都可以访问到的变量就是全局变量,对应全局作用域

  • 局部变量

    只在固定的代码片段内可访问到的变量,最常见的例如函数内部。对应局部作用域(函数作用域)

不使用var是全局变量,不推荐使用

块级作用域

任何一对花括号({和})中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的,我们称之为块级作用域。
在es5之前没有块级作用域的的概念,只有函数作用域,现阶段可以认为JavaScript没有块级作用域

作用域链

只有函数可以制造作用域结构, 那么只要是代码,就至少有一个作用域, 即全局作用域。凡是代码中有函数,那么这个函数就构成另一个作用域。如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域。

将这样的所有的作用域列出来,可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。

function f1() {
    var num = 123;
    function f2() {
        console.log(num);
    }
    f2();
}
var num = 456;
f1();

预解析

JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候,分为两个过程:预解析过程和代码执行过程

对象

为什么要有对象

function printStudent( name age sex grade ...){
    
}

function printStudent(Student){
    console.log(Student.name);
}

什么是对象

现实生活中:万物皆对象,对象是一个具体的事物,一个具体的事物就会有行为和特征。

JavaScript中的对象

JavaScript中的对象其实就是生活中对象的一个抽象
JavaScript的对象是无序属性的集合。
	其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript中的对象想象成键值对,其中值可以是数据和函数。
对象的行为和特征
	特征---属性
	行为---方法

对象创建方式

  • 对象字面量
var o = {
  name: 'zs',
  age: 18,
  sex: true,
  sayHi: function () {
    console.log(this.name);
  }
};   

  • new Object()创建对象
var person = new Object();
person.name = 'lisi';
person.age = 35;
person.job = 'actor';
person.sayHi = function() {
  console.log('Hello,everyBody');
}

  • 自定义构造函数
function Person(name, age, job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayHi = function(){
  	console.log('Hello,everyBody');
  }
}
var p1 = new Person('张三', 22, 'actor');

  • 工厂模式,设计模式包含工厂模式,单例模式

    function createP(name, job, age) {
        var person = new Object();
        person.name = 'lisi';
    	person.age = 35;
    	person.job = 'actor';
        person.job = 'actor';
    	person.sayHi = function() {
      	console.log('Hello,everyBody');
        return person;
    	}  
    }
    var preson1 = createP('chen', none, 18);
    
    
    

属性和方法

如果一个变量属于一个对象所有,那么该变量就可以称之为该对象的一个属性,属性一般是名词,用来描述事物的特征
如果一个函数属于一个对象所有,那么该函数就可以称之为该对象的一个方法,方法是动词,描述事物的行为和功能

对象的使用

遍历对象的属性

通过for…in语法可以遍历一个对象

for (var key in obj) {
	console.log(key + “==” + obj[key]);
} 

删除对象的属性

简单类型和复杂类型的区别

基本类型又叫做值类型,复杂类型又叫做引用类型

值类型:简单数据类型,基本数据类型,在存储时,变量中存储的是值本身,因此叫做值类型。

引用类型:复杂数据类型,在存储是,变量中存储的仅仅是地址(引用),因此叫做引用数据类型。

内置对象

JavaScript中的对象分为3种:内置对象、浏览器对象、自定义对象

JavaScript 提供多个内置对象:Math/Array/Number/String/Boolean…

对象只是带有属性方法的特殊数据类型。

学习一个内置对象的使用,只要学会其常用的成员的使用(通过查文档学习)

可以通过MDN/W3C来查询

内置对象的方法很多,我们只需要知道内置对象提供的常用方法,使用的时候查询文档。

Math对象

Math对象不是构造函数,它具有数学常数和函数的属性和方法,都是以静态成员的方式提供

跟数学相关的运算来找Math中的成员(求绝对值,取整)

Math

演示:Math.PI、Math.random()、Math.floor()/Math.ceil()、Math.round()、Math.abs() 、Math.max()

Math.PI						// 圆周率
Math.random()				// 生成随机数
Math.floor()/Math.ceil()	 // 向下取整/向上取整
Math.round()				// 取整,四舍五入
Math.abs()					// 绝对值
Math.max()/Math.min()		 // 求最大和最小值

Math.sin()/Math.cos()		 // 正弦/余弦
Math.power()/Math.sqrt()	 // 求指数次幂/求平方根

<script type="text/javascript">
		// (0-1]
		console.log(Math.random());
		//[10,20]
		//(9,20]
		console.log((Math.random() * 11) + 9);
	</script>

Date对象

创建 Date 实例用来处理日期和时间。Date 对象基于1970年1月1日(世界标准时间)起的毫秒数。

  • 获取日期的毫秒形式
<script type="text/javascript">
		var now = new Date();
		// console.log(now);
		console.log(now.valueOf());
</script>
  • 日期格式化方法
<script type="text/javascript">
		function formaDate(d) {
			var year = d.getFullYear(),
				month = d.getMonth() + 1,
				date = d.getDate(),
				hour = d.getHours(),
				minute = d.getMinutes(),
				second = d.getSeconds();
			return year + '-' + month + '-' + date + '-' + hour + '-' + minute + '-' + second;
		}
		console.log(formaDate(new Date()));
	</script>
  • 获取日期指定部分
getTime()  	  // 返回毫秒数和valueOf()结果一样,valueOf()内部调用的getTime()
getMilliseconds() 
getSeconds()  // 返回0-59
getMinutes()  // 返回0-59
getHours()    // 返回0-23
getDay()      // 返回星期几 0周日   6周6
getDate()     // 返回当前月的第几天
getMonth()    // 返回月份,***从0开始***
getFullYear() //返回4位的年份  如 2016

Array对象

  • 创建数组对象的两种方式

    • 字面量方式
    • new Array()
  • 检测一个对象是否是数组

    • instanceof
    • Array.isArray() HTML5中提供的方法,有兼容性问题

    函数的参数,如果要求是一个数组的话,可以用这种方式来进行判断

  • toString()/valueOf()

    • toString() 把数组转换成字符串,逗号分隔每一项
    • valueOf() 返回数组对象本身
  • 数组常用方法:push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()

基本包装类型

为了方便操作基本数据类型,JavaScript还提供了三个特殊的引用类型:String/Number/Boolean

String对象

  • 创建字符串对象
new String(s);
String(s);
String 对象属性
属性描述
constructor对创建该对象的函数的引用
length字符串的长度
prototype允许您向对象添加属性和方法
  • 字符串对象的常用方法
方法描述
anchor()创建 HTML 锚。
big()用大号字体显示字符串。
blink()显示闪动字符串。
bold()使用粗体显示字符串。
charAt()返回在指定位置的字符。
charCodeAt()返回在指定的位置的字符的 Unicode 编码。
concat()连接字符串。
fixed()以打字机文本显示字符串。
fontcolor()使用指定的颜色来显示字符串。
fontsize()使用指定的尺寸来显示字符串。
fromCharCode()从字符编码创建一个字符串。
indexOf()检索字符串。
italics()使用斜体显示字符串。
lastIndexOf()从后向前搜索字符串。
link()将字符串显示为链接。
localeCompare()用本地特定的顺序来比较两个字符串。
match()找到一个或多个正则表达式的匹配。
replace()替换与正则表达式匹配的子串。
search()检索与正则表达式相匹配的值。
slice()提取字符串的片断,并在新的字符串中返回被提取的部分。
small()使用小字号来显示字符串。
split()把字符串分割为字符串数组。
strike()使用删除线来显示字符串。
sub()把字符串显示为下标。
substr()从起始索引号提取字符串中指定数目的字符。
substring()提取字符串中两个指定的索引号之间的字符。
sup()把字符串显示为上标。
toLocaleLowerCase()把字符串转换为小写。
toLocaleUpperCase()把字符串转换为大写。
toLowerCase()把字符串转换为小写。
toUpperCase()把字符串转换为大写。
toSource()代表对象的源代码。
toString()返回字符串。
valueOf()返回某个字符串对象的原始值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值