前端 API 查漏补缺 随时补充

前端 API 查漏补缺

本篇文章用于记录在开发中前端 API 的相关查漏补缺,持续补充

---

1. Object.keys()

Object.keys()用于获得由对象属性名组成的数组，可与数组遍历相结合使用，非常好用。和for…in方法功能类似，但有使用区别！

数组遍历可以用for()或forEach()来实现，forEach()方法是ECMAScript5定义的遍历数组的一个新方法，按照索引的顺序挨个传递给定义的函数；

接下来就Object.keys()分别结合for()和forEach()使用进行运用，用console.info()输出到控制台，代码如下：

1. Object.keys().forEach(function (e){})

// 创建对象
var person = {
    name: 'hjm',
    age: 18,
    school:"SKD University",
    home: 'China'
}
 
// 用forEach()进行遍历
var keys = Object.keys(person).forEach(function (e) {
    console.log("person ", e, ": ", person[e]);
});

2. Object.keys() + for()方法

// 创建一个对象
var person = {
    name: 'hjm',
    age: 18,
    school:"SKD University",
    home: 'China'
}

// 获得对象属性名组成的数组
var keys = Object.keys(person);

// 用于存储匹配的属性值
var value = [];

// 用for进行遍历
for (var i = 0,len = keys.length; i < len; i++) {
    var key = keys[i];
    value[i] = person[key];
    console.log("person ", key, ": ", value[i]);
}

分析总结

两种方法的结果是一样的，至于使用哪种方法，就智者见智，仁者见仁了。

for()：用起来比较容易上手，但太罗嗦；

forEach()：和相关的遍历方法结合，使得数组拥有简单而强大的函数式编程风格，更加强大。

---

2. JS实现判断对象是否为空对象的5种方法

1. 直接判断是否 == {}

if(JSON.stringify(res.data) == '{}'){
	 console.log("res.data为{}");
}

2. 使用ES6的Object.keys()方法

var data = {};
var arr = Object.keys(data);
alert(arr.length == 0);//true

3. jquery将(for in)进行封装，使用时需要依赖jquery

var data = {};
var arr = Object.getOwnPropertyNames(data);
alert(arr.length == 0);//true

---

3. 数组

1. 遍历数组

1.1 遍历数组-forEach

语法 : 数组.forEach(function(item,index,arr){ } )

• item 数组的每一项
• index 数组的每一项下标
• arr 原始数组，一般不用

作用：取代 for 循环的作用，遍历数组，没有返回值

1.2 遍历数组-Array.map

Array.map((item,index)=>{ //item 是数组中的每一个元素,index 是下标
	console.log(item,index)
})

2. 比较数组

2.1 不能直接使用 ==/===

数组属于对象类型,对于对象来说, == 比较的是两个对象是否为同一个对象
尽管数组中的元素是相同的,但这两个数组属于不同的对象,所以 ==比较的结果为false

let array1 = [1,2,3];
let array2 = [1,2,3];
console.log(array1 == array2); //输出false

2.2 数组简单比较

如果数组里的元素是标量，非object类型，可以使用 == 比较数组里的元素：
every() 方法使用指定函数检测数组中的所有元素：

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
• 如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测。every() 不会改变原始数组。

scalarArrayEquals(array1,array2) {
  return array1.length==array2.length && array1.every(function(v,i) { return v === array2[i]});
}

还有对于数组中元素是对象…嵌套数组…之间的比较方式

---

4. Map

• get() 方法用来获取一个 Map 对象中指定的元素。
• set() 方法为Map对象添加一个指定键（key）和值（value）的新元素。
• has() 返回一个bool值，用来表明map 中是否存在指定元素。

Map 对象在 Console中打印

在调试代码时发现：JavaScript ES6 Map 对象，JSON.stringify(mapObject)打印不出来，需要用…mapObject.entries()才可以

 const mapObject = new Map();   
 mapObject.set(1, 'hello');
 mapObject.set(2,'hello2');

console.log(JSON.stringify(mapObject));
// {}
console.log(JSON.stringify(...mapObject.entries()));
//[1,"hello"],这里如果不加中括号，只能打印出第一个
console.log(JSON.stringify([...mapObject.entries()]));
//[[1,"hello"],[2,"hello2"]]
 console.log([...mapObject.entries()]);
 // [[1, "hello"],[2, 'hello2']]

 console.log([...mapObject.keys()]);
 // [1,2]

 console.log([...mapObject.values()]);
 // ["hello","hello2"]

5. es6根据某个属性将数组对象进行分组

数组

