Array和常用API

2018-07-13 admin

什么是数组

在阮一峰的《JavaScript 标准参考教程(alpha)》中的解释是: 数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始),整个数组用方括号表示。 JS的本质理解是: 数组(array)就是原型链中有 Array.prototype 的对象

基本用法

var a = Array(3) // {length:3}
var a = new Array(3) // {length:3}

如果输入只有一个数字,那么创建的数组就是length为3,并且三个数的值都为undefinde。new加不加效果都一样

var b = Array(3,3) // [3,3] 
var b = new Array(3,3) // [3,3]

如果输入的值超过一个,那么创建的就是一个value等于输入值的数组。new加不加效果都一样

var a = [,,,]//{length:3},值为undefined
var a = [3,3]//[3,3]

创建数组也可以像这样直接创建,只有逗号的话代表的就是有下标但是值为undefined的数。

伪数组

  1. 有 0,1,2,3,4,5…n,length 这些 key 的对象
  2. 原型链中没有 Array.prototype

这样的对象就是伪数组


目前学习到的伪数组例如:

  1. arguments 对象
  2. document.querySelectAll(‘div’) 返回的对象

Array.prototype.forEach()

forEach()接收一个函数,并且forEach()方法对数组的每个元素执行一次提供的函数。

array.forEach(callback(currentValue, index, array){
    //do something
})

array.forEach(callback())
  • callback:为数组中每个元素执行的函数,该函数接收三个参数
  • currentValue(当前值):数组中正在处理的当前元素。
  • index(索引):数组中正在处理的当前元素的索引。
  • array:forEach()方法正在操作的数组。
  • 返回值:undefined

自写一下forEach函数

function forEach(array, x){
    for(let i = 0;i < array.length; i++){
        x(array[i],i)
    }
}

这就是一个简单的forEach()自写的一个函数,array代表操作的数组,x代表用来操作数组的函数,传入数组和函数。

var obj = []

obj.forEach = function(x){
    for(let i = 0; i < this.length; i++){
        x(this[i], i)
    }
}

this就是指代obj这个数组

Array.prototype.sort()

sort() 方法用就地( in-place )的算法对数组的元素进行排序,并返回数组。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。

arr.sort() 
arr.sort(compareFunction)
  • compareFunction:可选。用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。
  • 返回值:返回排序后的数组。原数组已经被排序后的数组代替。

如果没有指明 compareFunction ,那么元素会按照转换为的字符串的诸个字符的Unicode位点进行排序。例如 “Banana” 会被排列到 “cherry” 之前。当数字按由小到大排序时,9 出现在 80 之前,但因为(没有指明 compareFunction),比较的数字会先被转换为字符串,所以在Unicode顺序上 “80” 要比 “9” 要靠前。

如果是数字想升序排列,sort()中输入:

function compareNumbers(a, b) {
  return a - b;
}//也可以(a,b) => a-b

如果是数字想倒序排列,sort()中输入:

function compareNumbers(a, b) {
  return b - a;
}//也可以(a,b) => b-a

对象可以按照某个属性排列:

var students = ['小明','小红','小花'] 
var scores = { 小明: 59, 小红: 99, 小花: 80 } 
students.sort(function(x, y){
         return scores[y] - scores[x]
})

另外sort()是一个比较特殊的API,因为它改变了自身数组,这是为了节省内存。

Array.prototype.join()

join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。

str = arr.join(separator)
// 分隔符
  • separator: 指定一个字符串来分隔数组的每个元素。 如果需要(separator),将分隔符转换为字符串。 如果省略(),数组元素用逗号分隔。默认为 “,”。 如果separator是空字符串(""),则所有元素之间都没有任何字符。
  • 返回值:一个所有数组元素连接的字符串。如果 arr.length 为0,则返回空字符串

var a = ['a','s','d']
a.join()//"a,s,d"
a.join('')//"asd"
a.join('f')//"afsfd"

所有的数组元素被转换成字符串,再用一个分隔符将这些字符串连接起来。如果元素是undefined 或者null, 则会转化成空字符串。

Array.prototype.concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
  • valueN:将数组和/或值连接成新数组。
  • 返回值:新的 Array 实例。

var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];

alpha.concat(numeric);//[1, 2, 3, 4, 5, 6, 7, 8, 9]

将两个数组连接起来生成一个新的数组。

var alpha = ['a', 'b', 'c'];

var alphaNumeric = alpha.concat(1, [2, 3]);
//['a', 'b', 'c', 1, 2, 3]

可以直接将值连接到数组,生成一个新的数组。

var a = [1,2,3]
var b = a.concat()//[1, 2, 3]
b === a//false

concat()可以创建一个相同值的数组,但是是新创建的一个对象。

