JS基础--Array

一、特点

  1. 数据类型的多变;
  2. 数组大小可动态调整;
  3. 有length属性,且length属性不是只读的,可以设置;

二、创建方法

  1. 使用Array构造函数;

    var arr=new Array();
    var arr=new Array(20);
    var arr=new Array("arr1","arr2","arr3");
  2. 数组字面量表示法

    var arr=["arr1","arr2","arr3"];
    var arr=[];

三、检测数组

value instanceof Array;
Array.isArray(value);//value 为数组

四、转换方法

toString(),toLocaleString()返回的都是字符串,并以,分隔

join()返回的也是字符串,以join函数内部的参数分隔,对原数组没有影响

valueOf()返回的是数组,可以通过这种方式将一个数组赋给另一个数组若对这个数组操作会对原数组有一样的操作。

若某一项为null或者为undefined时,那么在join(),toLocaleString(),toString()中以空字符串表示

var arr=["arr1","arr2","arr3"];
console.log(arr.toString());//arr1,arr2,arr3
console.log(arr.toLocaleString());//arr1,arr2,arr3
console.log(arr.valueOf());//["arr1", "arr2", "arr3"],可以通过这种方式将一个数组赋值给另一个数组,若对这个数组操作,会对原数组有一样的操作。
console.log(arr);//["arr1", "arr2", "arr3"]
console.log(arr.join("||"));//arr1||arr2||arr3 返回字符串,对原数组没有改变//若某一项为null或者为undefined时,那么在join(),toLocaleString(),toString()中以空字符串表示

五、栈方法

push()返回修改后数组长度

pop()返回取出的元素,从arr[arr.length-1]开始取

var arr=["arr1"];
var count=arr.push("arr2","arr3");//返回修改后数组长度
console.log(count);//3
console.log(arr);//["arr1","arr2","arr3"]
var theTop=arr.pop();//返回取出的元素,从arr[arr.length-1]开始取
console.log(theTop);//arr3字符串
console.log(arr);//["arr1","arr2"]

六、 队列方法

shift()返回取出的元素,从arr[0]开始取

unshift()在前面增加,增加arr[0],返回修改后的长度

var arr=[];
var count=arr.push("arr1","arr2");//返回修改后数组长度
console.log(count);//2
console.log(arr);//["arr1","arr2"]
var theBottom=arr.shift();//返回取出的元素,从arr[0]开始取
console.log(theBottom);//arr1字符串
console.log(arr);//["arr2"]
var count=arr.unshift("arr1","arr0");//在前面增加,增加arr[0]
console.log(count);//3,返回修改后的长度
console.log(arr);//["arr1", "arr0", "arr2"]

七、重排序方法

reverse逆向输出,改变原数组

sort升序排序,比较的是字符串,要解决这个问题,只需要在sort中传入一个函数就可以

函数为

arr.sort(function(a,b){
return b-a});//b-a从大到小,a-b从小到大

//reverse逆向输出var arr=[0,1,5,10,15];
arr.reverse();//逆向输出
console.log(arr);//[15, 10, 5, 1, 0]//sort升序排序
arr.sort();//升序排序,比较的是字符串
console.log(arr);//[0, 1, 10, 15, 5]
//sort解决方案
arr.sort(function(a,b){
  return b-a});//b-a从大到小,a-b从小到大
console.log(arr);//[15, 10, 5, 1, 0]

八、操作方法

concat()连接,不影响原数组

slice()复制新数组,不影响原数组

splice()删除,在原数组上操作,返回删除项组成的数组


//concat连接
var arr=["arr1","arr2"];
var arrs=arr.concat("arr3",["arr4","arr5"]);//不影响原数组
console.log(arr);//["arr1", "arr2"]
console.log(arrs);//["arr1", "arr2", "arr3", "arr4", "arr5"]
//slice复制新数组
var arrs1=arrs.slice(1);//不影响原数组
var arrs2=arrs.slice(1,4);//不影响原数组,相当于arrs.slice(-4,-1),负数加上数组长度再进行获取新数组
console.log(arrs1);//["arr2", "arr3", "arr4", "arr5"],不影响原数组
console.log(arrs2);//["arr2", "arr3", "arr4"]
//splice删除
var removed=arr.splice(0,1,"arr1_1","arr1_2");//在0的位置开始删除1项,插入2项
console.log(arr); //["arr1_1", "arr1_2", "arr2"]
console.log(removed);//["arr1"]返回删除的项组成的数组

九、位置方法

indexOf从前往后查找

lastIndexOf从尾部查找

未找到的情况下都为-1

//indexOf从前往后查找
var arr=[1,2,3,4,5,4,3,2,1];
console.log(arr.indexOf(4));//3,返回4所在位置
console.log(arr.indexOf("4"));//-1,未找到的情况下为-1,按===查找
//lastIndexOf从尾部查找
console.log(arr.lastIndexOf(4));//5,返回4所在位置
console.log(arr.lastIndexOf("4"));//-1,未找到的情况下为-1,按===查找
var person={name:"XXX"};//对象
var people=[{name:"XXX"}];//数组,含一项,这一项是一个对象(跟person无关)
var morePeople=[person];//数组,含一项,这一项是一个person对象
console.log(people.indexOf(person));//-1,people数组中不含person对象
console.log(morePeople.indexOf(person));//0,morePeople数组中含person对象,为第一项

十、迭代方法

every(),每一项都满足则返回true,否则返回false

filter(),返回满足条件的项组成的数组,对原数组没有影响

forEach(),相当于for循环

map(),对数组进行操作,对原数组没有影响

some(),至少一项满足则返回true,否则返回false

var numbers=[1,2,3,4,5,4,3,2,1];

