刚开始用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