vue的 ECMAScript 6的学习

一 ECMAScript 6

1.1 ECMAScript 6

ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript 和 ActionScript)。

因此,ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等。

二 ES的操作

2.1 介绍

ES标准中不包含 DOM 和 BOM的定义,只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。

2.2 let变量

2.2.1 let的作用域

1.笔记总结:

// var 声明的变量没有局部作用域

// let 声明的变量  有局部作用域

2.代码

<script>
// var 声明的变量没有局部作用域
// let 声明的变量  有局部作用域
{
var a = 555
let b = 1
}
console.log(a)  // 0
//console.log(b)  // ReferenceError: b is not defined
</script>

3.执行结果 

2.2.2 let的定义次数

// var 可以声明多次

// let 只能声明一次

 2.3 const声明常量(只读变量)

常量:// 1、声明之后不允许改变  

 2.4 数组与对象

<script>// 传统
let a = 1, b = 2, c = 3
console.log(a, b, c)
// ES6
let [x, y, z] = [1, 2, 3]
console.log(x, y, z)//2、对象解构
let user = {name: 'Helen', age: 18}
// 传统
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let { name, age } =  user//注意:结构的变量必须是user中的属性
console.log(name, age)</script>

 2.5 字符串的操作

1代码

<script>1
// 1、多行字符串
let string1 =  `Hey,
can you stop angry now?`
console.log(string1)
// Hey,
// can you stop angry now?// 2、字符串插入变量和表达式。变量名写在 ${} 中,${} 中可以放入 JavaScript 表达式。
let name = "Mike"
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)// 3、字符串中调用函数
function f(){return "have fun!"
}
let string2 = `Game start,${f()}`
console.log(string2); </script>

2.效果

 2.6 对象的操作

<script>const name="liu";
const age=34;
const a={xingming:name,nianling:age};
alert(a.xingming);//es6const person2 = {age, name}alert(person2);</script>

2.7  方法的定义和使用

1.代码

<script>
// 传统
const person1 = {sayHi:function(){console.log("Hi")}
}
person1.sayHi();//"Hi"
// ES6
const person2 = {sayHi(){console.log("Hi")}
}
person2.sayHi()  //"Hi"
</script>

2.效果

2.8 对象的扩展

    // 1、拷贝对象
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }
console.log(someone)  //{name: "Amy", age: 15}
alert(someone);
// 2、合并对象
let aget = {age: 15}
let namet = {name: "Amy"}
let person2t = {...aget, ...namet}
console.log(person2t)  //{age: 15, name: "Amy"}</script>

 效果:

2.9 箭头运算符

1.代码

<script>
// 传统
var f1 = function(a){return a
}
console.log(f1(1))
// ES6
var f2 = a => a
console.log(f2(1))// 当箭头函数没有参数或者有多个参数,要用 () 括起来。
// 当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,
// 当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。
var f3 = (a,b) => {let result = a+breturn result
}
console.log(f3(6,2))  // 8
// 前面代码相当于:
var f4 = (a,b) => a+b
alert(f4(3,5));
</script>

2.截图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/65759.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows 搭建 swoole开发环境(官网已支持)

第一步下载&#xff1a;swoole官网下载 swoole-cli-v5.0.3-cygwin-x64.zip 只支持 64 位的系统 第二步解压到指定文件夹&#xff1a;E:\phpstudy_pro\WWW\swoole-cli-v5.0.3-cygwin-x64 第三步设置环境变量&#xff1a;把解压后的文件夹下的 bin 目录路径配置到系统的 Path 环境…

Spring中如何解决循环依赖问题的三种方法

什么是循环依赖问题 在 Spring 中&#xff0c;循环依赖问题指的是两个或多个 bean 之间相互依赖形成的闭环。具体而言&#xff0c;当 bean A 依赖于 bean B&#xff0c;同时 bean B 也依赖于 bean A&#xff0c;就形成了循环依赖。 循环依赖问题在 Spring 容器中是一个非常常…

Anycloud37D平台移植wirelesstools

0. 环境准备 下载 &#xff1a;https://www.linuxfromscratch.org/blfs/view/svn/basicnet/wireless_tools.html 1. 交叉编译wireless_tools tar xzf wireless_tools.29.tar.gz cd wireless_tools.29/打开Makefile&#xff0c;修改配置&#xff1a; ## Compiler to use (mo…

方法的引用第二版(method reference)

1、冗余的Lambda场景 在使用Lambda表达式的时候&#xff0c;我们实际上传递进去的代码就是一种解决方案&#xff1a;拿什么参数做什么操作。那么考虑一种情况&#xff1a;如果我们在Lambda中所指定的操作方案&#xff0c;已经有地方在相同方案&#xff0c;那是否还有必要再写重…

Swift的NSClassFromString转换

在swift 中使用NSClassFromString 从string 转换到 对象&#xff0c;报了Segmentation fault: 11 错误。 let ctrlClass: AnyClass NSClassFromString("HomeViewController")! let ctrl: UIViewController ctrlClass.init() as UIViewController 正确的写法&…

MATLAB制图代码【第二版】

MATLAB制图代码【第二版】 文档描述 Code describtion: This code is version 2 used for processing the data from the simulation and experiment. Time : 2023.9.3 Author: PEZHANG 这是在第一版基础上&#xff0c;迭代出的第二版MATLAB制图代码&#xff0c;第二版的特点是…

