06-JS基础-数组

数组(Array)

数组是一个用来存储数据的对象,数组中的元素可以是任意数据类型。

  • 创建数组
var arr = new Array(); // 创建空数组
var arr = new Array(5); // 创建长度为5的数组
var arr = new Array(元素1,元素2....元素N); // 创建指定元素数组
var arr = []; // 创建空数组
var arr = [元素1,元素2....元素N]; // 创建指定元素数组
console.log(typeof arr); // object
  • 向数组中添加元素

语法: 数组对象[索引] = 值;

arr[0] = 123;
arr[1] = "hello";
console.log(arr); // [123, "hello"]
  • 读取数组中的元素
var arr = [123, "hello"];
console.log(arr[1]); // hello
console.log(arr[2]); // undefined

如果读取不存在的索引,不会报错,返回undefined。

  • 获取和修改数组的长度
    使用length属性来操作数组的长度。

语法:数组.length

var arr = [123, "hello"];
console.log(arr.length); // 2

var arr2 = new Array();
arr2[0] = 12;
arr2[3] = 9;
console.log(arr2.length); // 4
console.log(arr2[1]); // undefined

对于连续的数组,length获取到的就是数组中元素的个数;
对于非连续的数组,length获取到的就是数组的最大索引+1;

  • 修改数组的长度

语法:数组.length = 新长度

如果修改后的length大于原长度,则多出的部分会空出来;
如果修改后的length小于原长度,则原数组中多出的元素会被删除;

  • 向数组的最后添加元素

语法:数组[数组.length] = 值;

  • 二维数组
var arr = [[1,2,3], [4,5,6], [7,8,9]];
console.log(arr);       // [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
console.log(arr[0]);    // [1, 2, 3]
console.log(arr[0][1]); // 2
  • 数组的方法
  1. push()
    用来向数组的末尾添加一个或多个元素,并返回数组新的长度。

语法:数组.push(元素1,元素2,元素N)

var arr = ['a', 'b', 'c'];
arr.push('d');
console.log(arr); // ["a", "b", "c", "d"]
var lenght = arr.push('e', 'f');
console.log(arr); // ["a", "b", "c", "d", "e", "f"]
console.log(lenght); // 6
  1. pop()
    用来删除数组的最后一个元素,并返回被删除的元素。

语法:数组.pop()

var arr = ['a', 'b', 'c'];
var last = arr.pop();
console.log(arr); // ["a", "b"] 
console.log(last); // c
  1. unshift()
    向数组的前边添加一个或多个元素,并返回数组的新的长度。

语法:数组. unshift(元素1,元素2,元素N)

var arr = ['a', 'b', 'c'];
arr.unshift('r');
console.log(arr); // ["r", "a", "b", "c"]
var lenght = arr.unshift('q', 'w');
console.log(arr); // ["q", "w", "r", "a", "b", "c"]
console.log(lenght); // 6
  1. shift()
    删除数组的前边的一个元素,并返回被删除的元素。

语法:数组. shift()

var arr = ['a', 'b', 'c'];
var first  = arr.shift();
console.log(arr); //  ["b", "c"]
console.log(first); // a
  1. slice()
    可以从一个数组中截取指定的元素。
    该方法不会影响原数组,而是将截取到的内容封装为一个新的数组并返回。
    参数:
    1)截取开始位置的索引(包括开始位置)
    2)截取结束位置的索引(不包括结束位置)
    第二个参数可以省略不写,如果不写则一直截取到最后;
    参数可以传递一个负值,如果是负值,则从后往前数;
var arr = ['a', 'b', 'c', 'd'];
console.log(arr.slice(0,3)); // ["a", "b", "c"]
console.log(arr.slice(1)); // ["b", "c", "d"]
console.log(arr.slice(-2)); // ["c", "d"]
console.log(arr.slice(-3, 2)); // ["b"]
// 'd'对应负值下标-1,'c'对应负值下标-2,截取时往后面截取
  1. splice()
    可以用来删除数组中指定元素,并使用新的元素替换。
    该方法会将删除的元素封装到新数组中返回。
    参数:
    1)删除开始位置的索引
    2)删除的个数
    3)第三个参数开始,都是替换的元素,这些元素将会插入到开始位置索引的前边
