Array 数组概述
Array 类型是 ECMAScript 最常用的类型. JavaScript 中的 Array 类型和其他语言中的数组有着很大的区别.
虽然数组都是有序排列, 但 JavaScript 中的数组每个元素可以保存任何类型.
JavaScript 中数组的大小也是可以调整的.
创建数组的两种方式
new 运算符创建数组
- var box1 = new Array(); // 创建了一个数组, 数组属于 object 类型
- var box2 = new Array(10); // 创建一个包含 10 个元素的数组, 一个数字表示这个数组的长度, 如果是两个数及以上会变成数组中的元素
- var box3 = new Array('李炎恢',28,'教师','盐城'); // 创建一个数组并分配好了元素
- console.log(box2) // Array(10),length: 10
以上三种方法, 可以省略 new 关键字
- var box1 = Array(); // 省略了 new 关键字
- var box2 = Array(10); // 省略了 new 关键字
- var box3 = Array('李炎恢',28,'教师','盐城'); // 省略了 new 关键字
- console.log(box1)
- console.log(box2)
- console.log(box3)
使用字面量方式创建数组
- var box1 = []; // 创建一个空的数组
- var box2 = ['李炎恢',28,'教师','盐城']; // 创建包含元素的数组
- var box3 = [1,2,]; // 禁止这么做, IE 会识别 3 个元素
- var box4 = [,,,,,]; // 同样, IE 的会有识别问题
- console.log(box1)
- console.log(box2)
- console.log(box3)
- console.log(box4)
创建包含各种数据类型的数组
- var box = [
- { // 第一个元素是一个对象
- name : '李炎恢',
- age : 28,
- run : function () {
- return 'run 了';
- }
- },
- ['马云','李彦宏',new Object()],// 第二个元素是数组
- '江苏', // 第三个元素是字符串
- 25+25, // 第四个元素是数值
- new Array(1,2,3) // 第五个元素是数组
- ];
- console.log(box);
JavaScript 的数组的操作方法
使用索引下标来读取和设置数组的值
- var box = Array('李炎恢',28,'教师','盐城');
- console.log(box[2]); // 获取第三个元素
- box[2] = '学生'; // 修改第三个元素
- box[4] = '计算机编程'; // 增加第五个元素
- console.log( box[4])
使用 length 属性获取数组长度
- var box = new Array('李炎恢',28,'教师','盐城');
- console.log(box.length) // 获取元素个数
- box.length = 10; // 强制设置元素个数, PS: 数组最多可包含 4294967295 个元素, 超出即会发生异常.
- console.log(box.length) // 获取元素个数 ,10
- box[box.length] = 'JS 技术'; // 通过 length 给数组增加一个元素, 在最后一个角标添加一个元素
- console.log(box.length); //11
- console.log(box[box.length-1])// 获取最后一个数组, 数组长度减 1, 打印结果: JS 技术
转换方法
对象或数组都具有 toLocaleString(),toString()和 valueOf()方法.
- var box = ['李炎恢',28,'计算机编程']; // 字面量数组
- console.log(box); // (3) ["李炎恢", 28, "计算机编程"]
- console.log(box.valueOf()); // (3) ["李炎恢", 28, "计算机编程"]
- console.log(box.toString()); // 李炎恢, 28, 计算机编程
- console.log(box.toLocaleString()); // 李炎恢, 28, 计算机编程
- var box = [new Date()];
- console.log(box.toString()); //Sat Apr 06 2019 02:29:36 GMT+0800 (中国标准时间)
- console.log(box.toLocaleString());// 具有本地格式化的功能, 不会自动调用 结果是 2019/4/6 上午 2:29:36
join()方法
默认下, 数组字符串都会以逗号隔开. 如果使用 join()方法, 则可以使用不同的分隔符来构建这个字符串.
- var box = ['李炎恢', 28, '计算机编程'];
- alert(box.join('|')); // 李炎恢 | 28 | 计算机编程 返回的类型是字符串
栈方法
ECMAScript 数组提供了一种让数组的行为类似于其他数据结构的方法. 也就是说, 可以让数组像栈一样, 可以限制插入和删除项的数据结构.
栈是一种数据结构 (后进先出), 也就是说最新添加的元素最早被移除. 而栈中元素的插入(或叫推入) 和移除(或叫弹出), 只发生在一个位置 -- 栈的顶部.
ECMAScript 为数组专门提供了 push()和 pop()方法:
push()方法可以接收任意数量的参数, 把它们逐个添加到数组的末尾, 并返回修改后数组的长度.
pop()方法则从数组末尾移除最后一个元素, 减少数组的 length 值, 然后返回移除的元素.
- var box = ['李炎恢', 28, '计算机编程']; // 字面量声明
- console.log(box.push('盐城')); // 数组末尾添加一个元素, 并且返回长度
- console.log(box); // (4) ["李炎恢", 28, "计算机编程", "盐城"]
- console.log(box.pop()); // 移除数组末尾元素, 并返回移除的元素: 盐城
- console.log(box); // ["李炎恢", 28, "计算机编程"]
队列方法
栈方法是后进先出, 而队列方法就是先进先出. 队列在数组的末端添加元素, 从数组的前端移除元素.
通过 push()向数组末端添加一个元素, 然后通过 shift()方法从数组前端移除一个元素.
- var box = ['李炎恢', 28, '计算机编程']; // 字面量声明
- console.log(box.push('盐城')); // 数组末尾添加一个元素, 并且返回长度
- console.log(box); //(4) ["李炎恢", 28, "计算机编程", "盐城"]
- console.log(box.shift()); // 移除数组开头元素, 并返回移除的元素: 李炎恢
- console.log(box); //(3) [28, "计算机编程", "盐城"]
JavaScript 还为数组提供了一个 unshift()方法, 它和 shift()方法的功能完全相反. unshift()方法为数组的前端添加一个元素. 这四个方法可以自由组合, 组成堆栈或者队列的数据结构
- var box = ['李炎恢', 28, '计算机编程']; // 字面量声明
- console.log(box.unshift('盐城','江苏')); // 数组开头添加两个元素
- console.log(box); //["盐城", "江苏", "李炎恢", 28, "计算机编程"]
- console.log(box.pop()); // 移除数组末尾元素, 并返回移除的元素: 计算机编程
- console.log(box); //["盐城", "江苏", "李炎恢", 28]
排序方法
数组中已经存在两个可以直接用来排序的方法: reverse(): 逆向排序和 sort(): 从小到大排序
- var box = [1,2,3,4,5];
- console.log(box.reverse()); // 逆向排序方法, 返回排序后的数组:[5, 4, 3, 2, 1]
- console.log(box); // 源数组也被逆向排序了, 说明是引用:[5, 4, 3, 2, 1]
- var box = [4,1,7,3,9,2];
- console.log(box.sort()); // 从小到大排序, 返回排序后的数组: [1, 2, 3, 4, 7, 9]
- console.log(box); // 源数组也被从小到大排序了: [1, 2, 3, 4, 7, 9]
sort 方法的默认排序的问题
sort 方法的默认排序在数字排序上有些问题, 因为数字排序和数字字符串排序的算法是一样的.
我们必须修改这一特征, 修改的方式, 就是给 sort(参数)方法传递一个函数参数.
- function compare(value1, value2) { // 数字排序的函数参数
- if (value1 <value2) { // 小于, 返回负数
- return -1;
- } else if (value1> value2) { // 大于, 返回正数
- return 1;
- } else { // 其他, 返回 0
- return 0;
- }
- }
- var box = [65,0,1,55,10]; // 验证数字字符串, 和数字的区别
- console.log(box.sort(compare)); // [0, 1, 10, 55, 65]
- var box2 = ["0","1","55","10","65"]; // 验证数字字符串, 和数字的区别
- console.log(box2.sort(compare)); //["0", "1", "10", "55", "65"]
- console.log(box2.sort()); //["0", "1", "10", "55", "65"]
concat()方法: 基于当前数组创建一个新数组
- var box = ['李炎恢', 28, '盐城']; // 当前数组
- var box2 = box.concat('计算机编程'); // 创建新数组, 并在数组最后面添加新元素
- console.log(box2); // 输出新数组:["李炎恢", 28, "盐城", "计算机编程"]
- console.log(box); // 原来的数组没有任何变化:["李炎恢", 28, "盐城"]
slice()方法: 基于当前数组获取指定区域元素并创建一个新数组
- var box1 = ['李炎恢', 28, '盐城',"北京","深圳"]; // 当前数组
- var box2 = box1.slice(1);// 一个参数表示从这个参数开始往后取: [28, "盐城", "北京", "深圳"]
- var box3 = box1.slice(1,3);// 第 2 个 - 第 4 个 之间的元素 两个参数表示从第一个参数开始取, 取到第二个参数的位置:[28, "盐城"]
- var box4 = box1.slice(2,5);// 如果参数超过了数组的长度, 则获取前面能够获取到的, 后面的就忽略了, 比如这里获取到:'盐城',"北京","深圳"
- console.log(box2);//28, 盐城, 北京, 深圳
- console.log(box3); // [28, "盐城"]
- console.log(box4); // ["盐城", "北京", "深圳"]
- console.log(box1); // 原来的数组: ["李炎恢", 28, "盐城", "北京", "深圳"]
splice()主要用途是向数组的中插入元素
splice 中的删除功能
- var box = ['李炎恢', 28, '盐城']; // 当前数组
- var box2 = box.splice(0,2); // 截取前两个元素, 表示从 0 开始截取两个元素
- console.log(box2); // 返回截取的元素: ["李炎恢", 28]
- console.log(box); // 原来的数组被截取的元素已经被删除:["盐城"]
splice 中的插入功能(操作的是原数组)
- var box = ['李炎恢', 28, '盐城']; // 当前数组
- var box2 = box.splice(1,0,'计算机编程','江苏'); // 没有截取, 但插入了两条 1 表示从 1 号角标插入, 0 表示不截取, 如果改为 1,28 这个元素就没有了
- console.log(box2); // 什么都没有, 因为第二个参数是 0, 没有截取到:[]
- console.log(box); // 在第 2 个位置插入两条:["李炎恢", "计算机编程", "江苏", 28, "盐城"]
splice 中的替换功能
- var box = ['李炎恢', 28, '盐城']; // 当前数组
- var box2 = box.splice(1,2,100); // 截取了 2 条, 替换成 100 第二个参数传入几就截取几个
- console.log(box2); // 输出截取的 28
- console.log(box); // 输出数组: ["李炎恢", 100]
JavaScript 通过原型给数组添加更多的方法
数组获取最大值的方法
- var arr1 = ["nba","haha","cba","aaa","sbc"];
- var arr2 = [32,34,43,56];
- Array.prototype.getMax = function(){
- var temp = 0;
- for(var x=1; x<this.length; x++){
- if(this[x]>this[temp]){
- temp = x;
- }
- }
- return this[temp];
- }
- console.log(arr1.getMax());// 以上的 this 都表示 arr 这个数组, 那个对象调用这个方法 this 就表示谁
- console.log(arr2.getMax());
数组的字符串表现形式
定义 toString 方法. 相当于 java 中的复写
- Array.prototype.toString = function(){
- return "["+this.join("/")+"]";
- }
- var arr=[32,23,32,34322,3232,2453];
- console.log(arr.toString()); //[32/ 23/ 32/ 34322/ 3232/ 2453]
冒泡排序
伪数组
具有 length 属性; 按索引方式存储数据; 不具有数组的 push(),pop()等方法
伪数组无法直接调用数组方法或期望 length 属性有什么特殊的行为, 不具有数组的 push(),pop()等方法, 但仍可以对真正数组遍历方法来遍历它们, 不能使用 foEach 来遍历伪数组, 可以使用 for in.
这种对象有很多, 比较特别的是 function 内的 arguments 对象, 还有像调用 getElementsByTagName, document.childNodes 之类的, 它们都返回的 NodeList 对象都属于伪数组, 也称为类数组, 还有自定义的对象, 也属于伪数组.
我们可以通过 Array.prototype.slice.call(fakeArray)将伪数组转变为真正的 Array 对象或者 ES6 中的 from 方法.
- var fakeArray01 = {
- 0:'a',1:'b',length:2
- };// 这是一个标准的伪数组对象
- var arr01 = Array.prototype.slice.call(fakeArray01);
- alert(arr01[0]);//a
- var arr02 = [].slice.call(fakeArray01);
- alert(arr02[0]);//a
关于数组更多的方法查看: ES5-ES6-ES7_数组的扩展 https://www.cnblogs.com/LO-ME/p/10582344.html
来源: http://www.bubuko.com/infodetail-3012884.html