JavaScript基本语法
时间：2021-03-13 11:59:08
收藏：0
阅读：20
2.2基本语法入门
浏览器必备调式须知
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本语法入门</title>
<script>
//JavaScript严格区分大小写
//console.log(score) 打印一个变量（在浏览器的控制通路打印变量）System.out.print()
// 1.定义变量 变量类型 变量名 = 变量值
var score = 1;
// var name ="xiaohua";
// alert(num);
// 2. 条件控制
if (score>60 && score<70){
alert("60~70")
}else if (score>70 && score<80){
alert("70~80")
}else {
alert("other")
}
/* 多行注释*/
</script>
</head>
<body>
</body>
</html>
2.3数据类型
数值，文本，图形，音频，视频。。。。
number
js不区分小数和整数。Number
123 //整数123
123.1 //浮点数123.1
1.123e3 //科学计数法
-99 //复数
NaN //not a number
Infinity //表示无限大
变量
var $a 只要不能以数字开头和一些特殊符号
字符串
‘abd’ "abc" ‘\n‘
布尔值
true,false
逻辑运算
&& 两个都为真，结果为真
|| 一个为真，结果为真
！ 真即假，假即真
比较运算符!!!! 重要！
=
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于(类型一样，值一样，结果true)
这是一个JS的缺陷。坚持不要使用==比较
须知：
- NaN===NaN,这个与所有的数值都不相等，包括自已
- 只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题
caches.log((1/3)===(1-2/3));
尽量避免使用浮点数进行运算，存在精度问题
console.log (Math.abs(1/3-(1-2/3))<0.000001);
null和undefined
- null 空
- undefined 未定义
数组
一些列相同类型的对象
var arr = [1,2,3,‘hello‘,null,true];
Java中数值必须是相同类型的对象，JS中不需要这样
取数组下标：如果越界了，就会 报undefined
对象
对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个不需要添加
//Person person = new Person(1,2,3,4,5);
var person = {
name:"xiao",
age:3,
tage:[‘jk‘,‘java‘]
}
person.name
>"xiao"
person.age
>3
取对象的值
2.4 严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>严格检查模式</title>
/*
前提：IDEA需要设置支持ES6语法
‘use strict‘; 严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行
局部变量建议都使用 let 去定义。
*/
<script>
‘use strict‘;
//全局变量
let i = 1;
//Es6 let
</script>
</head>
<body>
</body>
</html>
3.数据类型讲解
3.1字符串
1.正常字符串我们使用单引号，或者双引号包裹
2.注意转义字符 \
\‘
\n
\t
\u4e2d \u#### Unicode字符
\x41 Ascll字符
3.多行字符串编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串</title>
<script>
‘use strict‘;
console.log(‘a‘);
console.log("a")
//tab 上面的那个键 esc键下面
var msg = `hello
你好啊
world`
</script>
</head>
<body>
</body>
</html>
4.模板字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串</title>
<script>
‘use strict‘;
let name = "xiao";
let age = 3
let msg = `你好，${name}`
console.log(msg)
</script>
</head>
<body>
</body>
</html>
5.字符串长度
str.length
console.log( student.length)
7
6.字符串的可变性，不可变
7.大小写转换
//注意，这里是方法，不是属性了
console.log(student.toUpperCase()); 转成大写
STUDENT
console.log(student.toLowerCase()); 转成小写
- 获得指定的下标
console.log(student.indexOf(‘t‘))
1
9.截取字符串
console.log(student.substring(1)); //从第一个字符串截取到最后一个字符串
tudent debugger eval code:1:9
console.log(student.substring(1,3));[包头不包尾]
3.2数组
Array可以包含任意的数据类型
let arr = [1,2,3,4,5,];
console.log(arr);
Array(5) [ 1, 2, 3, 4, 5 ]
arr[0]
arr[0] = 1;
1.长度
arr.length;
注意：加入给arr.length赋值，数组大小就会发生变化 ,如果赋值过小，元素就会丢失
console.log(arr);
Array(5) [ 1, 2, 0, 4, 5 ]
arr.length = 10;
10
console.log(arr);
Array(10) [ 1, 2, 0, 4, 5, <5 empty slots> ]
- indexOf, 通过元素获得下标索引
arr.indexOf(2);
1
字符串的”1“和数字1是不同的
3.slice() 截取Array的一部分，返回一个新数组，类似于String中的substring
arr.slice(3)
Array(3) [ 5, "erf", "1" ]
arr.slice(1,5)
Array(4) [ 3, 4, 5, "erf" ]
4, push() pop()
push:压入到尾部
pop:弹出尾部的一个元素
arr
Array(6) [ 2, 3, 4, 5, "erf", "1" ]
arr.push(‘w‘,‘r‘);
8
arr
Array(8) [ 2, 3, 4, 5, "erf", "1", "w", "r" ]
arr.pop()
"r"
arr
Array(7) [ 2, 3, 4, 5, "erf", "1", "w" ]
5.unshift() shift() 头部
unshift:压入到头部
shift:弹出头部的一个元素
arr
Array(7) [ 2, 3, 4, 5, "erf", "1", "w" ]
arr.unshift("e","d");
9
arr
Array(9) [ "e", "d", 2, 3, 4, 5, "erf", "1", "w" ]
arr.shift()
"e"
arr
Array(8) [ "d", 2, 3, 4, 5, "erf", "1", "w" ]
6，排序sort()
Array(3) [ "B", "C", "A" ]
arr.sort();
Array(3) [ "A", "B", "C" ]
7.元素反转reverce()
Array(3) [ "A", "B", "C" ]
arr.reverse()
Array(3) [ "C", "B", "A" ]
8.替换 concat() 注意：concat()并没有修改数组，只是会返回一个新的数组
Array(3) [ "C", "B", "A" ]
arr.concat(1,2,3);
Array(6) [ "C", "B", "A", 1, 2, 3 ]
arr
Array(3) [ "C", "B", "A" ]
9.连接符join 打印拼接数通，使用特定的字符串连接
arr.join(‘-‘);
"C-B-A"
10.多维数组
arr[[1,2],[3,4],[5,6]];
arr[1][1];
数组：存储数据（如何存，如何取，方法都可以自己实现！）
3.3 对像
若干个键值对
var 对像名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值，
属性名：属性值
}
//定义了一个person对象，它有四个属性！
<script>
‘use strict‘;
let person;
person = {
name: "xiao",
age: 3,
email: "1146@qq.com",
score: 0
};
</script>
Js中的对象，{....}表示一个对象，键值对描述属性xxxx : xxxx，多个个属性之间使用逗号隔开，最后一个属性不加逗号！
JavaScript中的所有键都是字符串，值是任意对象！
1.对象赋值
person.name = "wang";
"wang"
person.name
"wang"
2.使用一个不存在的对象属性，不会报错！ 只是undefined
3.动态的删减属性,通过delete 删除对象的属性
Object { name: "wang", age: 3, email: "1146@qq.com", score: 0 }
delete person.name
true
person
Object { age: 3, email: "1146@qq.com", score: 0 }
4.动态的添加,直接给新的属性添加值即可
person
Object { age: 3, email: "1146@qq.com", score: 0 }
person.haha = "haha";
"haha"
5.判断属性值是否在这个对象中！xxx in xxx
‘age‘ in person
true
//继承
‘toString‘ in person
true
6.判断一个属性是否是这个对象自身拥有的hasOwnproperty()
person.hasOwnProperty(‘age‘)
true
3.4 流程控制
if判断
<script>
‘use strict‘;
let age = 3;
if (age>3){
alert("haha");
}else {
alert("wowo");
}
</script>
while循环,避免程序死循环
while (age<100){
age = age + 1;
console.log(age);
}
while (true){ //殖死循环
alert(123)
}
do{
age = age + 1;
console.log(age);
} while(age<100);
for循环
for (let i = 0;i < 10; i++){
console.log(i)
}
forEach 循环 5.1特性
<script>
‘use strict‘;
let age = [1,2,2,,2,2,,4,5,,555,];
age.forEach(function (value) {
console.log(value)
})
</script>
for...in
<script>
‘use strict‘;
let age = [1,2,2,,2,2,,4,5,,555,];
//函数 for(Type str:el){}
//for(var idnex in object){}
for(let num in age){
if(age.hasOwnProperty(num)){
console.log("在线")
console.log(age[num])
}
}
</script>
3.5 Map和Set ES6的新特性
<script>
‘use strict‘;
//ES6 Map
//学生的成绩，学生的名字
let map = new Map([[‘tom‘,100],[‘jack‘,90],[‘ssss‘,80]]);
let name = map.get(‘jack‘);//通过key获得value
map.set(‘tom‘,123789);//新增或者修改
map.delete(‘ssss‘);// 删除一个元素
</script>
Set:无序不重复的集合
let set = new Set([3,2,3,4,3]); //set可以去重
set.add(5); //添加
set.delete(2); //删除
console.log(set.has(3)); //是否包含某个元素
3.6 iterator 用于遍历迭代 Map,Set es6新特性
//通过for of 可以输出数 /for in 输出下标
//遍历数组
let arr = [3,4,5];
for (let x of arr){
console.log(x)
}
遍历map
let map = new Map([["sss",80],["ss",0],["s",8]]);
for (let x of map){
console.log(x);
}
遍历set
let set = new Set([6,8,9,56]);
for (let x of set){
console.log(x)
}
原文：https://www.cnblogs.com/202116xi/p/14527610.html
评论（0）