数组和对象の常见操作

一、操作数组和对象的常见方法


  • 获取数组中的最大值Math.max.apply()和最小值 Math.min.apply() ---JS方法
var arr = [22,13,6,55,30];  
var max = Math.max.apply(null, arr);  
var min = Math.min.apply(null, arr);
console.log(max, min) // 55,6
  • 获取一组数中的最大值 Math.max()和最小值 Math.min()---ES6扩展运算符
let arr = [22,13,6,55,30];
 console.log(Math.max(...arr)); // 55

注意:两者区别在于,前者是获得数组中的最大值,后者是获得一组数的最大值

  • array.push()方法用于 数组末尾添加元素
  • array.pop()方法用于删除并返回数组的最后一个元素
  • unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度
 const arr = ['George','John'];
 console.log(arr.unshift('William') ); // 3
 console.log(arr); // [William,George,John]
  • shift () 方法用于删除数组中的第一项
  • splice() 方法用于添加或删除数组中的元素
// 添加
var fruits = ['Banana','Orange', 'Apple','Mango'];
fruits.splice(2,0,'Lemon','Kiwi');
console.log(fruits) // ['Banana','Orange','Lemon','Kiwi','Apple','Mango']
// 删除(如果仅删除一个元素,则返回一个元素的数组。 如果未删除任何元素,则返回空数组。)
var fruits = ['Banana','Orange', 'Apple','Mango'];
console.log(fruits.splice(2,1)) // ['Apple']
console.log(fruits) // ['Banana','Orange','Mango']
  • join() 方法用于把数组中的所有元素放入一个字符串
const array=arr=['dd','d4','ff']
arr.join() //  "dd,d4,ff"
  • reverse() 方法用于数组反转
const array=['dd','d4','ff']
array.reverse() // ['ff','d4','dd']

 注意:该方法会改变原来的数组,而不会创建新的数组

  • sort () 于对数组的元素进行排序(按字符编码的顺序排序)
const array=['Thomas','George','John']
array.sort () // ['George','John','Thomas']

const array=['3','1','10'];
array.sort() // ["1", "10", "3"]

// 要实现按照数值的大小对数字进行排序,必须使用一个排序函数,如下
function sortNumber(a,b){return a-b;}
array.sort(sortNumber) // ["1", "3", "10"]

 注意:组在原数组上进行排序,不生成副本

  • some()方法用于检测数组中的元素是否满足指定条件,会依次执行数组的每个元素,如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测,如果没有满足条件的元素,则返回false
var ages = [3, 10, 18, 20];
function checkAdult(age) {  return age >= 18;}
 ages.some(checkAdult); // true
  • every()方法用于检测数组所有元素是否都符合指定条件,如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测,如果所有元素都满足条件,则返回 true
var ages = [3, 10, 18, 20];
function checkAdult(age) {  return age >= 18;}
 ages.every(checkAdult); // false
  • reduce()方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
    return total + num;
}
 ages.numbers (getSum); // 125
  • isArray()方法用于判断一个对象是否为数组
var fruits = ["Banana", "Orange", "Apple", "Mango"];
Array.isArray(fruits); // true
  • filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
const array=[{a:'good',b=2},{a:'good',b=3},{a:'go',b=3}]
const list = array.filter((ele: any) => { return ele.a === 'good';});
console.log(list); // [{a:'good',b=2},{a:'good',b=3}]
  • find()方法返回通过判断的数组的第一个元素
const array=[{a:'good',b=2},{a:'good',b=3},{a:'go',b=3}]
const item = array.find((ele: any) => { return ele.a === 'good';});
console.log(item); // {a:'good',b=2}
  • findIndex()方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
//  js
var ages = [4, 12, 16, 20];
function checkAdult(age) {
    return age >=15;
}
console.log(ages.findIndex(checkAdult)); // 2
// es6
const array = [{label:'name1'},{label:'name2'},{label:'name1'}];
const index = array.findIndex((ele: { label: any; }) => ele.label === 'name1');
console.log(index) //0
  • concat() 方法用于连接两个或多个数组
var list1 = [1, 2, 3, 4];
var list2 = [5,6];
var array=list1.concat(list2); // 或者 list1.concat(5,6)
console.log(array); // [1,2,3,4,5,6]

注意:该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本

  • match() 方法可在字符串内检索指定的值,找到一个或多个正则表达式的匹配,并返回一个数组
var str = '国庆节你们放5天假我们放7天,很开心';
console.log(str.match(/\d+/g)) // ['5','7']
  • ES6中new Set()方法可用于数组的去重,取并集,交集,差集等
