文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

ES6变量赋值和基本数据类型实例分析

2023-07-02 15:44

关注

本篇内容介绍了“ES6变量赋值和基本数据类型实例分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

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); // 123foo = {}; // TypeError: "foo" is read-only

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

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

变量解构

解构必须左右解构相同

解构失败则是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种常见用法

变量交换

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

从函数返回多个值

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

函数参数的定义

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

提取JSON数据

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

函数参数默认值

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';这样的语句。

遍历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

输入模块的指定方法

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

新增方法

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

function is32Bit(c) {  return c.codePointAt(0) > 0xFFFF;}is32Bit("????") // trueis32Bit("a") // false

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变量赋值和基本数据类型实例分析”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