JavaScript里不为人知的秘密(02)之常见使用

JavaScript里不为人知的秘密(02)之常见使用

01)  字符串和数组互相转化 join split 

let arr = ["da", "fei", 'age', '18'];
let str = arr.join(",");  //数组转字符串
console.log(str);
let test_arr = str.split(","); // 字符串转为数组
console.log(test_arr);

02) 序列化和反序列化 

JSON.stringify   JSON.parse

let obj = {age: 18, name: "daFei"};

let bbb = JSON.stringify(obj); // 序列化: 对象-->字符串
console.log(bbb,obj);

let xxx = JSON.parse(bbb); // 反序列化: 字符串-->对象
console.log(xxx,obj);

 

 

03) forEach 遍历数组

循环所有值,直到所有元素都遍历

let arr = [
    {age: 18, name: "daFei"},
    {age: 28, name: "foo"},
    {age: 38, name: "bar"}
];

arr.forEach(item => {
    console.log(item);
    console.log(item.age, item.name);
});

03-2) some 遍历对象

01) 可以跳出当前循环

02) 可以用来做判断   Array.prototype.some()

 [ 注意：如果用一个空数组进行测试，在任何情况下它返回的都是false。 ] 

    const arr = [
        {name: "foo", age: "18"},
        {name: "bar", age: "28"},
        {name: "daFei", age: "20"}
    ];

    arr.some(item => {
        if (item.name === "bar") { 
            console.log("ok");
            return true;
        }
        console.log("执行"); // 条件生效后,这里的代码不在执行
    });

 03-2-2) some 遍历对象,用作判断

// 注意：如果用一个空数组进行测试，在任何情况下它返回的都是false            
if ([12, 5, 8, 1, 4].some(x => x > 10)) { //结果 true
    console.log("找到大于10的数据");
}
if ([2, 5, 8, 1, 4].some(x => x > 22)) {
    console.log("找到大于22的数据");
}else {  //结果 false
    console.log("没有找到数据")
}

 

04) for/in 遍历对象

var obj = {age: 18, name: "daFei"};
for (let key in obj) {
    console.log(key,"___",obj[key]);
}

05) 立即执行

<script>
    (function(){
        console.log("daFei");
    }())

    let demo=function(){
        console.log("daFei_002");
    }();

    // 最low 的写法
    function fei(){
        console.log("daFei_003");
    }
    fei();  // 这里的() , 相当于执行
</script>

06) HTML事件属性

　　HTML 事件属性_菜鸟教程

       HTML 事件属性_MDN

07) jQuery去除前后空格

  console.log($.trim("111   去除前后空格  222") );
  console.log($.trim("   去除前后空格  ") ); 

08)2个感叹号使用

 2个感叹号一般用来将后面的表达式强制转为布尔类型 true 或者 false

let foo;
console.log("foo = " + foo); // foo = undefined
let bar = !!foo;
console.log("bar = " + bar); // bar = false

JavaScript 中 null、undefined、NaN、+0、-0、""，这六种转换成布尔类型是 false，其余都是true

理解相等比较的模型

let foo = []; // true
let foo = {}; // true

let fei =  !!''    // false
let fei =  !!'0'   // true
let fei =  !!'1'   // true
let fei =  !!'-1'  // true
let fei =  !!'foo' // true
let fei =  !!0     // false
let fei =  !!undefined   //false
let fei =  !!null  // false
let fei =  !!NaN   // false
let fei =  !!{}    // true
let fei =  !![]    // true
let fei =  !!{foo: "bar"}           // true
let fei =  !!['foo', 'bar', 'fei']  // true

PHP 中

$foo = []; // false
$foo = (object)[]; // true

09)判断一个对象是否是空对象

function checkObj(obj) {
    return Object.keys(obj).length === 0;
}

checkObj([]); // true
checkObj({}); // true

10) 数据类型

基本类型：Number Boolean  String  undefined null
引用类型：Object  Function

判断类型:  Object.prototype.toString.call("daFei");  // [object String]

最新的 ECMAScript 标准定义了 8 种数据类型:

• 6 种

  原始类型，使用 typeof 运算符检查:

  • undefined：typeof instance === "undefined"

  • Boolean：typeof instance === "boolean"

  • Number：typeof instance === "number"

  • String：typeof instance === "string

  • BigInt：typeof instance === "bigint"

  • Symbol ：typeof instance === "symbol"

• null：typeof instance === "object"。

• Object：typeof instance === "object"。任何 constructed 对象实例的特殊非数据结构类型，也用做数据结构：new Object，new Array，new Map，new Set，new WeakMap，new WeakSet，new Date，和几乎所有通过 new keyword 创建的东西。

记住 typeof 操作符的唯一目的就是检查数据类型，如果我们希望检查任何从 Object 派生出来的结构类型，使用 typeof 是不起作用的，因为总是会得到 "object"。检查 Object 种类的合适方式是使用 instanceof 关键字。但即使这样也存在误差。

JavaScript 数据类型和数据结构

10-2)字符串转数字类型

let fei = '123';
Object.prototype.toString.call(fei); // [object String]

let fei = '123';
Object.prototype.toString.call(Number(fei));  // [object Number]

// 利用乘法运算
let fei = '123';
Object.prototype.toString.call(fei * 1); // [object Number]

// >>> 运算符,右位移零位会将非number数据转化成number类型
let fei = '123';
Object.prototype.toString.call(fei >>> 0); // [object Number]

扩展知识,右位移运算

// 将目标数据先转换成二进制,然后移动指定的位数
let fei = 3; // 二进制为 0011
console.log(fei >>> 2); // 输出 0, 二进制为 0000
console.log(fei >>> 1); // 输出 1, 二进制为 0001

 

 

 

JavaScript里不为人知的秘密(01)之常见使用

JavaScript里不为人知的秘密(03)之常见使用

基本类型：Number Boolean String undefined null引用类型：Object Function