前端常用方法之“js一些常用的简写方式”

一、JS中箭头函数，return与大括号省略的问题

原： data:this.value.map((item)=>{return item.name}),

简写：this.value.map(item=>item.name)

当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号

总结一下，如果箭头函数中只有一句return，那么可以同时省略大括号与return；但如果使用了大括号，即使只有一句表达式，也必须有return。

 

二、扩展运算符

对象的扩展运算符（…）用于取出参数对象中的所有可遍历属性，拷贝到当前对象中
在JS中，扩展运算符（spread）是三个点…，剩余运算符（rest）同为三个点（…）
我们可以把…理解为展开运算符
所有能够被迭代的东西，都可以被展开运算符…，进行展开

1.字符串,数组可以展开，展开成逗号分隔的元素集合
 let str = "abc"
 let arr  =  [1,2,3];
 let bb =  [...str] 
  
 console.log(bb);//["a","b","c"]
 console.log(...str);//a b c
 console.log(...arr);//1,2,3

2.所有可以被迭代的东西，都可以用扩展运算符…进行展开
let arr  =  [1,2,3]
 for(const index in arr) {
        console.log(arr[index]);  
    }
打印出
// 1 
// 2 
// 3
数组迭代
let arr  =  [1,2,3];

字符串迭代
let str = "abc"

number不能被迭代
let num = 100
console.log(...num);  //报错

3.展开的内容它可以放在任何它可以存在的地方（精华所在）
数组
let arr  = [1,2,3]
console.log(...arr);  // 1 2 3
console.log([...arr]); // [1, 2, 3]


函数
 let arr  = [1,2,3]
 function add(a,b,c) {
      console.log(a+b+c);
 }
 add(...arr)//6

对象（对象也是可以被遍历的，对象展开是个key和value的形式，也是用逗号隔开）
let lxl =  {
   name:'lxl',
    age:12
 }
console.log(...lxl); //报错，这个...是从语法层面将一个可遍历的东西展开
console.log({...lxl}); // {name: 'lxl', age: 12} 

4.混录
let lxl =  {
      name:'lxl',
        age:12
  }
     console.log({...lxl,...{hobby:'学习'}});
     //{name: 'lxl', age: 12}
     //{name: 'lxl', age: 12, hobby: '学习'}

 
  //混录还有注意的地方：即假如我们几个对象的属性进行混录综合有属性发送重复的情况，我们是以后面的为准
  console.log({...lxl,...{hobby:'学习'},...{age:22}}); // 后面的属性会把前面的属性重叠掉age为22

三、字面量合并

 //二、数组
    let arr = [1,4,2,7,3,9,8]
    let name = "非数组"
    let newarr = [];

    //方法1
    // let ab = arr.slice(0,1)//不会改变原数组
    // let ac = arr.slice(5,6)//下标+下标 = 取2个下标之间   //9

    let ab = arr.splice(0,1)//注意点：会改变原数组
    let ac = arr.splice(4,1)//需要注意：如果2次使用splice，要看第一次处理后的数组值

    //let aa = ab.concat(ac)//不会改变原数组，把2个数组拼合起来
    //console.log('ab',ab,ac,aa)// [1, 9]

    //ES6 数组拼合//字面量合并--支持字符串、数组
     let bb = [...ab,...ac]
     console.log('bb',ab,ac,bb)//常用// 1,9 [1,9]

    //let bb = {...a,...b}
    //console.log('bb',bb)//常用


方法2：
子组件
this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})//没有isFirst

this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})//有isFirst

父组件
data() {
			return {
				info:{
					errMsg:'',//展示错误信息
					users:[],//展示用户列表
					isFirst:true,//展示欢迎词
					isLoading:false,//展示加载中
				}
			
			}
		},
this.info = {...this.info,...dataObj}//批量替换
				//通过字面量的形式去合并
				//顺序也无所谓，只有你有这个数据
				//...this.info显示全部
				//...dataObj随后dataObj的所有属性也全部显示
				//然后进行合并，重名的属性，已后面为主，也就是dataOb为主，后面没有说的，原来是什么，现在还是什么

四、模板字符串：

const info = `我的名字是：${person.username}, 性别：${person.sex}, 今年${person.age}岁了`;

模板字符串的注意事项：
1.输出多行字符串
const info = '第1行\n第2行';
// console.log(info);
//第一行
//第二行

2.注意空格影响
const info = `第1行 
第2行`;    //这里前边有空格
// console.log(info);
//第一行
//	第二行

