文件中引入JavaScript
嵌入到HTML文件中
在body或者head中添加script标签
<script>
var age = 10;
console.log(age);
</script>
引入js文件
创建一个js文件
var age = 20; console.log(age);
在html文件中src引入改文件
<body>
<script src="./age.js"></script>
</body>
引入网络来源文件，和引入本地的js文件一样，通过src
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</body>
数据类型
原始数据类型：基本的数据类型（数值、字符串、布尔值）
复合数据类型：对象（一个对象可以看做是存放各种值得容器，由基础数据类型组成）
var user = {
"name":"ming",
age:20,
is_register:True
}
特殊数据类型：null和undefined
typeof可以用来判断基础数据类型
<body>
<script>
var age = 20;
console.log(typeof age);
</script>
</body>
算数运算符
加减乘除取余：+ 、-、*、/、%
自增或者自减相当于当前值+1或者-1
<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 = x*y |
| /= | 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
表达式正确返回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和+号的区别
+号会先运算数字类型在转，所以下方会先做1+2后再转字符串
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>
标签：city,shanghai,console,入门,JavaScript,str,var,快速,log From： https://www.cnblogs.com/yetangjian/p/17253215.html