最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

焦点！JavaScript快速入门（二）

来源：博客园

文件中引入JavaScript

嵌入到HTML文件中

在body或者head中添加script标签


(资料图片)

<script>    var age = 10;    console.log(age);</script>

引入js文件

创建一个js文件

var age = 20;console.log(age);

在html文件中src引入改文件

    <script src="./age.js"></script>

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

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>

数据类型

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

复合数据类型：对象（一个对象可以看做是存放各种值得容器，由基础数据类型组成）

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

特殊数据类型：null和undefined

typeof可以用来判断基础数据类型

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

算数运算符

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

自增或者自减相当于当前值+1或者-1

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

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

运算符号在前是先自增再运行，运算符号在后是先运行在自增

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

赋值运算符

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

比较运算符

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

== 和 ===区别

    <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>

布尔运算符

取反运算符（！）

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

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

且运算符（&&）

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

活运算符（||）

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

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

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

    <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>

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

<表达式>？y ：x

表达式正确返回y，错误则返回x

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

字符串

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

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

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

charAT查看索引位置的字符串

    <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>

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

同样也可以用“+”拼接

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

concat和+号的区别

+号会先运算数字类型在转，所以下方会先做1+2后再转字符串

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

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

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

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

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

    <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>

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

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

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

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

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

    <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>

数组

查询、追加

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

遍历

    <script>        var city = ["shanghai","guangzhou","beijing"]        // for         for (var i=0;i

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

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

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

    <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>

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

    <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>

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

    <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>

concat数组合并

    <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>

reverse翻转

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

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

    <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>

关键词：