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,一般用于用上一个请求返回过来的
//数据当做下一个数据请求的参数