JavaScript语法（十八）

David凉宸
80 阅读7分钟

js语法

  • js中的数据类型
    • 基本数据类型：Undefined（未定义）、Null（空）、Boolean（布尔）、Number（数字）、String（字符串），Symbol（ES6新引入的原始数据类型，表示独一无二的值）
    • 引用数据类型 ：Object（对象）
let und= undefined;
let nul = null;
let bool = true;
let num = 1;
let str = 'abc';
let sym = Symbol();
let arr = [1,2,3,4];
let obj = {name:'xiaoming',age:22};
let fun = function(){console.log('hello')};

  • typeof

    typeof可以识别出基本类型boolean,number,undefined,string,symbol，但是不能识别null。不能识别引用数据类型，会把null、array、object统一归为object类型,但是可以识别出function函数

console.log(typeof und); //undefined
console.log(typeof nul);//null
console.log(typeof bool);//bool
console.log(typeof num);//Number
console.log(typeof str);//string
console.log(typeof sym);//symbol
console.log(typeof arr);//object
console.log(typeof obj);//object
console.log(typeof fun);//function

  • instanceof

    instanceof不能识别出基本的数据类型 number、boolean、string、undefined、unll、symbol 但是可以检测出引用类型，如array、object、function，同时对于是使用new声明的类型，它还可以检测出多层继承关系

console.log(und instanceof Object);// false
console.log(nul instanceof Object);// false
console.log(bool instanceof Boolean);// false
console.log(num instanceof Number);// false
console.log(str instanceof String);// false
console.log(sym instanceof Symbol);// false
console.log(arr instanceof Array);// true
console.log(obj instanceof Object);// true
console.log(fun instanceof Function);// true

  • constructor

    null、undefined没有construstor方法，因此constructor不能判断undefined和null

    但是他是不安全的，因为contructor的指向是可以被改变

console.log(bool.constructor === Boolean);// true
console.log(num.constructor === Number);// true
console.log(str.constructor === String);// true
console.log(sym.constructor === Symbol);//true
console.log(arr.constructor === Array);// true
console.log(obj.constructor === Object);// true
console.log(fun.constructor === Function);// true

  • 数字转换成字符串

    • value.toString()

      var num=100;
var str= num.toString();

    • value+""

      var num = 100;
var str = num + "";

    • String(value)

      var num=100;
var str= String(num);

    • toFixed() 括号数字为小数点后面是否保留--保留几位

      var num = 123456.789;
console.log(num.toFixed(0)); // "123457"
console.log(num.toFixed(1)); // "123456.8"
console.log(num.toFixed(2)); // "123456.79"
console.log(num.toFixed(3)); // "123456.789"

  • js字符串转换成数字

    • parseInt()

      console.log(parseInt('123.123'))  //123
console.log(parseInt('123'))  //123
console.log(parseInt('123abcd'))  //123

    • parseFloat()

      console.log(parseFloat('123.123'))  //123.123