var arr = ['a', 'b', 'c', 'd'];
console.log(arr.splice(1, 2, 'e', 'f')); // ["b", "c"] 被删除的元素数组
console.log(arr); // ["e", "f", "c", "d"]
console.log(arr.splice(0, 2, 's')); // ["e", "f"]
console.log(arr); // ["s", "c", "d"]
  1. concat()
    合并多个数组,该方法不会影响原数组,返回合并后新的数组。
var arr1 = ['唐僧', '孙悟空'];
var arr2 = ['猪八戒', '沙和尚', '白龙马'];
var arr3 = arr1.concat(arr2);
console.log(arr3); // ["唐僧", "孙悟空", "猪八戒", "沙和尚", "白龙马"]
var arr4 = ['白骨精'];
var arr6 = arr1.concat(arr2, arr4, '蜘蛛精');
console.log(arr6); // ["唐僧", "孙悟空", "猪八戒", "沙和尚", "白龙马", "白骨精", "蜘蛛精"]
  1. join()
    将数组的所有元素组成一个字符串,该方法不会影响原数组,返回转换后的字符串。
    默认元素间的连接符为"," 可以在参数中指定连接符。
var arr = [1, 2, 'a'];
console.log(arr.join()); // 1,2,a
console.log(typeof arr.join()); // string
console.log(arr.join('-')); // 1-2-a
  1. reverse()
    反转数组中元素的顺序,会直接修改原数组。
var arr = [1, 2, 'a'];
arr.reverse();
console.log(arr); // ["a", 2, 1]
  1. sort()
    对数组中的元素进行排序,会影响原数组。
    默认按照Unicode编码排序,对纯数字数组排序会存在问题。
var arr = ['a', 'b', 'c'];
arr.sort();
console.log(arr); // ["a", "b", "c"]
var arr = [1,3,2,10];
arr.sort();
console.log(arr); // [1, 10, 2, 3]

数字数组排序:可以再sort()中添加回调函数,
浏览器会根据回调函数的返回值来决定元素的顺序,如果返回一个大于0的值,则元素会交换位置。

var arr = [1,3,2,10];
arr.sort(function (a, b) {
// 升序排列
    return a - b;
// 降序排列
//    return b - a;  
});

console.log(arr); // [1, 2, 3, 10]
  1. call()
  • 遍历数组
  1. 使用for循环来遍历数组:
var arr = ['火之国', '风之国', '水之国', '雷之国', '土之国'];
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
  1. 使用forEach()方法来遍历数组(不兼容IE8及以下浏览器)
    forEach()方法需要一个回调函数作为参数,数组中有几个元素,回调函数就会被调用几次,每次调用时,都会将遍历到的信息以实参的形式传递进来,可以定义形参来获取这些信息。
    第一个参数: 正在遍历的元素
    第二个参数: 正在遍历元素的索引
    第三个参数: 被遍历对象
var arr = ['火之国', '风之国', '水之国', '雷之国', '土之国'];
arr.forEach(function (value, index, obj) {
    console.log('index = ' + index + ', value = ' + value);
});
  • 数组去重
// 方法一
function unique(array) {
    var res = [];
    var json = {};
    for(var i = 0; i < array.length; i++){
        if(!json[array[i]]){
            res.push(array[i]);
            json[array[i]] = 1;
        }
    }
    return res;
}
console.log(this.unique(arr));

// 方法二
var arr = [1,2,3,2,2,4,1,5];
for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
        if (arr[i] == arr[j]){
            arr.splice(j,1);
            j--;
        }
    }
}
console.log(arr); // [1, 2, 3, 4, 5]
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容