广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >ES6变量赋值和基本数据类型详解
  • 910
分享到

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

2024-04-02 19:04:59 910人浏览 薄情痞子
摘要

目录let和constlet和const不存在变量提升暂时性死区(temporal dead zone,简称TDZ)不允许重复声明块级作用域与函数声明const变量解构解构必须左右解

let和const

let和const不存在变量提升

变量一定要在声明后使用,否则报错。

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

变量i是var声明的,在全局范围内都有效。所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i的值。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

上面代码中,变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。

暂时性死区(temporal dead zone,简称TDZ)

只要块级作用域内存在let或const命令,则变量会被绑定在这个区域内,不受外层作用域的变量影响。凡在声明之前使用了变量,则会报错。
注意,如果使用了let或const,typeof 就不安全

var tmp = 123;
if (true) {
    tmp = 'abc'; // ReferenceError
    let tmp;
}

不允许重复声明

let a = 10;
var a = 1; //Uncaught SyntaxError: Identifier 'a' has already been declared

let a = 10;
let a = 1; //Uncaught SyntaxError: Identifier 'a' has already been declared

块级作用域与函数声明

并且es6规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。

const

const只保证变量指向的地址不变,不保证该地址的数据不变。

const foo = {};
foo.prop = 123;

console.log(foo.prop); // 123

foo = {}; // TypeError: "foo" is read-only

如果真的想将对象冻结,应该使用Object.freeze方法。

const foo = Object.freeze({});

// 常规模式时,下面一行不起作用;
// 严格模式时,该行会报错
foo.prop = 123; // Can't add property prop, object is not extensible

变量解构

解构必须左右解构相同

1.解构失败则是undefined,如有默认值则取默认值
2.左右解构不同则抛error

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

上面的表达式都会报错,因为等号右边的值,要么转为对象以后不具备Iterator接口(前五个表达式),要么本身就不具备Iterator接口(最后一个表达式)。

事实上,只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值。例如set数据类型和Generate函数

默认值

解构赋值允许默认值,在定义的时候直接赋值即可

var [x=1]=[,3];
console.log(x) // x = 1

注意,ES6内部使用严格相等运算符(===),判断一个位置是否有值。所以,如果一个数组成员不严格等于undefined,默认值是不会生效的。

对象的解构赋值

对象的解构与数组有一个重要的不同:数组的元素是按序排列的,取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

对象解构赋值的内部机制:先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

var {foo,bar} = {foo:'aaa',bar:'bbb'}
等价于
var {foo:foo,bar:bar} = {foo:'aaa',bar:'bbb'}

默认值生效的条件同样是,对象的属性值严格等于undefined。

注意赋值时不能让大括号在行首

var x;
{x} = {x: 1}; // 会报错,因为javascript引擎会将{x}理解成一个代码块

var x;
({x} = {x:1}); // 正确写法

字符串的解构赋值

字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

数值和布尔值的解构赋值

解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。

函数的解构赋值

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

注意对比与下面代码的区别
function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]
此处是给{x,y}这个对象设置了默认值,而不是给x,y分别设置了默认值

解构赋值的7种常见用法

1.变量交换

[x, y] = [y, x];

2.从函数返回多个值

function example() {
  return [1, 2, 3];
}
var [a, b, c] = example();

3.函数参数的定义

function f([x, y, z]) { ... }
f([1, 2, 3]);

4.提取JSON数据

var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

5.函数参数默认值

Jquery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};
// 指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。

6.遍历Map结构

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

7.输入模块的指定方法

const { SourceMapConsumer, Sourcenode } = require("source-map");

String

字符串编码{}

es5中超过ffff值的Unicode字符只能用两个字节表示,但是es6增加了大括号方式

es5:
"\uD842\uDFB7"
// "?"

"\u20BB7"
// " 7"

es6:
"\u{20BB7}"
// "?"

还可以在变量中拼接Unicode编码

let hello = 123;
hell\u{6F} // 123

新增方法

1.codePointAt 获取字符的码点,10进制
codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。

function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}

is32Bit("?") // true
is32Bit("a") // false

2.String.fromCodePoint() 返回传入码点的对于字符
3.字符串Iterator接口新增,可以用for of遍历字符串
4..at()能返回给定位置的字符串,允许超过FFFF的字符被返回,es5中对应的是charAt
5.includes() 判断字符串中是否包含传入的字符
6.startsWith() 判断字符串的起点是否是传入的字符
7.endsWith() 判断字符串的终点是否是传入的字符
8.repeate() 重复某字符
9.padStart() 补全开头
10.padEnd() 补全结尾

模板字符串

嵌入变量${}
空格、缩进、换行会在输出是保留,可以trim消除
字符串模板嵌套

Number

八进制和二进制写法

二进制 0b开头
八进制 0o开头

新增方法

Number.isNaN

Number.isFinite

Number.isInteger

在JavaScript内部,整数和浮点数是同样的储存方法,所以3和3.0被视为同一个值。

Number.EPSILON 极小的误差常量

JavaScript能够准确表示的整数范围在-253到253之间(不含两个端点),超过这个范围,无法精确表示这个值。

Number.isSafeInteger() 安全整数范围

新增函数

trunc 化零为整

sign 判断正负数

cbrt 计算平方根

clz32 返回一个32位二进制

**指数运算

到此这篇关于ES6变量赋值和基本数据类型的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: ES6变量赋值和基本数据类型详解

