js:JavaScript 核心语法快速入门

简介: js:JavaScript 核心语法快速入门

变量与常量

// 变量
let a = 5;
// 常量, 定义后不能修改
const a = 5;
a = 6; // TypeError: Assignment to constant variable.

输出

// console.log 控制台打印,可传递多个参数
let a = 5;
let b = 6;
console.log(a);    // 5
console.log(a, b); // 5 6

数据类型

// 基本类型
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
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

分支语句

// 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'

循环语句

// 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);
}

函数

// 定义函数
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;

数组

// 定义数组
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]

对象

// 定义对象
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

Math数学运算

Math.sqrt(4)      // 开方2 
Math.max(1, 2, 3) // 最大值 3
Math.min(1, 2, 3) // 最小值 1
Math.PI           // 圆周率 3.141592653589793

Date获取日期

let date = new Date() // 当前日期
date.getFullYear()    // 2022
date.getMonth()      // 月份(从0到11)6
date.getDate()  // 日期 23
date.getTime()   // 时间戳 1658589653487

数值转换

parseInt('1')     // 字符串转为整数 1 
parseFloat('2.5') // 字符串转为小数 2.5
相关文章
|
1月前
|
JavaScript 前端开发
JavaScript基础&实战 JS中正则表达式的使用
这篇文章介绍了JavaScript中正则表达式的使用,包括正则表达式的创建、匹配模式、字符串匹配、拆分、搜索、匹配和替换等方法,并通过示例代码展示了如何应用这些技术。
JavaScript基础&实战 JS中正则表达式的使用
|
1月前
|
JavaScript 前端开发
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
这篇文章介绍了JavaScript中的数组、Date对象、Math对象以及包装类(String、Number、Boolean),并详细讲解了数组的创建、方法(如forEach、push、pop、unshift、slice、splice)和遍历操作,以及工厂方法创建对象和原型对象的概念。
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
|
1月前
|
JavaScript 前端开发
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
这篇文章介绍了JavaScript中对象的基本概念和操作,包括对象属性和方法的使用、对象字面量的创建、函数的定义和作用域的概念,以及全局作用域和局部作用域的区别和特性。
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
|
18天前
|
Java 数据库连接 数据库
从零到精通:揭秘 Hibernate 构建持久层服务的全过程,你离数据持久化大师还有多远?
【8月更文挑战第31天】本文详细介绍了如何从零开始使用 Hibernate 构建一个持久层服务。首先,通过在 Maven 项目中添加必要的依赖,确保项目具备使用 Hibernate 的条件。接着,配置 `hibernate.cfg.xml` 文件以连接 MySQL 数据库,并设置了基本属性。然后定义了一个简单的 `User` 实体类及其映射关系。此外,还创建了一个 `HibernateUtil` 工具类来管理 `SessionFactory`。
28 0
|
20天前
|
缓存 JavaScript 前端开发
Vue.js与JavaScript性能优化终极揭秘:掌握这些技巧,让你的Web应用飞一般地流畅!
【8月更文挑战第30天】随着前端应用复杂度的增加,性能优化变得至关重要。本文深入探讨了如何利用Vue.js和JavaScript实现高效的应用性能。主要内容包括:优化组件设计以减少不必要的渲染,采用异步组件与懒加载技术加速应用启动,利用虚拟滚动和分页处理大数据集,改进Vuex使用方式以及合理运用浏览器缓存等策略。通过具体示例和最佳实践,帮助开发者充分挖掘Vue.js潜力,打造高性能的前端应用。
33 0
|
20天前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
14 0
|
20天前
|
JavaScript 前端开发 API
揭秘Vue.js与JavaScript融合的神秘力量:如何一键解锁高效响应式Web应用的终极秘籍?
【8月更文挑战第30天】随着前端技术的发展,Vue.js凭借其轻量级、易上手和高度响应式的特性,在前端开发领域迅速崛起,成为构建现代Web应用的首选框架之一。Vue.js与JavaScript深度融合,使开发者能高效灵活地打造美观且功能强大的应用。本文将作为实战指南,带您深入了解Vue.js与JavaScript结合的奥秘,揭示构建高效响应式Web应用的秘籍。从Vue.js的基础开始,逐步介绍如何利用其数据驱动视图的特点,结合JavaScript的高级特性,如定时器、Promise、async/await等,提升应用的交互性和用户体验。
10 0
|
28天前
|
存储 JavaScript 前端开发
JavaScript:揭秘网页背后的魔法,一探究竟JS的神奇力量!
【8月更文挑战第22天】JavaScript(JS)始于1995年,以网页动态效果闻名。随Node.js等技术发展,JS现广泛用于服务器端、桌面及移动应用开发。JS是解释型语言,在浏览器中直接运行。基本语法涵盖变量声明、数据类型、运算符及控制结构。变量可用`var`、`let`或`const`声明,支持多种数据类型如`Number`、`String`。函数是代码的基本单元,支持匿名及箭头函数。对象用于表示复杂数据结构。ES6引入了类、模块等新特性。异步编程通过回调、Promises及async/await实现。掌握这些基础知识,有助于开发者构建高质量的Web应用。
31 0
|
1月前
|
前端开发 JavaScript 程序员
前端 JavaScript 的 _ 语法是个什么鬼?
前端 JavaScript 的 _ 语法是个什么鬼?
|
自然语言处理 JavaScript 前端开发
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
145 0
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)