JavaScript基础语法
文章目录
JavaScript是弱类型脚本语言，声明变量时无需指定变量的数据类型。JavaScript变量的数据类型是解释时动态决定的。但是JavaScript的值保存在内存中，也是数据类型的。
JavaScript的使用
JavaScript代码可以直接写在HTML文件中，也可以单独的写在后缀名为js的文件中。
1内部JavaScript: 使⽤ <script> ... </script>标签
<script type="text/javascript">
...js代码
</script>
** 2内联JavaScript处理器**
- 就是将js代码写⼊html代码中，如在html标签的事件中或超级链接⾥。
<button onclick="javaScript语⾔"></button>
<a href="javascript:alert('aa');alert('bb')">点击</a>
3外部JavaScript
- 使⽤外部导⼊js会使代码更加有序，更易于复⽤，且没有了脚本的混合，HTML也会更加易
读。
<script type="text/javascript" src="my.js"></script>
运算符
算数运算符
| 运算符 | 描述 | 例子 | x 运算结果 | y 运算结果 |
|---|---|---|---|---|
| + | 加法 | x=y+2 | 7 | 5 |
| - | 减法 | x=y-2 | 3 | 5 |
| * | 乘法 | x=y*2 | 10 | 5 |
| / | 除法 | x=y/2 | 2.5 | 5 |
| % | 取模（余数） | x=y%2 | 1 | 5 |
| ++ | 自增 | x=++y | 6 | 6 |
| – | 自减 | x=–y | 4 | 4 |
注意事项：
- 如果对字符串进行加法操作，会进行拼串
- 任何值和字符串做加法运算，都会转换成字符串进行拼接，利用这一特点可以将任意类型转换为字符串，只需要加上一个空串，这是一种隐式的类型转换，运算顺序从左到右 1+2+“3”; // “33” 1+“2”+3; // “123”
- var a=3/2; // 1.5
- 任何值和NaN做运算，都得NaN
+作为符号
- +正号，对非Number值，会先转换为Number，然后再运算，可以做隐式转换1++“2”+3; // 6
- -负号，对非Number值，会先转换为Number，然后再运算
赋值运算符
| 运算符 | 例子 | 等同于 | 运算结果 |
|---|---|---|---|
| = | x=y | — | x=5 |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
注意事项：
- 将符号右侧的值赋值给左侧的变量
- x+=y等价于x=x+y，注意事项和算术运算符没有区别
比较运算符
| 运算符 | 描述 | 比较 | 返回值 |
|---|---|---|---|
| == | 等于 | x==8 | false |
| x==5 | true | ||
| === | 绝对等于（值和类型均相等） | x===“5” | false |
| x===5 | true | ||
| != | 不等于 | x!=8 | true |
| !== | 不绝对等于（值和类型有一个不相等，或两个都不相等） | x!==“5” | true |
| x!==5 | false | ||
| > | 大于 | x>8 | false |
| < | 小于 | x<8 | true |
| >= | 大于或等于 | x>=8 | false |
| <= | 小于或等于 | x<=8 | true |
逻辑运算符
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x5 || y5) 为 false |
| ! | not | !(x==y) 为 true |
注意事项：
- !非，可以用来对一个值进行非运算，对一个布尔值进行取反操作；对一个值两次取反，则不会变化，可以用来进行隐式转换成布尔类型；对非布尔值取反，会将其转换为布尔值，再取反
- &&与，对符号两侧的值进行与运算并返回结果，一假即假；该运算属于短路运算，若第一个为false，则不会看第二个；若第一个为true则必然返回第二个值，若第一个值为false则必然返回第一个值
- ||或，对符号两侧的值进行或运算并返回结果，一真即真该运算属于短路运算，若第一个为true，则不会看第二个；若第一个为true则必然返回第一个值，若第一个值为false则必然返回第二个值
- && ||非布尔值的情况：先将其转换为布尔值再运算，并返回原值
三目运算符
var number=(1+1==2)?true:false; //返回true
var result=(1+1!=2)?"yes":"no" //返回no
注意事项:
- 和Java的格式一样，其中A?B：C中的B和C可以是不同类型。
typeof 和 instanceof运算符
typeof
typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。它返回值是一个字符串，该字符串说明运算数的类型。typeof 可以用来检测给定变量的数据类型。
基本数据类型
var a = [34, 4, 3, 54],
b = 34,
c = 'adsfas',
d = function () { console.log('我是函数') },
e = true,
f = null,
g;
console.log(typeof (a));//object
console.log(typeof (b));//number
console.log(typeof (c));//string
console.log(typeof (d));//function
console.log(typeof (e));//boolean
console.log(typeof (f));//object
console.log(typeof (g));//undefined
对象，函数
1.对于对象、数组、null 返回的值是 object 。比如typeof(window)，typeof(document)，typeof(null)返回的值都是object。
2.对于函数类型，返回的值是 function。比如：typeof(eval)，typeof(Date)返回的值都是function。
var a = null;
alert(typeof(a)) //object
alert(typeof(Date)); // function(Date使用前需要实例化的原因)
alert(typeof(null)); // object
alert(typeof(undefined)) // undefined
alert(typeof(NaN)) // number
alert(typeof(NaN == undefined)) // boolean
alert(typeof(NaN == NaN)) // boolean
var str = '123abc'
alert(typeof(str++)) // number
alert(str) // NaN
instanceof
-
instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上。通常来讲，使用 instanceof 就是判断一个实例是否属于某种类型。
-
a instanceof b：判断a是否为b的实例，可以用于继承关系中
-
b是c的父对象，a是c的实例，a instanceof b 与 a instanceof c 结果均为true
简单案例
function Person(){};
var p =new Person();
console.log(p instanceof Person);//true
复杂案例
function Person(){};
function Student(){};
var p =new Person();
Student.prototype=p;//继承原型
var s=new Student();
console.log(s instanceof Student);//trueconsole.log(s instanceof Person);//true
分支语句
if语句
if-else语句
if-else if-else语句
switch分支语句
循环语句
for循环
最经典的循环之一，大部分编程语言都有for循环
格式
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
实例
盒子中有6个小球，将小球一一取出;
for(var i=1;i<7;i++){
console.log('第'+i+"个小球");
}
从上面的例子中，您可以看到：
Statement 1 在循环开始之前设置变量 (var i=1)。
Statement 2 定义循环运行的条件（i 必须小于 7)。
Statement 3 在每次代码块已被执行后增加一个值 (i++)。
while循环
最经典的循环之一，大部分编程语言都有while循环
语法如下所示：
while(condition){
// 要执行的代码块
}
condition 是循环的条件，只有当循环条件成立时，才会执行花括号 {} 中的代码，如果条件不成立则不会执行代码。
当我们使用 while 循环时，只要指定条件为 true，循环就可以一直执行。
并且只要条件一直满足，就可以实现一个无限循环，例如：
while(true){
console.log("1");
}
当我们不知道循环次数，但是知道结束条件时可以选择如下格式。
condition 是跳出循环的条件，如果不满足，执行代码块，代码块必须能不满足逐渐走向满足，不然就是死循环了！
while(true){
if(condition){
break;
}
else{
//执行的代码块
}
}
do-while循环
格式
do{
循环语句；
}while(表达式)；
注意事项：
- while后面的分号不能忘记写。
- 循环条件中使用的变量需要经过初始化。
- 循环体中，应有结束循环的条件，否则会造成死循环。
do-while和while的区别
do...while循环和while循环的区别：
while循环是先判断表达式的真假，然后再执行循环语句，所有如果表达式为假的话，就不会执行循环语句。
do...while循环是先执行一次循环语句，然后再去判断一次表达式的真假。所以即使表达式为假，也会执行一次循环语句。
while循环用的情况多，如果while处理逻辑比较别扭时，就用do...while循环。
增强for循环
JavaScript为了方便我们遍历操作集合所新增的循环，有一下两种：
for..in循环
for (property in obj) {
console.log(property, obj[property]);
}
123
for..of循环
for (element of iterable) {
console.log(element);
}
123
区别
-
for..in循环属历史遗留，用于遍历对象的属性(数组的索引值也算属性)。
但有一个缺点：如果手动向数组添加成员属性，则：
虽然数组的length不变，但用for..in遍历数组会遍历到那些新定义的属性。 -
for..of循环修复了for..in存在的问题，他只遍历属于对象本身的属性值。
且这个对象必须是iterable可被迭代的。如Array, Map, Set。
数组
数组（Array）是一个用于保存多个数据的结构，按照线性结构来保存的。
1、创建数组
两种格式：
- 基本格式创建
- Array()对象创建
var arrayName = []; // 创建空数组
var arrayName = ['赵', '钱', '孙', '李'];
var arrayName = new Array(); // 创建空数组
var arrayName = new Array('赵', '钱', '孙', '李');
2、数组的使用
- 获取 或 设置数组中的元素，一律使用下标（0—length-1）
// 取值
var arrayName = ['赵', '钱', '孙', '李'];
var zhao = arrayName[0] ; // '赵'
var li = arrayName[3] ; // '李';
var kong = arrayName[4] ; // undefined;
// 赋值
arrayName[0] = "周"; // ['周', '钱', '孙', '李']
arrayName[4] = "吴" // ['周', '钱', '孙', '李', '吴'] 添加元素
arrayName[6] = "郑" // ['周', '钱', '孙', '李', '吴', , '郑'] arrayName[5]自动为undefined
3、获取数组的长度
- 属性：length
- 用法：array.length
// 遍历数组
var arrayName = ['赵', '钱', '孙', '李'];
for(var i = 0; i < arrayName.length; i++){
console.log(arrayName[i])
}
// 找到插入最新元素时的位置
var arrayName = ['赵', '钱', '孙', '李'];
arrayName[arrayName.length] = '周' // ['赵', '钱', '孙', '李', '周']
4、关联数组
- 索引数组：以数字为下标
- 关联数组：以字符串为下标
var arrayName = [];
arrayName["zhao"] = "赵";
arrayName["qian"] = "钱";
arrayName["sun"] = "孙";
arrayName["li"] = "李";
arrayName[0] = "周";
arrayName[1] = "吴";
arrayName[2] = "郑";
arrayName[3] = "王";
arrayName.length // 4 只能计算索引数组的长度
// 遍历关联数组或者索引数组的方式
for (var i in arrayName){
console.log(arrayName[i])
}
数组的常用API
- 1、toString()
- 作用：将数组转换为字符串，并返回，不改变原数组
var arrayName = ['赵', '钱', '孙', '李'];
var str = arrayName.toString();
console.log(str); // 赵,钱,孙,李
console.log(arrayName) // ['赵', '钱', '孙', '李']
1234
- 2、join(seperator)
- 作用：返回一个由指定连接符连接的字符串
- 参数：seperator（连接符）
var arrayName = ['赵', '钱', '孙', '李'];
var str = arrayName.join("|");
console.log(str); // 赵|钱|孙|李
console.log(arrayName) // ['赵', '钱', '孙', '李']
1234
- 3、concat(arr1，arr2…)
- 作用：拼接多个数组，并返回拼接后的数组，且不改变原数组
var arrayName1 = ['赵', '钱', '孙', '李'];
var arrayName2 = ['周', '吴', '郑', '王'];
var arrayName3 = [];
console.log(arrayName3.concat(arrayName1,arrayName2));
// ['赵', '钱', '孙', '李', '周', '吴', '郑', '王']
console.log(arrayName3); // [],不会改变原数组
123456
- 4、reverse()
- 作用：数组反转，返回反转后的数组，会改变原数组
var arrayName1 = ['赵', '钱', '孙', '李'];
var arrayName2 = arrayName1.reverse();
console.log(arrayName1); // ["李", "孙", "钱", "赵"]
console.log(arrayName2); // ["李", "孙", "钱", "赵"]
1234
- 5、sort()
- 作用：对数组进行排序，默认情况下，按照元素的Unicode码进行排序，并会改变原数组
- 注意：允许通过自定义的排序函数来指定数字的排序规则
- 语法：arrayName.sort(排序函数)
var arrayName1 = [103, 36, 57, 88, -1, -204, 93];
console.log(arrayName1.sort()) //[-1, -204, 103, 36, 57, 88, 93]
console.log(arrayName1) //[-1, -204, 103, 36, 57, 88, 93]
// 自定义排序函数
function sortAsc(a, b) {
return a - b; // 升序排序,冒泡排序算法，a-b>0时，交互位置
}
console.log(arrayName1.sort(sortAsc)) // [-204, -1, 36, 57, 88, 93, 103]
arrayName1.sort(function (a, b) {return b - a}) // [103, 93, 88, 57, 36, -1, -204] 匿名函数，降序排列
console.log(arrayName1)
1234567891011
- 6、进出栈操作
- 作用：提供快速操作数组头部或尾部的方法，改变原数组
| 函数 | 说明 | 语法 |
|---|---|---|
| push() | 入栈，向数组的尾部添加新元素，并返回新数组的长度 | arrayName.push(“周”)，返回数字 |
| pop() | 出栈，删除并返回数组尾部的元素 | arrayName.pop()，返回尾部元素 |
| unshift() | 向数组头部添加新元素，并返回新数组长度 | arrayName.unshift(“周”)，返回数字 |
| shift() | 删除并返回数组头部的元素 | arrayName.shift()，返回头部元素 |
var arrayName = ["赵", "钱"];
console.log(arrayName.push("孙")); // 3
console.log(arrayName); // ["赵", "钱", "孙"]
console.log(arrayName.pop()) // 孙
console.log(arrayName); // ["赵", "钱"];
console.log(arrayName.unshift("孙")); // 3
console.log(arrayName); // ["孙", "赵", "钱"]
console.log(arrayName.shift()); // 孙
console.log(arrayName); //["赵", "钱"];
123456789101112
- 7、二维数组
- 说明：数组中的数组
var arrayName = [];
arrayName.push([1,2,3]);
arrayName.push([4,5,6]);
arrayName.push([7,8,9]);
console.log(arrayName);
console.log(arrayName[1][1]); // 5
扫一扫
4974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
