JavaScript快速入门(二)

文件中引入JavaScript

在body或者head中添加script标签

引入js文件

var age = 20;
console.log(age;

在html文件中src引入改文件

引入网络来源文件，和引入本地的js文件一样，通过src

数据类型

原始数据类型：基本的数据类型（数值、字符串、布尔值）

var user = {
    "name":"ming",
    age:20,
    is_register:True
}

特殊数据类型：null和undefined

<body>
    <script>
        var age = 20;
        console.log(typeof age;
    </script>
</body>

算数运算符

加减乘除取余：+ 、-、*、/、%

<body>
    <script>
        var num = 20;
        console.log(++num;
        console.log(--num;
    </script>
</body>

自增自减需要注意，有两种写法一种运算符号在前，一种运算符号在后，两种效果不一样

<body>
    <script>
        var num = 20;
        console.log(++num; // 21
        var num1 = 20;
        console.log(num1++; // 20
    </script>
</body>

赋值运算符

赋值运算符	表达式
=	赋值运算符
+=	x +=y 等同于 x= x+y
-=	x -=y 等同于 x = x-y
*=	x = y 等同于 x = xy
/=	x /= y 等同于 x = x/y
%=	x %= y 等同于 x = x % y

比较运算符

比较运算符	描述
<	小于
>	大于
<=	小于或者等于
>=	大于或者等于
==	相等
===	严格相等
!=	不相等
!==	严格不相等

== 和 ===区别

<body> <script> var num = 20; var num1 = 20; var num2 = "20"; console.log(num == num1; // True console.log(num == num1; // True console.log(num == num2; // True console.log(num === num2;// 严格比较数值和类型 False console.log(num != num2;// False console.log(num !== num2;// True 类型不一致 </script> </body>

布尔运算符

取反运算符（！）

<body> <script> var flag = true; console.log(!flag; </script> </body>

提示 undefind 、null、false、0、NaN、空字符串取反都为true

<body>
    <script>
        console.log(10<20 && 10>5; // True
    </script>
</body>

活运算符（||）

<body> <script> console.log(10>20 || 10>5; // True </script> </body>

用Switch简化多个if...else....

swith后面跟表达式，case后面记得一定要加上break，不加上break会把后续的都执行，最后default就是以上case都不是执行

<body> <script> var day = 3; switch(day{ case 0: console.log("今天周一"; break; case 1: console.log("今天周二"; break; case 2: console.log("今天周三"; break; default: console.log("今天不是周一、二、三" } </script> </body>

用三目运算符来代替if...else...

<表达式>？y ：x

<body>
    <script>
        var num = 10;
        var result = num % 2 == 0 ? "是偶数" : "是奇数";
        console.log(result
    </script>
</body>

字符串

<body>
    <script>
        //字符串要么使用单引号嵌套双引号，要么使用双引号嵌套单引号
        var str1 = '我说"你好呀"';
        //如果想使用双引号嵌套双引号，单引号嵌套单引号或者换行就需要用到反斜杠
        var str2 = '我说\'你好呀\'';
        var str3 = "今天天气真好，\
        我想出去玩";
        console.log(str1,str2,str3;
    </script>
</body>

用属性length来查看字符串长度

<body> <script> var str3 = "今天天气真好，\ 我想出去玩"; console.log(str3.length; </script> </body>

charAT查看索引位置的字符串

<body> <script> var str = "yetangjian的博客园"; console.log(str.charAt(1; // 查看索引1位置的字符串e console.log(str.charAt(str.length -1;//查看最后一位的字符园 //如果索引不存在会打印出来空字符串 console.log(str.charAt(-1; console.log(str.charAt(str.length+1; </script> </body>

concat连接两个字符串，创建新的字符串，不影响老的字符串（拼接的如果不是字符串，也会先转为str再拼接）

<body>
    <script>
        var str = "yetangjian的博客园";
        var str1 = "丰富多彩呀~~";
        var result = str.concat(str1;
        document.write(result;//页面上展示出来拼接后的
        // 可以接收多个参数拼接
        var str3 = "看的停不下来了";
        document.write(str.concat(str1,str3;
    </script>
</body>

concat和+号的区别

concat不管什么，都会转字符串拼接

<body> <script> var num1 = 1; var num2 = 2; var str3 = "3"; document.write("".concat(num1,num2,str3; // 123 document.write(num1+num2+str3;// 33 </script> </body>

substring截取字符串，两个参数，参数1开始的位置的索引，第二个参数结束位置的索引（结束索引位置不取，左闭右开）

<body> <script> var str = "yetangjian的博客园"; // 截取博客园三个字,左闭右开 document.write(str.substring(11,str.length; // 省略第二个参数，直接取到最后 console.log(str.substring(11; //博客园 //在substring中参数如果是负数，直接当索引0用 </script> </body>

substr用法基本和substring一样，区别是第二个参数不在是结束位置的索引，而是字符串的长度

<body> <script> var str = "yetangjian的博客园"; var result = str.substr(11,3;//从索引位置11开始取，截取长度为3 document.write(result;//博客园 //如果省略第二个参数，直接取到结尾，如果第二个参数是个负数，会变为0即字符串长度为0的空字符串 console.log(str.substr(11;//博客园 console.log(str.substr(11,-4;//空字符串 //如果第一个参数是负数，则从后向前计算字符位置，这个和之前的字符串不太一样 console.log(str.substr(-3; </script> </body>

indexof查询字符串第一次出现的位置，不存在则返回-1

<body> <script> var str = "yetangjian的博客园"; // 判断上述字符换中是否存在博客园 if (str.indexOf("博客园" > -1{ console.log("存在"; }else{ console.log("不存在"; } // 参数2位置开始索引位置 console.log(str.indexOf("博客园",12;//从12索引位置不存在了，所以返回-1 </script> </body>

trim方法去除首尾两端的空格，包括\r \n \t都能去掉

<body> <script> var str = " yetangjian的博客园 "; console.log(str;// yetangjian的博客园 console.log(str.trim(;//yetangjian的博客园 </script> </body>

split方法是按分隔符，返回一个分割出来的字符串数组

<body> <script> var str = "yetangjian|的|博客园"; var result = str.split("|"; console.log(result;// ["yetangjian", "的", "博客园"] console.log(str.split("";//["y", "e", "t", "a", "n", "g", "j", "i", "a", "n", "|", "的", "|", "博", "客", "园"] //存在第二个参数可以设置获取数组的长度 console.log(str.split("",2;//["y", "e"] </script> </body>

数组

查询、追加

<body> <script> var arr = []; arr[1] = 1 // 通过下标加入数组值 console.log(arr console.log(arr[1]//1 console.log(arr.length//2 </script> </body>

遍历

<body> <script> var city = ["shanghai","guangzhou","beijing"] // for for (var i=0;i<city.length;i++{ console.log(city[i]; } // while i = 0 while (i < city.length{ console.log(city[i]; i++ } // for in for (var i in city{ console.log(city[i]; } </script> </body>

数组静态方法Array.isArray(：判断是否为数组

<body> <script> var city = ["shanghai","guangzhou","beijing"] console.log(typeof(city;//object console.log(Array.isArray(city;//true </script> </body>

push(/pop(方法：改变原数组末尾增加或删除

<body> <script> var city = ["shanghai","guangzhou","beijing"] //push city.push("nanjing"; city.push("fujian","xiamen";//向尾部添加一个或多个 console.log(city; //pop var deleteend = city.pop(; console.log(deleteend;//"xiamen" console.log(city;//["shanghai", "guangzhou", "beijing", "nanjing", "fujian"] </script> </body>

shift(/unshift：改变原数组在数组起始位置添加或删除

<body> <script> var city = ["shanghai","guangzhou","beijing"]; //shift var shiftfirst = city.shift(; console.log(shiftfirst;//shanghai console.log(city;//["guangzhou","beijing"] //unshift city.unshift("hefei","chongqing"; console.log(city;// ["hefei", "chongqing", "guangzhou", "beijing"] </script> </body>

join按指定分隔符拼接数组成员，默认都是逗号

<body> <script> var city = ["shanghai","guangzhou","beijing"]; //join document.write(city.join(;//shanghai,guangzhou,beijing document.write(city.join("|";//shanghai|guangzhou|beijing document.write(city.join("";//shanghaiguangzhoubeijing //join可以把数组拼成字符串，split可以把字符串拆成数组 var result = city.join("|"; console.log(result; var newArr = result.split("|";// shanghai|guangzhou|beijing console.log(newArr;//["shanghai", "guangzhou", "beijing"] </script> </body>

concat数组合并

<body> <script> var city = ["shanghai","guangzhou","beijing"]; var contry = ["China","Japan"] //concat和+号区别 console.log(city + contry;//变为字符串了shanghai,guangzhou,beijingChina,Japan console.log(city.concat(contry;//还是数组["shanghai", "guangzhou", "beijing", "China", "Japan"] //使用concat数组追加,注意看下面例子 console.log(city.concat(1,2,3,[4,5,6];// ["shanghai", "guangzhou", "beijing", 1, 2, 3, 4, 5, 6] </script> </body>

reverse翻转

<body> <script> var city = ["shanghai","guangzhou","beijing"]; console.log(city.reverse(;//["beijing", "guangzhou", "shanghai"] //翻转字符串 var word = "apple"; console.log(word.split("".reverse(.join("";//elppa </script> </body>

indexof返回元素在数组中第一次出现的位置，没有则返回-1

<body> <script> var city = ["shanghai","guangzhou","beijing","shanghai"]; console.log(city.indexOf("shanghai";//0 console.log(city.indexOf("nanjing";//-1 //第二个参数为起始位置 console.log(city.indexOf("shanghai",2;//3 </script> </body>

编程笔记 » JavaScript快速入门(二)