1. 数组的定义

var arr1=null;//空指针
//空数组
var arr2=[];//字面量
var arr3=new Array();//构造函数
//有数据的数组
//1.字面量
var arr4=[100,200];//在定义时同时赋值
var arr5=[];
arr5[0]=100;arr5[1]=200;//通过索引下标进行赋值
//2.构造函数
var arr6[0]=100;arr6[1]=200;//通过索引下标进行赋值
//在定义时同时进行赋值
var arr7=new Array(100,200,{name:'zs'});
arr7[1]=300;//重新赋值
arr7[3]=300;
console.log(arr7,arr7.length);//100,300,{name:'zs'},300
//在定义同时进行赋值
var arr8=new Array(10);//一个整形  新建指定长度的空数组
console.log(arr8,arr8.length);//是个连续空值
new arr9=new Array(10.1);//写浮点型报错（不允许传递浮点型数据）
new arr10=new Array('10.1');
console.log(arr10,arr10.length);//length长度为1

2. length

var arr={100,200,300,400};
var arr = new Array(100,200,300,400);
console.log(arr8.length);//4    可读
arr.length=6;//可写
console.log(arr,arr.length);//6
arr.length=3;//可写。尾部数据删除
console.log(arr,arr.length);//[100,200,300 ]   3
arr.length=6;
console.log(arr);//[100,200,300,3 empty items]

//在尾部新增任意多个数据
//1.线性结构的代码
var arr=[100,200,300,400];//length:4
arr[arr.length] = 500;//arr[4]=500   arr.length=5
arr[arr.length] = 600;//arr[5]=600   arr.length=6
//2.函数  代码的复用
function myAdd(){//内部实际参数的变量arguments//this指代是arr数组for(var key in arguments){var value = arguments[key];this[this.length] = value;// 对应arr[arr.length] =                                          500;//arr[4]=500                                              arr.length=5这段}
}
var arr4=[100,200];
//arr4.myAdd(300,400,500,600)会报错，找不到myAdd这个function
myAdd.call(arr4,300,400,500,600);//arr4代表前边的，因为this指代
console.log(arr4,arr4.length);
//反建立函数与对象
myAdd.apply(arr4,[700,800,900]);
console.log(arr4,arr4.length);
//3.原型方法新增
console.log(Array.prototype);//arr4父亲
console.log(Array.prototype.__proto__);//arr4的父亲内部的变量  属性的访问
Array.prototype.age = 100;//新增了age
console.log(Array.prototype);
Array.prototype.myAdd = myAdd;
console.log(Array.prototype);
arr4.myAdd('ab');
console.log(arr4);// 结果为100-700,'ab'

//删除数组尾部数据，返回删除的单个数据
Array.prototype.myRm=function(){//this  指代了Array构造的对象 max=this.length-1var value=this[this.length-1];this.length--;//若 var value=this[this.length-- -1];  后置减减（--） 语法错误return value;
}
console.log(arr4.myRm());
console.log(arr4);//900 9

//在头部新增任意多个数据，并且返回最终数组长度
Array.prototype.myHeadAdd(){//1.新增的值依次做插入操作//1.1新增长度值+1//1.2后序遍历  1-Max//1.2.1  当前空间=前一个空间的值//          arr[i]=arr[i-1]//1.3 arr[0]=新增的值//for(var key in arguments){//1.1for(var key=arguments,length-1;key>=0;key--){var newvalue=arguments[key];this.length++;//this.length=this.length+1;//1.1for(var i=this.length-1;i>=1;i--){//1.2this[i] = this[i-1];}this[0] = newvalue;}return this.length;
}
arr4.myHeadAdd('Hello');
console.log(arr4);
arr4.myHeadAdd('briup',22.22,'abc');
console.log(arr4);

//头部删除
Array.prototype.myHeadRm=function(){//1.正序遍历数组，将arr[i] = arr[i+1] 0~max-1//3.长度-1var result = this[0];var i=0;while(i<this.length-1){this[i]=this[i+1];i++;}this.length--;result value;
}
console.log(arr4.myHeadRm());//briup
console.log(arr4.myHeadRm());//22.22
console.log(arr4.myHeadRm());//'abc'
console.log(arr4);//arr4 删除

3. 队列栈

// Array.prototype 新增系统

// API 方法的功能：传参返回值

栈 LIFO (Last-In-First-Out)

