2HZZ国外网址导航喜欢加入收藏
当前位置:国外网 » 站长资讯 » 编程 » 文章详细
JavaScript Array slice() 方法

发布时间:2021-10-23,来源:2HZZ外国网址导航

JavaScript Array slice() 方法shift()some() JavaScript Array 参考手册实例从数组中选择元素:


var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
亲自试一试
页面下方有更多 TIY 实例。


定义和用法
slice() 方法以新的数组对象,返回数组中被选中的元素。


slice() 方法选择从给定的 start 参数开始的元素,并在给定的 end 参数处结束,但不包括。


注释:slice() 方法不会改变原始数组。


浏览器支持
所有浏览器都完全支持 slice() 方法:


Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Yes Yes Yes Yes Yes Yes
语法
array.slice(start, end)
参数值
参数 描述
start
可选。整数,指定从哪里开始选择(第一个元素的索引为 0)。


使用负数从数组的末尾进行选择。如果省略,则类似于 "0"。


end
可选。整数,指定结束选择的位置。


如果省略,将选择从开始位置到数组末尾的所有元素。使用负数从数组末尾进行选择。


技术细节
返回值: 新的数组,包含选定的元素。
JavaScript 版本: ECMAScript 1
更多实例
使用负值选择元素:


var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var myBest = fruits.slice(-3, -1);
亲自试一试
相关页面
教程:JavaScript 数组


教程:JavaScript 数组 Const


教程:JavaScript 数组方法


教程:JavaScript 排序数组


教程:JavaScript 数组迭代


JavaScript 数组
JS 数字方法
JS 数组方法
JavaScript 数组用于在单一变量中存储多个值。


实例
var cars = ["Saab", "Volvo", "BMW"];
亲自试一试
什么是数组?
数组是一种特殊的变量,它能够一次存放一个以上的值。


如果您有一个项目清单(例如,汽车品牌列表),在单个变量中存储汽车品牌应该是这样的:


var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW"; 
不过,假如您希望遍历所有汽车并找到一个特定的值?假如不是三个汽车品牌而是三百个呢?


解决方法就是数组!


数组可以用一个单一的名称存放很多值,并且还可以通过引用索引号来访问这些值。


创建数组
使用数组文本是创建 JavaScript 数组最简单的方法。


语法:
var array-name = [item1, item2, ...];
实例
var cars = ["Saab", "Volvo", "BMW"];
亲自试一试
空格和折行并不重要。声明可横跨多行:


实例
var cars = [
    "Saab",
    "Volvo",
    "BMW"
];
亲自试一试
请不要最后一个元素之后写逗号(比如 "BMW",)。


可能存在跨浏览器兼容性问题。


使用 JavaScript 关键词 new
下面的例子也会创建数组,并为其赋值:


实例
var cars = new Array("Saab", "Volvo", "BMW");
亲自试一试
以上两个例子效果完全一样。无需使用 new Array()。


出于简洁、可读性和执行速度的考虑,请使用第一种方法(数组文本方法)。


访问数组元素
我们通过引用索引号(下标号)来引用某个数组元素。


这条语句访问 cars 中的首个元素的值:


var name = cars[0];
这条语句修改 cars 中的首个元素:


cars[0] = "Opel";
实例
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0]; 
亲自试一试
[0] 是数组中的第一个元素。[1] 是第二个。数组索引从 0 开始。


改变数组元素
这条语句修改了 cars 中第一个元素的值:


cars[0] = "Opel";
实例
var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];
亲自试一试
访问完整数组
通过 JavaScript,可通过引用数组名来访问完整数组:


实例
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars; 
亲自试一试
数组是对象
数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 "object"。


但是,JavaScript 数组最好以数组来描述。


数组使用数字来访问其“元素”。在本例中,person[0] 返回 Bill:


数组:
var person = ["Bill", "Gates", 62];
亲自试一试
对象使用名称来访问其“成员”。在本例中,person.firstName 返回 Bill:


对象:
var person = {firstName:"John", lastName:"Doe", age:46};
亲自试一试
数组元素可以是对象
JavaScript 变量可以是对象。数组是特殊类型的对象。


正因如此,您可以在相同数组中存放不同类型的变量。


您可以在数组保存对象。您可以在数组中保存函数。你甚至可以在数组中保存数组:


myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
数组属性和方法
JavaScript 数组的真实力量隐藏在数组的属性和方法中:


实例
var x = cars.length;   // length 属性返回元素的数量
var y = cars.sort();   // sort() 方法对数组进行排序
我们将在下一章学习数组方法。


length 属性
length 属性返回数组的长度(数组元素的数目)。


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // fruits 的长度是 4
亲自试一试
length 属性始终大于最高数组索引(下标)。


访问第一个数组元素
实例
fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];
亲自试一试
访问最后一个数组元素
实例
fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];
亲自试一试
遍历数组元素
遍历数组的最安全方法是使用 "for" 循环:


实例
var fruits, text, fLen, i;


fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";

亲自试一试
您也可以使用 Array.foreach() 函数:


实例
var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];


text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";


function myFunction(value) {
  text += "<li>" + value + "</li>";
}
亲自试一试
添加数组元素
向数组添加新元素的最佳方法是使用 push() 方法:


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // 向 fruits 添加一个新元素 (Lemon)
亲自试一试
也可以使用 length 属性向数组添加新元素:


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // 向 fruits 添加一个新元素 (Lemon)
亲自试一试
警告!
添加最高索引的元素可在数组中创建未定义的“洞”:


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // 向 fruits 添加一个新元素 (Lemon)
亲自试一试
关联数组
很多编程元素支持命名索引的数组。


具有命名索引的数组被称为关联数组(或散列)。


JavaScript 不支持命名索引的数组。


在 JavaScript 中,数组只能使用数字索引。


实例
var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length 返回 3
var y = person[0];              // person[0] 返回 "Bill"
亲自试一试 警告!
假如您使用命名索引,JavaScript 会把数组重定义为标准对象。


之后,所有数组的方法和属性将产生非正确结果。


实例:
var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length 将返回 0
var y = person[0];              // person[0] 将返回 undefined
亲自试一试
数组和对象的区别
在 JavaScript 中,数组使用数字索引。


在 JavaScript 中,对象使用命名索引。


数组是特殊类型的对象,具有数字索引。


何时使用数组,何时使用对象?
JavaScript 不支持关联数组
如果希望元素名为字符串(文本)则应该使用对象。
如果希望元素名为数字则应该使用数组。
避免 new Array()
没有必要使用 JavaScript 的内建数组构造器 new Array()。


请使用 [] 取而代之!


下面两条不同的语句创建了名为 points 的新的空数组:


var points = new Array();         // 差
var points = [];                  // 优
下面两条不同的语句创建包含六个数字的新数组:


var points = new Array(40, 100, 1, 5, 25, 10); // 差
var points = [40, 100, 1, 5, 25, 10];          // 优
亲自试一试
new 关键词只会使代码复杂化。它还会产生某些不可预期的结果:


var points = new Array(40, 100);  // 创建包含两个元素的数组(40 和 100)
假如删除其中一个元素会怎么样?


var points = new Array(40);       // 创建包含 40 个未定义元素的数组!!!
亲自试一试
如何识别数组
常见的问题是:我如何知晓某个变量是否是数组?


问题在于 JavaScript 运算符 typeof 返回 "object":


var fruits = ["Banana", "Orange", "Apple", "Mango"];


typeof fruits;             // 返回 object
亲自试一试
typeof 运算符返回 "object",因为 JavaScript 数组属于对象。


解决方案 1:
为了解决这个问题,ECMAScript 5 定义了新方法 Array.isArray():


Array.isArray(fruits);     // 返回 true
亲自试一试
此方案的问题在于 ECMAScript 5 不支持老的浏览器。


解决方案 2:
创建您自己的 isArray() 函数以解决此问题:


