2.es6的语法

本文详细介绍了JavaScript ES6中的新特性,包括let和const声明变量的区别,模板字面量的使用,函数默认参数的设定,展开运算符的应用,对象字面量和方法的简写,对象和数组的解构赋值,箭头函数的语法,以及模块的导入导出机制。此外,还讲解了Promise的基本用法及其生命周期。这些新特性极大地提高了代码的可读性和效率。
摘要由CSDN通过智能技术生成

2.let和const:

2.1.let:声明变量,块就是{}之间的代码,作用域只在当前代码块之间,let的用法和var相同,不过let声明的变量不会被提升

2.2.const:声明常量,在声明常量的时候必须同时进行初始化(给这个常量附一个值),如果 使用const声明对象,对象本身的绑定不能修改,但是对象的属性和值是可以修改的(比如一个person对象,声明了name和age属性,我们可以修改name和age属性的值)

 

3.模板字面量(多行字符串和字符串占位符):

3.1.多行字符串,现在多行字符串我们可以使用``来凭借了,如果字符串中途有换行等操作只需要直接换行输入即可,不会像在 "" 中还需要进行/n等的转义字符来进行操作了

3.2.字符串占位符,占位符由 ${} 来组成,在其中我们可以写入变量或者js的表达式等,如

let price = 86.5
let amount = 5
let toal = `价格等于:${price * amount }}`
或
let name = "张三"
let message = `他的名字是${ name }}`
其中还可以嵌套
let names = "张四"
let messages = `你好,${ 
 `我的名字叫做${ name }}`
 }}`

4.默认参数:

function makeRedirect(url,name){
    url  = url || "/login";
    timeout = timeout || 20000;
}
这样就赋值了默认参数,但是有一个问题,比如timeout传输过来的值为0
(我们让它传输过来的),
它还是会选择20000传输回去,所以我们需要改成一下的方法再使用
function makeRedirect(url,name){
    url = (typeof url !="undefined") ? url :"/login";
    timeout = (typeof timeout != "undefined") ? timeout :20000;
}
es6中写法是
function makeRedirect(url="/login",timeout=20000){
    函数其他操作
}

5.展开运算符:

语法:调用的函数名称(...数组名称)
function add(a,b,c){
    return a+b+c
}
let arr = [1,2,3]
sum(...arr);
展开运算符(...)提取数组arr中的各个值并传入sum函数中
展开运算符可以用来复制数组
展开运算符可以用来合并数组
展开运算符可以取出对象的所有可遍历属性,复制到当前对象中

6.对象字面量语法扩展

之前的写法是
function person(name,age){
    return {
        name:name,
        age:age
    }
}
let name = "张三"
let age = 18
var person = {name:name,age,age}
现在的写法是
function person(name,age){
    return {
        name,
        age
    }
}
同名可以只写属性名即可
let name = "张三"
let age = 18
var person = {name,age}

7.对象方法的简写语法:

原来写法:
var car = {
    color:"red",
    showColor:function(){
        console.log(this.color)
    }
}
现在语法(function可以被省略)
var car = {
    color:"red",
    showColor(){
        console.log(this.color)
    }
}

8.对象解构赋值
let book ={
    title:"vue.js从入门到实战",
    isbn:"123456",
    price:98
}
let {title,price} = book;
console.log(title)
console.log(price)
//原本的写法为
let title = book.title
console.log(title)

如果变量之前已经声明了,之后想用解构语法给变量赋值,
那么需要用圆括号包裹整个解构赋值的语句
let title ="测试"
let price = 100
({titile,price} = book;)
解构语法还可以赋默认值
let {title,price,savetest = 0} = book;
console.log(savetest) //0


9.数组解构:
let arr = [1,2,3]
let [a,b,c] = arr;
在数组解构中,变量值是根据数组中元素的顺序进行选取的,
如果要获取指定位置的数组元素值,可以只为该位置的元素提供变量名,如下:
比如只想获取数组中的第三个位置的元素值
let [,,c] = arr;
console.log(c)
数组解构也可以赋默认值,以及嵌套数组解构


10.箭头函数:
let welcome = msg => msg
相当于:
function welcome(msg){
    return msg;
}

如果函数有不止一个参数,则需要在参数两侧添加一对圆括号。
let welcome = (user,msg) => `${user},${msg}`
相当于:
function welcome(user,msg){
    return user+""+msg;
}

如果函数没有参数,则需要使用一对空的圆括号
let welcome = () => "welcome you";
相当于:
function welcome(){
    return "welcome you";
}

如果函数体有多条语句,则需要用花括号包裹函数体。
let add = (a,b) =>{
    let c = a+b;
    return c;
}
相当于:
function add(a,b){
    let c = a+b
    return c;
}

如果是一个空函数,则需要写一堆没有内容的圆括号代表参数部分,
一对没有内容的花括号代表空的函数体。
let emptyFunction = () =>{};
相当于:
function emptyFunction(){}

如果箭头函数的返回值是一个对象字面量(也就是一个对象),则需要将该字面量包裹在圆括号中
let createCar = () =>({color:color,doors:doors})
相当于:
function createCar(color,doors){
    return {
        color:color,
        doors:doors
    }
}
console.log(createCar("black",4));//{color:"black",doors:4}
将对象字面量包裹在圆括号中是为了将其与函数体区分开来。
箭头函数可以和对象解构结合起来使用。
let personInfo = ({name,age}) =>`${name}'s age is ${age} years old.`
相当于:
function personInfo({name,age}){
    return `${name}'s age is ${age} years old.`
}