push() :可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度

pop()：从数组的末尾移除最后一项，减少数组的length值，返回移除的项

队列 FIFO (First-In-First-Out)

shift() ：移除数组中的第一个项并且返回该项，同时将数组的长度减一。

unshift()：在数组的前端添加任意个项，并返回新数组的长度。

当前数组是否发生改变执行环境对象是否发生改变

var arr=[];
arr.push(100,200);
arr.unshift('hello','world');
console.log(arr,arr.length);
//hello world 100 200 4
console.log(arr.pop());//200
console.log(arr.shift());//hello
console.log(arr,arr.length);//world 100 2

4.数组类型的检测

//判断当前变量的数据类型var arr=[];
console.log(typeof arr);//object//instanceof  从小到大   当前变量是否是某个构造函数对应的原型链上
console.log(arr instanceof Array);//true
console.log(arr instanceof Object);//false
console.log(arr instanceof String);//true
//大到小     当前变量是否是子孙后代
console.log(Array.protptype.isPrototypeOf(arr));//true
console.log(Number.protptype.isPrototypeOf(arr));//false
//数组中常用的，封装好的   静态函数：存在于某个构造函数内部  公共的，共享的，大家都能使用的
console.log(Array.isArray(arr));//true
console.log(Array.isArray(new Array()));//true
console.log(Array.isArray('abc'));//false
console.log(Array.isArray(null));//false

5.数组的数据类型的转换

//[ ]---> string
//[ ]---> boolean
console.log(Boolean(null));//false
console.log(Boolean([]));//true
console.log(!!([100,200]));//true
//1.Arrar.prototype.toString()
//对数组成员进行循环遍历
//item.toString(),item.toString(),item.toString()
var arr =[100,200,{name:'zs'}];
console.log(arr.toString());
console.log(['hello','world'].toString());
var arr2=[100,true,'hello',{},[1,2,3],function({})];
console.log(arr2.toString());
//2.直接console.log()
console.log(arr,arr2);
//3.显示的String（） +'' 强制数据类型转换 ==>arr.toString()
console.log(String(arr));
console.log(arr +"");
//4.使用Array.prototype中的  实例方法join
//应用场景  纯净的数据环境    join指定连接符
var str1=arr.join();//,
var str2=arr.join('@');//@
var str3=arr.join('javascript');
console.log(str1,str2,str3);
//5.arr--->string  维持数据内容，层次结构，数据类型
//序列化    反序列化
//JSON.stringify()      JSON.parse()  静态函数   JSON不处理函数，只处理数据
var str=JSON.stringify(arr2);
console.log(arr2);
//后台传递str过来
var str1 ="{\"name":\"zs",\"age":100}";
var str2 ="[100,200,300]";//接口约束：相同数据类型
var r1=JSON.parse(str1);
var r2=JSON.parse(str2);
console.log(r1,r2);
if (Array.isArray(r1)){console.log('数组类型')；
}else{console.log('object对象类型')；
}

6.排序

reverse() ：反转数组项的顺序

sort() ：

1.默认排序：该方法会调用每个数组项的toString() 方法，然后按照字符序列排序 ü

2.自定义排序：

a.该方法可以接受一个比较函数作为参数，比较函数有两个参数

b.如果第一个参数位于第二个参数之前，返回负数

c.如果第一个参数位于第二个参数之后，返回正数

//1.函数的功能：正序 倒序    排序依据，默认是ascll
//2.参数   不传参  默认排序
//3.返回值
//4.影响到了原数组
var arr1=[3,4,2,6,1];
var result=arr1.sort();
console.log(result);//1,2,3,4,5,6
console.log(arr1);//1,2,3,4,5,6

var arr2 =[10,1,23,2];
//console.log(arr2.sort());
arr2.sort();
console.log(arr2);//1,10,2,23   ascll排序：一个字母一个字母排序
console.log(arr1.reverse());
console.log(arr2.reverse());

//自定义排序   过程--函数作为参数
function  compare(v1,v2){//大于0  小于0  等于0return  v1-v2;
}
arr2.sort(compare);//冒泡排序  快速排序   插入排序
console.log(arr2);//1,2,10,23
arr2.reverse(compare);
console.log(arr2);//23,10,2,1

7.自定义排序

