js 实战小技巧

最新推荐文章于 2023-07-19 17:54:45 发布

置顶 WeRaceAsOne

最新推荐文章于 2023-07-19 17:54:45 发布

阅读量363

点赞数 1

分类专栏：前端JS 文章标签： js 快速排序 json es6/es7

本文链接：https://blog.csdn.net/zhamaoshu4539/article/details/107785521

版权

前端JS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

ES6 过滤数组唯一值

通过扩展运算符…和 ES6 新增的 Set 生成一个新的数组，该数组只存在唯一元素

var arr = [1,1,2,3,3,3,4,5,5]
var arrs = [...new Set(arr)]
console.log(arrs)

JS 对象数组(Json)根据某个共同的字段进行分组处理

元数据格式

[
   {"id":"001","name":"Jack","Value":"111"},
   {"id":"001","name":"Jack","Value":"111"},
   {"id":"002","name":"Mark","Value":"222"},
   {"id":"002","name":"Mark","Value":"222"},
   {"id":"003","name":"Baby","Value":"333"},
   {"id":"003","name":"Baby","Value":"333"},
]

根据 id 进行分组处理

[
	{
    "id":"001",
    "name":"Jack",
    "data":[
    	{"id":"001","name":"Jack","Value":"111"},
   		{"id":"001","name":"Jack","Value":"111"},
		]
	 },
	 {
    "id":"002",
    "name":"Mark",
    "data":[
    	{"id":"002","name":"Mark","Value":"222"},
   		{"id":"002","name":"Mark","Value":"222"},
		]
	 },
	 {
    "id":"003",
    "name":"Baby",
    "data":[
    	{"id":"003","name":"Baby","Value":"333"},
   	   {"id":"003","name":"Baby","Value":"333"},
		]
	 },
]

做法如下

var arr = [
   {"id":"001","name":"Jack","Value":"111"},
   {"id":"001","name":"Jack","Value":"111"},
   {"id":"002","name":"Mark","Value":"222"},
   {"id":"002","name":"Mark","Value":"222"},
   {"id":"003","name":"Baby","Value":"333"},
   {"id":"003","name":"Baby","Value":"333"},
];

var map = {}, // 存储分组对象
var dest =[], // 存储最终数组

for(var i = 0; i < arr.length; i+=1){
    var temp = arr[i] // 临时变量
    if(!map[temp.id]){
        dest.push({
            id:temp.id,
            name:temp.id,
            data:[temp],
        });
        map[temp.id] = temp;
    }else{
        for(var j = 0;j < dest.length; j+=1){
            var temp_t = dest[j];
            if(temp_t.id === temp.id){
                temp_t.data.push(temp);
                break;
            }
        }
    }
}
console.log(dest);

JSON.stringify()和JSON.parse()小结

JSON.stringify()作用：将JS对象转换为JSON字符串；

JSON.parse()作用：将JSON字符串转换为JS对象（字符串必须符合JSON数据格式，即键值均使用""包裹）；

var data = '{"name":"Jack"}'
JSON.parse(data) 
{name: "Jack"}

JSON.Stingify()妙用

1.判断数组是否包含某对象

var data = [
    {name:'Jack'},
    {name:'Tom'},
    {name:'Mark'},
]
var test = {name:'Jack'}
JSON.stringify(data.indexOf(JSON.stringify(test))) !== -1 // true

2.判断两个数组或数组对象是否相等

var a = [1,2,3];
var b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b) // true

var aa = [
    {name:'Jack',age:'21'},
    {name:'Tom',age:'22'},
]
var bb = [
    {name:'Jack',age:'21'},
    {name:'Tom',age:'22'},
]
JSON.stringify(aa) === JSON.stringify(bb) // true

3.存储localStorage/sessionStorage对象，localStorage/sessionStorage默认只能存储字符串，而实际开发中，我们往往需要存储的数据多为对象类型，那么这里我们就可以在存储时利用json.stringify()将对象转为字符串，而在取缓存时，只需配合json.parse()转回对象即可。

// 存
window.localStorage.setItem(key,JSON.stringify(val));
// 取
window.localStorage.getItem(key);
// 例
window.localStorage.setItem('demo',JSON.stringify('666'));
windoe.localStorage.getItem('demo');

4.实现对象深拷贝实际开发中，如果怕影响原数据，我们常深拷贝出一份数据做任意操作，其实使用JSON.stringify()与JSON.parse()来实现深拷贝是很不错的选择

//深拷贝
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]

JS对象转换为数组

1.对象的两种取值及取键值方式：

取值：
var obj ={name:'Jack',age:'22'}
  1)obj.name // Jack
  2)obj['name'] //Jack
取键：
for(var key in obj){
    console.log(key,obj[key]) // name , Jack
}

2.对象转换数组

