javaScript 的使用技巧，优雅 简洁 高效 愉快的搬砖

吓死羊了
1,474 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

1.简化if判断

if(a===1||a===2||a===3){}
​
//简化 
let arr=[1,2,3,4]
if(arr.includes(a)){}

2.快速获取对象键值

let obj={
    a:1,
    b:2
 }
let arr=[]
 for(let key in obj){
    arr.push(obj[key])
 }
 
 //简化 
 let values=Object.values(obj) // [1,2]

3.快速获取对象键名

let obj={
  a:1,
  b:2,
}
let arr=[]
for (let key in obj){
   arr.push(key)
 }
 
//简化
let keys=Object.keys(obj)//["a","b"]

3.1判断对象是否为空对象

let obj={
  a:1,
  b:2,
}
let keys=Object.keys(obj).length  //2
​

4.利用短路运算符设置默认值

let params={
  name:"张三",
  age:"18"
}
​// 当params.name 为true时 则不会访问 李四 反之false是会访问 李四
let name =params.name || "李四"  

5 对象的key 可以使用计算属性

当创建一个对象时，可以在对象字面量中使用方括号。这叫做计算属性

let fruit = 'apple';
let bag = {
  [fruit + 'Computers']: 5 // bag.appleComputers = 5
};

6.判断数据的类型

Object.prototype.toString.call(o).slice(8, -1)=== 'Date'//是否时间
Object.prototype.toString.call(o).slice(8, -1)=== 'Array'//是否数组
Object.prototype.toString.call(o).slice(8, -1)=== 'Function'//是否函数
                                                  'Undefined'
                                                  'String'

7.空值合并运算符 （??）

由于它对待null和undefined 的方式类似，所以使用特殊的术语对其进行表示

let user;
alert(user ?? "匿名"); // 匿名（user 未定义）
​
let user = "John";
alert(user ?? "匿名"); // John（user 已定义）

  • 使用 || 替换掉 ??，也可以获得相同的结果：但是它们的区别

    • || 返回第一个 真 值。

    • ?? 返回第一个 已定义的 值

      let height = 0;
​
alert(height || 100); // 100
alert(height ?? 100); // 0

  • ?? 与 && 或 || 一起使用 需要使用括号明确指定优先级

    let x = 1 && 2 ?? 3; // Syntax error

    let x = (1 && 2) ?? 3; // 正常工作了
alert(x); // 2

  • 合并运算符与可选链运算符结合使用

    let title = data?.children?.[0]?.title ?? 'codercao';
console.log(title); // codercao

总结

  • 空值合并运算符 ?? 处理未定义或为空值和表达提供默认值。我们可以使用??运算符

  • 它被用于为变量分配默认值：

    // 当 height 的值为 null 或 undefined 时，将 height 的值设置为 100
  height = height ?? 100;
  • ?? 运算符的优先级非常低，仅略高于 ? 和 =，因此在表达式中使用它时请考虑添加括号。
  • 如果没有明确添加括号，不能将其与 || 或 && 一起使用。

8 可选链 ( ?. ）

可选链 ?. 是一种访问嵌套对象属性的安全的方式。即使用中间的属性不存在，也不会出现错误

静态属性

  • 如果 value 存在，则结果与 value.prop 相同，

  • 否则（当 value 为 undefined/null 时）则返回 undefined。

    let user = {}; // user 没有 address 属性
​
alert( user?.address?.street ); // undefined（不报错）

    let user = {}; // 一个没有 "address" 属性的 user 对象
​
alert(user.address.street); // Error!

动态属性

  • 例子

    // object?.[expression]
data  = {children: [{title:'codercao'}]}
console.log(data?.children?.[0]?.title) // codercao

注意

  • 可选链操作符不能出现赋值表达式的左边，只能出现在右边

    //例如 
let user = {};
user?.address='123' //赋值表达式的左侧不能是可选属性访问

9 逻辑空分配 （ ??= )

逻辑空值运算符仅在（null 或者 undefined ) 时才将值分配给 x

x ??= y

等同于

x ?? (x = y);

10 逻辑或分配（|| =）

逻辑或值运算符仅在 （undefined ,null ，空字符串，NaN , 0)

x ||= y

等同于

x || (x = y)

11 逻辑与分配（&& =）

逻辑赋值运算符仅在左侧为真时才赋值