文献阅读:Semantic Communications for Speech Signals

目录 论文简介动机&#xff1a;为什么作者想要解决这个问题&#xff1f;贡献&#xff1a;作者在这篇论文中完成了什么工作(创新点)&#xff1f;规划&#xff1a;他们如何完成工作&#xff1f;自己的看法(作者如何得到的创新思路) 论文简介 作者 Zhenzi Weng Zhijin Qin Geoffre…

2023 AZ900备考

文章目录 如何学习最近准备考AZ900考试&#xff0c;找了一圈文档&#xff0c;结果发现看那么多文档&#xff0c;不如直接看官方的教程https://learn.microsoft.com/zh-cn/certifications/exams/az-900/ &#xff0c;简单直接&#xff0c;突然想到纳瓦尔宝典中提到多花时间进行思…

linux安装firefox

1.下载对应包 https://www.mozilla.org/en-US/firefox/all/#product-desktop-release 2. 挂载桌面链接(如果/usr/bin/firefox下有的话,先删除) ln -s /opt/firefox/firefox /usr/bin/firefox 3.执行以下命令&#xff0c;即可启动Firefox客户端&#xff1a; firefox

Windows 重新映射 CapsLock 大写锁定到 Ctrl

Windows 重新映射 CapsLock 大写锁定到 Ctrl 本要点中的这些方法适用于我的美国键盘布局。我不确定其他布局。如果出现问题&#xff0c;请恢复您的更改&#xff1b;删除您创建的注册表项&#xff08;并重新启动&#xff09;。 强烈推荐 方法5 ctrl2cap&#xff0c;因为不会影…

《开发实战》14 | Spring框架:IoC和AOP是扩展的核心

14 | Spring框架&#xff1a;IoC和AOP是扩展的核心 IOC、AOP IoC&#xff0c;其实就是一种设计思想&#xff0c;为什么要让容器来管理对象呢&#xff1f;或许你能想到的是&#xff0c;使用 IoC 方便、可以实现解耦。但在我看来&#xff0c;相比于这两个原因&#xff0c;更重要…

Linux 基础篇

很长时间&#xff0c;因为一些事情&#xff0c;没有更新我的文章这让我很惭愧&#xff0c;于是我将打算在今天更新下自己的文章&#xff0c;我发现一些事情&#xff0c;计算机并不是很难学到可以工作的水平&#xff0c;关键在于是否可以坚持下来&#xff0c;有很多时候我并不是…

java项目mysql转postgresql

特殊函数 &#xff1a; mysql&#xff1a; find_in_set(?, ancestors) postgresql&#xff1a; ? ANY (string_to_array(ancestors,,)) mysql&#xff1a; date_format(t1.oper_time, %Y-%m-%d) postgresql&#xff1a; rksj::date to_char(inDate,YYYY-MM-DD) mysql&am…

vue中的nextTick的作用

vue里面&#xff0c;常用的事件onMounted里&#xff0c;总喜欢用一个nextTick&#xff1a; onMounted(() > {nextTick(() > {init();}); });这个东西有啥用呢&#xff1f;我总搞不懂。 今天我忽然有点明白了。这是一个跟前面语句有关的方法。意思是&#xff0c;等前面的…

Linux 配置Java 环境变量

1.修改 profile vim /etc/profile2.增加环境变量 # java env start export JAVA_HOME{java安装目录}export PATH$JAVA_HOME/bin:$PATHexport CLASSPATH.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar # java env end3.刷新配置 source /etc/profile4.验证 echo $JAVA_H…

【Redis】Redis 的学习教程(七)之 SpringBoot 集成 Redis

在前几篇文章中&#xff0c;我们详细介绍了 Redis 的一些功能特性以及主流的 java 客户端 api 使用方法。 在当前流行的微服务以及分布式集群环境下&#xff0c;Redis 的使用场景可以说非常的广泛&#xff0c;能解决集群环境下系统中遇到的不少技术问题&#xff0c;在此列举几…

Vue.js安装步骤和注意事项

安装完node.js后开始安装和部署Vue在检查webpack的下载版本时出现错误出现错误的原因是之前下载时未指定对应的版本号导致版本不兼容先卸载掉之前下载的版本 cnpm uninstall webpack-cli -g cnpm install webpack-cli4.9.2 -g 最后检查版本是否对应

信息化发展19

数据结构模型 1 、数据结构模型是数据库系统的核心。数据结构模型描述了在数据库中结构化和操纵数据的方法&#xff0c; 模型的结构部分规定了数据如何被描述&#xff08;例如树、表等&#xff09;。模型的操纵部分规定了数据的添加、删除、显示、维护、打印、查找、选择、排序…

React:props说明

props是只读对象&#xff08;readonly&#xff09; 根据单项数据流的要求&#xff0c;子组件只能读取props中的数据&#xff0c;不能进行修改props可以传递任意数据 数字、字符串、布尔值、数组、对象、函数、JSX import FileUpdate from ./FileUpdate; export default class …

分数问题善用移项:0902T2

其实就是分数规划&#xff0c;但不完全是。 对于求 ∑ p i l i ∑ l i \Large\frac{\sum p_il_i}{\sum l_i} ∑li​∑pi​li​​ 在限定条件下的最大值&#xff0c;此类问题可以考虑二分答案并移项。 ∑ p i l i ∑ l i ≥ k \Large\frac{\sum p_il_i}{\sum l_i}\ge k ∑li​…