• Let 与 Const 区别 （2022.11.7）

    目录

    let 与 const

    一、let 命令

    1.基本用法

    2.块级作用域

    3.与 var 的区别

    二、 const 命令

    let 与 const 题目

    ---------------------------------------------------------------------------

    属性的遍历（解构赋值）

    单层对象

    深层对象

    数组

    乱序解构

    ---------------------------------------------------------------------------

    Promise 容器

    promise 状态（promise 承诺 不可以改变）

    then/catch

    all / race

    ---------------------------------------------------------------------------

    async异步函数

    ---------------------------------------------------------------------------

    for each 用法

    一、基本用法

    二、循环中断

    练习

    --------------------------------------------------------------------------------------

    for in

    for of

    --------------------------------------------------------------------------------------

    Object.values

    --------------------------------------------------------------------------------------

    求幂运算符 (**)

    --------------------------------------------------------------------------------------

    includes 方法

    --------------------------------------------------------------------------------------

    对象属性和属性值同名省略

    --------------------------------------------------------------------------------------

    Set 

    set创建方式，添加元素

    查询有没有相关数字

    输出数组的长度

    删除某一个元素

    set 转换成数组（运用拓展运算符）

    set 去除重复性（利用set 不重复性）

    --------------------------------------------------------------------------------------

    Map

    Map的创建，key可以是任何类型

    查询有没有相关字段

    获取map 的 value

    Map 的删除

    --------------------------------------------------------------------------------------

    模板字符串

    --------------------------------------------------------------------------------------

    函数剩余参数（arguments 可以输出函数接受的所有实参，是一个类数组）

    以前，接受参数输出参数很复杂

    ES6接受参数可以用arguments，输出成一个类数组

    类数组转换为数组

    函数剩余参数,直接输出数组

    假设确定第一个传参是1 但是不确定后面需要传的参数，单独获取第一个参数，后面的参数用剩余参数去获取

    --------------------------------------------------------------------------------------

    数组剩余参数

    --------------------------------------------------------------------------------------

    对象剩余参数

    --------------------------------------------------------------------------------------

    拓展运算符

    拼接数组

    代替Object.assign

    --------------------------------------------------------------------------------------

    默认参数

    函数默认参数

    ES6默认参数

    --------------------------------------------------------------------------------------

    可选链 ?.

    --------------------------------------------------------------------------------------

    空位合并运算符 ??

    --------------------------------------------------------------------------------------

    findIndex

    --------------------------------------------------------------------------------------

    find

    --------------------------------------------------------------------------------------

    forEach

    --------------------------------------------------------------------------------------

    map

    --------------------------------------------------------------------------------------

    filter

    --------------------------------------------------------------------------------------

    some

    every

    let 与 const

    一、let 命令

    1.基本用法

    let 和 var 都是用来声明变量，但是 let 命令只在所在的代码块里有效

    1. {
    2.     var a = 10
    3.     let b = 5
    4.     
    5.     console.log(a);//10
    6.     console.log(b);//5
    7. }
    8.     console.log(a);//10
    9.     console.log(b);//undefined

    2.块级作用域

    ES5 只有 全局作用域 和 函数作用域，没有 块级作用域

    会 内层变量可能会覆盖外层变量

    计数的循环变量泄露为全局变量

    ES6 标准中，由一对大括号包裹形成的作用域就是块级作用域

    1. function f1() {
    2.   let n = 5;
    3.   if (true) {
    4.     let n = 10;
    5.   }
    6.   console.log(n); // 5
    7. }
    8. 表示外层代码不受内层代码块的影响，如果 使用的 var ，最后输出的值是 10
    9. function f1() {
    10.   let n = 5;
    11.   if (true) {
    12.     var n = 10;
    13.   }
    14.   console.log(n); // 10
    15. }
    16.

    3.与 var 的区别

    不允许在相同作用域内重复声明

    let 不允许在相同作用域内，重复声明同一个变量

    1. //报错
    2. function func() {
    3.   let a = 10;
    4.   var a = 1;
    5. }
    6. //报错
    7. function func() {
    8.   let a = 10;
    9.   let a = 1;
    10. }
    11. 不能在函数内部重新声明参数

    不存在变量提升

    var 命令会发生 “变量提升” 现象，即变量可以在声明之前使用，值为 undefined

    1. // var 的情况
    2. console.log(foo); // 输出undefined
    3. var foo = 2;
    4. //脚本开始运行时，foo 就已经存在，只不过是没有值而已
    5.  
    6. // let 的情况
    7. console.log(bar); // 报错ReferenceError
    8. let bar = 2;
    9. //变量 bar 用 let 声明，就不会发生变量提升，所以 在脚本运行前 bar 是不存在的，所有抛出了一个错误

    暂时性死区（tempoal dead zone 简称 TDZ）

    只要块级作用域内存在 let 命令，它所声明的变量就 “绑定” 这个区域，不在受外部影响

    1. var tmp = 123;//存在了 全局变量 tmp
    2.  
    3. if (true) {
    4.   tmp = 'abc'; 
    5.   let tmp;// 在块级作用域内 let 又声明一个局部变量 tmp
    6. }
    7. //导致后者绑定了这个 块级作用域，所以在 let 声明变量前，对 tmp 赋值都会报错
    8.  
    9. if (true) {
    10.   // TDZ开始
    11.   tmp = 'abc'; // ReferenceError
    12.   console.log(tmp); // ReferenceError
    13.   let tmp; // TDZ结束 在 let 声明变量前都属于 tmp 的 “死区”
    14.   console.log(tmp); // undefined
    15.   tmp = 123;
    16.   console.log(tmp); // 123
    17. }

    其他的死区

    1. function bar(x = y, y = 2) {
    2.   return [x, y];
    3. }
    4. bar(); // 报错
    5. //参数x 默认值等于另一个参数 y ，此时y 还没有声明，属于 “死区”
    6.  
    7. ///
    8.  
    9. function bar(x = 2, y = x) {
    10.   return [x, y];
    11. }
    12. bar(); // [2, 2]
    13.  
    14. ///
    15.  
    16.  
    17. // 不报错
    18. var x = x;
    19.  
    20.  
    21. // 报错
    22. let x = x;
    23. // ReferenceError: x is not defined
    24.

    二、 const 命令

    1. 基本用法

    const 声明 一个只读的常量，一旦声明，常量的值不能改变

    1. const PI = 3.1415;
    2. console.log(PI); // 3.1415
    3.  
    4.  
    5. PI = 3;
    6. // TypeError: Assignment to constant variable.

    const 一旦声明变量，就必须立即初始化，不能留到以后赋值，就会报错（只声明不赋值，就会报错）

    1. const foo;
    2. // SyntaxError: Missing initializer in const declaration

    const 的作用域与let命令相同：只在声明所在的块级作用域内有效

    1. if (true) {
    2.   const MAX = 5;
    3.   console.log(MAX);// 5
    4. }
    5.  
    6.  
    7. Console.log(MAX); // Uncaught ReferenceError: MAX is not defined
    8.

    const 命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用

    1. if (true) {
    2.   console.log(MAX); // ReferenceError
    3.   const MAX = 5;
    4. }

    const 声明的常量，也和 let 一样不可重复声明

    1. // 以下两行都会报错
    2. const message = "Goodbye!";
    3. const age = 30;

    const 保证是变量指向的那个内存地址所保存的数据不得改动

    1. const foo = {};//foo储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址，不能把 foo 指向另一个地址，对象本身是可变的，所以可以添加新的属性
    2.  
    3.  
    4. // 为 foo 添加一个属性，可以成功
    5. foo.prop = 123;
    6. foo.prop // 123
    7.  
    8.  
    9. // 将 foo 指向另一个对象，就会报错
    10. foo = {}; // TypeError: "foo" is read-only
    11.  
    12. //对象本身是可变的
    13. const a = [];
    14. a.push('Hello'); // 可执行
    15. a.length = 0;    // 可执行
    16. a = ['Dave'];    // 报错

    冻结 对象 使用 Object.freeze方法

    1. const foo = Object.freeze({});
    2.  
    3.  
    4. // 常规模式时，下面一行不起作用；
    5. // 严格模式时，该行会报错
    6. foo.prop = 123;

    除了将对象本身冻结，对象的属性也可以冻结。下面是一个将对象彻底冻结的函数。

    1. var constantize = (obj) => {
    2.   Object.freeze(obj);
    3.   Object.keys(obj).forEach( (key, i) => {
    4.     if ( typeof obj[key] === 'object' ) {
    5.       constantize( obj[key] );
    6.     }
    7.   });
    8. };

    let 与 const 题目

    题目一：

    下面不属于关键字let的特点的是：（ B ）

    A.只在 let 命令所在的代码块内有效

    B.会产生变量提升现象

    C.同一个作用域，不能重复声明同一个变量

    D.不能在函数内部重新声明参数

    题目二：

    关于关键字const，下列说法错误的是：（ D ）

    A.用于声明常量，声明后不可修改

    B.不会发生变量提升现象

    C.不能重复声明同一个变量

    D.可以先声明，不赋值。

    题目三：

    写出下面两段代码运行结果：

    for(var i=0; i<3; i++){

    console.log(i);

    }

    console.log(i);

    运行结果？

    i = 3

    for(let j=0; j<3; j++){

    console.log(j);

    }

    console.log(j);

    运行结果？

    undefined

    题目四：

    1. {

    2. const person = {name:"小明",gender:"男"};

    3. person.name = "张三";

    4. person.age = "18";

    5. person = {name:"小明",gender:"男",age:"18"}

    6. }

    语句3能否执行 能

    语句4能否执行 能

    语句5能否执行 不能

    ---------------------------------------------------------------------------

    属性的遍历（解构赋值）

    单层对象

    以前 输出对象 （冗余）

    1. //对象中有 三个属性
    2. const obj = {
    3.     nickname:'大帅哥',
    4.     age:22,
    5.     gender:'男'
    6.     }
    7. //定义三个变量 接受 三个属性
    8. const nickname = obj.nickname
    9. const age = obj.age
    10. const gender = obj.gender
    11. //依次输出 名称 年龄 性别
    12. console.log (nickname,age,gender)

    ES6

    1. const obj = {
    2.     nickname:'大帅哥',
    3.     age:22,
    4.     gender:'男'
    5.     }
    6. const{ nickname ,age , gender) = obj
    7. //依次输出 名称 年龄 性别
    8. console.log (nickname, age, gender)//大帅哥 22 男

    深层对象

    1. const obj = {
    2.     nickname:'大帅哥',
    3.     age:22,
    4.     gender:'男',
    5.     doing:{
    6.         morning:'play',
    7.         evening:'sleep'
    8.     }
    9. const { nickname:myname ,doing {morining} }= obj
    10. //定义的nickname已经不存在了，被 myname替代了
    11. console.log(myname ,doing)//大帅哥 play

    数组

    1. const arr = [1,2,3]
    2. const [a,b,c] = arr
    3. console.log(a, b, c)// 1 2 3

    乱序解构

    1. const arr = [1,2,3]
    2. const {1:a,2:b,0:c} = arr
    3. console.log(a, b, c)// 2 3 1

    ---------------------------------------------------------------------------

    Promise 容器

    promise 状态（promise 承诺 不可以改变）

    三种：pending（等待） fulfilled（成功） rejected（失败）

    从等待 变成 成功 或者是 等待 变成 失败（状态改变后，状态不可逆，状态不可以进行第二次改变）

    1. coust p = new Promise ((resolve,reject) = > {
    2. //ressolve(1)    // 1
    3. //reject(1)      //<rejected>1
    4. //throw 1        //<rejected>1
    5. })
    6. cousole.log(p)

    then/catch

    1. new Promise （（resolve,reject） =>{
    2. // resolve(100)        // 成功 100 222
    3. // reject(1111)        // 失败 1111 222
    4. // throw 111
    5. }).then (res = >console.log('成功',res)}
    6. .catch(err = >console.log('失败',err)}
    7. .finally(() = > console.log(222)
    1. new Promise （（resolve,reject） =>{
    2. // resolve(100)        // 第二个then 900
    3. // reject(1)        // catch <reject>1
    4. // throw 111
    5. }).then (res = > new Promise((resolve, reject) = > reject(800 + res)
    6. .then(err = >console.log('第二个then',res)}
    7. .catch(err = >console.log('catch',err)}

    all / race

    all 方法传入数组，返回一个对象

    1. const createPromise = (delay,flag = true) =>{
    2.     return new Promise((resolve, reject) = >{
    3.     setTimeout(() = >{
    4.      flag ? resolve (‘成功${dalay}’):rejevt(‘失败${delay}’)},delay)
    5.      })
    6. }
    7.  
    8. //all
    9. Promise.all ([createPromise(1000),createPromise(1500),createPromise(2000)
    10. .then(res = > console.log('成功',res))
    11. .then(err = > console.log('失败',err))
    12. // 成功 ['成功1000','成功1500','成功2000']
    13.  
    14. Promise.all ([createPromise(1000),createPromise(1500，false),createPromise(2000)
    15. .then(res = > console.log('成功',res))
    16. .then(err = > console.log('失败',err))
    17. // 失败 失败1500
    18.  
    19. //race
    20. //输出第一个执行完的（无论成功还是失败）
    21. Promise.race ([createPromise(2000),createPromise(1500),createPromise(1000)
    22. .then(res = > console.log('成功',res))
    23. .then(err = > console.log('失败',err))
    24. // 成功 成功1000 
    25.  
    26. Promise.race ([createPromise(2000),createPromise(1500),createPromise(1000,false)
    27. .then(res = > console.log('成功',res))
    28. .then(err = > console.log('失败',err))
    29. // 失败 失败1000 
    30.

    ---------------------------------------------------------------------------

    async异步函数

    保证了用同步的方式 执行异步操作 实现了排队的效果

    默认是返回一个 Promise ，Promise 值就是这个函数的return 

    1. const requestLogin = (params) = >{
    2.     return new Promise (resolve => {
    3.     resolve(‘${params.username}很帅’)
    4.     })
    5. }
    6. const requestUserInfo = (params) = >{
    7.     return new Promise (resolve => {
    8.     resolve(‘${params}，也很高’)
    9.     })
    10. }
    11. const handleLogin = async () = > {
    12.     const res = await requestLogin({
    13.         username:'大帅哥',
    14.         password:'123456'
    15.     })
    16.     const info = await requestUserInfo(res)
    17.     console.log(info)
    18. }
    19. // 大帅哥很帅，也很高

    ---------------------------------------------------------------------------

    for each 用法

    一、基本用法

    foreach（）方法用于遍历数组，调用数组的每个元素，并将元素传递给回调函数进行处理

    语法：array.forEach(function(currentValue,index,arr),thisValue)

    参数：

    function（currentValue,index,arr） 数组中每个元素需要调用的函数，必需

    currentValue：当前元素，必需

    index：当前元素的索引值，可选

    arr：当前元素所属的数组对象，可选

    thisValue 传递给函数的值，用作"this"的值，可选

    如果这个参数为空，"this"值为"undefined"

    在数组的原始长度以外添加元素 (元素否传递给回调函数）

    1. var words = [1, 2, 3, 4];
    2. var sum=0;
    3. words.forEach(function(word) {
    4.     sum+=word;
    5. 	if(word == 2){
    6. 		words.push(5);
    7. 	}	
    8. });
    9. console.log(sum);// 10 
    10. console.log(words);// [1,2,3,4,5]

    添加元素以填充数组中缺少的元素（是，如果该索引尚未传递给回调函数）

    1. var words = ["one", ,"three", "four"];
    2. words.forEach(function(word,index) {
    3.     console.log(word);
    4.     if (word === "one") {
    5.         words[index+1] = "two";
    6.     }
    7. });
    8. console.log(words);//['one','two','three','four']

    从数组中删除元素（否，除非该元素已传递给回调函数）

    1. var words = ["one", "two", "three", "four"];
    2. words.forEach(function(word) {
    3.     console.log(word);
    4.     if (word === "two") {
    5.         words.pop();
    6.     }
    7. });
    8. console.log(words);//['one','two','three']

    二、循环中断

    ES6的 forEach 循环只能通过 return 中断档次循环

    1. let data = [1,2,3,4,5,6]
    2. data.forEach((val,index,arr)=>{
    3.     console.log("当前第"+(index+1)+"次循环开始");
    4.     if(val>3){ 
    5.         return ;
    6.     }
    7.     console.log('val', val);
    8. });
    9. // 当前第1次循环开始
    10. // var 1
    11. // 当前第2次循环开始
    12. // var 2 
    13. // 当前第3次循环开始
    14. // var 3 
    15. // 当前第4次循环开始
    16. // 当前第5次循环开始
    17. // 当前第6次循环开始

    forEach只能通过抛异常的方式终止循环

    1. let arr = [0, 1, "stop", 3, 4];
    2. try {
    3.     arr.forEach(element => {
    4.         if (element === "stop") {
    5.             throw new Error("forEachBreak");
    6.         }
    7.         console.log(element); // 输出 0 1 后面不输出
    8.     });
    9. } catch (e) {
    10.     console.log(e.message); // forEachBreak
    11. };
    12. // 0
    13. // 1 
    14. // forEachBreak

    当遇到需要终止循环的时候，forEach不再合适。

    练习

    改写用 foreach

    var arr = [1,2,3,4];

    for(let i=0; i

    console.log(arr[i]);}

    ------------------------------------>

    var arr = [1,2,3,4];

    arr.forEach(function(item){

    console.log(item-1);

    });

    --------------------------------------------------------------------------------------

    for in 

    1. // for in
    2. const arr =[3,2,1]
    3. for (let index in arr) {
    4.     console.log(index) // 0 1 2
    5. // index 遍历的是数组的索引值
    6.  
    7. // 只需要通过索引值的下标就能得到值
    8.     console.log(arr[index]) // 3 2 1
    9. }
    10.  
    11.  
    12. //对象
    13. const obj = {
    14.  name:'大帅哥',
    15.  age:22,
    16.  gender:'男'
    17. }
    18. for （let key in obj）{
    19.  console.log(key) // name age gender
    20.  
    21.  console.log(obj[key]) // 大帅哥 22 男
    22. }

    for of

    1. // for of 
    2. const arr = [3, 2 ,1]
    3. for (let value of arr) {
    4.     console.log(value) // 3 2 1
    5. }
    6.  
    7.  
    8. // 对象
    9. const obj = {
    10.     name:'大帅哥',
    11.     age:18,
    12.     gender:'男'
    13. }
    14. for(let value of obj){
    15.     console.log(value)// obj is not iterable
    16. }

    let of 只能遍历出可迭代对象

    对象不是可迭代对象

    可迭代对象：数组 、set 、map

    对象变成可迭代对象可以参考相关视频：es6：如何将一个普通对象转化为可迭代的对象_嘫颜的博客-CSDN博客

    --------------------------------------------------------------------------------------

    Object.values

    使用 Object.values 就能够把一个对象里所有属性的值 变成 数组

    1. const obj = {
    2.     name: '大帅哥',
    3.     age: 22,
    4.     hobby:'篮球'
    5. }
    6. const values = Object.values(obj)
    7. console.log(values)      // ['大帅哥',22,'篮球']
    8. // 使用 Object.values 就能够把一个对象里所有属性的值 变成 数组

    --------------------------------------------------------------------------------------

    求幂运算符 (**)

    1. // 3 * 3 
    2.  
    3. const num = 3 * 3
    4. console.log(num) // 9
    5.  
    6.  
    7. // 3 * 3 *3 
    8.  
    9. const num = 3 * 3 *3
    10. console.log(num) // 27
    11.  
    12.  
    13. const num = Math.pow(3,3)
    14. console.log(num) // 27
    15.  
    16. //ES6
    17. const num = 3 ** 3
    18. console.log(num) // 27

    --------------------------------------------------------------------------------------

    includes 方法

    这个方法既可以被字符串使用也可以被数组使用，作用是传入一个元素，并且判断调用者身上有没有这个元素，如果拥有就返回一个ture ，不拥有的话就返回 false

    1. //ES6
    2.  
    3. //字符串
    4. const str = '大帅哥'
    5.  
    6. const bol1 = str.includes('大')
    7. const bol2 = str.includes('小')
    8.  
    9. console.log(bol1)// true
    10. console.log(bol2)// false
    11.  
    12.  
    13. //数组
    14. const arr = [1, 2, 3]
    15.  
    16. const bol1 = arr.includes(3)
    17. const bol2 = arr.includes(6)
    18.  
    19. console.log(bol1)// true
    20. console.log(bol2)// false
    21.  
    22.  
    23.  
    24. //indexOf 旧语法
    25.  
    26. //找到匹配的就返回索引值，没有找到就返回 -1
    27.  
    28. const arr = [1, 2, 3]
    29.  
    30. const index1 = arr.indexOf(3)
    31. const index2 = arr.indexOf(5)
    32.  
    33. console.log(index1)// 2
    34. console.log(index2)// -1
    35.  
    36.

    indexOf （旧版本）和 includes （新版本）的区别

    includes 能检测出数组里面有没有 NaN（Not a Number）

    1. const arr = [1, 2, 3, NaN]
    2.  
    3. const index = arr.indexOf(NaN)
    4. console.log(index) // -1
    5.  
    6. const bol = arr.includes(NaN)
    7. console.log(bol) // ture

    --------------------------------------------------------------------------------------

    对象属性和属性值同名省略

    1. const fn = ( name, age, hobby) => {
    2.     return {
    3.         name:name,
    4.         age:age,
    5.         hobby:hobby
    6.     }
    7. }
    8. console.log(fn{'大帅哥','18','篮球'}) //{name:'大帅哥',age:'18',hobby:'篮球'}
    9.  
    10. //箭头函数简写
    11. const fn = (name, age, hobby) => ({
    12.       name: name,
    13.       age: age,
    14.       hobby: hobby
    15. })
    16. console.log(fn{'大帅哥','18','篮球'}) //{name:'大帅哥',age:'18',hobby:'篮球'}
    17.  
    18.  
    19. //ES6
    20. const fn = (name, age, hobby) => ({
    21.       name,
    22.       age,
    23.       hobby
    24. })
    25. console.log(fn{'大帅哥','18','篮球'}) //{name:'大帅哥',age:'18',hobby:'篮球'}

    --------------------------------------------------------------------------------------

    Set 

    set创建方式，添加元素

    1. const set = new Set()
    2. set.add(1)
    3. set.add(2)
    4. console.log(set)  //Set{ 1, 2 }
    5.  
    6.  
    7. const set = new Set([1, 2])
    8. console.log(set)  //Set{ 1, 2 }
    9.  
    10. set.add(3)
    11. console.log(set)  //Set{ 1, 2, 3 }
    12.

    查询有没有相关数字

    1. const set = new Set([1, 2])
    2. console.log(set.has(1))  // true 
    3. console.log(set.has(5))  // false

    输出数组的长度

    1. const set = new Set([1, 2, 3])
    2. console.log(set.size) //3

    删除某一个元素

    1. const set = new Set([1, 2, 3])
    2. set.delete(1)
    3. console.log(set)//Set{1, 2}

    set 转换成数组（运用拓展运算符）

    1. const set = new Set([1, 2, 3])
    2. console.log([...set]) // [1, 2, 3]
    3.  
    4. console.log(Array.from(set)) // [1, 2, 3]

    set 去除重复性（利用set 不重复性）

    1. const arr1 = [1, 2, 1, 2, 3]
    2. console.log([...new Set(arr1)]) // [1, 2, 3]
    3.  
    4. //不会去重{}
    5. const arr2 = [1, {}, {}, 3]
    6. console.log([...new Set(arr2)]) // [1, {}, {}, 3]
    7.  
    8. //NaN 本身不等于本身，但是Set会把它去重
    9. const arr2 = [1, NaN, NaN, 3]
    10. console.log([...new Set(arr2)]) // [1, NaN, 3]

    --------------------------------------------------------------------------------------

    Map

    Map的创建，key可以是任何类型

    1. const map = new Map()
    2. map.set('帅哥',18)
    3. map.set(true,985)
    4. map.set(185,'帅哥')
    5. console.log(map) //Map{'帅哥' => 12,ture => 985,185 => '帅哥'}
    6.  
    7. const map = new Map ([['帅哥',18],[true,985],[185,'帅哥']])
    8. console.log(map) //Map{'帅哥' => 12,ture => 985,185 => '帅哥'}

    查询有没有相关字段

    1. const map = new Map ([['帅哥',18],[true,985],[185,'帅哥']])
    2.  
    3. console.log(map.has('帅哥')) // true
    4.  
    5. console.log(map.has(123)) // false

    获取map 的 value

    1. const map = new Map ([['帅哥',18],[true,985],[185,'帅哥']])
    2.  
    3. console.log(map.get('帅哥')) // 18
    4.  
    5. console.log(map.get(123)) // undefined

    Map 的删除

    1. const map = new Map ([['帅哥',18],[true,985],[185,'帅哥']])
    2.  
    3. map.delete(true)
    4.  
    5. console.log(map)// Map {'帅哥' => 18 , 185 =>'帅哥'}

    --------------------------------------------------------------------------------------

    模板字符串

    1. //拼接字符串
    2.  
    3. const nickname = '大帅哥'
    4. const age = 22
    5. const gender = '男'
    6.  
    7. function getHobby(){
    8.     return '篮球'
    9. }
    10. const myself = nickname + '今年' + age + '岁了，他是个' + gender + '人，喜欢' + getHobby()
    11. console.log(myself)
    12. //大帅哥今年22岁了，他是个男人，喜欢篮球
    13.  
    14.  
    15. //ES6
    16. const myself = `${nickname}今年${age}岁了，他是个${gender === '男' ? '大帅哥' : '小姐姐'}，喜欢${getHobby()}`
    17. console.log(myself)
    18. //大帅哥今年22岁了，他是个大帅哥，喜欢篮球

    --------------------------------------------------------------------------------------

    函数剩余参数（arguments 可以输出函数接受的所有实参，是一个类数组）

    以前，接受参数输出参数很复杂

    1. function fn (num1, num2) {
    2.     console.log(num1, num2) //1 2
    3. }
    4. fn(1, 2)
    5.  
    6.  
    7. function fn (num1, num2, num3, num4)) {
    8.     console.log(num1, num2, num3, num4) //1 2 3 4
    9. }
    10. fn(1, 2, 3, 4)
    11.

    ES6接受参数可以用arguments，输出成一个类数组

    1. //arguments 可以输出函数接受的所有实参，是一个类数组
    2. function fn () {
    3.     console.log(arguments) //[Arguments] {'0': 1, '1': 2, '2': 3, '3': 4}
    4. }
    5. fn(1, 2, 3, 4)
    6.  
    7.

    类数组转换为数组

    1. function fn () {
    2.     console.log([...arguments]) // [1, 2, 3, 4]
    3. }
    4. fn(1, 2, 3, 4)

    函数剩余参数,直接输出数组

    1. function fn (...args) {
    2.     console.log([args]) // [1, 2, 3, 4]
    3. }
    4. fn(1, 2, 3, 4)

    假设确定第一个传参是1 但是不确定后面需要传的参数，单独获取第一个参数，后面的参数用剩余参数去获取

    1. function fn (num, ...args) {
    2.     console.log(num) // 1
    3.     console.log([args]) // [2, 3, 4]
    4. }
    5. fn(1, 2, 3, 4)
    6.  
    7. function fn (num1, num2, ...args) {
    8.     console.log(num1, num2) // 1, 2
    9.     console.log([args]) // [3, 4]
    10. }
    11. fn(1, 2, 3, 4)

    --------------------------------------------------------------------------------------

    数组剩余参数

    1. const [a, ...arr] = [1, 2, 3]
    2.     console.log(a) //1
    3.     console.log(arr) //[2, 3] 
    4. }

    --------------------------------------------------------------------------------------

    对象剩余参数

    1. const {nickname, ...obj} = {nickname: '大帅哥'， age：22， gender: '男'}
    2. console.log(nickname) // 大帅哥
    3. console.log(obj) // {age: 22, gender: '男'}

    --------------------------------------------------------------------------------------

    拓展运算符

    深拷贝和浅拷贝的区别：

            浅拷贝主要是对指针的拷贝，拷贝后两个指针指向同一个内存空间

            深拷贝需要不但对指针进行拷贝，并对指针指向的内容进行拷贝，经过深拷贝后的指针是指向两个不同地址的指针。

    1. const arr1 = [1, 2, 3]
    2. const arr2 = [...arr1]
    3. console.log(arr2)         // [1, 2, 3]
    4. console.log(arr2 === arr1)// false
    5.  
    6. //对象
    7. const obj1 ={name:'大帅哥'} 
    8. const obj2 = {...obj}
    9. console.log(obj2)         //{name:'大帅哥'}
    10. console.log(obj2 === obj1)//false

    拼接数组

    1. const arr1 = [1, 2, 3]
    2. const arr2 = [4, 5, 6]
    3. const res1 = arr1.concat(arr2)
    4. console.log(res1)    // [1, 2, 3, 4, 5, 6]
    5. const res2 = [...arr1, ...arr2]
    6. console.log(res2)    // [1, 2, 3, 4, 5, 6]

    代替Object.assign

    1. const obj1 = {name: '大帅哥'}
    2. const obj2 = {age: 22}
    3. const res = Object.assign(obj1, obj2)
    4. console.log(res) // {name: '大帅哥', age: 22}
    5.  
    6. const res = {...obj1, ...obj2}
    7. console.log(res) // {name: '大帅哥', age: 22}

    --------------------------------------------------------------------------------------

    默认参数

    函数默认参数

    1. function showMe1 (name,age){
    2.    console.log(name, age) // undefined undefined
    3. }
    4. showMe()
    5.  
    6. //不传参默认值
    7. function showMe2 (name,age){
    8.     name = name || '大帅哥'
    9.     age = age || 22
    10.    console.log(name, age) // 大帅哥 22
    11. }
    12. showMe() 
    13.  
    14. //传参
    15. function showMe2 (name,age){
    16.     name = name || '大帅哥'
    17.     age = age || 22
    18.    console.log(name, age) 
    19. }
    20. showMe('帅哥',22) // 帅哥 22

    ES6默认参数

    1. //不传参默认值
    2. function showMe2 (name = '大帅哥' ,age = 22){
    3.    console.log(name, age) // 大帅哥 22
    4. }
    5. showMe() 
    6.  
    7.  
    8. //传参
    9. function showMe2 (name = '大帅哥' ,age = 22){
    10.    console.log(name, age) 
    11. }
    12. showMe('帅哥', 20) //帅哥 20

    --------------------------------------------------------------------------------------

    可选链 ?.

    可选链可以用在数组、对象、函数身上

    数组

    1. const list = null
    2. if(list && list.length){
    3.  
    4. }        //list 不存在 返回 undefined
    5.  
    6. //等于
    7.  
    8. if(list?.length){
    9.  
    10. }        //list 不存在 返回假
    11.  
    12. const first =list && list[0] //如果list 存在就会 获取list第一项
    13.  
    14. const first = list?.[0] 如果list 存在就会 获取list第一项,会判断可选链?.前面的list是否存在

    对象

    1. const obj ={
    2.  
    3.     cat:{
    4.         name:'喵喵'
    5.     }
    6. }
    7. const dog = obj && obj.dog && obj.dog.name
    8.  
    9. const dog = obj?.dog?.name //存在就继续往下找

    函数

    1. const fn = null
    2.  
    3. fn && fn()
    4.  
    5. fn?.()

    --------------------------------------------------------------------------------------

    空位合并运算符 ??

    1. //前面为假输出后面
    2. const a = 0 || '大帅哥'         //大帅哥
    3. const b = '' || '大帅哥'        //大帅哥
    4. const c = false || '大帅哥'     //大帅哥
    5. const d = undefined || '大帅哥' //大帅哥
    6. const e = null || '大帅哥'      //大帅哥
    7.  
    8. //空位合并运算符，只会把undefined 和 null 当成假值
    9. const a = 0 || '大帅哥'         //0
    10. const b = '' || '大帅哥'        //''
    11. const c = false || '大帅哥'     //false
    12. const d = undefined || '大帅哥' //大帅哥
    13. const e = null || '大帅哥'      //大帅哥

    --------------------------------------------------------------------------------------

    findIndex

    1. //返回索引值
    2. const findArr = [
    3.     {name:'大帅哥', age:20},
    4.     {name:'帅哥', age:19},
    5.     {name:'哥', age:18}
    6. ]
    7. // findIndex
    8. const index = findArr.findIndex((item) => {
    9.     return item.name === '大帅哥'
    10. })
    11. console.log(index)    //1
    12.  
    13. //缩写
    14. const index = findArr.findIndex(item => item.name === '大帅哥')
    15. console.log(index)    //1
    16.  
    17. //解构赋值
    18. const index = findArr.findIndex(({name}) => name === '大帅哥')
    19. console.log(index)    //1

    --------------------------------------------------------------------------------------

    find

    1. //返回 这一项
    2. const findArr = [
    3.     {name:'大帅哥', age:20},
    4.     {name:'帅哥', age:19},
    5.     {name:'哥', age:18}
    6. ]
    7. const dashuaige = findArr.find(({ name}) => name === '大帅哥')
    8. console.log(dashuaige)     //  {name:'大帅哥', age:20},

    --------------------------------------------------------------------------------------

    forEach

    作用跟for循环差不多

    return 和 break 跳不出循环

    用 try catch 跳出循环

    1. const arr = [1, 2, 3, 1, 2, 9, 8]
    2. arr.forEach((item, index, arr) =>{
    3.     console.log(item, index, arr)    //[1, 2, 3, 1, 2, 9, 8]
    4. })

    --------------------------------------------------------------------------------------

    map

    修改数组的每一项，返回新数组，并且不影响原数组

    1. const arr = [1, 2, 3, 1, 2, 9, 8]
    2. const newArr = arr.map(item => item *2)
    3. console.log(newArr)     //[2, 4, 6, 2, 4, 18, 16]
    4. console.log(arr)        //[1, 2, 3, 1, 2, 9, 8]

    --------------------------------------------------------------------------------------

    filter

    过滤的意思，将原数组过滤自己想要的元素到新数组里面，并且不会影响新数组

    1. const arr = [1, 2, 3, 1, 2, 9, 8]
    2. const newArr = arr.filter(item => item >=3)
    3. console.log(newArr)     //[3, 9, 8]
    4. console.log(arr)        //[1, 2, 3, 1, 2, 9, 8]

    --------------------------------------------------------------------------------------

    some

    只要数组中一个元素 大于等于自己想要的值就返回 true

    1. const flag = [1, 2, 3, 1, 2, 9, 8]
    2. const newArr = arr.some(item => item >=3)
    3. console.log(flag)     //true
    4. console.log(arr)        //[1, 2, 3, 1, 2, 9, 8]

    every

    只要数组中所有元素 大于等于自己想要的值才返回 true

    1. const flag = [1, 2, 3, 1, 2, 9, 8]
    2. const newArr = arr.every(item => item >=3)
    3. console.log(flag)     //false
    4. console.log(arr)        //[1, 2, 3, 1, 2, 9, 8]

  • 相关阅读:
    计算机网络-第4章 网络层
    【延展Extension的使用场景 Objective-C语言】
    【DL】self-attention
    数学计算式转为表达式树
    muduo源码剖析之TcpConnection连接管理
    外包干了2个月，技术退步明显.......
    41.cuBLAS开发指南中文版--cuBLAS中的Level-2gemvBatched()
    Open3D 点云法向量重定向（基于相机位置）
    CrossOver 23 正式发布：可在 Mac 上运行部分 DX12 游戏
    Lua重回TOP 20，TIOBE 3月编程语言排行榜出炉
  • 原文地址：https://blog.csdn.net/ZSDLZ37/article/details/127726502