JavaScript 数组和对象

数组

数组：一组数据的集合，数组的每一个数据叫做一个元素
数组元素可以是任何类型，同一个数组中的不同元素可能是对象或数组
每个数组都具有一个length属性，通过该属性可以获取数组长度，并且可以给一个数组length赋值定义长度
数组中每个元素在数组中有一个位置，以数字表示，称为索引（下标）
索引从0开始排列，[0]表示第一个数据，以此类推
数组的数据类型是一个对象，其实就是个加了数字索引和length属性的特殊对象

数组创建方法

隐式方法

   var arr = ["梨子", "橙子", "橘子"];var arr2 = [1, "小张", true, ["OliGit", 2], {}];var arr3 = [];

直接实例化，通过构造函数Array()创造

   // 1.直接把数组元素写到括号里var arr = new Array("OliGit", 12, "哈哈");// 2.创建数组并给数组元素赋值var arr2 = new Array();arr2[0] = "haha";arr2[1] = "heiha";arr2[2] = "heihei";// 3.规定数组初始的长度，并给数组元素赋值;数组长度动态调整var arr3 = new Array(3);arr3[0] = "haha";arr3[1] = "heiha";arr3[2] = "heihei";arr3[3] = "hihihi";arr3[4] = "enenen";

数组基本操作

arr.toString()：将数组转换为字符串，保留逗号
arr.join(“分隔符”)：将数组转成一个字符串，原来的数组会保留；参数为分隔符，省略的话则用默认逗号作为分隔符
Array.from(str)：将伪数组转成数组，只要有length属性的就可以转成数组
arr.pop()：移除数组末尾最后一项，减少数组的length值，然后返回移除的元素，而且会直接修改原数组
arr.push()：用于向数组的末尾添加一个或多个元素，并返回修改后数组的长度，而且会直接修改原数组
arr.shift()：删除数组开头第一项，减少数组的length值，然后返回移除的元素；而且会直接修改原数组
arr.unshift()：用于向数组的开头添加一个或多个元素，并返回修改后数组的长度，而且会直接修改原数组
arr.splice()：实现删除，插入，替换，截取，返回值为截取的数组元素，而且会直接修改原数组
a、参数一：起始位置索引
b、参数二：截取元素个数，如果是插入元素即为0
c、参数三：插入的元素（可选），可以同时插入多个元素
arr.slice(开始下标，结束下标)：截取指定下标的数组或字符串元素，返回截取的数组元素，不会修改原数组
a、如果省略结束下标，则截取后面所有元素
b、截取不包含结束下标的元素
c、可以为负值
arr.indexOf()：查找指定元素的下标，从前往后查找；若有重复，则返回第一个查到的下标；若不存在，则返回-1
arr.lastIndexOf()：查找指定元素的下标，从后往前查找；若有重复，则返回第一个查到的下标；若不存在，则返回-1
arr.concat()：合并两个或多个数组；返回一个新的数组，不会修改原数组，也可以在concat方法中直接添加元素
arr.reverse()：反转数组元素的顺序，会修改原数组；返回值并不是排序后的数组，而是数组的引用
arr.sort(比较函数)：用于对数组的元素进行排序
a、默认：无参数情况下，按升序排序数组项，即最小的值位于最前面，最大的值排在最后面；会修改原数组；会转成字符串再比较，并从第1个字符进行比较
b、参数为比较函数，规定数组排序顺序；比较函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字
c、比较函数应该有两个参数 a 和 b，其返回值如下：
（1）、若a 小于 b，在排序后的数组中 a 应该出现在b 之前，则返回一个小于0的值
（2）、若a 等于 b，则返回0
（3）、若a 大于 b，则返回一个大于0的值

 <script>// 升序排列function asc(a, b){if(a<b){return -1;}else if(a>b){return 1;}else{return 0;};};// 降序排列function des(a, b){if(a<b){return 1;}else if(a>b){return -1;}else{return 0;};}var arr = [12, 1, 35, 3, 9, 34];var b = arr.sort(des);alert(arr);alert(b);</script>

arr.filter(过滤函数)：把数组中的某些元素过滤掉，然后返回剩下的元素，接收的是一个回调函数；数组中的每一项运行给定函数，返回满足过滤条件组成的新数组，不会修改原数组

    <script>function guolv(x){return x>10;}var arr = [12, 1, 35, 3, 9, 34];var b = arr.filter(guolv);alert(arr);alert(b);</script>

遍历数组去重复：建立一个新数组，然后循环遍历要去重复的数组，每次判断新数组不包含旧数组的值时（新数组用indexOf方法检索旧数组的值返回结果等于-1）将该值加入新数组

    <script>function qcf(arr){var abc = [];for(var i = 0; i < arr.length; i++){if(abc.indexOf(arr[i]) == -1){abc.push(arr[i]);}}return abc;}var arr1 = [12, 1, 35, 3, 9, 34, 1, 12, 3];var b = qcf(arr1);alert(arr1);alert(b);</script>