Array.prototype.map()

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。 map()和forEach()很像,但是forEach()返回undefined,而map()返回一个对数组内每个数处理的数组。

let new_array = arr.map(function callback(value, key, array) { 
    // Return element for new_array 
})
  • callback:生成新数组元素的函数,使用三个参数。
  • value:callback 的第一个参数,数组中正在处理的当前元素。
  • key:callback 的第二个参数,数组中正在处理的当前元素的下标。
  • array:callback 的第三个参数,map 方法被调用的数组。
  • 返回值:一个新数组,每个元素都是回调函数的结果。

var a = [1,2,3]
a.map(function(value,key){
      return value *value
})//[1,4,9]

map()可以对数组的每个值进行操作,和forEach是基本一样的,但是,map()返回一个新的数组,而forEach返回的是undefined。

Array.prototype.filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

array.filter(function(value, key, array){})
  • value:当前在数组中处理的元素
  • key:正在处理元素在数组中的下标(索引)
  • array:调用了filter筛选器的数组
  • 返回值:返回的是一个布尔值,来判断筛选条件

var a = [1,2,3,4,5,6,7,8,9,10]
a.filter(function(value){
    return value > 5
})//[6, 7, 8, 9, 10]

进行筛选,返回一个筛选之后的数组,不改变原数组

Array.prototype.reduce()

reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。

a.reduce(callback(prev, value),initial)
  • callback:执行数组中每个值的函数
  • prev:累加器累加回调的返回值; 它是上一次调用回调时返回的累积值
  • value:数组中正在处理的元素
  • initial:累加时的初始值

var a = [1,2,3,4,5,6,7,8,9,10]
a.reduce(function(sum,n){
        return sum + n
},0)//55

对数组的内容累计处理,reduce可以变换实现map()和filter()

var a = [1,2,3]
a.reduce(function(arr,n){
    arr.push(n*2)
    return arr
},[])//[2, 4, 6]

这就是reduce()实现map()的过程

var a = [1,2,3,4,5,6,7,8,9,10]
a.reduce(function(arr,n){
   if(n%2===0){
       arr.push(n) 
   }
   return arr
},[])//[2, 4, 6, 8, 10]

这是reduce()实现filter()的过程

原文链接:https://segmentfault.com/a/1190000015620486

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35876.html

文章标题:Array和常用API

相关文章
JavaScript基本语法和规范
JavaScript是区分大小写的,使用Unicode字符集。 在JavaScript中,语句以“;”结尾。 JavaScript脚本的源文本被从左到右执行。 虽然有时“;”是不必要的,但我们建议总是在你的语句结束处添加分号;它将避免副作用...
2015-11-12
JavaScript和Java
JavaScript和Java在某些方面相似但完全不同。 JavaScript语言类似于Java但是没有Java的静态类型和强类型检查,不过它们的语法和 C 语言都很相似。 JavaScript基于原型的对象模型,而不是更常见的基于类的对象...
2015-11-12
jquery拼接ajax 的json和字符串拼接的方法
整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,稍微整理精简一下做下分享。 jQuery拼接字符串ajax &lt;form id=&quot;myForm&quot; action=&quot;#&quot;&...
2017-04-01
数据类型和结构
ECMAScript标准定义了七种数据类型 1)布尔值(true 和 false) 2)null,一个特殊的关键字表示空,要注意,javascrip是区分大小写的,所以Null和null是不一样的 3)undefined 表示未定义 4)N...
2015-11-12
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
Web缓存基础:术语、HTTP报头和缓存策略
简介 对于您的站点的访问者来说,智能化的内容缓存是提高用户体验最有效的方式之一。缓存,或者对之前的请求的临时存储,是HTTP协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求,这受控于对该内容所声明的缓存策略...
2016-01-13
JavaScript中的call方法和apply方法使用对比
方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明: call 方法可以用来代替另一个对象调用一个方法。c...
2017-03-29
PHP 和 Node.js 的角摔
在最近 SitePoint 的 PHP vs Node.js Smackdown 一文中,Craig Buckler 对两种语言就如何应对一系列的10个挑战进行了比较来决定哪一个总体上更佳。 Craig 在书中讲到,这些比较总是有些矛盾。作...
2015-12-25
javascript记住用户名和登录密码(两种方式)
下面主要通过代码给大家展示下javascript记住用户名和登录密码,具体代码内容请看下文。 第一种方式: CONTENT login.html welcome.html cookie.js common.js login.html &lt...
2017-03-29
2015 年, HTML5 和 IP 化
HTML5 2010 年 4 月,乔布斯发表了一篇公开信叫做 “Thoughts on Flash” 。里面提到 HTML5 必将统治 Web ( HTML5 will win )。 的确, HTML5 为 Web 带来更丰富的表现和功能。...
2015-11-12
回到顶部