阅读数:206 评论数:0

一、使用let声明变量

1、与使用var声明变量的区别

（1）变量不能重复说明

（2）不存在变量提升（在执行function函数之前，所有变量都会被提升至函数作用域顶部）

（3）存在块级作用域（不允许外部使用内部的变量）

（4）存在暂时性死区（赋值之前不允许访问，即在预编译的时候不允许访问）

2、let和var在for中的区别

for(var I=0;i<10;i++){
}
//在for语句中用var 声明的 i 实际上是全局变量

for(let j=0;i<10;i++){
}
//用let声明的 j 在每一次循环的时候都会形成块级作用域，生成一个新的i,彼此之间互不干扰

二、const修改的也可变

声明之后不允许修改（实际上并不是不允许修改变量的值，而是不允许修改变量指向的内存地址）

三、函数bind的用法

函数.bind(this指向，[函数参数])

会返回一个新的函数，新函数的this指向bind的第一个参数。

function demo(name,age){
}
var fn1=demo.bind(obj,'ls',18)

四、export default和export的区别

1、export与export default均可用于导出常量、函数、文件、模块等。

2、你可以在其它文件或模块中通过import+(常量|函数|文件|模块)名的方式，将其导入，以便能够对其进行使用。

3、在一个文件或模块中，export、import可以有多个，export default仅有一个

4、通过export方式导出，在导入时要加{}，export default则不需要。

五、末尾的逗号

JS一开始就允许给数组的末尾加逗号，ES5开始允许给对象末尾加逗号，ES2017允许给函数参数末尾加逗号，json末尾也可以加逗号。

六、Promise对象

这是ES6引入的封装异步操作的统一接口。Promise本身是一个构造函数，提供了resolve和reject两个方法，一旦异步操作成功结束，就调用resolve方法，一旦异步操作失败，就调用reject方法。

1、Promise的基本语法如下：

let promise = new Promise(function(resolve, reject) {
  // 异步操作的代码...

  if (/* 操作成功 */) {
    resolve(value); // 将promise的状态从"pending"变为"fulfilled"，并传递"成功值"
  } else {
    reject(error); // 将promise的状态从"pending"变为"rejected"，并传递"错误原因"
  }
});

2、then、catch、finally

你可以使用.then()方法来设置当Promise被兑现（或拒绝）时应该执行的回调函数：

promise.then(
  function(value) { /* 成功时执行的函数 */ },
  function(error) { /* 失败时执行的函数 */ }
);

如果你只想处理拒绝状态，可以使用.catch()方法：

promise.catch(function(error) {
  // 处理拒绝的情况
});

而为了在异步操作完成后执行一些无论成功还是失败都要执行的代码，可以使用.finally()方法：

promise.finally(function() {
  // 无论成功还是失败，都会执行的代码
});

3、静态方法

（1）Promise.resolve(value)

返回一个以给定值解析后的 Promise 对象。

（2）Promise.reject(reason)

返回一个以给定原因拒绝的 Promise。

（3）Promise.all(iterable)

返回一个 Promise 实例，此实例在 iterable 参数内的所有 Promise 都“成功完成（fulfilled）”时完成，或者在任何一个 Promise 失败（即被拒绝）时失败。

（4）Promise.allSettled(iterable)

返回一个在所有给定的 Promise 都已经兑现（fulfilled）或拒绝（rejected）后的 Promise，并带有一个对象数组，每个对象表示对应的 Promise 结果。

（5）Promise.race(iterable)

返回一个 Promise，它将与第一个传递的 Promise 相同的完成（fulfillment）或失败（rejection）的结果。

（6）Promise.any(iterable)

返回一个 Promise，一旦 iterable 中的任何一个子 Promise 完成（fulfilled），就返回那个 Promise 的结果。如果所有的 Promise 都失败（rejected），那么返回的 Promise 将是失败的。

七、module

es6意义最大的语法变化，就是引入模块。

一个模块内部，使用export命令转出对外的接口。

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

上面的模块输出了sum和pi两个接口。

import命令用于引入该模块。

// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

八、箭头函数