function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}
亲自试一试
假如参数为数组,则上面的函数始终返回 true。


或者更准确的解释是:假如对象原型包含单词 "Array" 则返回 true。


解决方案 3:
假如对象由给定的构造器创建,则 instanceof 运算符返回 true:


var fruits = ["Banana", "Orange", "Apple", "Mango"];
 
fruits instanceof Array     // 返回 true
亲自试一试


JavaScript 数组 Const
JS 数组迭代
JS 日期
ECMAScript 2015 (ES6)
2015 年,JavaScript 引入了一个重要的新关键字:const。


使用 const 声明数组已成为一种常见做法:


实例
const cars = ["Saab", "Volvo", "BMW"];
亲自试一试
无法重新赋值
用 const 声明的数组不能重新赋值:


实例
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];    // ERROR
亲自试一试
数组不是常量
关键字 const 有一定误导性。


它不定义常量数组。它定义的是对数组的常量引用。


因此,我们仍然可以更改常量数组的元素。


/
元素可以重新赋值
您可以更改常量数组的元素:


实例
// 您可以创建常量数组:
const cars = ["Saab", "Volvo", "BMW"];


// 您可以更改元素:
cars[0] = "Toyota";


// 您可以添加元素:
cars.push("Audi");
亲自试一试
浏览器支持
Internet Explorer 10 或更早的版本不支持 const 关键字。


下表注明了完全支持 const 关键字的首个浏览器版本:


Chrome IE Firefox Safari Opera
Chrome 49 IE 11 / Edge Firefox 36 Safari 10 Opera 36
2016 年 3 月 2013 年 10 月 2015 年 2 月 2016 年 9 月 2016 年 3 月
声明时赋值
JavaScript const 变量在声明时必须赋值:


意思是:用 const 声明的数组必须在声明时进行初始化。


使用 const 而不初始化数组是一个语法错误:


实例
不起作用:


const cars;
cars = ["Saab", "Volvo", "BMW"];
用 var 声明的数组可以随时初始化。


您甚至可以在声明之前使用该数组:


实例
没问题:


cars = ["Saab", "Volvo", "BMW"];
var cars;
亲自试一试
const 块作用域
用 const 声明的数组具有块作用域。


在块中声明的数组与在块外声明的数组不同:


实例
const cars = ["Saab", "Volvo", "BMW"];
// 此处 cars[0] 为 "Saab"
{
  const cars = ["Toyota", "Volvo", "BMW"];
  // 此处 cars[0] 为 "Toyota"
}
// 此处 cars[0] 为 "Saab"
亲自试一试
用 var 声明的数组没有块作用域:


实例
var cars = ["Saab", "Volvo", "BMW"];
// 此处 cars[0] 为 "Saab"
{
  var cars = ["Toyota", "Volvo", "BMW"];
  // 此处 cars[0] 为 "Toyota"
}
// 此处 cars[0] 为 "Toyota"
亲自试一试
您可以在以下章节中学习更多关于块作用域的内容:JavaScript 作用域。


重新声明数组
在程序中的任何位置都允许用 var 重新声明数组:


实例
var cars = ["Volvo", "BMW"];   // 允许
var cars = ["Toyota", "BMW"];  // 允许
cars = ["Volvo", "Saab"];      // 允许
不允许在同一作用域或同一块中将数组重新声明或重新赋值给 const:


实例
var cars = ["Volvo", "BMW"];         // 允许
const cars = ["Volvo", "BMW"];       // 不允许
{
  var cars = ["Volvo", "BMW"];         // 允许
  const cars = ["Volvo", "BMW"];       // 不允许
}
不允许在同一作用域或同一块中重新声明或重新赋值现有的 const 数组:


实例
const cars = ["Volvo", "BMW"];       // 允许
const cars = ["Volvo", "BMW"];       // 不允许
var cars = ["Volvo", "BMW"];         // 不允许
cars = ["Volvo", "BMW"];             // 不允许