{'未完成':5, '已完成':8, '待确认':4, '已取消':6}转为[{"未完成":5},{"已完成":8},{"待确认":4},{"已取消":6}]
var arr = []
for (let i in obj) {
    let o = {};
    o[i] = obj[i];
    arr.push(o)
}
console.log(arr);

多个数组连接成一个数组

1.一个数组
var arr = [[1,2,3],[1,2,3],[5,6,7]]
Object.values(arr).reduce((a, b) => [...a, ...b], []);
[1, 2, 3, 1, 2, 3, 5, 6, 7]
2.多个数组
var a = [1,2,3]
var b = [4,5,6]
a.concat(b)
[1, 2, 3, 4, 5, 6]

for…of 循环IS diamond

1.普通循环
const person =[1,2,3]
for(const i} of person){
	console.log(i)
}
// 1   2     3


2.就地解构
const person = [
    {name:'chejunlin'},
    {name:'Jack'},
    {name:'KK'}
]
for(const {name} of person){
	console.log(name)
}
// chejunlin   Jack    KK

3.类数组迭代
for...of 可以用于迭代类数组对象。arguments 是函数体内的特殊变量，包含函数的所有参数，这是一个经典的类数组对象
求和函数 sum(num1, num2, ..., numN)
function sum() {
  let sum = 0;
  for (const number of arguments) {
    sum += number;
  }
  return sum;
}

sum(1, 2, 3); // => 6
在每次迭代中，for...of 循环遍历类数组 arguments 中的每一个数，并计算总和。

sort 排序

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

const arr = ['che','boy','alin']
arr.sort()
//  ["alin", "boy", "che"]

const num = [21,122,3]
num.sort(num)
// [122, 21, 3]  只会比较首位，如想实现排序 需要写方法 如下
function asc(a,b){
 return a-b // 增序
}
num.sort(asc) // [3, 21, 122]

function desc(a,b){
 return b-a //降序
}
num.sort(desc) // [122, 21, 3]

也使用复杂类型数据
const arrs = [{name:'jack',age:'11'},{name:'che',age:'14'}]
function asc(a,b){
  if(a.name > b.name){
  	 return 1
  }else if(a.name < b.name){
  	 return -1
  }else{
 	 return 0
  }
}
  
  arrs.sort(asc)
// [{name: "che", age: "14"},{name: "jack", age: "11"}]

快排

	function quickSort(arr){
    if(arr.length <= 1){
    	return arr
     }
     // 数组中间值下角标
     const midIndex = Math.floor(arr.length/2)
     // 数组中间值 作为比较
     const midValue = arr.splice(midIndex,1)[0]
     // 左侧数组
     const left = []
     // 右侧数组
     const right = []
     for(let i = 0 ;i<arr.length; i++){
     	if(midValue > arr[i]){
        	left.push(arr[i])
        }else{
        	right.push(arr[i])
        }
      }
      return quickSort(left).concat([midValue],quickSort(right))
      }
      
      const arrs = [9,4,2,1,6,7,6,2]
      quickSort(arrs) // [1, 2, 2, 4, 6, 6, 7, 9]

findIndex、indexOf、filter

indexOf 入参为字符/字符串,返回第一个匹配元素的索引，若不匹配，则返回 -1
	const arr = [1,2,3,1,5]
   arr.indexOf(1)   // 0
findIndex 入参为回调函数，返回第一个匹配的元素的索引，若不匹配，则返回 -1  (回调函数有三个参数  a：当前的数组元素。b：当前索引值。c：被查找的数组。)
   const arr = [1,2,3,1,5]
   arr.findIndex((a,b,c) => {
   	return b === 4
   })  // 5
   arr.findIndex(item => item === 1)      // 0
filter 入参为回调函数，返回值为匹配的所有数据，若不匹配，则返回空数组  (回调函数三个参数与findIndex相同)
   const arr =  [1,2,3,1,5]
   arr.filter(item => item === 1)  // [1,1]
   const arrs =  [{id:1,name:'che'}, {id:2,name:'jun'},{id:3,name:'lin'}]
   arrs.filter(item => item.id>2 ) // [{id:3,name:'lin'}]

常用数组去重
var myArr = [1,3,4,5,6,3,7,4];
myArr.filter((value,index,arr)=>arr.indexOf(value)===index)  // [1, 3, 4, 5, 6, 7]

WeRaceAsOne

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 实战小技巧

ES6 过滤数组唯一值通过扩展运算符…和 ES6 新增的 Set 生成一个新的数组，该数组只存在唯一元素var arr = [1,1,2,3,3,3,4,5,5]var arrs = [...Set(arr)]console.log(arrs)JS 对象数组(Json)根据某个共同的字段进行分组处理元数据格式[ {"id":"001","name":"Jack","Value":"111"}, {"id":"001","name":"Jack","Value":"111"},
复制链接

扫一扫