第二十六章 ES6的一些新增方法

2022-07-12 本文已影响0人扶光_

let

1.let

var和let的区别

let声明变量和var声明变量用法相似,但通过let声明的变量只在所在的代码块内有效

 <script>
     {

         let num = 1;
    }
     console.log(num);

 </script>

例

2.let不存在变量声明提升

什么意思呢?就是他不可以在声明之前使用,如果我先输出后定义时不可以的

         console.log(num);
         let num = 1;

例

3.let的暂时性死区

暂时性死区:只要块级作用域内存在let命令,他所声明的变量就被绑定到这个区域,不在受外部的影响。

   var num = 1;
        if(true){
            num = 10; 
            let num;  //此时let已经被绑定这个区域 所以只看函数内的num 如果执行肯定发生报错 因为let需要先声明在定义
        }

例

4.在相同作用域中重复声明变量就会发生报错

            var num = 10;
            let num = 20;

例3

const

const 常量,一旦声明常量的值就不可以在改变

const a = 123;
a=6;

例
注意:const声明的时候必须直接给值,要不然会发生报错

解构赋值

解构赋值:简单来说如我们想一次性给多个变量设置不同的值就可以采用这种方法。解构过程中，我们应该把每个解构的部分对应在一起，层层解构,

  let [a,b,c] = [1,2,3];
     console.log(a)
     console.log(b)
     console.log(c)

例

当变量的个数大于值的时候,那些变量变成了undefined。

...

...代表将值放入一个数组中

let [a,b,...c] = [1,2,3,4,5,6,7,8,9,10];
    console.log(a);
    console.log(b);
    console.log(c);

例

对象的解构赋值

let {a,b} = {a:"1",b:"2"};
     console.log(a);
     console.log(b);

image.png

1.可以通过解构赋值的方法交换变量的值

我们之前交换变量还得需要第三方来进行交换,而解构赋值更快捷简单些,代码如下:

    let x = 10;
    let y = 20;
    [x,y] = [y,x];
    console.log("x="+x);
    console.log("y="+y);

例

2.用解构赋值来用函数返回多个值

 function fn(){
      return [1,2,3];
  }
     let [a,b,c] = fn();

模板字符串

反引号里面的变量用${} 的形式进行拼接

用法如下

document.write(`这个数是${num}`)

并且在这个模板字符串里面也可以自动识别标签,如div br等....

1 includes ()找参数字符串

返回布尔值,

  var str = "hello world";
 console.log(str.includes("h"));
 console.log(str.includes("a"));

例

2 startWidth()表示参数字符串是否在开始的位置上

返回布尔值

 var str = "hello world";
 console.log(str.startsWith("h"));

例

3 endWidth()表示参数字符串是否在结束的位置上

返回布尔值

以上的1 2 3三个新增字符串方法均支持有第二个参数,而第二个参数表示搜索的位置

4 repeat() 重复返回新字符串

()里面的参数可以写数字表示重复几次

 var str = "hello world ";
 console.log(str.repeat(2));

例

5 padStart()从头部补齐字符串

 var str = "hello world ";
 console.log(str.padStart(16,"abc"));//一共要16个字符 不够补abd

例

6 padEnd()从尾部补齐字符串

7 trim() 清除前后空格

8 trimStart()清除前面的空格

8 trimEnd()清除后面的空格

数值新增方法

1 Number.isFinite

判断是不是一个数字返回布尔值

2 Math.trunc

去除一个数的小数部分保留整数部分

3 Math.sign

判断一个数是正数还是负数还是0
参数是正数是返回1 负数的时候返回-1 0的时候返回0

函数新增方法

1.rest参数 ...变量名

用于获取多余的参数,并且将多余的变量放入数组中

 function fn(...value){
    let sum = 0;
    for(let i = 0;i<value.length;i++){
        sum+=value[i]; 
    }
    return sum;

 }
 console.log(fn(1,2,3,4,5));

例

2 箭头函数 =>(){}

有参形式:

let fn = function(value){        //正常写法
    return value
}
                                                    //等同于
let fn1 =value=>value          //箭头函数

无参或多个形式:

var fn = ()=>{} //无参
var fn = (num1,num2,num3)=>{} //多个参数

箭头函数返回一个对象需要将对象部分用()包裹

var fn = (id,name)=>({id:1,name:lh});

注意:使用箭头函数不能使用new命令

箭头函数内this指向定义所在作用域

数组扩展

1 Array.from

将对象转化为真正的数组

let obj = {
    "0":"001", //键值对前面必须是0 1 2...开始的
    "1":"hx",
    "2":"男",
    length:3   //长度不可以省略
};
let arr = Array.from(obj);
console.log(arr);

array.from

2 Array.of

将一组值转换为数组

console.log(Array.of(1,2,3,4,5,6,7,8));

Array.of

3 copyWithin()

在当前数组内部,将指定成员复制到其他位置,并覆盖
三个参数:
1:从该位置开始替换数据
2:从该位置开始读取数据,默认是0
3:到该位置停止读取数据,默认数据长度

4.find()

用于找出第一个符合条件的成员

console.log([5,13,32,50].find(function(a,b,c){
   // console.log(a); //返回数组的值
  //  console.log(b);//下标
  //  console.log(c); //当前数组
    return a>30;
}));

例

5. findIndex

找出返回第一个数组成员的下标

6.fill()

给定一个值用来填充数组

console.log([5,13,,32,50].fill('X',0,2)); //第二个和第三个参数表示起始位置和结束位置

例

7.entires(),keys(),values()

entires()键值对的遍历
keys()键名
values()键值

for(let i of ["a","b"].keys()){
         console.log(i);
     }
     // 0 1
     for(let i of ["a","b"].values()){
         console.log(i);
     }
     // a b
     for(let i of ["a","b"].entries()){
         console.log(i);
     }
     //下标和值

例

8. includes()

查询某个值是否在该数组中出现过

 console.log(["我","爱","你"].includes("我"));

例

对象的扩展

1.Object.is() 比较两个值是否相等

2. Object.assign()用于对象的合并

     let obj1 = {a:1}
     let obj2 = {b:2}
     let obj3 = Object.assign(obj1,obj2);
     console.log(obj3);

例