阅读数:85 评论数: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方法。

七、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'
        }
    }