文章目录

数据存储
- (1)原始类型存储
- (2)引用类型存储
一、面向对象
二、对象
- 1分类
- 2 自定义对象创建方式（封装）
- 3.销毁对象
- 4.访问、删除对象属性
- 5.遍历对象
- 6.检测对象属性
- 7.方法
二、数组
- 1.数组字面量
- 2.元素的访问
- 3.数组的长度
- 4. 内置构造函数
- 5. 数组的分类
- 6.数组的遍历
- 7.二维数组
- 8.API

数据存储

(1)原始类型存储

直接存储在栈内存中

tip：赋值传递中变量独立，不会相互影响，例如：

var a = 1;
//把a的值赋给了b
//拷贝一份a的值赋给b，a和b都是独立的
var b = a;
//给a重新赋值，不会影响b
a = 2;
console.log(a,b);

(2)引用类型存储

将数据存储在堆内存中，同时会自动生成一个地址，然后把这个地址保存到栈内存(变量)中
引用类型数据占用内存空间比较大，如果要销毁，没有任何的地址所指向，就会自动销毁。直接赋值为null即可销毁

tip：赋值传递中引用类型变量会存储在同一地址，故改变任一变量，其他变量都会相互影响同步改变

var tao = {color: '绿色',size: 'XXL'
};
//把对象的地址拷贝一份赋给了dong
//两个变量指向的是同一个对象
var dong = tao;
dong.color = '红色';
tao.size = 'XXXL';
console.log(dong);  //{color：'红色', size:'XXXL'}
console.log(tao);   //{color：'红色', size:'XXXL'}//比较的是地址是否相同
console.log( dong === tao );
//null 空地址，不指向任何的对象
//赋值为null，不再指向对象，对象就会自动销毁
dong = null;
tao = null;

一、面向对象

1.什么是面向对象:
程序中先用对象保存现实中一个事物的属性和功能，然后再按需访问对象中保存的属性和功能

2.为什么:便于大量数据的维护和使用.

3．面向对象三大特点：封装，继承，多态

二、对象

引用类型数据

对象是一组属性和方法的集合

一部手机，属性有品牌、颜色、型号、尺寸… 方法有玩游戏、看视频、办公、购物…
旁边的电扇，属性有品牌、颜色、高度… 方法有吹风、摇头…
一个杯子，属性颜色、容量… 方法存储水…
万物皆对象

1分类

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

2 自定义对象创建方式（封装）

封装详情可查看：《JavaScript——面向对象（继承）》

对象字面（直接）量
{ 属性名: 属性值, 属性名: 属性值 }

