ES6基础整理(1)

刚开始用vue,很多时候我们都会把ES6这位大兄dei加入我们的技术栈中。但是ES6那么多那么多特性,我们真的需要全部都掌握吗?掌握好常用的、有用的这个可以让我们的开发快速起飞。

接下来我们就聊聊ES6基础常用的知识的总结。

es6中的声明变量的方式:

// let
// 1. let声明变量不可以进行重复声明
// 2. let声明的变量有块级作用域

// const
// 声明的叫做常量
// 1. const声明变量不可以进行重复声明
// 2. const声明页有块级作用域
// 3. const声明的变量不能被修改值
// 4. const声明变量的时候必须赋一个初始值!

// const a;
// console.log(a);

// for (let i = 0; i < 10; i++){
//     setTimeout(function () {
//         console.log(i);
//     }, 0)
// }

// let a = 10;
// let a = 100;
// console.log(a);

// if (true) {
//     let a = 10;
// }

// console.log(a);

// const obj = {
//     name: "小芳",
//     age: 18
// }

// obj.age = 19;

es6中对象的简写形式:

没有简写的形式
let name = "jack"

// let obj = {
//     name: name,
//     sing: function () {
//         console.log("love!!")
//     }
// }
// 1. 属性简写  如果属性名和后面的属性值的变量名同名,就可以写成一个
// let obj = {
//     name
// }
// 2. 方法简写
let obj = {
    sing () {
        console.log("带MV的神话!!!")
    }
}

es6中的解构赋值:

// let obj = {
//     name: "jack",
//     age: 30
// }

// let name = obj.name;
// let age = obj.age;

// 解构赋值

// let {对象的属性名: 要声明的变量名} = 对象
// 就会自动声明一个变量出来,变量的值就是对象中对应的属性的值

// let { name: name1 } = obj;

// console.log(name1);

// let {对象的属性名: 要声明的变量名} = 对象
// 如果 对象的属性名 和要声明的变量名同名 可以简写成一个
// let { name, age } = obj;
// let { name: name, age: age } = obj;
// console.log(name, age);

// import { 要导入的内容, 要导入的内容 } from "模块"

// function test({name, age}) {
//     console.log(name, age)
// }

// test(obj);

// let arr = [1, 2, 3, 4];

// let num1 = arr[0]
// let num2 = arr[1]
// let num3 = arr[2]
// let num4 = arr[3]

// let [num1, num2, num3, num4] = arr;

// let [,,,num4] = arr;

// console.log(num4);

// let arr = [[1, 2], [3, 4]];

// let [[num1, num2], [num3, num4]] = arr;

// console.log(num1, num2,num3, num4)

es6中箭头函数:

let func = function () { 

}

// 在es中函数表达式的写法可以使用箭头函数

// let f = (参数列表) => {
//     // 函数体
// }

// let sayHi = () => {
//     console.log("Hello jack");
// }

// sayHi();

// 箭头函数的简写形式:
// 1. 如果箭头函数的参数列表中只有一个参数, 那么参数的()可以省略
// let double = (a) => {
//     console.log(a * 2);
// }

//简写如下
// let double = a => {
//     console.log(a * 2);
// }

// double(10);

// 2. 如果箭头函数的函数体只有一句代码,那么函数体的{}可以被省略
// let func = () => {
//     console.log("Hey jack");
// }
// 简写如下
// let func = () => console.log("Hey jack");

// let triple = (a) => {
//     console.log(a * 3);
// }
//简写如下
// let triple = a => console.log(a * 3);

// triple(10);

// 3. 如果箭头函数的函数体只有一句代码,并且这句代码是返回语句,那么return和{}都可以省略
// let sum = (a, b) => {
//     return a + b;
// }

//简写如下
// let sum = (a, b) => a + b;

// console.log(sum(1, 2));

// let square = a => a * a;

// let func = _ => {

// }

箭头函数中的this说明:

// 平时确定一个函数中的this是谁,我们需要通过调用模式来确定
// 1. 函数调用模式  this ---> window   函数名()
// 2. 方法调用模式  this ---> 调用方法的对象  对象.方法名()
// 3. 构造函数调用模式 this ---> 创建出来的实例  new 函数名()
// 4. 上下文调用模式   this ---> call和apply的第一个参数  函数名.call()

// bind

// 箭头函数中没有this
// 如果在箭头函数中使用this, 会向上一级作用域中进行查找this

// let func = () => {
//     console.log(this);
// }

// func();

// let obj = {
//     name: "jack",
//     sayHello() {
//         let func = () => {
//             console.log(this);
//         }
//         func();
//     }
// }

// obj.sayHello();

// 之前使用var that = this的场景全都可以使用箭头函数来解决了

// let obj = {
//     name: "jack",
//     sayHello() {
//         var that = this;
//         setTimeout(function () {
//             console.log("我叫" + that.name)
//         }, 1000)
//     }
// }

// let obj = {
//     name: "jack",
//     sayHello() {
//         setTimeout(() => {
//             console.log("我叫" + this.name)
//         }, 1000)
//     }
// }

