ES6变量赋值和基本数据类型详解

2023-12-08前端开发
6

ES6变量赋值和基本数据类型详解

ES6变量赋值

letconst

在ES6引入了两个新的关键字letconst来声明变量,与ES5中的var不同的是,letconst声明的变量具有块级作用域。

let用来声明可变的变量,可以在同一作用域中多次进行赋值操作:

let a = 1;
a = 2;

const用来声明不可变的变量,只能在声明时赋值,一旦赋值后就不能再更改:

const PI = 3.14;
PI = 3; // TypeError: Assignment to constant variable.

值得注意的是,const声明的变量虽然不可变,但如果其值是对象类型,对象内部的属性值是可以修改的:

const user = {
  name: 'Alice',
  age: 22
}
user.age = 23; // 修改 user 对象中属性 age 的值

解构赋值

在ES6中还引入了解构赋值语法,可以方便地将数组或对象中的值赋给对应的变量,示例如下:

const arr = [1, 2, 3];
const [a, b, c] = arr; // 将数组中的值赋给 a、b、c
console.log(a, b, c); // 1 2 3

const user = { name: 'Alice', age: 22 };
const { name, age } = user; // 将对象中的值赋给 name、age
console.log(name, age); // Alice 22

基本数据类型

在JavaScript中,有6种基本数据类型,分别为:

  • undefined: 未定义类型,表示一个变量未经初始化。
  • null: 空类型,表示一个变量没有值。
  • boolean: 布尔类型,表示true或false。
  • number: 数值类型,包括整数和浮点数。
  • string: 字符串类型,用于表示文本。
  • symbol: 符号类型,用于作为唯一的对象属性。

在JavaScript中,虽然只有6种基本数据类型,但同时也具有对象类型,对象类型则是通过引用来传递的,它包含了一组属性和方法。

下面我们来简要了解一下每种基本数据类型的用法和示例:

undefined

使用typeof操作符可以检查一个变量是否为undefined类型,如下:

let a;
console.log(typeof a); // undefined

null

null类型表示一个变量没有值,使用typeof操作符检查一个null类型的变量时,会返回字符串'object',这是一个历史遗留问题,需要注意。

let b = null;
console.log(typeof b); // object

boolean

boolean类型表示两种可能的值:true和false。常用于条件判断和逻辑运算。

let c = true;
let d = false;
// ==、>、<、!、&&、|| 等逻辑运算符均适用于 boolean 类型

number

number类型用于表示数值,包括整数和浮点数。下面是一些常用的数值操作:

let e = 10;
let f = 3.14;
console.log(e + f); // 加法
console.log(e - f); // 减法
console.log(e * f); // 乘法
console.log(e / f); // 除法
console.log(e % 3); // 取模运算
console.log(++e); // 自增
console.log(--e); // 自减

string

string类型用于表示文本字符串,可以使用单引号、双引号或反引号括起来。常用于字符串操作、文本处理等。

let g = 'Hello';
let h = "world";
let i = `Coders`;

console.log(g + ' ' + h + ' ' + i); // 字符串拼接
console.log(g.toUpperCase()); // 转换为大写字母
console.log(h.toLowerCase()); // 转换为小写字母
console.log(g.length); // 获取字符串长度
console.log(h.charAt(3)); // 获取指定位置的字符,索引从0开始计数
console.log(i.substring(1, 4)); // 获取指定范围内的子字符串

symbol

symbol类型用于表示唯一的对象属性,这是ES6新增的基本数据类型。

// 创建 symbol 类型的变量
const symbol1 = Symbol('symbol1');
const symbol2 = Symbol('symbol2');
console.log(typeof symbol1); // symbol
console.log(symbol1 === symbol2); // false
// symbol类型的变量可以用作对象属性的键值:
const user = {
  [symbol1]: 'Alice',
  [symbol2]: '22'
}
console.log(user[symbol1]); // Alice
console.log(user[symbol2]); // 22

总结

本文详细介绍了ES6中变量赋值和基本数据类型的使用,包括了letconst、解构赋值、undefinednullbooleannumberstringsymbol等内容,希望能对大家有所帮助。

The End

相关推荐

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167

网站部署https后百度地图不显示问题
https的网站如果引用百度地图,会出现加载不了的问题,这是因为涉及到跨域问题,网站是https的,但是引用百度地图的是http的,这个要怎么操作呢? 比如我引用的地址:http://api.map.baidu.com/api?v=2.0ak=AK显示 后来看了一下,少了一个s=1字段,加一下s=1...
2025-07-28 前端开发
139

微信小程序实现点击复制功能和手机拨打电话功能
做小程序项目的时候,客户提了一个功能需求优化,就是长按文字需要复制全部内容,因为有的手机支持全选复制,有的手机不支持全选复制。 通过设置系统剪贴板的内容和获取系统剪贴板的内容实现复制功能 html相关代码: van-field value="{{form.contactPhone}}"...
2025-07-02 前端开发
78

js拖拽排序插件Sortable.js如何使用
由于项目功能需要,要实现对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js 特点 轻量级但功能强大 移动列表项时有动画 支持触屏设备和大多数浏览器(IE9及以下除外) 支持...
2025-06-12 前端开发
161