JavaScript基础数组与对象的详细讲解
JavaScript基础
5.数组
1.概念:
数组(Array):就是一组数据的集合 存储在单个变量下的优雅方式
2.创建数组的两组方式
-
利用new关键字进行创建
var arr=new Array();//创建了一个空的数组,记住A要大写 -
利用数组字面量创建数组
- 数组的字面量就是[]
- 声明数组并赋值,叫作数组初始化
var arr=[];//创建了一个空的数组 //数组里面的数据一定要用逗号隔开 //数组里面的数据,比如1,2,我们称为数组的元素 var arr1=[1,2,'yiling',true];//创建带初始化值得数组
3.数组元素的类型
数组 中可以存放任意类型的数据,比如字符串,数字,布尔值等.
4.数组的索引
**索引(下标)*用来访问数组元素的序号(数组下标从0开始)
var arr1=[1,2,‘yiling’,true];
索引号: 0 1 2 3
数组可以通过索引来访问,设置,修改对应的数组元素,我们可以通过"数组名[索引号]"的形式来获取数组中的元素
这里的访问就是获取的意思
//定义数组
var arr1=[1,2,'yiling',true];
//获取数组中的第二个元素
console.log(arr1[1]);//打印2
console.log(arr1[4]);//因为没有这个数组元素,所以输出的结果就是underfined
5.作业
<!-- 定义一个数组，里面存放星期一、星期二…直到星期日（共7天），在控制台输出：星期日 -->
<script>
var arr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天', ];
console.log(arr[6]);//打印星期天
</script>
6.遍历数组
1.概念:就是把数组元素从头到尾访问一次(上课点名)
var arr1=[1,2,'yiling',true];
for(var i=0;i<4;i++){
console.log(arr1[i]);//结果依次打印
}
//1.因为我们素组元素下标是从0开始的,所以i的初始值是0, i<4
//2.输出的时候arr1[i] i 计数器当索引号来用
2.作业
<!-- 请将【“关羽”，“张飞”，“马超”，“赵云”，“黄忠”，“刘备”，“姜维”：数组里的元素依次打印到控制台。 -->
<script>
var arr = ["关羽", "张飞", "马超", "赵云", "黄忠", "刘备", "姜维"];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
</script>
//数组的长度是元素对的个数,不要跟索引号混淆
//arr.length 动态监测数组元素的个数
// 求数组[2,6,1,7,4]里面所有元素的和以及平均值。
var arr = [2, 6, 1, 7, 4];
var sum = 0
var average = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
console.log(sum);
average = sum / arr.length;
console.log(average);
//求数组[2,6,1,77,52,25,7]中的最大值
//声明一个保存最大元素的变量max。
//默认最秋值可以取数组中的第一个元素。
//遍历这个数组，把里面每个数组元素和max相比较。
//如果这个数组元素大于max就把这个数组元素存到max里面，否则继续下
//最后输出这个max
var arr = [2, 6, 1, 77, 52, 25, 7];
var max = arr[0];
for (var i = 1; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
console.log(max);
//最小值
var arr1 = [2, 6, 1, 77, 52, 25, 7];
var min = arr1[0];
for (var i = 1; i < arr.length; i++) {
if (arr1[i] < min) {
min = arr1[i];
}
}
console.log(min);
//将数组['red','green','blue','pink']转换为字符串，并且用|或其他符号分割
//要一个新变量用于存放转换完的字符串str。
//历原来的数组，分别把里面数据取出来，加到字符串里面。
//时在后面多加一个分隔符
var arr = ['red', 'green', 'blue', 'pink'];
var str = "";
var sep = "*";
for (var i = 0; i < arr.length; i++) {
str = str + arr[i] + sep;
}
console.log(str)
7.数组新增元素
-
可以通过修改length长度新增数组元素
-
可以通过修改length长度来实现扩容的目的
-
length属性是可读写的
var arr = ['red', 'green', 'blue', 'pink']; arr.length=7; console.log(arr); console.log(arr[4]); console.log(arr[5]); console.log(arr[6]);其中索引号是4.5.6的空间没有给值,因此他的值就是underfined
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OYE45R0K-1690531825776)(img/image-20230728104719112.png)]
-
-
通过修改数组的索引新增数组元素
-
可以通过修改数组索引的方式追加数组元素
-
不能直接给数值赋值,否则会覆盖以前的数据
-
这种方式是我们最常用的一种方式
var arr = ['red', 'green', 'blue', 'pink']; arr[4]="yiling"; console.log(arr);//'red', 'green', 'blue', 'pink','yiling'; arr[1]="yellow";//这里是替换原来的数组元素 console.log(arr); arr="hahahha"; console.log(arr);//不要直接给数组名赋值,否则里面的元素都没有了作业:
-
// 新建一个数组，里面存放10个整数(1~10)
//核心原理：使用循环来追加数组。
//1、声明一个空数组arr。
//2、循环中的计数器1可以作为数组元素存入。
//3、由于数组的索引号是从©开始的，因此计数器从0开始更合适，存入的数组元素要+1。
var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = i + 1
}
console.log(arr);
// 要求：将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入新数组。
//I、声明一个新的数组用于存放新数据arr1。
//2、遍历原来的旧数组，找出大于等于10的元素。
//3、依次追加给新数组arr1。
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var arr1 = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] > 10) {
// 索引号从0开始依次递增
arr1[j] = arr[i];
j++;
}
}
console.log(arr1);
// 要求：将数组['red','green,blue,'pink','purple]的内容反过来存放.
// 输出：['purple','pink','blue,'green,'red']
//1、声明一个新数组temp
//2、把I旧数组索引号第4个取过来(arr.1ength-1),给新数组索引号第0个元素(temp.1ength)
//3、我们采取涕减的方式i--
var arr = ['red', 'green', 'blue', 'pink', 'purple'];
var temp = [];
for (var i = arr.length - 1; i >= 0; i--) {
temp[temp.length] = arr[i];
}
console.log(temp);
8.数组排序(冒泡排序)
冒泡排序:是一种算法,把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到下)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CxrEcUw9-1690531825777)(img/image-20230728113955283.png)]
var arr = [4, 1, 2, 3, 5];
for (var i = 0; i <= arr.length - 1; i++) { //外层循环管趟数
for (var j = 0; j <= arr.length - i - 1; j++) { //里层循环管每一趟的交换次数
// 内部交换两个变量的值,前一个和后面一个数组元素进行比较
if (arr[j] > arr[j + 1]) {
var temp = arr[j + 1];
arr[j + 1] = arr[j];
arr[j] = temp;
}
}
}
console.log(arr);
//利用函数封装冒泡排序
function bubbling(arr) {
for (var i = 0; i <= arr.length - 1; i++) {
for (var j = 0; j <= arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j + 1];
arr[j + 1] = arr[j];
arr[j] = temp;
}
}
}
return arr;
};
console.log(bubbling([5, 85, 9, 65, 44, 03, 68, 79]))
6.对象
1.什么是对象
万物皆对象,对象是一个具体的事物,看到见摸得着,对象是一组无序相关属性和方法的集合,所有事物都是对象,列如字符串,数值,数组,函数等.
- 属性:事物的特征,在对象中用属性表示(常用名词)
- 方法:事物的行为,在对象中用方法表示(常用动词)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GSs6il5q-1690531825779)(img/image-20230728143749178.png)]
2.对象的创建方式
1.利用字面量进行创建对象
//利用字面量创建一个空的对象
var obj ={};//创建了一个空的对象
var obj1={
uname:'yiling',
sex:'gril',
age:21,
sayHi:function(){
console.log('hi..');
}
}
// 1.里面的属性或者方法我们采取键值对的形式 键 属性名: 值 属性值
// 2.多个属性或者方法中间使用逗号分割
// 3.方法冒号跟的是一个匿名函数
//使用对象
//1.调用对象的属性 我们采取对象名.属性名 .我们理解为 的
console.log(obg1.uname);//yiling
//2.方法二调用 对象名['属性名'],注意括号里面的属性必须加引号,我们后面会用
console.log(obg1['uname']);//yiling
//3.调用对象方法 sayHi 对象名.方法名() 千万别忘记添加小括号
obj1.sayHi();
作业
/*
请用对象字面量的形式创建一个名字为可可的狗对象。
具体信息如下：
姓名：可可
类型(ype):阿拉斯加状
年龄：5岁
颜色：棕红色。
技能：汪汪汪(bark),演电影(showFilm)
*/
var dog = {
uname: '可可',
type: '阿拉斯加犬',
age: 5,
color: '棕红色',
bark: function() {
console.log('汪汪汪');
},
showFilm: function() {
console.log('看电视');
}
}
console.log(dog.age);
console.log(dog['color']);
dog.bark();//不需要再次加console.log,否则会报出underfined
2.利用new Object创建对象
var obj=new Object();//创建了一个空对象 注意O要大写
obj.uname="yiling";
obj.sex="男";
obj.age=18;
obj.sayHi=function(){
console.log("hi")
}
//1.我们利用等号=赋值的方法 添加对象的属性和方法
//2.每个属性和方法之间 分号结束
//3.调用跟字面量的调用方法一样
console.log(obj.uname);
console.log(obj['age']);
obj.sayHi();
作业
// 请用new Object形式创建一个鸣人对象。
// 具体信息如下：
// ·姓名：鸣人
// 。性别：男
// 。年龄：19岁
// 。技能(ski):影分身术
var obj = new Object();
obj.uname = "名人";
obj.sex = "男";
obj.age = 18;
obj.skill = function() {
console.log("影分身术");
}
console.log(obj['age']);
console.log(obj.sex);
obj.skill();
3.利用构造函数创建对象
构造函数:是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new运算符一起使用,我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H9T69gfz-1690531825780)(img/image-20230728151933381.png)]
构造方法的语法格式:
function 构造函数名(){
this.属性=值;
this.方法=function(){}
}
new 构造函数名();//调用必须加new关键字
function Star(uname,age,sex){
this.name=uname;
this.age=age;
this.sex=sex;
this.sing = function(sang) {
console.log(sang)
}
}
var yl=new Star('yiling',21,'女');//函数返回的是一个对象
console.log(yl.name);
console.log(yl['sex']);
yl.sing("素颜");
//1.构造函数的首字母要大写
//2.我们构造函数不需要return 就可以返回结果
//3.我们调用构造函数,必须使用new关键字
//4.我们只要用new Star() 调用函数,就会创建一个对象{}
//5.我们的属性和方法面前必须加this
3.变量,属性,函数,方法的区别
-
变量和属性的相同点,他们都是用来存储数据的
不同点:
- 变量:单独声明并赋值 使用的时候直接写变量名 单独存在
- 属性:在对象里面的不需要声明的,使用的时候必须写 对象名.属性名
-
函数和方法的相同点:都是实现某种功能 做某件事
不同点:
- 函数是单独声明 并且调用的 函数名() 单独存在的
- 方法 在对象里面 调用的时候 对象.方法()
4.new关键字
new在执行时会做四件事情：
1.在内存中创建一个新的空对象。
2.让this指向这个新的对象。
3.执行构造函数里面的代码，给这个新对象添加属性和方法。
4.返回这个新对象（所以构造函数里面不需要return)。
5.遍历对象
使用for(变量 in 对象){}进行遍历
var obj = {
uname: 'yiling',
age: 21,
sex: '女',
sing: function() {}
}
// for in 遍历我们的对象
//for(变量 in 对象){}
for (var k in obj) {
console.log(obj[k]); //输出得到的是属性值
console.log(k); //k 变量输出 得到的是属性名
}
this.age=age;
this.sex=sex;
this.sing = function(sang) {
console.log(sang)
}
}
var yl=new Star(‘yiling’,21,‘女’);//函数返回的是一个对象
console.log(yl.name);
console.log(yl[‘sex’]);
yl.sing(“素颜”);
//1.构造函数的首字母要大写
//2.我们构造函数不需要return 就可以返回结果
//3.我们调用构造函数,必须使用new关键字
//4.我们只要用new Star() 调用函数,就会创建一个对象{}
//5.我们的属性和方法面前必须加this
### 3.变量,属性,函数,方法的区别
1. 变量和属性的相同点,他们都是用来存储数据的
不同点:
- 变量:单独声明并赋值 使用的时候直接写变量名 单独存在
- 属性:在对象里面的不需要声明的,,使用的时候必须写 对象名.属性名
2. 函数和方法的相同点:都是实现某种功能 做某件事
不同点:
- 函数是单独声明 并且调用的 函数名() 单独存在的
- 方法 在对象里面 调用的时候 对象.方法()
### 4.new关键字
new在执行时会做四件事情：
1.在内存中创建一个新的空对象。
2.让this指向这个新的对象。
3.执行构造函数里面的代码，给这个新对象添加属性和方法。
4.返回这个新对象（所以构造函数里面不需要return)。
### 5.遍历对象
使用for(变量 in 对象){}进行遍历
```js
var obj = {
uname: 'yiling',
age: 21,
sex: '女',
sing: function() {}
}
// for in 遍历我们的对象
//for(变量 in 对象){}
for (var k in obj) {
console.log(obj[k]); //输出得到的是属性值
console.log(k); //k 变量输出 得到的是属性名
}