console.log(parseFloat('123.123abc')) //123.123

  • split()

    使用指定的分隔符把一个字符串分割存储到数组

    var str = "jpg | bmp | gif | ico | png";
    var arr = str.split("|");
    console.log(arr) //["jpg ", " bmp ", " gif ", " ico ", " png"]

  • join()

    选择分隔符将一个数组合并为一个字符串

    var arr = ["jpg", "bmp", "gif", "ico", "png"]
    var str = arr.join(" | ");
    console.log(str) //jpg | bmp | gif | ico | png

  • concat()

    将两个数组连接在一起

    var arr1 = [1, 2, 3, 4]
    var arr2 = [5, 6, 7, 8]
    console.log(arr1.concat(arr2)) //结果为[1,2,3,4,5,6,7,8]

  • substring()

    substring 方法用于提取字符串中介于两个指定下标之间的字符

    var str = "0123456789";
    console.log(str.substring(0)); //"0123456789"
    console.log(str.substring(5)); //"56789"
    console.log(str.substring(10)); //""
    console.log(str.substring(12)); //""
    console.log(str.substring(-5)); //"0123456789"
    console.log(str.substring(-10)); //"0123456789"
    console.log(str.substring(-12)); //"0123456789"
    console.log(str.substring(0, 5)); //"01234"
    console.log(str.substring(0, 10)); //"0123456789"
    console.log(str.substring(0, 12)); //"0123456789"
    console.log(str.substring(2, 0)); //"01"
    console.log(str.substring(2, 2)); //""
    console.log(str.substring(2, 5)); //"234"
    console.log(str.substring(2, 12)); //"23456789"
    console.log(str.substring(2, -2)); //"01"
    console.log(str.substring(-1, 5)); //"01234"
    console.log(str.substring(-1, -5)); //""

  • substr()

    substr 方法用于返回一个从指定位置开始的指定长度的子字符串

    var str = "0123456789";
    console.log(str.substr(0)); //"0123456789"
    console.log(str.substr(5)); //"56789"
    console.log(str.substr(10)); //""
    console.log(str.substr(12)); //""
    console.log(str.substr(0, 5)); //"01234"
    console.log(str.substr(0, 10)); //"0123456789"
    console.log(str.substr(0, 12)); //"0123456789"
    console.log(str.substr(2, 2)); //"23"
    console.log(str.substr(2, 5)); //"23456"
    console.log(str.substr(2, 12)); //"23456789"

  • 三元表达式

    三元运算符的表达式：
　　　　　　(expression1)  ?  (expression2)  :  (expression3)
　　　　　　在  expression1  求值为  true  时的值为  expression2  ，在expression1  求值是  false  时的值为  expression3

  • js数组循环

    数组遍历方法
1.for循环
使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。
for(i = 0; i < arr.length; i++) {
    //执行代码
}
2.foreach循环
遍历数组中的每一项，没有返回值，对原数组没有影响，不支持IE
//1 没有返回值
arr.forEach(function(item){
    //执行代码
})

  • js数组前添后删

    • push()：在数组后面加入元素,并返回数组的长度

    • unshift()：在数组前面加入元素,并返回数组的长度

    • pop()删除最后一个元素

    • shift()删除第一个元素

     var arr = [1, 2, 3, 4, 5];
    arr.push(6, 7, 8);
    console.log(arr); // push：在数组后面加入元素   结果是：[1,2,3,4,5,6,7,8]
    console.log('--------------------')
    var aa = [7, 8, 9, 0];
    aa.unshift(4, 5, 6);
    console.log(aa); //   unshift：在数组前面加入元素  结果是:   [4,5,6,7,8,9,0]
    console.log('--------------------')
    var arr = [1, 2, 3, 4, 5];
    console.log(arr.push(6)); //直接console，，返回的是数组的长度，为 6
    console.log('--------------------')
    var aa = [9, 0];
    console.log(aa.unshift(5)); //直接console，，返回的是数组的长度，为 3
    console.log('--------------------')
    var arrDele = [1, 2, 3];
    console.log(arrDele.pop()); //返回最后一个元素并删除
    console.log(arrDele);
    arrDele.pop(); //删除最后一个元素
    console.log(arrDele); //返回数组
    console.log('--------------------')
    var Delearr = [1, 2, 3, 4];
    console.log(Delearr.shift()); //返回第一个元素并删除
    console.log(Delearr);
    Delearr.shift(); //删除第一个元素
    console.log(Delearr);

  • slice()

    • slice()定义：从已有的数组中返回你选择的某段数组元素

    • slice()语法：arrayObject.slice(start,end)

    　注：

    　①：start表示从何处开始选取，end表示从何处开始结束选取，表示一个选取的范围

    　②：start可以为负数，此时它规定从数组尾部开始算起的位置。也就是-1 ，指最后一个元素，-2 指倒数第二个元素，以此类推

    　③：end如果没有被指定参数，数组会包含从 start 到最后一个数组元素的所有元素

    　④：slice()方法不会修改数组本身，而是返回所选取范围的数组元素。如果想删除数组中的某一个元素，需要使用splice()

    var arr = ['A', 'B', 'C', 'D', 'E'];
