18个JavaScript特性技巧~

1. 短循环：

在一行当中缩短循环，为循环编写更少的代码

var names=[ 'xinyu', 'xinyuya', 'xinyuyou' ]
原代码：
for( var i=0;i<names.length;i++ ){ 
    console.log( names[i] )
}
缩短代码后：
for ( let name of names ) console.log( name )

2. 调整一个数组的长度

长度不仅用于获取数组的大小 如果我们将数组的长度设置为任意数字 它将对数组进行切片

var array1=[ 1,2,3,4,5,6 ]
var array2=[ 'xinyu','xinyuya','xinyuyou' ]
array1.length=3
array2.length=1
console.log( array1 )// [1,2,3]
console.log( array2 )// ['xinyu']

3. 函数参数

不需要定义函数参数，可以将函数用作数组对象，而无需在函数实现时声明参数

function add( ){
    var sum=0;
    for( var i=0;i<arguments.length;i++ ){
         sum=sum+arguments[i]
    }
     console.log( 'Total Sum :',sum )// Total Sum : 9
}
add( 1,3,5 )

4. JavaScript 中的时间戳

在JavaScript中我们有很多方法可以使用Date方法来获取日期

var date=new Date()
timetamp=date.getDate()
console.log( timetamp )

timetamp=new Date().getDate()
console.log(timetamp)

timetamp+=new Date()
console.log( timetamp )

5. 删除数组中的一个值

通常 我们使用delete方法从数组中删除一个项目，但这就是在阵列中打孔的方法，它将undefined放在删除项目索引上

可以使用splice方法做一些工作，但它会从数组中完全删除索引，而不会留下任何漏洞

var array=[ 1,2,3,4,5 ]
delete array[4]
array.splice(4,1)
console.log( array ) // [ 1,2,3,4,5 ]

6. JavaScript中的IN运算符

通过使用IN运算符，你可以检查对象中是否存在键，当你检查对象中是否存在特定键时 请使用以下技巧

var a=4;
var b=5;
var list={ 1:7， 3:9, 4:0, 2:9 }
console.log( a in list ) // true
console.log( b in list ) // false

7. JavaScript字符串填充

JavaScript填充用在字符串文本中添加，可以在字符串的开头或结尾添加填充

以下是padStartand的语法padEnd

padStart( targetLength,padString(optional))
padEnd( targetLength,padString(optional))

padString是两种padding方法中的可选参数

以下是理解他们工作的代码示例

console.log('123'.padStart(5)) // 123
console.log('123'.padStart(5,'0')) // 00123
console.log('123'/padEnd(5,'0')) // 12300
console.log('123'.padEnd(10,'0)) // 1230000000

8. Power ** 运算符

此功能将节省大量数学计算时间，你可能使用Math.pow()函数来计算数字的幂

但我们可以使用 ** 运算符代替它

原：
var p=Math.pow( 2,5 )
console.log( p ) // 32
现：
var p=2**5
console.log( p ) // 32

原：
var p = Math.pow(2,5) + Math.pow(2,5) + Math.pow(2,1) + Math.pow(2,3) + Math.pow(2,4) + Math.pow(2,9)
console.log(p) // 602
现：是不是更简洁清晰明了捏?
var p=2**5 + 2**5 + 2**1 + 2**3 + 2**4 + 2**9
console.log(p) // 602

9. includes()

大多数人都用indexOf在数组中查找元素是叭？

No,

有更好的方法来做同样的工作，

使用includes方法而不是indexOf返回布尔值的结果

var array=[ 'xinyu','xinyuya','xinyuyou' ]
console.log( array.includes( 'xinyuya' ) // true
console.log( array.includes( 'xin' ) // false

10.重定向到URL

JavaScript有一些方法可以再执行代码后 将重定向到浏览器中的网站

当用户在网站上执行任何操作并且JavaScript将用户重定向到另一个URL时，

const Redirect = (url, asLink = true) => asLink ? (window.location.href = url) : window.location.replace(url);
redirect('https://medium.com/@codedev101')

11. 一元运算符（+）

一元运算符可以方便的将字符串数字转换为数字格式 并将日期转换为毫秒

var strNum ='123.3'
var num=+strNum
console.log( num ) // 123.3
var currentDate=new Date()
var millisSince=+currentDate
console.log(millisSince)

12. 将浮点数转换为整数（快速方法）

要将浮点数转换为整数 必须使用Math.floor()   Math.round() 和 Math.ceil()方法

还可以使用 | 按拉OR运算符以更快的方式进行转换

原：
console.log(Math.floor(23.56))
现：
console.log( 23.56|0 )

13. 求和 最大值 最小值

const xinyuArr=[1,2,3,4,5,6]
//求和
xinyuArr.reduce((a,b)=>a+b)  // 21
//最大值
xinyuArr.reduce((a,b)=>a>b?a:b) // 6
//最小值
xinyuArr.reduce((a,b)=>a<b?a:b) // 1

14. 对字符串 数字 进行排序

// 排序字符串数组
const xinyuArr=['x','i','n','y','u','y','a']
xinyuArr.sort()  // ["a", "i", "n", "u", "x", "y", "y"]
xinyuArr.reverse() // ["y", "y", "x", "u", "n", "i", "a"]

// 排序数字数组
const xinyuArr=[32,343,56,778,1090]
xinyuArr.sort((a,b)=>a-b)  // [32, 56, 343, 778, 1090]
xinyuArr.sort((a,b)=>b-a)  // [1090, 778, 343, 56, 32]

15. 从数组中过滤出虚假值

const xinyuArr=[3,5,2,43434,'',false,undefined,null,0]
xinyuArr.filter(Boolean) // [3, 5, 2, 43434]

16.  删除重复值

const xinyuArr=[1,23,32,32,33,45657,6,7]

xinyuArr.filter((item,index,arr)=>arr.indexOf(item)===index) 

// [1, 23, 32, 33, 45657, 6, 7]

17. 单行回文检查

function xinyuya(str){
    return str==str.split('').reverse().join('')
}
xinyuya('xinyuya')  // false
xinyuya('xinnix')   // true

18.  将Object 转成 Array

const xinyuObject={a:1,b:2,c:3}

Object.entries(xinyuObject)
// [Array(2), Array(2), Array(2)]
// 0: (2) ["a", 1]
// 1: (2) ["b", 2]
// 2: (2) ["c", 3]
// length: 3

Object.keys(xinyuObject) // ["a", "b", "c"]

Object.values(xinyuObject) // [1,2,3]

19. 还有很多吧~如果你有很多像上边的这些小技巧 可以在评论区告诉我呦  我们可以一起学习下~

over  

如果对你有帮助  请点个赞鼓励下哦~