{
  const cars = ["Volvo", "BMW"];     // 允许
  const cars = ["Volvo", "BMW"];     // 不允许
  var cars = ["Volvo", "BMW"];       // 不允许
  cars = ["Volvo", "BMW"];           // 不允许
}
允许在另一个作用域或另一个块中使用 const 重新声明数组:


实例
const cars = ["Volvo", "BMW"];       // 允许
{
  const cars = ["Volvo", "BMW"];     // 允许
}
{
  const cars = ["Volvo", "BMW"];     // 允许
}
完整的数组参考手册
如需完整参考,请访问我们的完整 JavaScript 数组参考手册。


该手册包含所有数组属性和方法的描述和实例。


JavaScript 数组方法
JS 数组
JS 数组排序
JavaScript 数组的力量隐藏在数组方法中。


把数组转换为字符串
JavaScript 方法 toString() 把数组转换为数组值(逗号分隔)的字符串。


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 
结果


Banana,Orange,Apple,Mango
亲自试一试
join() 方法也可将所有数组元素结合为一个字符串。


它的行为类似 toString(),但是您还可以规定分隔符:


实例
var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 
结果


Banana * Orange * Apple * Mango
亲自试一试
Popping 和 Pushing
在处理数组时,删除元素和添加新元素是很简单的。


Popping 和 Pushing 指的是:


从数组弹出项目,或向数组推入项目。


Popping
pop() 方法从数组中删除最后一个元素:


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素("Mango")
亲自试一试
pop() 方法返回“被弹出”的值:


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x 的值是 "Mango"
亲自试一试
Pushing
push() 方法(在数组结尾处)向数组添加一个新的元素:


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  向 fruits 添加一个新元素
亲自试一试
push() 方法返回新数组的长度:


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =  fruits.push("Kiwi");   //  x 的值是 5
亲自试一试
位移元素
位移与弹出等同,但处理首个元素而不是最后一个。


shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引。


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // 从 fruits 删除第一个元素 "Banana"
亲自试一试
shift() 方法返回被“位移出”的字符串:


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();             // 返回 "Banana"
亲自试一试
unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素:


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"
亲自试一试
unshift() 方法返回新数组的长度。


实例


var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 返回 5
亲自试一试
更改元素
通过使用它们的索引号来访问数组元素:


数组索引(下标)以 0 开始。[0] 是第一个数组元素,[1] 是第二个,[2] 是第三个 ...


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";        // 把 fruits 的第一个元素改为 "Kiwi"
亲自试一试
length 属性提供了向数组追加新元素的简易方法:


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // 向 fruits 追加 "Kiwi"
亲自试一试
删除元素
既然 JavaScript 数组属于对象,其中的元素就可以使用 JavaScript delete 运算符来删除:


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined
亲自试一试
使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。


拼接数组
splice() 方法可用于向数组添加新项:


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
亲自试一试
第一个参数(2)定义了应添加新元素的位置(拼接)。


第二个参数(0)定义应删除多少元素。


其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。


splice() 方法返回一个包含已删除项的数组:


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");
亲自试一试
使用 splice() 来删除元素
通过聪明的参数设定,您能够使用 splice() 在数组中不留“空洞”的情况下移除元素:


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素
亲自试一试
第一个参数(0)定义新元素应该被添加(接入)的位置。


第二个参数(1)定义应该删除多个元素。


其余参数被省略。没有新元素将被添加。


合并(连接)数组
concat() 方法通过合并(连接)现有数组来创建一个新数组:


实例(合并两个数组)
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys
亲自试一试
concat() 方法不会更改现有数组。它总是返回一个新数组。


concat() 方法可以使用任意数量的数组参数:


实例(合并三个数组)
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起
亲自试一试
concat() 方法也可以将值作为参数:


实例(将数组与值合并)
var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]); 
亲自试一试
裁剪数组
slice() 方法用数组的某个片段切出新数组。


本例从数组元素 1 ("Orange")开始切出一段数组:


实例
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1); 
亲自试一试
slice() 方法创建新数组。它不会从源数组中删除任何元素。