// 数组
export function getGroupArray(list, attr) {
    const map = new Map();
    list.forEach((item, index, arr) => {
        if (!map.has(item[attr])) {
            map.set(
                item[attr],
                arr.filter(a => a[attr] == item[attr])
            );
        }
    });
    return Array.from(map).map(item => [...item[1]]);
}

对象

// 对象
export function getGroupObject(list, attr) {
    const map = new Map();
    list.forEach((item, index, arr) => {
        if (!map.has(item[attr])) {
            map.set(
                item[attr],
                arr.filter(a => a[attr] == item[attr])
            );
        }
    });
    return Object.fromEntries(Array.from(map).map(item => [item[0], item[1]]));
}

案例

const array = [{
  id: 1,
  name: '小明',
  sex: '男'
},
{
  id: 3,
  name: '小红',
  sex: '女'
},
{
  id: 2,
  name: '小刚',
  sex: '男'
},
{
  id: 4,
  name: '小花',
  sex: '女'
},
{
  id: 5,
  name: '小甜甜',
  sex: '女'
},
];

function getList(list) {
  const map = new Map()
  list.forEach((item, index, arr) => {
    if (!map.has(item.sex)) {
      map.set(
        item.sex,
        arr.filter(a => a.sex == item.sex)
      )
    }
  })
  return Array.from(map).map(item => [...item[1]])
}
const list = getList(array)
console.log(array, '分组前');
console.log(list, '分组后');

---

6. 日期格式化

let currentDate = new Date(); // Mon Oct 10 2022 10: 19: 44 GMT + 0800(中国标准时间)

let date1 = new Date().getTime(); // 1665370220732
let date2 = new Date().toLocaleDateString('zh'); // 2022/10/10
let date3 = new Date().toLocaleDateString('zh').replaceAll('/','-') //2022-10-10
let date4 = new Date().toLocaleString('zh', { hour12: true }).replaceAll('/', '-') // 2022-10-10 上午10:54:25
let date5 = new Date().toLocaleString('zh', { hour12: false }).replaceAll('/', '-') // 2022-10-10 10:54:25
let date6 = new Date().toLocaleTimeString(); // 10:55:40
let date7 = new Date().toLocaleTimeString('zh', { hour12: true }) // 上午10:54:25
let date8 = new Date().toLocaleTimeString('zh', { hour12: false }) // 10:55:40

toLocaleDateString（）方法返回该日期对象日期部分的字符串，该字符串格式因不同语言而不同。
怎样理解上面这句话呢，博主自己的理解为所在的地区不同，返回的格式不同，具体体现在locales这个参数上。
里面是有两个参数的，即locales 和 options，在这里大概的解释一下locales吧，此参数放国家的语言代码，即简体中文（中国）为‘zh-cn’，英语（美国）为‘en-us’ 阿拉伯语 -埃及为’ar-EG’

let d1 = new Date().toLocaleDateString('zh-cn'); //2022/10/10 
let d2 = new Date().toLocaleDateString('en-us'); //10/10/2022
let d3 = new Date().toLocaleDateString('ar-EG'); //١٠/١٠/٢٠٢٢

注意
如果用户是中文用户，不要忘记传 zh（不区分大小写） 参数。如果不传，默认会跟当前语言坏境输出不同的格式。
在不能确定用户使用操作系统的语言环境时，我们需要传 zh 参数确保格式解析不会出错。

---

7 ES6 解构赋值 const {a,b,c} = obj

ES6 解构赋值 const {a,b,c} = obj

8. Object.assign()

1. Object.assign() 用来合并多个对象

var target = { a: 1, b: 1 };
var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);   // {a:1, b:2, c:3}

2. Object.assign() 用来克隆对象

业务当中需要对拿到的对象进行处理.
业务场景,有一个对象中有十个属性,但是只需要其中的某几个属性

	const currentSite = {
		"totalQty": 10,
		"onlineQty": "1",
		"offlineQty": "9",
		"lackQty": "10",
		"siteId": "1594962072534945792",
		"siteName": "工地测试10",
		"provinceId": "13",
		"cityId": "1304",
		"cusId": "1594856141620662272",
		"cusName": "客户测试02"
	};
	const siteObj = Object.assign({
		siteId:currentSite.siteId,
		siteName:currentSite.siteName,
		cusName:currentSite.cusName,
		lackQty:currentSite.lackQty,
	})
	console.log(siteObj);

这样就可以拿到一个对象 siteObj

{
		"lackQty": "10",
		"siteId": "1594962072534945792",
		"siteName": "工地测试10",
		"cusName": "客户测试02"
	}