set方法去重复：它类似数组，但是成员的值都是唯一的，没有重复的值

    <script>var arr = [1, 1, 2, 2, 3];// 1、数组转setvar set = new Set(arr);alert(arr);//[1, 1, 2, 2, 3]console.log(set);//[1, 2, 3]// 2、set转数组var arr2 = Array.from(set);var arr3 = [...set];//简写alert(arr2);//[1, 2, 3]alert(arr3);//[1, 2, 3]// 3、has()判断一个值是否在set中，返回布尔值，在为true，不在为falseconsole.log(set.has(1));console.log(set.has(5));</script>

数组并集，交集，差集

    <script>var arr1 = [1, 2, 3];var arr2 = [2, 3, 4];var a = new Set(arr1);var b = new Set(arr2);// 1、并集：a+b再把重复去掉->[1, 2, 3, 4]var un = new Set([...a, ...b]);console.log(un);// 2、交集：a和b共同的部分->[2, 3]var is = new Set([...a].filter(x => b.has(x)));// function(x){//     return b.has(x);// }console.log(is);// 3、差集：a-b [1]var df = new Set([...a].filter(x => !b.has(x)));console.log(df);</script>

遍历数组

for-in 遍历数组

for-in语句遍历数组的下标

    var student = {"name" : "OliGit", "age" : 23, "id" : 2333};for (stu in student){document.write(stu + "<br>");  //stu为键document.write(student[stu] + "<hr>");            }var arr00 = new Array("元素1", "元素2", "元素3", "元素4", "元素5")for (index in arr00){document.write(index + "<br>");  //index为数组下标document.write(arr00[index] + "<hr>");}

for-of 遍历数组

for-of语句遍历数组的元素

    var arr00 = new Array("元素1", "元素2", "元素3", "元素4", "元素5")for (value of arr00){document.write(value + "<br>");  }

对象

js中的所有事物都是对象：字符串、数值、数组、函数。。。
js对象属性指的是对象相关的值。js对象是无序属性的集合
属性按照名称：值对的形式编写（名称和值以冒号分隔）

对象创建方法

json模式创建对象，创建对象用{}号；（最主要的形式）

var ren = {name : "Oligit", sex : "man", age : 12, height : "1.8"};

直接实例化，通过构造函数Object()创建对象

var ren = new Object();
ren.name = "OliGit";
ren.sex = "man";

对象基本操作

访问对象属性

    var ren = {name : "Oligit", sex : "man", age : 12, height : "1.8"};// 1、对象名["属性名"]var a = ren["name"];    //2、对象名.属性名（用得最多）var a = ren.sex; console.log(a);

添加对象属性

    var ren = {name : "Oligit", sex : "man", age : 12, height : "1.8"};// 1、对象名["属性名"] = 属性值;ren["id"] = "2333";//2、对象名.属性名 = 属性值;ren.yiFu = "t-shirt";console.log(ren);

对象在函数内添加属性或方法

   // 对象在函数内添加属性或方法function addInfo(key, value){var ren = {name : "苦涩"};// 方式一：对象名.属性名 = 属性值，该方式错误，结果为：{name:"苦涩", key:20},此处属性名为key，而不是age// ren.key = value;// 方式二：：对象名["属性名"] = 属性值，该方式正确，可以正确添加属性或方法，结果为：{name:"苦涩", age:20}ren[key] = value;console.log(ren);}addInfo("age", 20);

修改对象属性

    var ren = {name : "Oligit", sex : "man", age : 12, height : "1.8"};// 1、对象名["属性名"] = 属性值;ren["age"] = 15;//2、对象名.属性名 = 属性值;ren.height = 1.85;console.log(ren);

删除对象属性

    var ren = {name : "Oligit", sex : "man", age : 12, height : "1.8"};// 1、delete 对象名["属性名"]delete ren["age"];//2、delete 对象名.属性名delete ren.height;console.log(ren);

合并对象

Object.assign()：用于对象的合并；第一个参数是目标对象，后面的参数都是源对象，将源对象的属性，复制到目标对象中；会修改目标对象，但不会修改源对象

    <script>var obj1 = {a:1};var obj2 = {b:2};var obj = Object.assign(obj1, obj2);console.log(obj1); //{a:1, b:2}console.log(obj2);//{b:2}console.log(obj);//{a:1, b:2}</script>

如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性

     var obj1 = {a:1, b:1};var obj2 = {b:2, c:2};var obj = Object.assign(obj1, obj2);console.log(obj1); //{a:1, b:2, c:2}console.log(obj2);//{b:2, c:2}console.log(obj);//{a:1, b:2, c:2}

多个对象合并

        var obj1 = {a:1, b:1};var obj2 = {b:2, c:2};var obj3 = {c:3, d:4};var obj = Object.assign(obj1, obj2, obj3);console.log(obj1); //{a:1, b:2, c:3, d:4}console.log(obj2);//{b:2, c:2}console.log(obj3);//{c:3, d:4}console.log(obj);//{a:1, b:2, c:3, d:4}

获取对象属性名和属性值

Object.keys()：用于返回对象可枚举的属性名或方法名，返回的结果是一个数组
Object.values()：用于返回对象可枚举的属性值，返回的结果是一个数组
可枚举就是可遍历的意思，也就是说对象的属性是否能够通过遍历得到

    <script>var obj = {a:1, b:2, c:3, d:4};var a = Object.keys(obj);var b = Object.values(obj);console.log(a);//["a", "b", "c", "d"]console.log(b);//[1, 2, 3, 4]</script>

判断属性及销毁对象

判断对象中是否包含某个属性：in操作符

    <script>var obj = {a:1, b:2, c:3, d:4};// 判断对象中是否包含某个属性：in操作符var a = "b" in obj;//true 表示有这个属性var b = "f" in obj;//false 表示没有这个属性alert(a);</script>

销毁对象：对象=null

    <script>var obj = {a:1, b:2, c:3, d:4};//销毁对象: 对象=nullconsole.log(obj);//{a:1, b:2, c:3, d:4}obj = null;console.log(obj);//null</script>

对象的易变性

变量的不易变性

   var a = "aaaa";var b = a;document.write(a + "<br>");//aaadocument.write(b + "<br>");//aaab = "bbb"; document.write(a + "<br>");//aaadocument.write(b + "<br>");//bbb

对象的易变性

   var a = {name : "Oligit", sex : "man"};var b = a;console.log(a);// {name : "Oligit", sex : "man"};console.log(b);// {name : "Oligit", sex : "man"};b.name = "hahahaha";console.log(a);// {name : "hahahaha", sex : "man"};console.log(b);// {name : "hahahaha", sex : "man"};

遍历对象

   var ren = {name : "Oligit", sex : "man", age : 15};for (r in ren){// document.write(r + " -> " + ren.r + "<br>");不可用document.write(r + " -> " + ren[r] + "<br>");};

构造函数

构造函数：主要功能初始化对象，可以想象成一套模板或一套方案；通过new 函数名来实例化对象的函数叫构造函数；new就是在创建对象，从无到有，构造函数就是在为初始化的对象添加属性和方法

    function Ren(){// this:表示当前构造函数，没有具体的名称this.name = "";this.sex = "man";this.age = "20";this.say = function(){alert("大家好！");}};// 通过new方法来创建xiaoMing对象// 通过new的方法创建具体的对象时，this具有具体名称，现在this就表示xiaoMing，表示当前调用者var xiaoMing = new Ren();// 修改数据xiaoMing.name = "Oligit";xiaoMing["age"] = "21";console.log(xiaoMing);// 调用数据xiaoMing.say();

JavaScript 数组和对象相关推荐

javascript 数组和对象的浅复制和深度复制 assign/slice/concat/JSON.parse(JSON.stringify())...
javascript 数组和对象的浅度复制和深度复制在平常我们用 '='来用一个变量引用一个数组或对象,这里是'引用'而不是复制下面我们看一个例子引用和复制是什么概念 var arr=[1,2,3, ...
17个实用的JavaScript数组和对象的方法
原文:Useful Javascript Array and Object Methods 作者:Robert Cooper 译者:Jim Xiao 前段时间,我收听了一个很棒的Syntax FM播客 ...
php的对象和数组应该学js,JavaScript数组与对象的常用方法及 json 的序列化
一.JavaScript数据类型: 1- 原始类型:number(数值),string(字符串),boolean(布尔值)var age = 18; var username = "admi ...
JavaScript 数组函数对象
数组数组的概念数组就是一组数据的集合,并且存储在单个变量名下数组的创建方式利用new创建数组 var 数组名 = new Array();var arr = new Array();//创建了 ...
JavaScript数组与对象比较的正确姿势
原文: https://www.cnblogs.com/-867259206/p/6795354.html https://www.cnblogs.com/cuew1987/p/4057726.htm ...
javascript 数组以及对象的深拷贝方法
for循环 var arr = [{name: 'jq',old: '20' },{name: 'aa',old: '18' }] var arr2=[] for(let i=0;i<arr.l ...
JavaScript 数组拼接打印_JavaScript 数组方法
JavaScript 数组方法 JS 数组 JS 数组排序 JavaScript 数组的力量隐藏在数组方法中. 把数组转换为字符串 JavaScript 方法 toString() 把数组转换为数组值 ...
深入浅出 JavaScript 数组 v0.5
有一段时间不更新博客了,今天分享给大家的是一篇关于JS数组的,数组其实比较简单,但是用法非常灵活,在工作学习中应该多学,多用,这样才能领会数组的真谛. 以下知识主要参考<JS 精粹>和&l ...
JavaScript 数组操作大全
1. pop() pop() 方法从数组中删除最后一个元素: 实例 var fruits = ["Banana", "Orange", "Apple& ...