时间戳

首页 > 技术文章 > JavaScript里不为人知的秘密(02)之常见使用

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

dafei4 2020-08-01 19:58 原文

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 数据类型和数据结构

 

 

 

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

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

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

推荐阅读