// 数组去重
var array=[1,1,2]
console.log([...new Set(array)]) // [1,2]
// 并集
var a= new Set([1,2,3]);
var b= new Set([4,3,2]);
console.log(new Set([...a,...b])) // {1,2,3,4}
// 交集
var a= new Set([1,2,3]);
var b= new Set([4,3,2]);
console.log(new Set([...a].filter(x=>b.has(x)))) // {2,3}
// 差集
var a= new Set([1,2,3]);
var b= new Set([4,3,2]);
console.log(new Set([...a].filter(x=>!b.has(x)))) // {1}

注意:该数组去重方法对于对象数组是无法达到预期效果的

  • includes()方法检查数组是否包含某个元素,也可用于判断字符串是否包含指定的子字符串,输出true还是相应地false
var str = "Hello world, welcome to the Runoob。";
var n = str.includes("world"); // n 输出结果为true

const array1 = [1, 2, 3];
console.log(array1.includes(2));// true

注意:该方法对于对象数组是无法达到预期效果的

  • indexOf(value,index)方法方法可返回某个指定的字符串值在字符串中首次出现的位置或者返回数组中某个指定的元素位置,如果要检索的值没有出现,则该方法返回 -1,第二个参数为可选参数,规定开始检索的位置
    注意:indexOf() 方法对大小写敏感
  • JSON.stringify()JSON.parse()
    JSON.stringify()用于将js对象转换为JSON字符串,而JSON.parse()可以将JSON字符串转为一个对象
let arr = [1,2,3];
JSON.stringify(arr); // '[1,2,3]'
typeof JSON.stringify(arr); // string

let string = '[1,2,3]';
console.log(JSON.parse(string)); // [1,2,3]
console.log(typeof JSON.parse(string)); // object

/* JSON.stringify()的几种妙用*/

1.判断数组是否包含某对象,或者判断对象是否相等
// 判断数组是否包含某对象
let data = [
    {name:'echo'},
    {name:'听风是风'},
    {name:'天子笑'},
    ],
let val = {name:'天子笑'};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1; // true
// 判断两数组/对象是否相等
let a = [1,2,3], 
    b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b); // true

2.让localStorage/sessionStorage可以存储对象。
// 存
 localStorage.setItem('key',JSON.stringify(val));
// 取
 JSON.parse(localStorage.getItem('key'));

3.实现对象深拷贝
// 深拷贝
function deepClone(data) {
    let _data = JSON.stringify(data),
        dataClone = JSON.parse(_data);
    return dataClone;
};
// 测试
let arr = [1,2,3],
    _arr = deepClone(arr);
arr[0] = 2;
console.log(arr,_arr) // [2,2,3]  [1,2,3]
  • toString() 数组或数字转字符串,它的受众更多是数字
// 和JSON.stringify的区别
let arr = [1,2,3];
JSON.stringify(arr); // '[1,2,3]'
arr.toString(); // 1,2,3
  • hasOwnProperty()方法用于判断对象中有没有当前字段
var a = {a:1,b:2,c:3};
var n = a.hasOwnProperty('c') // n输出结果true
var y = a.hasOwnProperty('d') // y输出结果 false
  • Number() 函数把对象的值转换为数字。
Number('999') // 999
Number(true) // 1
  • Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
// Object.assign方法的第一个参数是目标对象,后面的参数都是源对象

注意:如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性

  • Object.keys()用于获取对象中的键
  var person = {
    name: '张三',
    age: 18,
    66: '66',
    2: '2'
  };
console.log(Object.keys(person)); // [ 'name','age','66','3']

二、循环数组和对象操作

  • 普通的for循环遍历数组
//  可以得到数组索引值和某一项的值
 var array = [1,2,3,4,5,6,7];  
    for (var i = 0; i < array.length; i) {  
        console.log(i,array[i]);  
    }  

可以使用 break, continue 和 return跳出循环

  • ES6中新增 for...of遍历数组
//  可以得到数组某一项的值无法获取索引值
 var array = [{a:1,b:2},{a:2,b:2}];  
   for(let item of array) {  
        console.log(item);  
    };  

可以使用 break, continue 和 return跳出循环

  • for...in遍历数组和对象
/* 可以得到数组和对象索引值和某一项的值 */
// 遍历数组
var array = [{a:1,b:2},{a:2,b:2}];  
for(let k in array ) {  
   console.log(k ,array[k]);
} 
// 遍历对象
var array = {a:1,b:2,c:3,d:"hello world"};
for(let k in array ) {
    console.log(k,array [k]);
}

  • forEach遍历数组
//  可以得到数组索引值和某一项的值
var array = [{a:1,b:2},{a:2,b:2}];  
array.forEach((item,index)=>{
    console.log(item,index);
});

forEach 方法无法使用 break 语句跳出循环,或者使用return从函数体内返回

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

推荐阅读更多精彩内容