目录

1. 变量声明(var,let,const)

2. 参数默认值

3. 箭头函数

4. 解构赋值

5. 扩展运算符(...)

1. • 变量声明

var关键字

以前使用 var关键字声明变量
-> 有作用域的提升
-> 没有块作用域的概念
-> 使用var可以重复的声明变量
-> 使用var声明变量时,可省去关键字

ES6新增命令(let,const)

let关键字: 声明变量, 先声明,再使用(否则报错), 有块级作用域, 不允许重复声明变量
const关键字: 声明一个只读的常量(声明后值不可修改), 必须初始化,有块级作用域

暂时性死区: 在代码块内,使用let命令声明变量之前,该变量都是不可用的
注意:
-> 区块中使用let/const,区块形成封闭作用域, 先声明再使用,否则报错
-> ES6允许块级作用域的任意嵌套
-> 外层作用域无法读取内层作用域变量
-> 内层作用域可以定义外层作用域的同名变量
-> 块级作用域的出现,实际上使得广泛应用的立即执行函数表达式(IIFE)不再必要了(可以不在使用闭包,立即执行函数)

      {var a = 10var a = 100}console.log(a)  //100{let num = 20num = 200console.log(num)}// console.log(num)// 遍历数组let arr = [1, 2, 3]for (var i = 0; i < arr.length; i++) {setTimeout(function () {console.log(i)  //由于var声明的变量没有块作用域,故会打印3个3, 可使用闭包解决},1000)}// 闭包解决for (var i = 0; i < arr.length; i++) {(function (a) {setTimeout(function () {console.log(a)},1000)})(i) //闭包}// let声明for (let i = 0; i < arr.length; i++) {setTimeout(function () {console.log(i)  // 0 1 2},1000)}var tmp1 = 1function fun(){// var tmp;  局部变量提升,覆盖外层全局变量var tmp2 = 2console.log(tmp1);  //undefined if(true){var tmp1 = 'hello'// tmp = 'hello'}}fun()// console.log(tmp2);  //无法访问内部作用域的变量// const关键字: 声明一个只读的常量(声明后值不可修改),必须初始化const p = 3// p = 1      修改会报错 Assignment to constant variable.赋值给常数变量console.log(p);// ES5中定义常量Object.defineProperty(window,'PI',{value: 3.14})console.log(PI);

2. • 参数默认值

    // ES5设置默认值 if或者||function sum1(a,b,c){c = c || 10return a + b + c}console.log(sum1(1,2)); // 13// ES6中设置默认值  设置默认值的形参需写在最后 s数组,对象均可function sum2(a, b = 11, c = []){return a + b + c}console.log(sum2(1,2));  // 3

3. • 箭头函数

• ()=>{ }

• 箭头函数中的this, 指向函数定义时this的指向(通常函数定义时指向的是window)

• 箭头函数没有arguments

      // 箭头函数 可理解为函数表达式的缩写// 函数表达式:  变量 = 匿名函数let fun1 = function () {console.log('111')}// 箭头函数  也可设置默认值let getMax = (a, b) => {return Math.max(a, b)}console.log(getMax(12, 13)) // 13// 当只有一个参数时, 可省略箭头函数的()// 当只有一条语句时, 可省略箭头函数的{}, return可不写, 结果自动返回// let getAbs = (a)=>{//   return Math.abs(a)// }let getAbs = (a) => Math.abs(a)// 箭头函数和普通函数中this指向问题区别let a = 1000 //无变量提升, 不会挂着window对象上var obj = {a: 100,getA1: function () {// 普通函数中的this,指向函数调用者console.log(this) //{a: 100, getA1: ƒ, getA2: ƒ}return this.a},getA2: () => {// 箭头函数中的this, 指向函数定义时this的指向(通常函数定义时指向的是window)console.log(this) // Window{ }return this.a},getA3: function (n1, n2) {console.log('3--arguments-->', arguments)return this.a},getA4: (n1, n2) => {console.log('4--arguments-->', arguments)},}console.log(obj.getA1()) // 100console.log(obj.getA2()) // undefined// console.log(obj.getA2());  // 1000   若var a = 1000// 箭头函数没有argumentsconsole.log(obj.getA3(1, 2)) //3--arguments--> Arguments(2)console.log(obj.getA4(3, 4)) //arguments is not defined

4. • 解构赋值

      // 针对数组和对象进行解构赋值// 数组的解构var arr = ['香蕉', '西瓜', '梨', '苹果']// ES5中// const apple = arr[3]// const pear = arr[2]// const banana = arr[0]// ES6中使用解构改写 不赋值的元素,,const [banana, , pear, apple] = arrconsole.log(apple, pear, banana) //苹果 梨 香蕉// 把数组中的第一个元素放在变量ba2中,其余放在一个新数组fruits中const [ba2, ...fruits] = arrconsole.log(ba2, fruits) //香蕉 (3) ['西瓜', '梨', '苹果']// 对象中的解构赋值const obj = { a: 10, b: 20, c: 30 }// ES5中获取console.log(obj.a);  // 10console.log(obj['b']); // 20// 使用ES6解构赋值改写const { a, b } = objconsole.log(a,b); //10 20const { a: num1} = objconsole.log(num1);  //10const { z: num2} = objconsole.log(num2);  //undefinedconst { x = 50 } = objconsole.log(x);   //50console.log(obj);  //{a: 10, b: 20, c: 30}

5. • 扩展运算符...

// 扩展运算符 ...// 1. 拷贝数组// ES5中复制数组元素 (拷贝)const arr2 = []// 方式1: 遍历for(let i = 0; i < arr.length; i++){arr2.push(arr[i])}// 方式2: assign()Object.assign(arr2,arr)console.log(arr2);const n1 = [1,2,[3,[4,5]]]const n2 = []// 浅拷贝           深拷贝是全展开[1,2,3,4,5]Object.assign(n2,n1)console.log(n2); //[1, 2, Array(2)]// ES6使用扩展运算符改写拷贝数组    浅拷贝const n3 = [...n1]console.log(n3);  //[1, 2, Array(2)]// 2. 拼接数组const a1 = [1,2]const a2 = [1,2]const a3 = [1,2]// 数组的方式 concatconst bigArr1 = a1.concat(a2,a3)console.log(bigArr1);  // [1, 2, 1, 2, 1, 2]const bigArr2 = [...a1,...a2,...a3]console.log(bigArr2);  // [1, 2, 1, 2, 1, 2]// 3. 解构和赋值连用// 把数组中的第一个元素放在变量b3中, 将剩余元素存入一个新数组fruitsvar arr11 = ['香蕉', '西瓜', '梨', '苹果']const [b3, ...fs] = arr11console.log(b3,fs);  //香蕉 (3) ['西瓜', '梨', '苹果']// 4. 作为函数的参数const f1 = (...params) =>{console.log(params);// 进行求和let sum = 0params.forEach(item => sum += item)return sum}const sum1 = f1(10,12,13)console.log(sum1);  //35// 对象中扩展运算符的使用const obj11 = {a:10,b:20}// 对象的拷贝const obj22 = {...obj}console.log(obj22); //{a: 10, b: 20, c: 30}const obj33 = { c: 10, a:30, d: 222,...obj11,}console.log(obj33);  // {c: 10, a: 10, d: 222, b: 20}

PreviousNotes:

https://blog.csdn.net/qq_54379580/article/details/126464151?spm=1001.2014.3001.5501