// obj.sayHello();

之后陆陆续续把整个es6涵盖的知识整理出来,欢迎评论,留言,一起交流

原文地址:https://www.cnblogs.com/why210/p/9765680.html

时间: 2024-10-07 12:57:52

ES6基础整理(1)的相关文章

HTML基础整理(一)

HTLM基础整理--思维导图(标签部分) 其他: <sub>下标</sub>     <sup>上标</sup> 优先级,越往后优先级越高. "right"(右对齐)               "top" (顶部) 对齐方式<tr align="center"(居中) valign="middle"(居中) "left"(左对齐)          

linux基础整理0316

一.linux基础整理 由于这是学习linux的第一周,整理的东西很杂很分散,其中包括了查看虚拟机的各种信息,命令相关的只整理了alias.date.history.cal.帮助会话screen等命令的使用,最后加上了两个常见问题处理办法:在以后的学习中会不断完善文中整理的相关内容. 1.查看系统信息类命令: 查看内核版本 [root@CentOS7 ~]#uname -r 3.10.0-957.el7.x86_64 查看系统版本 查看配置文件 [root@CentOS7 ~]#cat /etc

机器学习 —— 基础整理(六):线性判别函数——感知器、松弛算法、Ho-Kashyap算法

本文简单整理了以下内容: (一)线性判别函数与广义线性判别函数 (二)感知器 (三)松弛算法 (四)Ho-Kashyap算法 (一)线性判别函数与广义线性判别函数 一.线性判别函数 这篇总结继续关注分类问题.假设判别函数(Discriminant function)的参数形式已知,用训练的方法直接根据样本估计判别函数的参数.线性判别函数的形式为: $$g(\textbf x)=\textbf w^{\top}\textbf x+w_0$$ $\textbf x\in \mathbb R^d$ 是

C#基础整理

元旦整理书架发现一本小册子--<C#精髓>中国出版社2001年出版的,粗略翻了下关于C#的知识点挺全的虽然内容谈得很浅也有很多过时的内容(话说这本书是我在旧书店花5块钱淘的)我保留原有章节并删减部分过时和不重要内容添加一些自己觉得重要的内容,具体目录如下: 第一章   简介    什么是.NET.CLI.CLR.CIL.IL.BCL?    什么是JIT和GC,JIT和GC是如何工作的?   第二章 C#语言参考   标识符.类型.变量.表达式与运算符.语句.类型组织.继承.访问修饰符.类和结

python基础整理----基本概念和知识

整理一下python的基本概念和知识, 主要用python3为语法标准. python介绍 一种面向对象的解释性计算机设计语言,具有丰富和强大的库. python定位:"优雅"."明确"."简单" 多种应用场景:可以写工具,后台服务,移动端等等. 运行环境搭建 下载对应版本的Python安装,官网地址如下 https://www.python.org/ 运行get-pip.py安装pip (Py3自带pip) https://bootstrap.

linux基础整理4

IP地址配置 1.setup工具 vi /etc/sysconfig/network-scripts/ifcfg-eth0 ONBOOT=yes service network restart 2.修改虚拟机连接方式为桥接 3.编辑-虚拟网络编辑器-vmnet0--桥接到有线网卡 4.UUID错误(针对复制镜像生效) vi/etc/sysconfig/network-scripts/ifcfg-eth0         删除MAC地址行 rm –rf/etc/udev/rules.d/70-pe

MySQL技术分类一:DB应用开发基础整理

MySQL技术分类整理一:DB应用开发基础1.库1).创建库syntax:CREATE {DATABASE | SCHEMA} [IF NOT EXISTS] db_name    [create_specification] ... create_specification:    [DEFAULT] CHARACTER SET [=] charset_name  | [DEFAULT] COLLATE [=] collation_name 注:如果不使用if not exists,则当数据库

关于JAVA面向对象基础整理以及个人的理解(适合初学者阅读)

JAVA的基础语法等都跟C有很大的相似之处,所以这里就不多啰嗦了.直接从数组开始. 数组: 1.声明 int [] a; 在声明的过程中,并没有分配空间给数组.我们可以在声明的同时,用new来分配相应的空间 int [] a = new int[100]; 这里开辟了一个空间为100大小的数组,内存分配也完成了. 我们可以在声明的同时也确定元素个数 int [] a = new int[]{1,3,5,7,9}; 面向对象(重点) class Human{ int height; void br

HTML5游戏开发技术基础整理

随着HTML5标准最终敲定,HTML5将有望成为游戏开发领域的的热门平台.HTML5游戏能够运行于包括iPhone系列和iPad系列在内的计算机.智能手机以及平板电脑上,是目前跨平台应用开发的最佳实施方案.本文系根据[HML5 Canvas游戏开发实战]一书中的内容整理而成,是了解和学习HTML5游戏开发的基础内容,希望能够帮助到那些和博主一样致力于游戏开发的朋友们! JavaScript中的面向对象编程 对于游戏开发来说,面向对象编程(OOP)是一种重要而且必要的方法,所以在了解HTML5游戏