本例从数组元素 3 ("Apple")开始切出一段数组:


实例
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3); 
亲自试一试
slice() 可接受两个参数,比如 (1, 3)。


该方法会从开始参数选取元素,直到结束参数(不包括)为止。


实例
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3); 
亲自试一试
如果结束参数被省略,比如第一个例子,则 slice() 会切出数组的剩余部分。


实例
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2); 
亲自试一试
自动 toString()
如果需要原始值,则 JavaScript 会自动把数组转换为字符串。下面两个例子将产生相同的结果:


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 
亲自试一试
实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits; 
亲自试一试
所有 JavaScript 对象都拥有 toString() 方法。


数组排序
我们将在下一章学习到数组排序的知识~。


查找数组中的最大和最小值
没有在 JavaScript 数组中查找最高和最低值的内建函数。


您将在本教程的下一章学习如何解决这个问题。


完整的数组参考手册
如需完整的参考手册,请访问我们完整的 JavaScript 数组参考手册。


该参考手册包含所有数组属性和方法的描述和实例。


JavaScript 数组排序
JS 数组方法
JS 数组迭代
sort() 方法是最强大的数组方法之一。


数组排序
sort() 方法以字母顺序对数组进行排序:


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
亲自试一试
反转数组
reverse() 方法反转数组中的元素。


您可以使用它以降序对数组进行排序:


实例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
fruits.reverse();         // 反转元素顺序
亲自试一试
数字排序
默认地,sort() 函数按照字符串顺序对值进行排序。


该函数很适合字符串("Apple" 会排在 "Banana" 之前)。


不过,如果数字按照字符串来排序,则 "25" 大于 "100",因为 "2" 大于 "1"。


正因如此,sort() 方法在对数值排序时会产生不正确的结果。


我们通过一个比值函数来修正此问题:


实例
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); 
亲自试一试
使用相同的技巧对数组进行降序排序:


实例
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a}); 
亲自试一试
比值函数
比较函数的目的是定义另一种排序顺序。


比较函数应该返回一个负,零或正值,这取决于参数:


function(a, b){return a-b}
当 sort() 函数比较两个值时,会将值发送到比较函数,并根据所返回的值(负、零或正值)对这些值进行排序。


实例:
当比较 40 和 100 时,sort() 方法会调用比较函数 function(40,100)。


该函数计算 40-100,然后返回 -60(负值)。


排序函数将把 40 排序为比 100 更低的值。


您可以使用下面的代码片段来测试数值和字母排序:


<button onclick="myFunction1()">以字母顺序排序</button>
<button onclick="myFunction2()">以数字顺序排序</button>


<p id="demo"></p>


<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;


function myFunction1() {
points.sort();
document.getElementById("demo").innerHTML  = points;
}
function myFunction2() {
points.sort(function(a, b){return  a - b});
document.getElementById("demo").innerHTML = points;
}
</script>
亲自试一试
以随机顺序排序数组
实例
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()}); 
亲自试一试
查找最高(或最低)的数组值
JavaScript 不提供查找数组中最大或最小数组值的内建函数。


不过,在对数组进行排序之后,您能够使用索引来获得最高或最低值。


升序排序:


实例
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});


// 现在 points[0] 包含最低值
// 而 points[points.length-1] 包含最高值
亲自试一试
降序排序:


实例
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});


// 现在 points[0] 包含最高值
// 而 points[points.length-1] 包含最低值
亲自试一试
如果您仅仅需要找到最高或最低值,对整个数组进行排序是效率极低的方法。


对数组使用 Math.max()
您可以使用 Math.max.apply 来查找数组中的最高值:


实例
function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}
亲自试一试
Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)。


对数组使用 Math.min()
您可以使用 Math.min.apply 来查找数组中的最低值:


实例
function myArrayMin(arr) {
    return Math.min.apply(null, arr);
}
亲自试一试
Math.min.apply([1, 2, 3]) 等于 Math.min(1, 2, 3)。