x &&= y

等同于

x && (x = y)

12.如何区分数组和对象

1 通过ES6中的Array.isArray 来识别

Array.isArray([]) //true
Array.isArray({}) //false

2 通过 instanceof来识别

[] instanceof Array  //true
{} instanceof Object //true

3 通过 constructor 来识别

{}.constructor  //返回 object
[].constructor // 返回 Array

4 通过 Object.prototype.toString.call 方法来识别

Object.prototype.toString.call([])
Object.prototype.toString.call({})

13.YYYY-MM-DD日期格式

let date=new Date()
​
let year=date.getFullYear();//获取年，getFullYear() 返回4位的数字
let month=date.getMonth()+1; //获取月份比较特殊，0是1月，11是12月
let month=month<10 ?'0'+month:month; //变成两位
let day=date.getDate()//获取日
let day=day<10 ? '0'+day : day;
alert(year+"-"+month+'-'+day)

13.1 检验字符串是否为日期格式

//例如 格式201212
if(value.length!=6) return
let dataTate='20'+value.slice(0,4)+'-'+value.substring(4,6)+'-'+value.substring(6,8)
 if(!isNaN(value)&&!isNaN(Date.parse(dataTate))) { }      

14.提取url中各个get参数（参数名和参数个数不确定）

function serilizeUrl(url){
  let urlObject={};
  if(/?/.test(url)){
    let urlString=url.substring(url.indexOf("?")+1) //找出‘？’后一位的索引
    let urlArray=urlString.split("&");//以 & 分割成数组 
    for(let i=0,len=urlArray.length;i<len;i++){
      let urlltem=urlArray[i]
      let item=urlitem.split("=")
      urlObject[item[0]]=item[1]
    }
    return urlObject
  }
  return null
}

15. object.assign ()

  • object.assign()用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，返回目标对象。

    //语法：target目标对象，sources 源对象  返回值：目标对象
object.assign(target,sources1,sources2)

  • Object.assign浅拷贝还是深拷贝的问题？

    • 第一级属性的深拷贝

      let obj={name:"tom",age:11}
let copyObj=Object.assign({},obj)
copyObj.name="mary"
console.log(obj);//{name:"tom",age:11}
console.log(copyObj);//{name:"mary",age:11}

    • 第二级属性的浅拷贝

      let obj={name:"tom",age:11,job;["web"]}
let copyObj=Object.assign({},obj)
copyObj.job[0]=['IT']
console.log(obj);//{name:"tom",age:11,job;["IT"]}
console.log(copyObj);//{name:"mary",age:11,job;["IT"]}

16. js保留小数

  1. parseFloat(item)

    parseFloat(item) // 转换成浮点

  2. toFixed()

     toFixed() //方法可把 Number 四舍五入为指定小数位数的数字。

17. 深拷贝

  1. 递归实现深拷贝

  2. JSON对象实现深拷贝

    //用Json.stringify把对象转换成字符串，再用Json.parse把字符串转换成新的对象。
let obj= {
  name: 'nordon',
  info: {
    age: 18
  }
};
JSON.parse(JSON.stringify(obj))

18. 浅拷贝

  1. 扩展运算符

    使用扩展运算符也可以完成浅拷贝

    const source = {
  name: 'nordon',
  info: {
    age: 18
  }
};
const obj = {...source};
 
Object.assign(obj, source);
source.info.age = 20;
console.log(obj);
console.log(source);

  2. Object.assign

    该方法可以用于 JS 对象的合并等多个用途，其中一个用途就是可以进行浅拷贝。该方法的第一个参数是拷贝的目标对象，后面的参数是拷贝的来源对象（也可以是多个来源）

    const obj = {};
const source = {
  name: 'nordon',
  info: {
    age: 18
  }
};
 
Object.assign(obj, source);
console.log(obj); // {name: 'nordon', info: {…}}

19. js输入消息方式

  1. 在js中如果希望输出一个具体的文本信息，必须带引号
  2. 在使用document.write();的时候，可以在方法内输出html标签，加引号。 
    alert();

document.write('<h1>我是一段文字</h1>');   在网页中输出信息

prompt("请输入姓名","测试");   //接收用户输入的	

confirm("确定不听课么");

console.log("adsadsfafds");	 //在控制台中输出消息

持续更新中 ~~~

avatar
文章
阅读
粉丝