ES6系列_01基本语法和解构扩展方法

╰半夏微凉° 2023-03-12 07:09 5阅读 0赞

## 1，ES6是什么？ ##

JavaScript的第六版，在ES5的基础上增加了许多特性：箭头函数、字符串插值、代理、生成器、结构赋值、块级作用域等等。

## 一、let和const ##

1.作用：声明变量  
ES6中明确规定，如果区块中存在let和const命令，则这个区块对这些命令声明的变量从一开始就形成封闭作用域。只要在声明之前就使用这些变量，就会报错（暂时性死区）。  
2.let使用注意：

1.  作用域只局限于当前代码块
2.  使用let声明的变量作用域不会被提升
3.  在相同的作用域下不能声明相同的变量
4.  for循环体现let的父子作用域

3.const使用注意：

1.  const声明一个只读的常量
2.  只在当前代码块中有效
3.  作用域不会被提升
4.  不能重复声明
5.  声明的常量必须赋值

二，ES6中的块级作用域  
在ES5中，只全局作用域和函数作用域。这会导致函数作用域覆盖了全局作用域；亦或者循环中的变量泄露为全局变量。  
如

var temp=1;
    
    function f(){ 
        console.log(temp);
        if(false){ 
            var temp='字符串变量';
        }
    }
    f()

//打印出
    undefined

因为变量提升，导致 if 语句体中的变量 temp 覆盖了外层变量 temp  
或者  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1ODAzOA_size_16_color_FFFFFF_t_70]  
为了解决这个问题 ES6出现块级作用域  
什么是ES6的块级作用域？  
用let命令新增了块级作用域，外层作用域无法获取到内层作用域，非常安全明了。即使外层和内层都使用相同变量名，也都互不干扰。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1ODAzOA_size_16_color_FFFFFF_t_70 1]  
不仅出现块级作用域 还有函数声明等  
这里的函数声明是 在`ES5中`函数只能在顶级作用域和函数作用域中声明，不能在块级作用域中声明。但是在ES6中，函数可以在块级作用域中声明  
但是会出现有一定的问题，因为函数声明会被提到代码的最前面。所以会报错，此时在`ES6`中可以用函数表达式来表示一个函数。从而解决这个问题  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1ODAzOA_size_16_color_FFFFFF_t_70 2]

{ 
        let str='你好';
        { 
            let str = '你好吗';
            console.log('内层：'+str);
        }
        console.log('外层：'+str);
    }

运行结果

内层：你好吗
    外层：你好

注意： 在ES6中允许函数在块级作用域中可以声明的条件是必须在大括号里面，否则就会报错。  
![在这里插入图片描述][20200515222817876.png]  
扩散/剩余  
ES6引入了一个新的…操作符，根据你在何处以及如何使用它，它一般被称作 扩散（spread） 或 剩余（rest） 操作符。让我们看一看：

function foo(x,y,z) { 
        console.log( x, y, z );
    }
    foo( ...[1,2,3] );              // 1 2 3

当…在一个数组（实际上，是我们将在第三章中讲解的任何的 可迭代 对象）前面被使用时，它就将数组“扩散”为它的个别的值。

当`...`在一个数组（实际上，是我们将在第三章中讲解的任何的 可迭代 对象）前面被使用时，它就将数组“扩散”为它的个别的值。

通常你将会在前面所展示的那样的代码段中看到这种用法，它将一个数组扩散为函数调用的一组参数。在这种用法中，…扮演了apply(…)方法的简约语法替代品，在前ES6中我们经常这样使用`apply(..)`：

foo.apply( null, [1,2,3] );     // 1 2 3

但`...`也可以在其他上下文环境中被用于扩散/展开一个值，比如在另一个数组声明内部：

var a = [2,3,4];
    var b = [ 1, ...a, 5 ];
    console.log( b );                   // [1,2,3,4,5]

在这种用法中，`...`取代了`concat(..)`，它在这里的行为就像`[1].concat( a, [5] )。`  
另一种…的用法常见于一种实质上相反的操作；与将值散开不同，`...`将一组值 收集 到一个数组中

function foo(x, y, ...z) { 
        console.log( x, y, z );
    }
    foo( 1, 2, 3, 4, 5 );           // 1 2 [3,4,5]

这个代码段中的`...z`实质上是在说：“将 剩余的 参数值（如果有的话）收集到一个称为z的数组中。” 因为x被赋值为1，而y被赋值为2，所以剩余的参数值3，4，和5被收集进了`z`。

当然，如果你没有任何命名参数，…会收集所有的参数值：

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

## 2，解构赋值扩展方法(对象和数组) ##

2.1 对象结构赋值  
在`ES5`及早期版本中，开发者们为了从对象和数组中获取特定数据并赋值给变量，编写了许多看起来同质化的代码，如下：