var arr1 =[10,1,20,4,3,2,30];
var arr2 =['hello','abo','dbc',100];
function numcompare(n1,n2){return n1-n2;}
arr1.sort(numcompare);
console.log(arr1);//升序    1，2，3，4，10，20，30

function numcp2(n1,n2){return n2-n1;
}
arr1.sort(numcp2);//降序
console.log(arr1);
arr1.reverse(numc);//反序列：索引位置
console.log(arr1);
//字符串类型的数据项不能以算术操作符进行排序依据

8.增删数据

//Array.prototype.concat(另一个数组) 返回值就是拼接后的数组  原数组不会受影响
//功能：数据项的简单一个层次的拼接
var arr=[100,200];
var result1=arr.concat(300);
var result2=arr.concat('hello','world');
var result3=arr.concat([1,2,3]);
console.log(arr,result1,result2,result3);

var arr2=[100,200,300,400,500];
//Array.prototype.slice(index_start,index_end);
//slice(0)  slice(0,3)  slice(3,5)
//截取数据项[start,end) = arr2.slice(x,y); 原数组不受影响
var r4=arr2;//简单的地址值的复制，浅拷贝，指向的是同一片内存空间
var r1=arr2.slice(0);//arr2堆中的数据==>r1堆中  深拷贝 指向的不是同一个内存空间
var r2=arr2.slice(0,3);//100,200,300
var r3=arr2.slice(3,5);//400,500
console.log(arr2,r1,r2,r3);
arr2.push(600);
r1.pop();
console.log(r4,arr2,r1);
//第一个应用场景：深拷贝
//第二个应用场景：类数组对象 转换成 数组格式
function add(){console.log(arguments,arguments.length,arguments.callee);
//var arr=arguments.slice(0);//反建立对象和函数关系var arr=Array.prototype.slice.call(arguments,0);console.log(arr);
}
add(1,2,3,4);
add('hello','world','briup');

//Array.prototype.splice()原数组受影响，返回值就是删除掉的数据项
//Array.prototype.splice(index_start,count);删除

var arr3=[100,200,300,400];
var r1=arr3.splice(1,2);
console.log(arr3,r1);

var arr3=[100,200,300,400];
var r1=arr3.splice(0,arr3.length);//深度拷贝后 清空原数组
console.log(arr3,r1);//[]

var arr3=[100,200,300,400];
//var r1=arr3.splice(1,0);
var r1=arr3.splice(7,3);
console.log(arr3,r1);//原样 []

var arr3=[100,200,300,400];
var r1=arr3.splice(-3,3);//索引是负值，就是倒序去查找
console.log(arr3,r1);

//Array.prototype.splice(index_start,count,新增的数据项s); 插入或者替换
var arr3=[100,200,300,400];
var r1=arr3.splice(1,2,'a','b','c');//替换
console.log(arr3);
var arr3=[100,200,300,400];
var r2=arr3.splice(1,0,'a','b','c');//插入
console.log(r1,r2);
console.log(arr3);

9.查找

//indexOf lastIndexOf  通过数据项的值去查找在数据中的索引位置  比较算法===
var arr=[100,200,300,100,200,300,400];
var r1=arr.indexOf(100);//0
var r2=arr.indexOf(100,2);//3
var r3=arr.indexOf(600);//-1
var r4=arr.lastIndexOf(100);//3
console.log(r1,r2,r3,r4);
var r5=arr.indexOf('100');//-1
console.log(r5);
var ob={name:'ww',age:400};
var arr=[
{name:'zs',age:100,valueOf:function(){return 1},toString:function(){return 'a'}},
{name:'ls',age:200},
{name:'zz',age:300},ob
];
var r=arr.indexOf({name:'zs',age:100,valueOf:function(){return 1},toString:function(){return 'a'}});
console.log(r);
var r2=arr.indexOf(ob);
console.log(r2);
//基本数据值   引用的地址值

10.迭代

var arr=[100,200,300,400];
//都  every
//某一个/有没有 some
//是否大于200
function big(value){return value>200;//if(value>200) return true;else return false;
}
var r1=arr.every(big);//false
var r2=arr.some(big);//true
console.log(r1,r2,arr);

Array.prototype.mySome=function(fn){//var arr=this;for(var i=0;i<this.length;i++){var bool = fn(this[i],i,this);if(bool) return true;}return false;
};

