js:JavaScript 核心语法快速入门

举报
彭世瑜 发表于 2022/07/25 23:02:55 2022/07/25
【摘要】 变量与常量 // 变量 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

视频:
7 分钟掌握 JavaScript 核心语法(up:峰华前端工程师)

文章来源: pengshiyu.blog.csdn.net,作者:彭世瑜,版权归原作者所有,如需转载,请联系作者。

原文链接:pengshiyu.blog.csdn.net/article/details/125954373

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。