js：JavaScript 核心语法快速入门
【摘要】
变量与常量
// 变量
let a = 5;
// 常量, 定义后不能修改
const a = 5;
a = 6; // TypeError: Assignment to constant varia...
变量与常量
// 变量
let a = 5;
// 常量, 定义后不能修改
const a = 5;
a = 6; // TypeError: Assignment to constant variable.
- 1
- 2
- 3
- 4
- 5
- 6
输出
// console.log 控制台打印，可传递多个参数
let a = 5;
let b = 6;
console.log(a); // 5
console.log(a, b); // 5 6
- 1
- 2
- 3
- 4
- 5
数据类型
// 基本类型
let i = 5; // Number 整数
let f = 5.2; // Number 浮点数
let b = true; // Boolean 布尔
let s = 'hello'; // String 字符串
let n = null; // 空
u; // 直接访问不存在的变量 undefined
let un = undefined; // 可以赋值为undefined
// 引用类型
let arr = [1, 2, 3] // Array 数组
let obj = {a: 1, b: 2} // Object对象
function func(){return a + b} // Function函数
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
运算符
// 数学运算符
1 + 2 // 加法 3
1 - 2 // 减法 -1
1 * 2 // 乘法 2
1 / 2 // 除法 0.5
3 % 2 // 取余 1
++1 // 值+1 2
--1 // 值-1 0
2 ** 3 // 乘方 8
// 比较运算符
2 < 3 // 小于 true
2 <= 3 // 小于等于 true
2 > 3 // 大于 false
2 >= 3 // 大于等于 false
2 == '2' // 相等运算符 true 隐式类型转换
2 === '2' // 严格相等运算符 false 严格比较 类型和值都相等才为真
// 逻辑运算符
true && false // 与 false
true || false // 或 true
!true // 非 false
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
分支语句
// if分支1
let a = 5;
if(a > 2){
// do something
} else{
// do something
}
// if分支2
if(a > 2){
// do something
} else if (a < 2){
// do something
}else{
// do something
}
// switch分支
switch(a){
case 1:
// do something
break;
case 2:
// do something
break;
default:
// do something
}
// 三目运算符
a > 5 ? '大于5': '小于等于5'
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
循环语句
// for循环
for(let i = 0; i < 10; 1++){
// do something
}
// while循环
let j = 0;
while(j < 10){
j++;
}
// do while循环
let k = 0;
do{
j++;
} while(j < 10)
// continue 中断当次循环
for(let i = 0; i < 10; 1++){
if(1 === 5){
continue;
}
console.log(i);
}
// break 终止循环
for(let i = 0; i < 10; 1++){
if(1 === 5){
break;
}
console.log(i);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
函数
// 定义函数
function func(a, b){
return a + b;
}
// 调用函数
func(1, 2)
// 匿名函数
const func = function(a, b){
return a + b;
}
// 箭头函数
const func = (a, b) => {
return a + b;
}
// 如果函数体只有一个返回语句，可以省略return
const func = (a, b) => a + b;
// 如果只有一个参数，可以省略小括号
const func = a => a * 2;
// 如果没有参数，小括号不能省略
const func = () => 5;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
数组
// 定义数组
let arr = [1, 2, 3]
// 取值，索引从0开始
let arr = [1, 2, 3]
console.log(arr[0]) // 1
// 赋值
let arr = [1, 2, 3]
arr[0] = 4
console.log(arr) // [4, 2, 3]
// 获取数组长度
let arr = [1, 2, 3]
console.log(arr.length) // 3
// 添加元素到数组末尾
let arr = [1, 2, 3]
arr.push(4) // [1, 2, 3, 4]
// 添加元素到数组头部
let arr = [1, 2, 3]
arr.unshift(4) // [4, 1, 2, 3]
// 移除数组末尾元素并返回
let arr = [1, 2, 3]
arr.pop() // 3
// 移除数组头部元素并返回
let arr = [1, 2, 3]
arr.shift() // 1
// 删除元素
let arr = [1, 2, 3]
arr.splice(2, 1)
console.log(arr);
// [ 1, 2 ]
// 插入元素
let arr = [1, 2, 3]
arr.splice(2, 0, 4)
console.log(arr);
// [ 1, 2, 4, 3 ]
// 合并两个数组
let arr = [1, 2, 3]
let arr2 = arr.concat([4, 5, 6]);
console.log(arr2);
// [ 1, 2, 3, 4, 5, 6 ]
// 数组切片[start, end)
let arr = [1, 2, 3]
let arr2 = arr.slice(1, 3);
console.log(arr2);
// [ 2, 3 ]
// 分隔符拼接
let arr = [1, 2, 3]
let str = arr.join('-');
console.log(str);
// 1-2-3
// 反转数组
let arr = [1, 2, 3]
arr.reverse()
console.log(arr);
// [ 3, 2, 1 ]
// 元素排序
let arr = [2, 1, 3]
arr.sort()
console.log(arr);
// [ 1, 2, 3 ]
// 遍历数组
// for
let arr = [1, 2, 3]
for(let i=0; i< arr.length; i++){
console.log(arr[i]);
}
// 1, 2, 3
// for...of
let arr = [1, 2, 3]
for(let item of arr){
console.log(item);
}
// 1, 2, 3
// for...in
let arr = [1, 2, 3]
for(let index in arr){
console.log(arr[index]);
}
// 1, 2, 3
// forEach
let arr = [1, 2, 3]
// 参数：当前元素，当前索引，数组本身
arr.forEach((item, index, arr)=>{
console.log(item)
})
// 1, 2, 3
// map 遍历数组并返回同等长度的新数组
let arr = [1, 2, 3]
let newArr = arr.map((item, index, arr)=>{
return item * 2;
})
console.log(newArr) // [2, 4, 6]
// filter 遍历数组并返回满足条件的新数组
let arr = [1, 2, 3]
let newArr = arr.filter((item, index, arr)=>{
return item >= 2;
})
console.log(newArr) // [2, 3]
// 解构赋值，一次性将数组元素赋值给多个变量
let [a, b] = [1, 2, 3]
console.log(a, b) // 1 2
let [a, ,b] = [1, 2, 3]
console.log(a, b) // 1 3
// rest运算符 把没解构的数组保存起来
let [a, ...rest] = [1, 2, 3]
console.log(a, rest) // 1 [2, 3]
// spread展开运算符 复制一个数组
let arr = [1, 2, 3]
let arr2 = [...arr]
console.log(arr2) // [1, 2, 3]
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
对象
// 定义对象
let obj = {
a: 1,
b: true,
f(){}, // 函数
arr: [1, 2, 3],
obj: { // 子对象
c: '2'
}
}
// 访问属性 2种方式
console.log(obj.a) // 1
// 方括号形式，字符串形式的属性名
console.log(obj['a']) // 1
// 保存了属性字符串的变量
let a = 'a'
console.log(obj[a]) // 1
// 赋值
obj.a = 2
console.log(obj.a) // 2
// 新添加属性
obj.d = 3
console.log(obj.d) // 3
// 对象解构赋值
let obj = {a: 1, b: 2, c: 3}
let {a, b} = obj
console.log(a, b) // 1 2
// rest运算符
let obj = {a: 1, b: 2, c: 3}
let {a, ...rest} = obj
console.log(a, rest) // 1 {b: 2, c: 3}
// spread运算符
let obj = {a: 1, b: 2, c: 3}
let obj2 = {...obj}
console.log(obj2) // {a: 1, b: 2, c: 3}
// for...in循环
let obj = {a: 1, b: 2, c: 3}
for(let key in obj){
console.log(obj[key]);
}
// 1, 2, 3
// for...of循环
let obj = {a: 1, b: 2, c: 3}
for(let [key, value] of Object.entries(obj)){
console.log(key, value);
}
// a 1
// b 2
// c 3
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
Math数学运算
Math.sqrt(4) // 开方2
Math.max(1, 2, 3) // 最大值 3
Math.min(1, 2, 3) // 最小值 1
Math.PI // 圆周率 3.141592653589793
- 1
- 2
- 3
- 4
Date获取日期
let date = new Date() // 当前日期
date.getFullYear() // 2022
date.getMonth() // 月份（从0到11）6
date.getDate() // 日期 23
date.getTime() // 时间戳 1658589653487
- 1
- 2
- 3
- 4
- 5
- 6
数值转换
parseInt('1') // 字符串转为整数 1
parseFloat('2.5') // 字符串转为小数 2.5
- 1
- 2
延时执行
setTimeout(()=>{
// 延后500毫秒执行
}, 500)
- 1
- 2
- 3
重复执行
let id = setInterval(()=>{
// 每隔5秒执行一次
}, 5000)
// 取消定时器
clearInterval(id);
- 1
- 2
- 3
- 4
- 5
- 6
错误处理
try{
// 访问未定义的变量
console.log(a);
} catch(e){
console.log(e.name);
// ReferenceError
console.log(e);
// ReferenceError: a is not defined
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
异步操作 Promise
fetch('http://httpbin.org/get')
.then((res)=> res.json())
.then((result)=> {console.log(result)})
.catch(e=> console.log(e))
- 1
- 2
- 3
- 4
文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。
原文链接：pengshiyu.blog.csdn.net/article/details/125954373
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）