本文链接: https://www.lsjlt.com/news/153777.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • ES6变量赋值和基本数据类型详解
    目录let和constlet和const不存在变量提升暂时性死区(temporal dead zone,简称TDZ)不允许重复声明块级作用域与函数声明const变量解构解构必须左右解...
    99+
    2022-11-13
  • ES6变量赋值和基本数据类型实例分析
    本篇内容介绍了“ES6变量赋值和基本数据类型实例分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!let和constlet和const不存在...
    99+
    2023-07-02
  • C++变量和基本类型详解
    目录基本内置类型1. 不同平台下基本类型的字节数2. 算数类型的最小尺寸3. 数据类型选择的经验准则4. 有符号类型和无符号类型5.初始化与赋值6. 声明与定义7. C++关键字8....
    99+
    2022-11-12
  • c++primer:变量和基本类型详解
    目录前言类型转换变量声明与定义的关系变量命名规范复合类型引用指针const限定符const的引用指针和constconstexpr和常量表达式auto类型说明符decltype头文件...
    99+
    2022-11-12
  • python变量和基本数据类型
    一、变量 1、声明变量: #!/usr/bin/env python# -*- coding: utf-8 -*- name = "tiger" 上述代码声明了一个变量,变量名为: name,变量name的值为:"tiger"变量的作用:其...
    99+
    2023-01-31
    变量 数据类型 python
  • C++ Primer的变量和基本类型详解
    目录1.类型转换含有无符号类型的表达式2.字面值常量整形和浮点型字面值字符和字符串字面值转移序列指定字面值的类型布尔字面值和指针字面值总结1.类型转换 对象的类型定义了对象能包含的数...
    99+
    2022-11-12
  • Python变量和数据类型详解
    Python变量和数据类型 Python中数据类型 Python之print语句 Python的注释 Python中什么是变量 Python中定义字符串 Python中raw字符串...
    99+
    2022-06-04
    变量 详解 数据类型
  • 条件语句/变量和基本数据类型
    Python条件语句和基本数据类型 可变不可变: 可变类型:列表 不可变类型:字符串\数字\元祖 访问顺序: 1.顺序访问:字符串\列表\元祖 2.映射:字典(字典查询速度比列表快,但占内存高于列表) 3.直接访问:数字 存放元素个数: ...
    99+
    2023-01-31
    变量 语句 数据类型
  • Java基本知识点之变量和数据类型
    Java中的变量和基本数据类型: 写完第一个java程序之后,我们对Java也有了初步的了解,现在我们再来继续认识一下Java中的基本知识点——变量和数据类型。 那么我们该怎样来认识...
    99+
    2022-11-12
  • Kotlin基本数据类型详解
    目录1. kotlin 数值型2. kotlin 布尔型3. kotlin 字符型4. kotlin 字符串5. kotlin 可空类型6. kotlin 类型相互转换7. kotl...
    99+
    2022-11-12
  • Python基础语法之变量与数据类型详解
    目录一. 输出函数print1.1 可以输出数字1.2 可以输出字符串1.3 可以输出表达式1.4 可以输出至文件中二. 变量与数据类型2.1 整型2.2 浮点型2.3 字符串型2....
    99+
    2022-11-11
  • python基础之变量和数据类型
    目录变量和数据类型Python中变量的命名规则总结变量和数据类型 赋值不需要指定类型,如何定义变量 # 定义 规则 变量名=数据 a=10 #python不声明...
    99+
    2022-11-12
  • python详解(2)——数据类型与变量
    本文为原创作品,若与其他作品雷同,纯属巧合。请勿抄袭。   目录 🏆一、前言 🏆二、数据类型and变量 🚩1、数据类型(简单) 🚩2、变量(中等) &#x...
    99+
    2023-08-31
    python 开发语言
  • Go语言变量与基础数据类型详情
    目录一、基础介绍1、Go 的特性2、Go 的常用命令3、Hello Word二、变量1、定义方式三、常量四、基础数据类型1、数字2、浮点型(小数,32/64表示小数点后长度多少位)3...
    99+
    2022-11-12
  • TypeScript基本数据类型实例详解
    目录TypeScript 介绍类型分配类型推导数组元组objectnull 和 undefined特殊类型anyunknownnevervoidTypeScript 介绍 Type...
    99+
    2023-01-30
    TypeScript 基本数据类型 TypeScript 数据类型
  • Swift 基本数据类型详解总结
    Swift 基本数据类型 有以下几种基本数据类型: 整型 浮点型 布尔型 元组 可选值 Optional 1. 整型 var intT...
    99+
    2022-11-12
  • Python中的变量和数据类型详情
    python是一门弱数据类型的语言,变量不需要声明即可使用,向变量赋值即定义变量,赋予的值的类型就是变量的类型,但变量也是有数据类型的,字符串'1'如果想参与数据计算...
    99+
    2022-11-13
  • 详解C语言的基本数据类型
    目录1、C语言基本数据类型2、计算机中的单位3、各数据类型的大小及字取值大小总结1、C语言基本数据类型 2、计算机中的单位 3、各数据类型的大小及字取值大小 对于short i...
    99+
    2022-11-12
  • Golang反射获取变量类型和值的方法详解
    目录1. 什么是反射2. reflect.Type2.1 类型Type和种类Kind2.2 引用指向元素的类型2.3 结构体成员类型3. reflect.Value3.1 结构体的成...
    99+
    2022-12-08
    Golang反射获取变量类型 值 Golang反射获取变量类型 Golang反射获取值 Golang反射
  • python的变量和简单数字类型详解
    目录1.变量1.1使用变量名时避免命名错误2.字符串2.1修改字符串大小写的方法2.2合并字符串2.3使用制表符或换行符来添加空白2.4删除空白2.5使用字符串时需要避免语法错误3....
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作