//every,每一项都满足则返回true,否则返回false
var everyResult=numbers.every(function(item,index,array){
  return (item>2);
});
console.log(everyResult);//false

//filter,返回满足条件的项组成的数组,对原数组没有影响
var filterResult=numbers.filter(function(item,index,array){
  return (item>2);
});
console.log(filterResult);//[3, 4, 5, 4, 3]
console.log(numbers);//[1,2,3,4,5,4,3,2,1]

//forEach,相当于for循环
numbers.forEach(function(item,index,array){
  //执行某些操作
});//

//map,对数组进行操作,对原数组没有影响
var mapResult=numbers.map(function(item,index,array){
  return (item*2);
});
console.log(mapResult);// [2, 4, 6, 8, 10, 8, 6, 4, 2]
console.log(numbers);//[1,2,3,4,5,4,3,2,1]

//some,至少一项满足则返回true,否则返回false
var someResult=numbers.some(function(item,index,array){
  return (item>2);
});
console.log(someResult);//true

十一、归并方法

reduce(),第一遍prev=1,cur=2(第二项),第二遍prev=3(1+2),cur=3(第三项)

reduceRight(),第一遍prev=5,cur=4(第四项),第二遍prev=9(5+4),cur=3(第三项)

reduce(),和reduceRight()遍历方向不同,除此之外都相同

var numbers=[1,2,3,4,5];
//reduce,第一遍prev=1,cur=2(第二项),第二遍prev=3(1+2),cur=3(第三项)
var sum=numbers.reduce(function(prev,cur,index,array){
  return prev+cur;
});
console.log(sum);//15

//reduceRight,第一遍prev=5,cur=4(第四项),第二遍prev=9(5+4),cur=3(第三项)
var sum=numbers.reduce(function(prev,cur,index,array){
  return prev+cur;
});
console.log(sum);//15
//reduce,和reduceRight遍历方向不同,除此之外都相同

时间: 2024-11-07 12:39:12

JS基础--Array的相关文章

JavaScript基础18——js的Array对象

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js的Array对象</title> 6 <script type="text/javascript"> 7 var arr = [1,2,3,4,5]; 8 document.write("数组:" + arr); 9 //

js基础知识总结(2016.11.1)

js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避免全局变量和方法(命名空间,闭包,面向对象),模块化(seaJs,requireJs) 常用内部类:Data Array Math String HTML属性,CSS属性HTML:属性.HTML属性="值":CSS:对象.style.CSS属性="值"; class和f

JS基础(超级简单)

1     JS基础(超级简单) 1.1 数据类型 1.1.1   基本类型: 1)        Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2)        string 3)        boolean 4)        null 5)        undefined 1.1.2   复杂类型 object:date,array,function 1.2 变量 var 变量名=值 变量的作用域:1.全局:以页面为单位.2局部:以函数为单位.

js基础--javascript基础概念之数组(二)

js基础--javascript基础概念之数组 数组栈方法 数组可以像栈一样.栈是一种先进后出的数据结构,最先添加的数据最后一个出来.栈方法添加数据也称为 推入  移除数据称为 弹出. js为数值栈方法提供了 push()   和  pop() ;  两个方法. push() push() 方法接受参数就是你要添加进入到数组的值.push()  方法会将他们逐一添加到数组的末尾  数组的length属性会跟着更新数据. *push(多个数组元素值) 返回的修改后的数组长度 var array =

js基础--javascript基础概念之数组

js基础--javascript基础概念之数组 在ECMAScript 中 ,数组是很常用的数据类型,js中的数组和其他很多语言的数组有明显的区别.js的数组可以保持任何类型的数值,一个数组中可以保存着多个不同类型的数值.js数组大小(长度)是可以调整的.可以随着数据的添加自动增长数组长度. 创建数组: 一.数组字面量 数组字面量由一对包含数组项的方括号[]表示. var array = [ 'kin', 'cheong', 'change', 'hello', 'haha', 'hi' ];

JS基础知识回顾:引用类型(一)

在ECMAScript中引用类型是一种数据结构,用于将数据和功能组织在一起,而对象时引用类型的一个实例. 尽管ECMAScript从技术上讲是一门面向对象的语言,但它不具备传统的面向对象语言所支持的类和接口等基本结构,所以虽然说引用类型与类看起来想死,但他们并不是相同的概念. 不过引用类型有的时候也可以被称为对象定义,因为他们描述的是一类对象所具有的属性和方法. 新对象是使用new操作符后跟一个构造函数来实现的,构造函数本身就是一个函数,只不过该函数时处于创建新对象的目的而定义的. ECMASc

js基础知识点总结

js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避免全局变量和方法(命名空间,闭包,面向对象),模块化(seaJs,requireJs) 常用内部类:Data Array Math String HTML属性,CSS属性HTML:属性.HTML属性="值":CSS:对象.style.CSS属性="值"; class和f

JS基础语法

JS基础语法第二天 1.If语法if的语法:If(判断条件){ 一般是一个boolean类型的值或是关系表达式或是逻辑表达式要执行的代码;} If(判断条件){ 一般是boolean类型的值或是关系表达式或是逻辑表达式要执行的代码;}else {要执行的代码;} If(判断条件){ 一般是boolean类型的值或是关系表达式或是逻辑表达式要执行的代码;}else if(判断条件) {要执行的代码;} 2.三元运算符表达式1(关系表达式或是逻辑表达式)? 表达式2:表达式3;如果表达式1成立,也就

JS基础四

1.函数是一组可以随时随地运行的语句. 函数是 ECMAScript 的核心. 函数是由这样的方式进行声明的:关键字 function.函数名.一组参数,以及置于括号中的待执行代码. 2.闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量. 3.把对象的所有引用都设置为 null,可以强制性地废除对象.object  设置为null, 4.本地对象(native object) Object Function Array String Boolean Numb