任何使用function的地方，都可以使用箭头函数，其调用和普通函数一样。与function不同的是，在箭头函数这种的this是指向当前宿主对象。

//1. 标准情况下
var fn=(形参1，形参2)=>{ 函数体 }

//2.当只有一个变量时，可以省略()
var fn2=info=>{ 函数体 }

//3.函数体只有一个表达式的时候，省略{},此时函数隐藏return,但尽量不要隐藏{},可读性差
var fn3=()=>唯一函数体
var fn4=(age)=>age+1;

JavaScript 中引入箭头函数（Arrow Functions）主要是为了提供一种更简洁的函数写法，并解决一些传统函数表达式存在的问题。箭头函数在 ES6（ECMAScript 2015）中被添加到 JavaScript 语言规范中，它们具有几个主要优点：

1、更短的语法

箭头函数提供了一种更简洁的方式来写函数表达式。不需要使用 function 关键字，也可以避免使用花括号和 return 关键字（在单个表达式的情况下）。

// 传统函数表达式
const add = function(a, b) {
    return a + b;
};

// 箭头函数
const add = (a, b) => a + b;

2、this的词法绑定

在传统的函数表达式中，this 关键字的值取决于函数是如何被调用的，这可能会导致一些混乱。箭头函数没有自己的 this，它们会捕获其所在上下文的 this 值，使得 this 的行为更加可预测。

function Timer() {
    this.seconds = 0;
    setInterval(() => {
        this.seconds++; // `this` 指向 Timer 实例
    }, 1000);
}

3、没有自己的arguments对象

传统的函数有自己的 arguments 对象，而箭头函数没有。箭头函数可以访问外围函数的 arguments 对象，或者使用剩余参数语法（...args）来获取参数。

const joinArgs = (...args) => args.join(', ');

4、不可以作为构造函数

箭头函数不能用作构造函数，它们没有 prototype 属性，也不能使用 new 关键字调用。

5、没有new.taqrget

在箭头函数内部，new.target 是 undefined，因为箭头函数不能通过 new 关键字调用。

九、字符串的拼接

一般情况下，我们使用的字符串拼接方式都是‘+’，但当有大段代码且包含html标签，就是用模版拼接（反引号``）

str1='星期六';
str2='吃火锅';
var str='当下是${str1},适合去${str2};'

在字符串模板中还可以使用函数

function fn(){
return '天气好，适合吃火锅';
}
var str='${fn()}'

十、解构函数

//1. 将数组的元素，赋值给相应的变量.变量和元素之间是位置对应关系。
var books=['A','B','C','D'];
let[b1,b2,b3,b4]=books;

//2. 将对象的元素，赋值给相应的变量.变量必须是对象中的属性名或者是方法名
var {name,age}={name:11,age:22}

十一、...的用法（扩展运算符）

//在数组前面时，将数组展开
var str=[1,3,5,6]
console.log(...str); //输出1，3，5，6

//将形参合并为数组
fn1('zs','li',18)
function fn1(...arr){
    console.log(arr); // 输出["zs","li",18]
}

//在对象中可以展开属性
var obj={
    name:'ls',
    age:18,
}
var obj1={...obj,money:1000}
console.log(obj1)    //{name:'ls',age:18,money:1000}

1、扩展运算符的深浅拷贝

（1）如果数组或对象中的元素只是简单类型,一层对象或者数组，就是深拷贝

let staff1 = {name: 'xiaohong',age: 27};
let staff2 = {...staff};
staff2.name = 'xiaoming'
staff1 : {name: 'xiaohong',age: 27}
staff2:{name: "xiaoming", age: 27}

（2）如果数组或对象中的元素是复杂类型，就是浅拷贝

let aa = {
age: 18,
name: 'aaa',
    address: {
        city: "hangzhou"
    }
}
 
let bb = {...aa}
bb.address.city = 'shanghai'
 
 
aa: {
        age: 18,
        name: 'aaa',
        address: {
            city: 'shanghai'
        }
    }
 
bb: {
        age: 18,
        name: 'aaa',
        address: {
            city: 'shanghai'
        }
    }