一、操作数组和对象的常见方法
- 获取数组中的最大值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从函数体内返回