数组遍历&解构赋值&增删改查&常用方法

什么是数组的遍历?

数组的遍历就是依次取出数组中存储的所有数据, 我们就称之为数组的遍历
如何获取数组长度

console.log(arr.length);

什么是数组的解构赋值?

解构赋值是ES6中新增的一种赋值方式

注意点
1.在数组的解构赋值中, 等号左边的格式必须和等号右边的格式一模一样, 才能完全解构 (长度个数一样)
2.在数组的解构赋值中, 左边的个数可以和右边的个数不一样
3.在数组的解构赋值中, 右边的个数可以和左边的个数不一样;解构不到赋值undefined
4.在数组的解构赋值中,如果右边的个数和左边的个数不一样, 那么我们可以给左边指定默认值
5.在数组的解构赋值中, 如果左边的个数和右边的个数不一样, 那么如果设置默认值会被覆盖
6.在数组的解构赋值中, 还可以使用ES6中新增的扩展运算符来打包剩余的数据
7.在数组的解构赋值中, 如果使用了扩展运算符, 那么扩展运算符只能写在最后一个元素前

let [a, ...b] = [1, 3, 5];

增删改查

  • 在数组最后添加一条数据
    arr.push(数据); 注意他会返回新增后数组的长度length
    arr.push(数据,数据); 可传多个值
  • 在数组前面添加一条数据
    arr.unshift(数据);注意他会返回新增后数组的长度length

  • 删除数组最后一条数据
    arr.pop();
  • 删除数组最前面一条数据
    arr.shift();
  • 删除数组索引为N的数据
    arr.splice(参数1,参数2);
    参数1:从索引为(参数1里填写的数据)开始
    参数2:删除(参数2里填写的数据)条元素

  • arr[索引目录数] = "添加的数据";
  • arr.splice(索引目录数a,索引目录数b,"添加的数据"c,"添加的数据"d);
    a 代表从什么位置开始
    b 代表需要替换的多少个元素(数据)
    c 代表从指定位置开始,新的需要替换的内容(数据)

console.log(arr[N]);

数组的常用方法

  • 清空数组
arr = [];
arr.length = 0;
arr.splice(0, arr.length)
  • 将数组转换为字符串
let str = arr.toString();
  • 将数组转换成指定格式字符串
join方法默认情况下如果没有传递参数, 就是调用toString();
join方法如果传递了参数, 就会将传递的参数作为元素和元素的连接符号
let str =  arr.join("+");
  • 将两个数组拼接为一个数组

注意点:
1.数组不能够使用加号进行拼接, 如果使用加号进行拼接会先转换成字符串再拼接

let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
arr1.concat(arr2);
不会修改原有的数组, 会生成一个新的数组返回给我们

ES6
2.扩展运算符在解构赋值中(等号的左边)表示将剩余的数据打包成一个新的数组
3.扩展运算符在等号右边, 那么表示将数组中所有的数据解开, 放到所在的位置

let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
let res = [...arr1, ...arr2]; // let res = [1, 3, 5, 2, 4, 6];
不会修改原有的数组, 会生成一个新的数组返回给我们
  • 如何对数组中的内容进行反转
//[1, 2, 3, 4, 5] [5, 4, 3, 2, 1]
let res = arr.reverse(); 
会修改原有的数组
  • 如何截取数组中指定范围内容
//  0  1  2  3
// [1, 2, 3, 4, 5]
// slice方法是包头不包尾(包含起始位置, 不包含结束的位置) ;
let res = arr.slice(1, 3);
console.log(res);
console.log(arr);
  • 如何查找元素在数组中的位置
0  1  2  3  4
[1, 2, 3, 4, 5]
 0  1  2  3  4  5
let arr = [1, 2, 3, 4, 5, 3];
indexOf方法如果找到了指定的元素, 就会返回元素对应的位置
indexOf方法如果没有找到指定的元素, 就会返回-1
注意点: indexOf方法默认是从左至右的查找, 一旦找到就会立即停止查找
let res = arr.indexOf(3); //里面是数据名

格式:arr.indexOf(参数1, 参数2);
参数1: 需要查找的元素
参数2: 从什么位置开始查找

lastIndexOf方法默认是从右至左的查找, 一旦找到就会立即停止查找
let res = arr.lastIndexOf(数据);
let res = arr.lastIndexOf(参数1, 参数2);
参数1: 需要查找的元素
参数2: 从什么位置开始查找

  • 如何判断数组中是否包含某个元素
let arr = [1, 2, 3, 4, 5];
我们可以通过indexOf和lastIndexOf的结果, 判断是否是-1即可
let res = arr.indexOf(8);
let res = arr.lastIndexOf(8);

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

推荐阅读更多精彩内容

  • 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring...
    嘉奇呦_nice阅读 789评论 0 2
  • 本文通过学习阮一峰的博客,外加自己的理解,整理了一下我对js变量的解构赋值的理解。 数组的解构赋值 对象的解构赋值...
    宋乐怡阅读 475评论 0 2
  • 1.数组的解构赋值 2.对象的解构赋值 3.字符串的解构赋值 4.数值和布尔值的解构赋值 5.函数参数的解构赋值 ...
    卞卞村长L阅读 917评论 0 0
  • 数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destru...
    呼呼哥阅读 431评论 0 3
  • 1. 什么是Promise?为什么需要它? 从最简单的例子开始- app.js Code Example 1-最简...
    Angeladaddy阅读 298评论 0 2