　　var arr1 = arr.slice(2);
　　console.log(arr1);//['C','D','E']

  • splice()

  • splice()定义：从数组中添加或删除元素，然后返回被删除的数组元素。

  • splice()语法：arrayObject.splice(index,howmany,item1,.....,itemX)

　注：

　　①：index表示从什么位置开始添加或删除数组元素

　　②：howmany表示删除的元素数量，如果为0，则表示不删除数组元素

　　③：item1,.....,itemX表示新增的数组元素

　　④：splice()方法会改变原始数组

var arr = ['A', 'B', 'C', 'D', 'E'];
    arr.splice(2, 0, 'New');
    console.log(arr); //['A','B','New','C','D','E']

var arr = ['A', 'B', 'C', 'D', 'E'];
    arr.splice(2);
    console.log(arr); //['A','B']

  • switch

    • 计算一次 switch 表达式
    • 把表达式的值与每个 case 的值进行对比
    • 如果存在匹配，则执行关联代码
    switch(表达式) {
     case n:
        代码块
        break;
     case m:
        代码块
        break;
     default:
        默认代码块
}

    示例：

    var day;
    switch (new Date().getDay()) {
        case 0:
            day = "周日";
            break;
        case 1:
            day = "周一";
            break;
        case 2:
            day = "周二";
            break;
        case 3:
            day = "周三";
            break;
        case 4:
            day = "周四";
            break;
        case 5:
            day = "周五";
            break;
        case 6:
            day = "周六";
    }
    console.log("今天是" + day)

    break 关键词:

    JavaScript 遇到 break 关键词，它会跳出 switch 代码块

    找到匹配，并完成任务，则随机中断执行（break）,无需更多测试

    break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行

    default 关键词:

    如果case条件都不满足，则会使用default 定义的默认字符

  • less中&

    less中的&表示的是同一个元素

    head{
	.conent{
	}
	&.menu{
	}
}

//less编译后
.head{}
.head .content{}//父子关系
.head.menu{}//并且关系

  • Location

属性描述
hash设置或返回从井号 (#) 开始的 URL（锚）。
host设置或返回主机名和当前 URL 的端口号。
hostname设置或返回当前 URL 的主机名。
href设置或返回完整的 URL。
pathname设置或返回当前 URL 的路径部分。
port设置或返回当前 URL 的端口号。
protocol设置或返回当前 URL 的协议。
search设置或返回从问号 (?) 开始的 URL（查询部分）。
属性描述
assign()加载新的文档。
reload()重新加载当前文档。
replace()用新的文档替换当前文档。

http://localhost:8080/Charge/homePage.html?costInfoId=1 为例

① 获取(或设置) URL 的协议部分：window.location.protocol

var test = window.location.protocol; 
alert(test); //返回弹出：http:

② 获取(或设置) URL 的主机部分：window.location.host

var test = window.location.host; 
alert(test); //返回弹出：localhost:8080

③ 获取(或设置) URL 关联的端口号码：window.location.port

var test = window.location.port; 
alert(test); //返回弹出：8080(如果采用默认的80端口(即使添加了:80)，那么返回值并不是默认的80而是空字符)

④ 获取(或设置) URL 的路径部分也就是文件地址：window.location.pathname

var test = window.location.pathname; 
alert(test); //返回弹出：/Charge/homePage.html

⑤ 获取(或设置) URL属性中跟在问号后面的部分：window.location.search

var test = window.location.search; 
alert(test); 
//返回弹出：?costInfoId=1

⑥ 获取(或设置) URL属性中在井号“#”后面的分段：window.location.hash

var test = window.location.hash; 
alert(test); 
//返回弹出：空字符(因为url中没有)

⑦ 获取(或设置) 整个 URL字符串：window.location.href

var test = window.location.href; 
alert(test); 
//返回弹出：http://localhost:8080/Charge/homePage.html?costInfoId=1
avatar
文章
阅读
粉丝