11.模块(导入、导出):
导出:
1.一个模块通常是一个独立的js文件,
该文件内部定义的变量和函数除非被导出,否则不能被外部所访问
2.使用export关键字放置在需要暴露给其他模块使用的变量,函数或者类声明前面,
以将它们从模块中导出

导出数据
export var color="red";

导出函数
export function sum(a,b){
return a+b;
} 

导出类
export class Car{
    constructor(sColor,iDoors){
        this.color = sColor;
        this.doors = iDoors
    }
    showColor(){
        console.log(this.color)
    }
}

将在模块末尾进行导出 
function subtract(a,b){
    return a-b;
}
导出subtract函数
export { subtract };

导出subtract函数,并且重命名使用(外部使用时就是sub)
export {subtract as sub }

导出模块默认值(一个模块可以导出且只能导出一个默认值,默认值是通过使用default关键字
指定的单个函数、变量、或者类。非默认值的导出,需要使用一对花括号包裹名称,
而默认导出值的导出则不需要)
export default XXX;


导入:
导入是通过使用import关键字,import语句由两部分组成:
要导入的标识符和标识符应当从哪个模块导入
需要注意点:
1.导入模块时,模块文件的位置可以使用相对路径和绝对路径,使用相对路径时,对于同一
目录下的文件,不能使用modules.js来引入,而是要使用./modules.js,即通过"."
来表示当前目录
2.可以导入整个模块作为一个单一对象,然后所有的导出将作为该对象的属性使用
3.多个import语句引用同一个模块,该模块也只执行一次。将导入的模块代码执行后,
实例化后的模块被保存在内存中,只要另一个import语句引用它就可以重复的使用它

如:假设刚才导出的是modules.js模块
现在导入就应该是:
//导入模块默认值
import divide from "./modules.js"
//导入多个绑定
import {color,sum} from "./modules.js"
//导入单个绑定
import {subtract } from "./modules.js"
//刚才的重命名导出(因为在导出时将函数进行了重命名导出,
//所以这里我们导入时也要使用该名称)
import {sub } from "./modules.js"
//导入时重命名导入的函数
import { sum as add } from "./modules.js"
//导入类
import {Car} from "./modules.js"
//导入整个模块
import * as example from "./modules.js"

//使用导入类的属性
console.log(color); //red
//使用导入类的函数
console.log(add(2,6));
//使用导入模块的函数(这里使用就必须是sum了,而不能是add)
console.log(example.sum(6,6));
//使用导入对象,并使用导出对象的方法
Car car = new Car("black",4);
car.showColor();


12.promise:
promise可以通过promise构造函数来创建,这个构造函数只能接受一个参数:
包含初始化promise代码的执行器(executor)函数,在该函数内包含需要异步执行的代码。
执行器函数接受两个参数,分别是resolve,reject函数,这两个函数由javaScript引擎
提供,不需要我们自己编写。异步操作结束成功时调用resolve函数,失败时调用reject函数

注意点:
1.生命周期:
每个promise都会经历一个短暂的生命周期,先是处于进行中(pending)的状态,此时操作
尚未完成,所以它也是未处理的(unsettled),一旦异步操作执行结束,promise则变为已处理
的(settled)状态。操作结束后,根据异步操作执行成功与否会进入以下两个状态之一:
1.1.fulfilled:promise异步操作成功完成
1.2.rejected:由于程序错误或者其他一些原因,promise异步操作执行未能成功,即失败。
一旦promise状态改变后,我们通过promise对象的then()方法,它接受两个参数:
第一个参数是当promise的状态变为fulfilled时要调用的函数,与异步操作相关的附加
数据通过调用resolve函数传递给这个完成函数;第二个是当promise的状态变为rejected时
要调用的函数,所有与失败相关的附加数据通过reject函数传递给这个拒绝函数。
2.promise链式调用时,有一个重要的特性就是可以给后续的promise传递数据,
只需要在完成处理函数中指定一个返回值,就可以沿着primise链继续传递数据


const promise = new promise{function(resolve,reject){
//开启异步操作
setTimeout(()={
try{
    let c = 6/2;
//成功调用resolve函数
resolve(c);
}catch(ex){
//失败调用reject函数
reject(ex);    
}
},1000);
}};
//成功后回调
promise.then(function(value){
console.log(value);//3
},function(err){
//拒绝
console.error(err.message);
});
//then()方法两个参数都是可选的,例如,只在执行失败后处理,
可以给then()方法的第一个参数传递null。
promise.then(null,function(err){
  console.error(err.message);
});
promise对象还有一个catch()方法,用于执行失败后进行处理,等价于上述只给then()方法
传入拒绝处理函数的代码
promise.catch(function(err){
console.error(err.message);
});

//正常使用
promise.then(function(value){
    //成功
console.log(value);
}).catch(function(err){
   //失败
   console.error(err.message);
})

promise还可以和箭头函数配合使用(未来基本这样使用或者是这种的变式)
const  promise = new promise((resolve,reject)=>{
 setTimeout(()=>{
 let intArray = new Array(20);
 for(let i = 0; i<20; i++){
     intArray[i] = parseInt(Math.random()*20,10)
 }
  resolve(intArray);
  reject(err);
 },2000);
 console.log("开始生成一个随机数的数组")
});
//promise的链式调用
promise.then(value=>{
value.sort((a,b)=>a-b);
return value;
}).then(value=>console.log(value)).catch(err => console.log(err.message));
//promise中间可以嵌套promise,一般用于用上一个请求返回过来的
//数据当做下一个数据请求的参数

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值