3.输出 ` 和 \ 等特殊字符
const info = `\`\\`;    //需要转义
console.log(info);     //`\

一般字符：不需要转义
const info = `'`;   
console.log(info);   //'

4.模板字符串的注入
const username = 'alex';
const person = { age: 18, sex: 'male' };
const getSex = function (sex) {
  return sex === 'male' ? '男' : '女';
};

const info = `${username}, ${person.age},${getSex(person.sex)}`;
console.log(info);

五、三元运算符？：、链判断运算符?.、非空运算符？？

1.三元运算符
应用场景1
function checkCharge(charge) {
    return (charge > 0) ? '可用' : '需充值' 
}
console.log(checkCharge(20)) // => 可用
console.log(checkCharge(0)) // => 需充值

2.?? 非空运算符
如果第一个参数不是 null/undefined（译者注：这里只有两个假值，但是 JS 中假值包含：未定义 undefined、空对象 null、数值 0、空数字 NaN、布尔 false，空字符串''，不要搞混了），将返回第一个参数，否则返回第二个参数。比如

null ?? 5 // => 5//第一个参数是 null/undefined其中的一个所以为5
3 ?? 5 // => 3  //第一个参数是3所以 返回的是3




2.链判断运算符?. 允许开发人员读取深度嵌套在对象链中的属性值，而不必验证每个引用。当引用为空时，表达式停止计算并返回 undefined。


let travelPlans = {
  destination: 'DC',
  monday: {
    location: 'National Mall',
    budget: 200,
    host: null
  }
}
let res = travelPlans?.tuesday?.location ?? "locahost"; // => locahost//如果
//travelPlans?.tuesday?.location 是null/undefined就返回 "locahost" ，否则就返回本身
let res2 = travelPlans?.host; // => undefined

七、解构

解构应用场景
1.不变的操作
方式1：数组
const numbers = [1, 2, 3];
const [, ...fooNumbers] = numbers;

fooNumbers//[2,3]
numbers//[1,2,3]

方式2：对象
data(){
    return {
        default：{
           w:100
           h:100
        }
    }
}
// default只有w和h,所以可以使用解构
list:[
    ...this.default,等同于

// w:this.default.w,//盒子初始值宽
// h:w:this.default.h,,
]


2.交换变量
原来是这样交换变量
let a = 1;
let b = 2;
let temp;

temp = a;
a = b;
b = temp;

a; // => 2
b; // => 1

现在：
let a = 1;
let b = 2;
[b a] = [a b]

a; // => 2
b; // => 1


3.访问数组项
如果对于一个不确定的数组或其他结构类型数据，我们要获得它的某个元素，如果不存在就赋予变量默认值，通常的做法是根据该数组（结构）的.length来进行判断。

const colors = [];//空数组的length去判断存不存在

let firstColor = 'white';//如果不存在就给默认
if (colors.length > 0) {//存在就
 firstColor = colors[0];//取值
}

firstColor; // => 'white'

解构：
const colors = [];
const [firstColor = 'white'] = colors;
//const [firstColor =‘white’] = colors 解构将 colors 数组的第一个元素分配给firstColor 变量
如果数组在索引 0 处没有任何元素，则将分配默认值 white 。如果你只想访问第二个元素，也可以这样
const [, secondColor = 'black'] = colors;
secondColor; // => 'black'
firstColor; // => 'white'



4.解构可迭代对象
在前面，我们将解构应用于数组。但是你可以解构实现了可迭代协议的任何对象。许多原生原始类型和对象都是可迭代的：数组、字符串、类型化数组、集合和映射。例如，你可以将字符串分解为字符：
const str = 'cheese';
const [...first] = str;
const [seconde] = str;
console.log(first);//['c', 'h', 'e', 'e', 's', 'e']
console.log(seconde);//c
不仅限于原生类型，也可以通过实现可迭代协议来自定义解构逻辑。
const movies = {
  list: [
    { title: 'Heat' }, 
    { title: 'Interstellar' }
  ],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.list.length) {
          const value = this.list[index++].title;
          return { value, done: false };
        }
        return { done: true };
      }
    };
  }
};
const [firstMovieTitle] = movies;
console.log(firstMovieTitle); // => 'Heat'
movies 对象通过定义 Symbol.iterator 方法来实现可迭代的协议。迭代器遍历电影的标题。遵循可迭代协议，可以将 movies 对象结构为标题，特别是通过读取第一部电影的标题：const [firstMovieTitle] = movies。


5.解构动态属性
通过属性对对象进行解构比对数组进行解构更为常见。