var r3=arr.filter(big);
console.log(r3);
Array.prototype.myFilter=function(fun){var result=[];for(var index in this){var bool=fn(this[index],index,this);if(bool) result.push(this[index]);//result[result.length]=this[index]}return result;
}
var r4=arr.map(big);
console.log(r4);

arr.forEach(function(value,index){console.log(index,value);
});


Array.prototype.myMap=function(fn){var result=[];this.forEach(function(v,k,arr){//xxvar r = fn(v,k,arr);result.push(r);});return result;
/*for(var k in this){var v=this[k];var arr=this;//xxx}*/
}
var res=arr.myMap(function(value){//var newv=value/100;return value/100;
});
console.log(res);

11.迭代的应用

var stus=[{name:'张三',age:20},{name:'李四',age:30},{name:'王五',age:10},{name:'陈六',age:3}
];

//排序
//1.有没有成年人
var bool = stus.some(function(value){return value.age>=18;
});
console.log(bool);
//2.有没有未成年人
var bool=stus.some(function(value){return value.age<18;
});
//3.是否都成年
var bool=stus.every(function(obj){return obj.age>=18;
});
//4.把未成年人找到
var arr=stus.filter(function(obj){return obj.age<18;
});
console.log(arr);
//5.找到所有的用户名  obj.name
var arr=stus.map(function(obj){//return obj.name;return 'work_'+obj.name;
});
console.log(arr);
//6.找到所有的年龄 obj.age
var arr=stus.map(function(obj){return obj.age;
});
console.log(arr);
//7.按照td格式输出打印
arr.forEach(function(value){console.log("<td>"+value+"</td>");
});

【2021-09-07】JS学习（四）--数组相关推荐

【JS学习】数组过滤方法的使用filter
前言:本博客系列为学习后盾人js教程过程中的记录与产出,如果对你有帮助,欢迎关注,点赞,分享.不足之处也欢迎指正,作者会积极思考与改正. 文章目录使用效果: 参数说明: 方法原理解析: 使用效果: ...
js学习笔记数组和对象
数组在JS中创建数组非常简单. 直接[ ]即可. 也可以用正规军的new Array(). 不过效果都是一样的. var as = [11,22,33,44,55]; var bs = new Ar ...
JS学习之数组的长度
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>数组的 ...
2021.09.07 移动端APP开发了解一下
我是大自然的搬运工. Native App翻页类型总结: 微交互:移动端APP页面跳转方式分析 Web App开发步骤: 一步一步教你如何开发h5页面 H5页面跳转的几种方法: H5打开新窗口与页面跳 ...
Three.js学习七——播放模型动画时模型沿着轨迹移动
目录效果描述实现流程基本流程工程文件搭建场景添加模型和播放动画添加路径和模型移动完整代码和实现效果效果描述在播放导入的模型动画同时,让模型沿着预定路径轨迹移动.例如导入一个会跑步动 ...
Three.js学习六——模型动画
目录 Three.js动画系统(Animation system) 实现流程基本流程工程文件场景搭建添加模型模型动画动画实现的基本流程相关对象方法和代码完整代码和实现效果 Three. ...
Three.js学习五——让模型沿着轨迹移动
目录流程搭建场景环境添加模型增加运动轨迹让模型沿轨迹运动完整代码和效果流程基本流程 1.添加模型 2.增加运动轨迹 3.让模型沿轨迹运动工程文件结构如下图: static:存放静态资 ...
【php基础入门】PHP环境搭建与初识php代码书写及演示PHP和JS中遍历数组的区别、引入外部文件等知识点学习笔记
php是什么? PHP是PHP:HypertextPreprocessor(超文本预处理器)的首字母缩写,是一种跨平台的.开源的.免费的脚本语言,其语法吸收了C语言.Java 和 Perl 的特点,利 ...
2021年Node.js开发人员学习路线图
Node.js 自发布以来,已成为业界重要破局者之一.Uber.Medium.PayPal 和沃尔玛等大型企业,纷纷将技术栈转向 Node.js.Node.js 支持开发功能强大的应用,例如实时追踪 ...
2021 年 Node.js 开发人员学习路线图
前言:总有小伙伴问 Node.js 如何深入学习,本文是一个不错的学习大纲. Node.js 自发布以来,已成为业界重要破局者之一.Uber.Medium.PayPal 和沃尔玛等大型企业,纷纷将技术 ...

【2021-09-07】JS学习（四）--数组