/*
①属性名与属性值之间通过冒号进行分隔
②属性值：任意类型的数据， 属性名：js标识符或任意形式的字符串
③属性之间逗号分隔，最后一个属性末尾不需逗号！
*/
var o = {a : 1,      b : true,c : function() { //属性值为函数，则该属性变为对象的方法return 1},d : {           //嵌套结构的对象f : 1}
}
alert(o.c());   //附加小括号读取属性值，即调用方法
alert(o.d.f);   //连续使用点号运算符读取内层对象的属性值

内置构造函数new
new Object()
创建一个空对象，需要单独添加每个属性

 var o = new Object();   //创建一个空对象
var o = new Array();    //创建一个空数组对象
/*
①构造函数内部通过this指代实例化对象
②构造函数内可以通过点运算符声明本地成员
*/
function Box(w, h) {this.w = w;this.h = h;
}
var o = new Box(4,5);//实例并初始化

自定义构造函数

3.销毁对象

当把对象的所有引用变量都设为null，可以强制对象处于废除状态并被回收
tip：对于不用的对象，应该设为null，将对象废除

var o = {x : 1, y : true
}
o = null;    //定义对象引用变量为null，即废除对象
alert(o.x);  //提示系统错误，找不到对象

4.访问、删除对象属性

访问：
对象.属性名
对象[ '属性名' ]
如果属性名不存在则返回undefined

删除：
delete 对象.属性名

5.遍历对象

依次访问对象中的每个属性

for(var k  in  对象) {//k 代表属性名//对象[k]   属性名对应的属性值
}

6.检测对象属性

对象.属性名 === undefined
true -> 不存在 false -> 存在

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

'属性名' in 对象
true -> 存在 false -> 不存在

7.方法

方法对应的是一个函数

var o = {x: function() {alert("method1");}
}
//方法二
var o = {}
o.x = function() {alert("method2");
}o.x();//调用对象方法

二、数组

就是一组数据的集合，每个数据称为元素

1.数组字面量

[ 元素1, 元素2, ... ]

例如：

var emps = ['tao','dong','hua',10,true];

2.元素的访问

数组[下标]
下标从0开始的整数，如果下标不存在返回undefined

3.数组的长度

获取数组元素的个数： 数组.length

在数组的末尾添加元素： 数组[ 数组.length ] = 值;

var car = ['长城','五菱宏光','比亚迪','蔚来'];
car[1] = '特斯拉';
//使用当前数组长度作为下标
car[car.length] = '吉利';
car[car.length] = '丰田';

4. 内置构造函数

new Array(元素1,元素2...)

new Array(3) 创建数组，初始化数组长度为3，可以添加更多个元素

//内置构造函数
var arr = new Array('a','b','c');
//初始化3个元素
var course = new Array(3);
course[0] = 'mysql';
course[1] = 'js';
course[2] = 'nodejs';
course[3] = 'ajax';
console.log(course);//[ 'mysql', 'js', 'nodejs', 'ajax' ]

5. 数组的分类

索引数组：以0及以上整数作为下标 >=0
关联数组：以字符串作为下标，需要单独的添加元素

6.数组的遍历

for-in

for(var k in arr){//k 代表下标//arr[k]  元素console.log(k, arr[k]);
}

循环

var arr = ['tao','dong','tom','king','jerry','lucy'];
//循环下标的范围0~3
//使用for循环遍历数组
for(var i = 0;i < arr.length;i++){console.log(i,arr[i]);
}

7.二维数组

用于对一组数据进行二次分类
[ [元素1,元素2 ], [ ], [ ] ]

访问：
数组[下标][下标]

var arr1 = ['山东','江苏','广东'];
//var arr2 = ['济南','青岛','烟台','南京','苏州','无锡','广州','深圳','珠海'];
var arr2 = [['济南','青岛','烟台','威海'],['南京','苏州','无锡'],['广州','深圳','珠海','惠州']
];
console.log( arr2[0]);    //[ '济南', '青岛', '烟台', '威海' ]
console.log( arr2[0][3] );//威海

8.API

API：应用程序编程接口，JS下指提供好的函数或者方法

如何学习API：API的作用、有哪些参数，哪些参数可选，哪些参数必选、返回结果是什么

toString() 将数组转为字符串

var a = [1,2,3,4,5,6,7,8,9,0];
var s = a.toString();
console.log(s);//1,2,3,4,5,6,7,8,9,0

join( str ) 将数组转为字符串，可以设置字符串之间的分割符

var a = [1,2,3,4,5];
var s = a.join("==");  //指定分隔符
console.log(s);//1==2==3==4==5

split() 将字符串转换为数组，根据设置的分隔符切开字符串

var s = "1==2==3==4==5";
var a = s.split("==");//将==作为分隔的符号
console.log("split “==”：" + a);
console.log("typeof 类型：" + typeof a +'<br>');//typeof对象和数组都为Object
console.log("constructor Array： ");
console.log(a.constructor == Array)//constructor可区分数组和对象

reverse() 翻转数组中的元素

var arr = ['a','b','c','d'];
//翻转数组元素
arr.reverse();
console.log(arr);//['d','c','b','a']

sort() 对数组进行排序，默认按照编码排序

var arr = [23,9,78,6,45];
//默认按照编码排序
//arr.sort();//回调函数
arr.sort( function(a,b){//console.log(a,b);//return a-b; //从小到大排序return b-a; //从大到小排序
} );
console.log(arr);

concat(arr2,arr3…) 拼接多个数组
arr2,arr3表示要拼接的数组

返回拼接后的数组是一个新的数组

var arr1 = ['a','aa','aaa'];
var arr2 = ['b','bb','bbb'];
var arr3 = ['c','cc','ccc'];
console.log( arr1.concat(arr2,arr3) );//['a', 'aa', 'aaa','b', 'bb', 'bbb','c', 'cc', 'ccc']

slice(start, end) 截取数组元素
start开始的下标，end结束的下标，不包含end本身；
下标是负数表示倒数；
只有一个参数，截到最后。

返回截取的元素，格式为数组。

var arr = ['a','aa','aaa','b','bb','bbb','c','cc','ccc'];
console.log( arr.slice(2) );      //['aaa', 'b', 'bb', 'bbb', 'c', 'cc', 'ccc']
console.log( arr.slice(2,4) );    //['aaa', 'b']
console.log( arr.slice(-3,-1) );  //['c', 'cc']

splice(start, count, v1,v2…) 删除数组中的元素
start开始的下标，下标是负数表示倒数；count删除的数量（count为空删除到最后，为0不删除），v1，v2…表示删除后补充的元素。
删除和插入操作同时进行，同时在该位置操作

返回删除的元素，原数组会发生变化。

//下例操作都使用原数组
var arr =  ['a','aa','aaa','b','bb','bbb','c','cc','ccc'];console.log( arr.splice(1) );      //['a']console.log(arr.splice(1,2) );     //['aa','aaa']
console.log(arr);        //['a','b','bb','bbb','c','cc','ccc']console.log(arr.splice(-4,0,'d','dd','ddd') );  //[]
console.log(arr);       //['a','aa','aaa','b','bb','bbb','c','cc','ccc','d','dd','ddd']console.log(arr.splice(-3,1,'tihuan')); //['c']
console.log(arr);    //['a','aa','aaa','b','bb','bbb','c','cc','ccc'];

indexOf() 查找数组中是否含有某个元素，返回找到的第一个的下标，如果找不到返回-1

var ar = ["ab","cd","ef","ab","cd"];console.log("cd index：" + ar.indexOf("cd"));//1
console.log("cd index from 2：" + ar.indexOf("cd", 2));//4
console.log("gh index ：" + ar.indexOf("gh"));//-1
console.log("ab index from -2：" + ar.indexOf("ab",-2));//3

lastIndexOf(searchvalue, fromindex) 在一个字符串中的指定位置从后向前搜索，找不到返回-1
searchvalue 必需。规定需检索的字符串值。
fromindex 可选。规定在字符串中开始检索的位置。如省略，则将从字符串的最后一个字符处开始检索。

可返回一个指定的字符串值最后出现的位置

var ar = ["ab","cd","ef","ab","cd"];console.log("cd index：" + ar.lastIndexOf("cd"));            //4
console.log("cd index from 2：" + ar.lastIndexOf("cd", 2));  //1
console.log("gh index ：" + ar.lastIndexOf("gh"));           //-1
console.log("ab index from -3：" + ar.lastIndexOf("ab",-3)); //0

JavaScript（三）——对象与数组基础及API相关推荐

JavaScript基础（四）对象、数组、对象与数组的常用API
目录一.对象 1. 对象的创建 2. 对象属性的访问 3. 遍历对象属性 4. 检测属性是否存在 5. 对象的方法二.数组对象 1. 数组的创建 2. 访问数组 3. 数组长度 4. 数组的遍历 ...
JavaScript 之对象和数组
一:对象说起对象,我们不自然就想起了面向对象中自封装的一个类,同样JS中也是遵循这个守则,在web编程中几乎天天用到的就是JSON.是的,这就是一个对象,不过这个对象下面的字段都是字符串和值类型 ...
json vue 对象转数组_vue 基础入门（一）修改
vue基础入门(一) 1. 什么是vue Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标 ...
JS基础：变量、函数、对象、数组、循环、选择（判断）
JS基础:变量.函数.对象.数组.循环.选择(判断) js的三个组成部分 ECMAScript - ES - 语法规范 DOM - 文档对象模型 - API BOM - 浏览器对象模型 - API j ...
JavaScript学习笔记02【基础——对象（Function、Array、Date、Math）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
php的对象和数组应该学js,JavaScript数组与对象的常用方法及 json 的序列化
一.JavaScript数据类型: 1- 原始类型:number(数值),string(字符串),boolean(布尔值)var age = 18; var username = "admi ...
Javascript第六章JavaScript字面量加数组创建对象第三课
Javascript第六章JavaScript用new创建对象第一课 https://blog.csdn.net/qq_30225725/article/details/89304586 Javasc ...
JavaScript学习（七）——对象与数组、内部对象（1）
目录 javascript对象与数组 javascript内部对象 object对象 1.创建object对象 2.object对象的属性 3.object对象的方法 String对象 1.创建Str ...
JavaScript系列学习笔记2 —— 数组Array对象
目录一.概念与作用二.基本结构 2.1 数组构造函数 2.2 数组字面量表示法三.Array对象的属性和方法 3.1 Array对象的属性 3.2 Array对象的方法四.数组元素的访问和存储 ...

JavaScript（三）——对象与数组基础及API