let options = { 
    repeat:true,
    save:false
    };
    //从对象中取数据
    let repeat = options.repeat,
    save = options.save;

这段代码从options对象中提取了repeat和save的值并将其存储为同名局部变量，提取的过程极为相似，想象一下，如果你要提取更多变量，则必须依次编写类似的代码来为变量赋值，如果其中还包含嵌套结构，只靠遍历是找不到真实信息的，必须要深入挖掘整个数据结构才能找到所需数据。  
还有原始获取对象属性时的写法，需要不停的声明变量来获取

//原始获取对象属性时的写法，需要不停的声明变量来获取
    const Asher = { 
        name: 'Asher Zhang',
        age: 5,
        family: { 
            mother: 'North Zhang',
            father: 'Richard Zhang',
            brother: 'Howard Zhang'
        }
    }
    const name = Asher.name;           //Asher Zhang
    const age = Asher.age;                //5

//对象结构的写法，意思是先声明变量name和age，然后在对象Asher中寻找同名属性，最后将属性值赋值给变量name和age
    const { name,age} = Asher;    //Asher Zhang;5

但是如果在此之前就声明或 此时则会报错 如

//如果在此之前已经声明过变量name了，会报错
    //加上()之后就可以了，因为不加()时，浏览器会将{}解析为代码块，而不是解构
    let name = ''; 
    const { name,age} = Asher;        //Identifier 'name' has already been declared
    ({ name,age} = Asher);           //Asher

解构嵌套

//解构是可以嵌套的
    const { father,mother,brother} = Asher.family;    
    //Richard Zhang,North Zhang,Howard Zhang

但是在嵌套中的变量 提前声明函数会报错 解决方法 通过赋值的方式

//嵌套中出现已声明的变量再次被声明使用，同样会报错，所以通过赋值的方式
    //这里意思是先声明一个变量f，然后找到father所对应的值并将其赋值给f
    const father = '';
    const { father:f,mother,brother} = Asher.family;          
    console.log(f);               //Richard Zhang

当获取到属性上没有的值 会返回undefined 但是可以通过设置默认值方法来解决这个问题

//获取对象上并没有的属性会返回undefined
    const { father,mother,brother,sister} = Asher.family;
    console.log(sister);          //undefined
    
    //可以给没有的属性加上默认值
    const { father,mother,brother,sister = 'have no sister'} = Asher.family;
    console.log(sister);             //have no sister
    
    //默认值只在该属性真的没有值的或值为undefined的时候才会返回
    const Asher = { 
        name: 'Asher Zhang',
        age: 5,
        family: { 
            mother: 'North Zhang',
            father: 'Richard Zhang',
            brother: 'Howard Zhang',
            sister: null
        }
    }
    
    const { father,mother,brother,sister = 'have no sister'} = Asher.family;
    console.log(sister);             //null

2.2 数组结构赋值

const fruits = ['apple','coconut','mango','durian'];
    
    //原始获取数组项的写法
    const durian = fruits[3];      //durian
    
    //数组解构写法，和对象解构类似
    const [apple,coconut] = fruits;
    console.log(apple,coconut);           //apple coconut

//获取间隔位置的值
    const [,coconut,,durian] = fruits;
    console.log(coconut,durian);      //coconut durian 
    
    //获取数组第一项已经其他项，其他项会新生成一个数组
    const [apple,...others] = fruits;
    console.log(apple);      //apple
    console.log(others);    //["coconut", "mango", "durian"]
    //rest参数只能作为 最后一个参数使用
    const [apple,...others,durian] = fruits;     //Rest element must be last element

同对象，获取数组中没有的值返回undefined

const cont = ['Asher','jianshu.com'];
    const [name,website,lan] = cont;
    console.log(name,website,lan);     //Asher jianshu.com undefined
    
    //同对象，一样可以给没有的项加默认值
    const [name,website,lan = 'PHP'] = cont;
    console.log(name,website,lan);     //Asher jianshu.com undefined
    
    //undefined只在数组项没有内容的时候可用
    const cont = ['Asher','jianshu.com',null];
    
    const [name,website,lan = 'PHP'] = cont;
    console.log(name,website,lan);     //Asher jianshu.com null

小案例

//应用场景：利用数组解构交换变量值
    let a = 100;
    let b = 20;
    
    [a,b] = [b,a]
    console.log(a,b);       //20 100

## 3，字符串数组对象的扩展方法 ##

### 3.1数组扩展 ###

### `Array.from()` ###

`Array.from()`将类数组对象和可遍历对象转换成数组

Array.from('hello') // ['h', 'e', 'l', 'l', 'o']

### Array.of() ###

`Array.of()`将一组值转换为数组

