❤ javascript实用
检测对象中是否存在某个属性hasOwnProperty(‘属性名’);
对象.hasOwnProperty(‘属性名’);
let obj ={name:"12"};obj.hasOwnProperty('name');
true //存在
let obj ={name:"12"};obj.hasOwnProperty('names');
false //不存在
检测对象中是否存在某个值
（1）indexOf
1. 检测某个字符串之中是否存在某个字符串
let ta="ABCDE";let tb=ta.indexOf('A');console.log(tb,'tb');
// 输出-1 'tb'
// 0不存在
let ta="ABCDE";let tb=ta.indexOf('AA');console.log(tb,'tb');
// 输出-1 'tb'
// -1 存在
（2） 使用按位非操作符（~）
上面的检测可以写成
if (~ta.indexOf("A")) {
console.log('子字符串存在');
} else {
console.log('子字符串不存在');
}
// 输出 子字符串存在
if (~ta.indexOf("F")) {
console.log('子字符串存在');
} else {
console.log('子字符串不存在');
}
// 输出 子字符串不存在
原理分析~操作符
为什么使用~操作符后，就不用写>-1了呢？我们来看看其背后的隐式转换和~操作符原理
不存在时得到的结果是： ~-1
step1. 转成32位的二进制：11111111111111111111111111111111
注：在二进制中**-1**表示为所有位都是1的二进制数
step2. 按位取反：00000000000000000000000000000000
存在时得到的结果，假设是3
step1. 转成32位的二进制00000000000000000000000000000011
step2. 按位取反11111111111111111111111111111100
step3. 二进制到十进制的转换
取反后得到的是一个新的二进制数，但这个二进制数以1开头，表示它是一个负数。在计算机中，负数通常使用补码形式表示，所以我们需要将这个二进制数转换为它的补码对应的十进制数。
补码的计算过程是：
取反（已经在步骤2里完成了）。
加1。
结果如下：
11111111111111111111111111111100
+ 1
-----------------------------------
11111111111111111111111111111101
得到的新二进制数仍然是负数的补码表示，它对应的十进制数是-4。
简单的通过数学表达式来表示：~N = -N - 1，赔了夫人又折兵
总结梳理：
使用~str.indexOf(xxx)后得到的结果一定是小于等于0的数字
而if括号内的表单式会将数字隐式转换为布尔值
因此只有~-1 ==> 0 ==> false，其它情况都是true
非常有趣的隐式转换
为什么加!后，结果不变
[] == 0 // true
![] == 0 // true
分析：
在[] == 0中，对于复杂类型转化过程是先执行toString再通过Number转成数字，因此结果是Number([].toString())==0
在![] == 0中，![]优先执行将数组转成布尔值再取反返回false，再转成数字，因此结果也是0
为什么"5">15为false，而"5">"15"为true
原因是：两个字符串数字比较的不是数字本身，而是通过charCodeAt获取到的Unicode编码的索引：
非常容易踩坑的引用类型隐式转换
[] == [] //false(引用地址不一样、无异议)
[] == ![] //true(比较的转化后的数字)
{} == {} //false同上
{} ==!{} //false,哈哈和上面的数组对比结果是相反的
1 掌握操作符和隐式转换的行为有助于我们编写更可靠、更易于维护的代码。
2 实际开发中，应合理的使用隐式转换，在可能引起混淆的地方采用显式类型转换，提高清晰度和稳定性。
3 合理的使用操作符可以帮助我们编写更简洁的代码，还可以提高代码的可读性（如+操作符快捷转换数字、??控制合并操作符对处理数字0非常有用）。
检测数组中是否存在某个值
（1） 利用for 循环检查一个数组(无序)是否包含一个特定的值
<script>
function contains(arr, val) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === val) {
console.log('存在',arr[i],val);
return true;
}
}
return false;
}
contains([1, 2, 3], 3); //true
</script>
（2） 利用while循环检查一个数组(无序)是否包含一个特定的值
function contains(arr, val) {
var i = arr.length;
while (i--) {
if (arr[i] === val) {
console.log('存在', arr[i], val);
return true;
}
}
return false;
}
contains([1, 2, 3], 3); //true
（3）使用数组的some，filter等方法
使用some方法更简洁，一旦找到元素，迭代就会中止，从而避免了不必要的迭代周期
1. some (推荐)
<script>
function contains(arr, val) {
console.log('存在',arr.some(item => item === val));
return arr.some(item => item === val);
}
let sdata=contains([1, 2, 3], 3); //true
console.log('sdata',sdata);
</script>
2. filter
function contains(arr, val) {
return arr.filter((item)=> { return item == val }).length > 0;
}
（4）array.indexOf 检测某个数组中是否存在某个字符串
[1, 2, 3].indexOf(1);//0
["foo", "fly63", "baz"].indexOf("fly63");//1
[1, 2, 3].indexOf(4);//-1
注意点：
1、indexOf() 方法对大小写敏感！如果要检索的字符串值没有出现，则该方法返回 -1。
2、在比较第一个参数与数组中的每一项时，会使用全等操作符，即要求查找的项必须严格相等
3、数组的位置是ECMAScript5为数组实例新增的，支持的浏览器有IE9+,Firefox,Safari,Opera,Chrome
（5）array.includes
array.includes(searchElement[, fromIndex]) 此方法判断数组中是否存在某个值，如果存在返回 true，否则返回false。
接受参数（
要查找的值，从数组的哪个索引开始查找）
1.
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
2. 接受可选的第二个参数fromIndex
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
3.
不像indexOf，它采用严格相等比较。这意味着您可以检测数组是否包含NaN：
[1, 2, NaN].includes(NaN); // true
不同于indexOf，includes不会跳过缺失的索引
new Array(5).includes(undefined); // true
（6） array.find
find用于返回数组中满足条件的第一个元素的值，如果没有，返回undefined
let numbers = [12, 5, 8, 130, 44];
let result = numbers.find(item => {
return item > 8;
});
console.log(result);//12
//元素是对象
let items = [
{id: 1, name: 'something'},
{id: 2, name: 'anything'},
{id: 3, name: 'nothing'},
];
let item = items.find(item => {
return item.id == 3;
});
console.log(item) //Object { id: 3, name: "nothing" }
除了find，我们也可以使用array.indexOf。返回数组中满足条件的第一个元素的索引（下标）, 如果没有找到，返回-1 同第3种方法类似
（7） 利用set中has方法
function contains(arr, val) {
console.log(new Set(arr).has(val),'是否')
return new Set(arr).has(val);
}
contains([1,2,3],2);//true
通过new set([])将数组转换成Set对象,set.prototype.has(value)判断该值是否存在于Set对象中，返回布尔值。
利用set进行数组去重
let arr2 = new Set([1,1,2,3,4])
let arr3 = [...arr2]
console.log(arr2, arr3) // {1,2,3,4} [1,2,3,4]
折叠已经注释的代码块
javascript 注释折叠
使用region注释，将代码块收（折叠）起来
#region
在这里插入代码片
#endregion
javascript 方法-setAttribute() 方法
定义
setAttribute() 方法创建或改变某个新属性。
如果指定属性已经存在,则只设置该值。
兼容性
所有主要浏览器都支持 setAttribute() 方法
Internet Explorer 8 及更早 IE 版本不支持该方法
使用：
1、setAttribute 设置按钮的点击事件
<body>
<div>
<button id="button">
按钮
</button>
</div>
<script>
var mybutton = document.getElementById("button");
mybutton.setAttribute("onclick", "javascript:alert('This is a 按钮!');");
</script>
</body>
2、设置类名
mybutton.setAttribute("class", "dialogclass");
3、设置样式
在这里插入代码片
数组中数据过滤方法filter
var arr=[{name:1},{name:1},{name:1},{name:1},{name:2}];
var arrps=arr.filter((row)=>{return row.name==2});
console.log(arrps);
//输出过滤以后的数组数据：
[{"name": 2}]
JavaScript 对象转数组
转化前：
let obj = {
'name': '前端',
'url': 'https://www.tbai.top',
'des': '专注web前端开发',
};
转化为：
=> ['前端', 'https://www.tbai.top', '专注web前端开发']
（1）Object.values
Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for…in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。
let arr = Object.values(obj); //对象转化为数组
console.log(arr,'arr');
输出：
['前端', 'https://www.webadkf.com', '专注web前端开发'] 'arr'
如果只需要返回键作为数组，可以使用Object.keys()的方式,所以结合Map，也可以实现：
let arr=Object.keys(obj).map(function(i){return obj[i]}); //对象转化为数组
（2） 循环
可以直接利用循环，如for in或者forEach()等：
var arr = []; //定义数组
for (var i in obj) {
arr.push(obj[i]);
}
（3） Array.from
Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例
let obj = {
'name': '前端',
'url': 'https://www.webadkf.com',
'des': '专注web前端开发',
};
var arr = Array.from(Object.values(obj),x=>x);
console.log(arr,'arr');
运算
除法背后最多保留三位小数，但是不要0
divideWithoutTrailingZeros(dividend, divisor) {
// 执行除法运算
let result = dividend / divisor;
// 将结果格式化为最多三位小数，不显示末尾的零
result = result.toFixed(3).replace(/\.?0*$/, '');
return result;
},
922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
