zoukankan      html  css  js  c++  java
  • javascript 一些注意事项

    理解字符串的不可变性!

    在 JavaScript 中,字符串 的值是 不可变的,这意味着一旦字符串被创建就不能被改变。

    例如,下面的代码:

    var myStr = "Bob";
    myStr[0] = "J";

    是不会把变量 myStr 的值改变成 "Job" 的,因为变量 myStr 是不可变的。注意,这 并不 意味着myStr 永远不能被改变,只是字符串字面量string literal 的各个字符不能被改变。改变myStr 中的唯一方法是重新给它赋一个值,就像这样:

    var myStr = "Bob";
    myStr = "Job";

    2,

    JavaScript 使用中括号索引查找字符串中的第N个字符


    你也可以使用 [索引]来获得一个字符串中的其他位置的字符。

    请记住,程序是从 0 开始计数,所以获取第一个字符实际上是[0]。

    1,“==/===”

    第一种是==比较:它会自动转换数据类型比较,很多时候,会得到诡异的结果,;

    第二种是===比较,他不会自动转换数据类型,如果数据类型不一致,返回false,如果一致,再比较。由于javascript这个设计缺陷,尽量不使用==,而是使用===比较

    2,strict模式/变量

    javascript设计之初,为了方便初学者学习,并不强制要求用var声明变量。这个设计错误带来了严重的后果:如果一个变量没有通过var声明就使用,则,该变量就自动被声明为全局变量

    3,

    JavaScript 使用索引操作多维数组


    可以把 多维 数组看作成是一个 数组中的数组。当使用[]去访问数组的时候,第一个[index]访问的是第N个子数组,第二个[index]访问的是第N个子数组的第N个元素。

    例如

    var arr = [
    [1,2,3],
    [4,5,6],
    [7,8,9],
    [[10,11,12], 13, 14]
    ];
    arr[0]; // 等于 [1,2,3]
    arr[1][2]; // 等于 6
    arr[3][0][1]; // 等于 11

     4,JavaScript push()函数追加数组数据

    5,

    JavaScript pop()函数弹出数组最后数据


    改变数组中数据的另一种方法是用 .pop() 函数。

    .pop() 函数用来“抛出”一个数组末尾的值。我们可以把这个“抛出”的值赋给一个变量存储起来。

    数组中任何类型的条目(数值,字符串,甚至是数组)可以被“抛出来” 。

    举个例子, 对于这段代码
    var oneDown = [1, 4, 6].pop();
    现在 oneDown 的值为 6 ,数组变成了 [1, 4]

    例:写一个函数 queue ,用一个数组arr和一个数字item作为参数。数字item添加到数组的结尾,然后移出数组的第一个元素,最后队列函数应该返回被删除的元素:

    function queue(arr, item) {

    arr.push(item);
    var a =arr.shift();
    return a;
    }

    var testArr = [1,2,3,4,5];

    console.log("Before: " + JSON.stringify(testArr));//12345
    console.log(queue(testArr, 6)); // 1
    console.log("After: " + JSON.stringify(testArr));//23456

    6,

    JavaScript shift()函数移出数组第一个数据


    pop() 函数用来移出数组中最后一个元素。如果想要移出第一个元素要怎么办呢?

    这就是 .shift() 的用武之地。它的工作原理就像.pop(),但它移除的是第一个元素,而不是最后一个。

    7,

    JavaScript unshift()函数移入数据到数组第一位


    你不仅可以 shift(移出)数组中的第一个元素,你也可以 unshift(移入)一个元素到数组的头部。

    .unshift() 函数用起来就像 .push() 函数一样, 但不是在数组的末尾添加元素,而是在数组的头部添加元素。

    8,

    JavaScript 函数全局变量定义


    在 JavaScript 中, 作用域 涉及到变量的作用范围。在函数外定义的变量具有 全局 作用域。这意味着,具有全局作用域的变量可以在代码的任何地方被调用。

    这些没有使用var关键字定义的变量,会被自动创建在全局作用域中,形成全局变量。当在代码其他地方无意间定义了一个变量,刚好变量名与全局变量相同,这时会产生意想不到的后果。因此你应该总是使用var关键字来声明你的变量

    9,

    JavaScript 函数全局变量与局部变量差异


    一个程序中有可能具有相同名称的 局部 变量 和全局 变量在这种情况下,局部 变量将会优先于全局 变量

    下面为例:

    var someVar = "Hat";
    function myFun() {
    var someVar = "Head";
    return someVar;
    }

    函数 myFun 将会返回 "Head",因为 局部变量 优先级更高。

    10,

    JavaScript 函数使用return返回值


    我们可以把数据通过函数的 参数 来传入函数,也可以使用 return 语句把数据从一个函数中传出来。

    11 ,

    JavaScript 直接在函数中用switch替换if/if-else语句:

    function isLess(a, b) {

    var res= a-b;
    var bool;

    switch(res){
      case -5:
        bool = true;
      break;
      case 5:
        bool = false;
      break;

    }
    return bool;
    }

    12,

    JavaScript 在函数中使用return跳出函数


    当代码执行到return语句时,函数返回一个结果就结束运行了,return后面的语句根本不会执行。

    举例

    function myFun() {
    console.log("Hello");
    return "World";
    console.log("byebye")
    }
    myFun();

    上面的代码输出"Hello"到控制台、返回 "World",但没有输出"byebye",因为函数遇到return语句就退出了。

     13,

    JavaScript 使用[]读取对象属性


    第二种访问对象的方式就是中括号操作符([]),如果你想访问的属性的名称有一个空格,这时你只能使用中括号操作符([])。

    这是一个使用中括号操作符([])读取对象属性的例子:

    var myObj = {
    "Space Name": "Kirk",
    "More Space": "Spock"
    };
    myObj["Space Name"]; // Kirk
    myObj['More Space']; // Spock

    提示:属性名称中如果有空格,必须把属性名称用单引号或双引号包裹起来。

    14,

    JavaScript 使用变量访问对象属性


    中括号操作符的另一个使用方式是用变量来访问一个属性。当你需要遍历对象的属性列表或查表时,这种方式极为有用。

    这有一个使用变量来访问属性的例子:

    var someProp = "propName";
    var myObj = {
    propName: "Some Value"
    }
    myObj[someProp]; // "Some Value"

    还有更多:

    var myDog = "Hunter";
    var dogs = {
    Fido: "Mutt", Hunter: "Doberman", Snoopie: "Beagle"
    }
    var breed = dogs[myDog]; // "Hunter"
    console.log(breed)// "Doberman"

    提示:当我们通过变量名访问属性的时候,使用中括号,不需要给变量名包裹引号。因为实际上我们使用的是变量的值,而不是变量的名称。

    14,

    JavaScript 检查对象属性


    有时检查一个对象属性是否存在是非常有用的,我们可以用.hasOwnProperty(propname)方法来检查对象是否有该属性。如果有返回true,反之返回 false

    举例

    var myObj = {
    top: "hat",
    bottom: "pants"
    };
    myObj.hasOwnProperty("top");// true
    myObj.hasOwnProperty("middle"); // false

    var myObj = {
    gift: "pony",
    pet: "kitten",
    bed: "sleigh"
    };

    function checkObj(checkProp) {
      if(myObj.hasOwnProperty(checkProp)){   //checkProp是变量,所以下边用中括号;


        return myObj[checkProp];
      }else{
        return "Not Found";
      }
    }

    checkObj("gift");

    注意:如果你需要通过变量来访问对象的属性值,请用中括号操作符,点操作符不支持变量。

    15,

    JavaScript 中添加对象属性:

    对象名["属性名"] = xxxx;  或者 对象名.属性名 = xxxxx;

    16,删除对象属性: delete 对象名.属性名;

    17,

    JavaScript JSON操作


    JavaScript Object Notation 简称 JSON,它使用JavaScript对象的格式来存储数据。JSON是灵活的,因为它允许 数据结构 是 字符串数字布尔值字符串,和 对象 的任意组合。

    这里是一个JSON对象的示例:

    var ourMusic = [
    {
    "artist": "Daft Punk",
    "title": "Homework",
    "release_year": 1997,
    "formats": [
    "CD",
    "Cassette",
    "LP" ],
    "gold": true
    }
    ];

    这是一个对象数组,并且对象有各种关于专辑的详细信息。它也有一个嵌套的 formarts 的数组。附加专辑记录可以被添加到数组的最上层。

    提示
    数组中有多个 JSON 对象的时候,对象与对象之间要用逗号隔开。

    18,

    JavaScript 获取JSON属性值


    通过串联起来的点操作符或中括号操作符来访问JSON对象的嵌套属性。

    下面是一个嵌套的JSON对象:

    var ourStorage = {
    "desk": {
    "drawer": "stapler"
    },
    "cabinet": {
    "top drawer": {
    "folder1": "a file",
    "folder2": "secrets"
    },
    "bottom drawer": "soda"
    }
    }
    ourStorage.cabinet["top drawer"].folder2;// "secrets"
    ourStorage.desk.drawer; // "stapler"

     。因为属性的名字带有空格,请使用中括号操作符来访问属性的值。

    JavaScript 获取JSON数组值


    正如我们在前面的例子所见,JSON对象可以嵌套对象和数组。与访问嵌套对象一样,用中括号操作符同样可以访问嵌套数组。

    下面是如何访问嵌套数组的例子:

    var ourPets = {
    "cats": [
    "Meowzer",
    "Fluffy",
    "Kit-Cat"
    ],
    "dogs": [
    "Spot",
    "Bowser",
    "Frankie"
    ]
    };
    ourPets.cats[1]; // "Fluffy"
    ourPets.dogs[0]; // "Spot"

    JavaScript JSON集合操作


    右边有一个JSON对象,代表着你的专辑集。每一张专辑由一个唯一的id标识,并具有多种属性。但并非所有的专辑都有完整的信息。

    写一个函数,它有个三个参数,idpropvalue

    如果 value !='' 而且prop != 'tracks'collectionCopy[id][prop]=value;

    如果 value !='' 而且prop == 'tracks'collectionCopy[id][prop].push(value);

    如果 value == '' ,delete collectionCopy[id][prop];

    记住:函数返回的永远是整个对象。

    提示
    使用中括号操作符来 访问对象的变量属性

    var collection = {
    2548: {
    album: "Slippery When Wet",
    artist: "Bon Jovi",
    tracks: [
    "Let It Rock",
    "You Give Love a Bad Name"
    ]
    },
    2468: {
    album: "1999",
    artist: "Prince",
    tracks: [
    "1999",
    "Little Red Corvette"
    ]
    },
    1245: {
    artist: "Robert Palmer",
    tracks: [ ]
    },
    5439: {
    album: "ABBA Gold"
    }
    };
    // Keep a copy of the collection for tests
    var collectionCopy = JSON.parse(JSON.stringify(collection));

    function update(id, prop, value) {
      if(value!=='' && prop !=='tracks'){
        collectionCopy[id][prop] = value;
      }else if(collectionCopy[id] && value ===''){
        delete collectionCopy[id][prop];
      }else if(value!=='' && prop == 'tracks'){
        collectionCopy[id][prop].push(value);
      }else if(collectionCopy[id] && collectionCopy[id][prop] !==''){
        delete collectionCopy[id][prop];
       }
    return collection;
    }

    update(5439, "artist", "ABBA");

     

    遍历二维数组中的每个元素:

    var arr = [
    [1,2], [3,4], [5,6]
    ];
    for (var i=0; i < arr.length; i++) {
      for (var j=0; j < arr[i].length; j++) {
        console.log(arr[i][j]);
      }
    }

    17,取随机数:

    1)取0~n之间的随机整数:Math.floor(Math.random()*n);

    2)取某个数min到某个数max之间的随机整数:Math.floor(Math.random()*(max-min+1) ) + min;

    18,

    JavaScript 使用正则表达式操作字符串


    Regular expressions 正则表达式被用来根据某种匹配模式来寻找strings中的某些单词。

    举例:如果我们想要找到字符串The dog chased the cat中单词 the,我们可以使用下面的正则表达式: /the/gi

    我们可以把这个正则表达式分成几段:

    / 是这个正则表达式的头部

    the 是我们想要匹配的模式

    / 是这个正则表达式的尾部

    g 代表着 global(全局),意味着返回所有的匹配而不仅仅是第一个。

    i 代表着忽略大小写,意思是当我们寻找匹配的字符串的时候忽略掉字母的大小写。

    JavaScript 使用正则表达式选取数值


    我们可以在正则表达式中使用特殊选择器来选取特殊类型的值。

    特殊选择器中的一种就是数字选择器d,意思是被用来获取一个字符串的数字。

    在JavaScript中, 数字选择器类似于: /d/g

    在选择器后面添加一个加号标记(+),例如:/d+/g它允许这个正则表达式匹配一个或更多数字

    尾部的g是'global'的简写,意思是允许这个正则表达式 找到所有的匹配而不是仅仅找到第一个匹配。

    JavaScript 使用正则表达式选取空白字符


    我们也可以使用正则表达式选择器 s 来选择一个字符串中的空白。

    空白字符有 " " (空格符)、  (回车符)、  (换行符)、  (制表符) 和 f (换页符)。

    空白正则表达式类似于:

    /s+/g

    JavaScript 使用正则表达式转化匹配


    你可以用正则表达式选择器的大写版本 来转化任何匹配。

    举个例子:s 匹配任何空白字符,S 匹配任何非空白字符。

    用 /S/g 来匹配字符串testString中的所有非空白字符。

    var testString = "How many non-space characters are there in this sentence?";

    var expression = /S/g;

    var nonSpaceCount = testString.match(expression).length;  //49

    20,数组Array

    JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素。 请注意,直接给Array的length赋一个新的值会导致Array大小的变化: 大多数其他编程语言不允许直接改变数组的大小,越界访问索引会报错。然而,JavaScript的Array却不会有任何错误。在编写代码时,不建议直接修改Array的大小,访问索引时要确保索引不会越界。

    4,判断对象属性

    如果我们要检测对象是否拥有某一属性,可以用in操作符 如果in判断一个属性存在,这个属性也可能是继承得到的,要判断一个属性是否是对象自身拥有的,而不是继承得到的,可以用hasOwnProperty()方法

    5,for in/of循环

    for循环的一个变体是for … in循环,它可以把一个对象的所有属性依次循环出来,要过滤掉对象继承的属性,用hasOwnProperty()来实现。 由于Array也是对象,而它的每个元素的索引被视为对象的属性,因此,for … in循环可以直接循环出Array的索引:(注意是索引)

        var a = ['A', 'B', 'C'];
        for (var i in a) {
            alert(i); // '0', '1', '2'
            alert(a[i]); // 'A', 'B', 'C'
        }
    请注意,for ... in对Array的循环得到的是String而不是Number。
    

    for … in循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。当我们手动给Array对象添加了额外的属性后,for … in循环将带来意想不到的意外效果:

        var a = ['A', 'B', 'C'];
        a.name = 'Hello';
        for (var x in a) {
            alert(x); // '0', '1', '2', 'name'
        }

    for … of循环则完全修复了这些问题,它只循环集合本身的元素: 然而,更好的方式是直接使用iterable内置的forEach方法,它接收一个函数,每次迭代就自动回调该函数。

    6,javascript中的Map/Set

    Map和Set是ES6标准新增的数据类型,请根据浏览器的支持情况决定是否要使用。

    Interable循环

    遍历Array可以采用下标循环,遍历Map和Set就无法使用下标。 Array、Map和Set都属于iterable类型。 具有iterable类型的集合可以通过新的for … of循环来遍历。,

    7,函数

    由于JavaScript允许传入任意个参数而不影响调用,因此传入的参数比定义的参数多也没有问题,虽然函数内部并不需要这些参数,多余的会被直接忽略。 传入的参数比定义的少也没有问题,相当于传递了参数undefined,计算结果为NaN,为了避免此种情况,可以在函数内部进行判断,使用typeof进行类型判断。 JavaScript还有一个免费赠送的关键字arguments,它只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array。 还有一个关键词rest用来获取多余的参数

    8,变量作用域

    如果一个变量在函数体内部申明,则该变量的作用域为整个函数体,在函数体外不可引用该变量,不同函数内部的同名变量互相独立,互不影响。 变量提升,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部,但不会提升变量的赋值。即可以使用它,但又不能引用它的值,挺坑的。

  • 相关阅读:
    Visual Studio 插件的开发
    EntityFramework 4.x 使用中遇到的问题 (2)
    F#学习笔记核心类型(二)
    F#学习笔记函数式编程(一)
    EntityFramework 4.x 使用中遇到的问题 (1)
    vue3项目一些小坑
    记一种拖拉拽编排流程的思路
    隐藏Jenkinsfile敏感信息
    Jenkins条件判断
    Jenkins 流水线语法自动部署
  • 原文地址:https://www.cnblogs.com/RitaLee/p/7196471.html
Copyright © 2011-2022 走看看