我的 Min / Max JavaScript 方法
最快的解决方法是使用“自制”方法。


此函数遍历数组,用找到的最高值与每个值进行比较:


实例(查找 Max)
function myArrayMax(arr) {
    var len = arr.length
    var max = -Infinity;
    while (len--) {
        if (arr[len] > max) {
            max = arr[len];
        }
    }
    return max;
}
亲自试一试
此函数遍历数组,用找到的最低值与每个值进行比较:


实例(查找 Min)
function myArrayMin(arr) {
    var len = arr.length
    var min = Infinity;
    while (len--) {
        if (arr[len] < min) {
            min = arr[len];
        }
    }
    return min;
}
亲自试一试
排序对象数组
JavaScript 数组经常会包含对象:


实例
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}];
即使对象拥有不同数据类型的属性,sort() 方法仍可用于对数组进行排序。


解决方法是通过比较函数来对比属性值:


实例
cars.sort(function(a, b){return a.year - b.year});
亲自试一试
比较字符串属性会稍复杂:


实例
cars.sort(function(a, b){
  var x = a.type.toLowerCase();
  var y = b.type.toLowerCase();
  if (x < y) {return -1;}
  if (x > y) {return 1;}
  return 0;
});
亲自试一试


JavaScript 数组迭代
JS 数组排序
JS 数组 Const
数组迭代方法对每个数组项进行操作。


Array.forEach()
forEach() 方法为每个数组元素调用一次函数(回调函数)。


实例
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);


function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}
亲自试一试
注释:该函数接受 3 个参数:


项目值
项目索引
数组本身
上面的例子只用了 value 参数。这个例子可以重新写为:


实例
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);


function myFunction(value) {
  txt = txt + value + "<br>"; 
}
亲自试一试
所有浏览器都支持 Array.forEach(),除了 Internet Explorer 8 或更早的版本:


Yes 9.0 Yes Yes Yes
Array.map()
map() 方法通过对每个数组元素执行函数来创建新数组。


map() 方法不会对没有值的数组元素执行函数。


map() 方法不会更改原始数组。


这个例子将每个数组值乘以2:


实例
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);


function myFunction(value, index, array) {
  return value * 2;
}
亲自试一试
请注意,该函数有 3 个参数:


项目值
项目索引
数组本身
当回调函数仅使用 value 参数时,可以省略索引和数组参数:


实例
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);


function myFunction(value) {
  return value * 2;
}
亲自试一试
所有浏览器都支持 Array.map(),除了 Internet Explorer 8 或更早的版本:


Yes 9.0 Yes Yes Yes
Array.filter()
filter() 方法创建一个包含通过测试的数组元素的新数组。


这个例子用值大于 18 的元素创建一个新数组:


实例
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);


function myFunction(value, index, array) {
  return value > 18;
}
亲自试一试
请注意此函数接受 3 个参数:


项目值
项目索引
数组本身
在上面的例子中,回调函数不使用 index 和 array 参数,因此可以省略它们:


实例
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);


function myFunction(value) {
  return value > 18;
}
亲自试一试
所有浏览器都支持 Array.filter(),除了 Internet Explorer 8 或更早的版本:


Yes 9.0 Yes Yes Yes
Array.reduce()
reduce() 方法在每个数组元素上运行函数,以生成(减少它)单个值。


reduce() 方法在数组中从左到右工作。另请参阅 reduceRight()。


reduce() 方法不会减少原始数组。


这个例子确定数组中所有数字的总和:


实例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);


function myFunction(total, value, index, array) {
  return total + value;
}
亲自试一试
请注意此函数接受 4 个参数:


总数(初始值/先前返回的值)
项目值
项目索引
数组本身
上例并未使用 index 和 array 参数。可以将它改写为:


实例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);


function myFunction(total, value) {
  return total + value;
}
亲自试一试
reduce() 方法能够接受一个初始值:


实例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);


function myFunction(total, value) {
  return total + value;
}
亲自试一试
所有浏览器都支持 Array.reduce(),除了 Internet Explorer 8 或更早的版本:


Yes 9.0 Yes Yes Yes
Array.reduceRight()
reduceRight() 方法在每个数组元素上运行函数,以生成(减少它)单个值。


reduceRight() 方法在数组中从右到左工作。另请参阅 reduce()。


reduceRight() 方法不会减少原始数组。


这个例子确定数组中所有数字的总和:


实例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);


function myFunction(total, value, index, array) {
  return total + value;
}
亲自试一试
请注意此函数接受 4 个参数:


总数(初始值/先前返回的值)
项目值
项目索引
数组本身
上例并未使用 index 和 array 参数。可以将它改写为:


实例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);


function myFunction(total, value) {
  return total + value;
}
亲自试一试
所有浏览器都支持 Array.reduceRight(),除了 Internet Explorer 8 或更早的版本:


Yes 9.0 Yes Yes Yes
Array.every()
every() 方法检查所有数组值是否通过测试。


这个例子检查所有数组值是否大于 18:


实例
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);


function myFunction(value, index, array) {
  return value > 18;
}
亲自试一试
请注意此函数接受 3 个参数:


项目值
项目索引
数组本身
如果回调函数仅使用第一个参数(值)时,可以省略其他参数:


实例
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);


function myFunction(value) {
  return value > 18;
}
亲自试一试
所有浏览器都支持 Array.every(),除了 Internet Explorer 8 或更早的版本:


Yes 9.0 Yes Yes Yes
Array.some()
some() 方法检查某些数组值是否通过了测试。


这个例子检查某些数组值是否大于 18:


实例
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);


function myFunction(value, index, array) {
  return value > 18;
}
亲自试一试
请注意此函数接受 3 个参数:


项目值
项目索引
数组本身
所有浏览器都支持 Array.some(),除了 Internet Explorer 8 或更早的版本:


Yes 9.0 Yes Yes Yes
Array.indexOf()
indexOf() 方法在数组中搜索元素值并返回其位置。


注释:第一个项目的位置是 0,第二个项目的位置是 1,以此类推。


实例
检索数组中的项目 "Apple":


var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
亲自试一试
所有浏览器都支持 Array.indexOf(),除了 Internet Explorer 8 或更早的版本:


Yes 9.0 Yes Yes Yes
语法
array.indexOf(item, start)
item 必需。要检索的项目。
start 可选。从哪里开始搜索。负值将从结尾开始的给定位置开始,并搜索到结尾。
如果未找到项目,Array.indexOf() 返回 -1。


如果项目多次出现,则返回第一次出现的位置。


Array.lastIndexOf()
Array.lastIndexOf() 与 Array.indexOf() 类似,但是从数组结尾开始搜索。


实例
检索数组中的项目 "Apple":


var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
亲自试一试
所有浏览器都支持 Array.lastIndexOf(),除了 Internet Explorer 8 或更早的版本:


Yes 9.0 Yes Yes Yes
语法
array.lastIndexOf(item, start)
item 必需。要检索的项目。
start 可选。从哪里开始搜索。负值将从结尾开始的给定位置开始,并搜索到开头。
Array.find()
find() 方法返回通过测试函数的第一个数组元素的值。


这个例子查找(返回)大于 18 的第一个元素的值:


实例
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);


function myFunction(value, index, array) {
  return value > 18;
}
亲自试一试
请注意此函数接受 3 个参数:


项目值
项目索引
数组本身
老旧的浏览器不支持 Array.find()。下面列出了完全支持此方法的首个浏览器版本:


45 12 25 8 32
Array.findIndex()
findIndex() 方法返回通过测试函数的第一个数组元素的索引。


这个例子查找大于 18 的第一个元素的索引:


实例
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);


function myFunction(value, index, array) {
  return value > 18;
}
亲自试一试
请注意此函数接受 3 个参数:


项目值
项目索引
数组本身
老旧的浏览器不支持 Array.findIndex()。下面列出了完全支持此方法的首个浏览器版本:


45 12 25 8 32