Array.of(3, 2, 1) // [3,2,1]
    Array.from([1, 2, 3], x => x * x) // [1, 4, 9]
    Array.from([1, , 2, , 3], n => n || 0) // [1, 0, 2, 0, 3]
    Array.from({  length: 2 }, () => 'jack') // ['jack', 'jack']

### copyWithin( ) ###

`copyWithin(target, start = 0, end = this.length)` 复制成员  
`find(),findIndex()`查找值，查找索引

[1, 4, -5, 10].find((n) => n < 0) // -5
    [1, 5, 10, 15].find(function(value, index, arr) { 
      return value > 9;
    }) // 10
    [1, 5, 10, 15].findIndex(function(value, index, arr) { 
      return value > 9;
    }) // 2
    [NaN].findIndex(y => Object.is(NaN, y))// 0 和indexOf不同，可以找到NaN

### fill() ###

`fill()` 填充 (注意是浅拷贝)  
[深拷贝和浅拷贝详细介绍][Link 1]

new Array(3).fill(7)    // [7, 7, 7]
    ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']

### entries()，keys()和values() ###

for (let index of ['a', 'b'].keys()) { 
      console.log(index);
    }
    // 0
    // 1

for (let elem of ['a', 'b'].values()) { 
      console.log(elem);
    }
    // 'a'
    // 'b'

for (let [index, elem] of ['a', 'b'].entries()) { 
      console.log(index, elem);
    }
    // 0 "a"
    // 1 "b"

### includes() ###

includes()表示某个数组是否包含给定的值，可以找到NaN，可代替indexOf

[1, 2, NaN].includes(NaN) // true
    
    [1, 2, 3].includes(3, 3);  // false

### flat(),flatMap() 拉平 ###

[1, 2, [3, 4]].flat() // [1, 2, 3, 4]
    
    [1, [2, [3]]].flat(Infinity) // [1, 2, 3] 默认只能拉平一层，可加入参数指定层数
    
    [1, 2, , 4, 5].flat() // [1, 2, 4, 5] 会跳过空位
    
    [2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8]
    
    [1, 2, 3, 4].flatMap(x => [[x * 2]]) // [[2], [4], [6], [8]]

### 3.2字符串扩展 ###

includes() 返回布尔值，表示是否找到了参数字符串。  
startsWith() 返回布尔值，表示参数字符串是否在原字符串的头部。  
endsWith() 返回布尔值，表示参数字符串是否在原字符串的尾部。  
repeat(n) 重复  
padStart(n,str) 头部补全  
padEnd(n,str) 尾部补全

### 3.3 数值扩展 ###

Number.isFinite(), Number.isNaN()  
Number.parseInt(), Number.parseFloat()  
Number.isInteger() 是否是整数  
Math.trunc() 去除一个数的小数部分，返回整数部分。  
Math.sign() 为正数，返回+1；为负数，返回-1；为 0，返回0；为-0，返回-0;其他值，返回NaN。

### 3.4对象扩展 ###

Object.is()

Object.assign(target, source1, source2); 很常用，用的比较熟了就不介绍了(注意是一层深拷贝)

Object.keys()，Object.values()，Object.entries()

let { keys, values, entries} = Object;
    let obj = {  a: 1, b: 2, c: 3 };
    
    for (let key of keys(obj)) { 
      console.log(key); // 'a', 'b', 'c'
    }
    
    for (let value of values(obj)) { 
      console.log(value); // 1, 2, 3
    }
    
    for (let [key, value] of entries(obj)) { 
      console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
    }
    
    const obj = {  100: 'a', 2: 'b', 7: 'c' };
    Object.values(obj)
    // ["b", "c", "a"]
    
    const obj = {  foo: 'bar', baz: 42 };
    Object.entries(obj)
    // [ ["foo", "bar"], ["baz", 42] ]
    
    Object.fromEntries([
      ['foo', 'bar'],
      ['baz', 42]
    ])
    // { foo: "bar", baz: 42 }
    扩展运算符

其他  
Object.getOwnPropertyDescriptors()方法，返回指定对象所有自身属性（非继承属性）的描述对象  
Object.getOwnPropertyDescriptor()方法会返回某个对象属性的描述对象  
Object.setPrototypeOf() 原型对象写操作  
Object.getPrototypeOf() 原型对象读操作  
Object.create() 原型对象生成操作

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1ODAzOA_size_16_color_FFFFFF_t_70]: /images/20230312/64f6675968204c069dbafc5581fcb6da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1ODAzOA_size_16_color_FFFFFF_t_70 1]: /images/20230312/d0c6945a78f04fbc8171a665b97c66ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1ODAzOA_size_16_color_FFFFFF_t_70 2]: /images/20230312/8510ed32f90d4bcd84c04b564aefd36a.png
[20200515222817876.png]: /images/20230312/17a81c2d3e01409290d6d30d36b079e6.png
[Link 1]: https://blog.csdn.net/weixin_46058038/article/details/106166851