JavaScript系列之ES6篇

Posted 2021-08-16 coderkey

一，基础语法

1、let命令

（1）声明变量

	let a;
	声明变量且赋值（变量初始化）
	let a = 100;
 	console.log(a);  // 100

（2）注意：

① 变量不能重复声明

  let star = 'ldh';
   let star = 'zxy';
   console.log(star);  // 会报错

② 写在代码块里{ }就叫块级作用域， 全局，函数，eval

  if else while for
   {
    let name = 'ldh';
    console.log(name);  //  'ldh'       写在{}外面无效。
   }

③ 不存在变量提升

console.log(name);
let name = 'ldh'; // 报错

④ 不影响作用域链

 {
     let name = 'ldh';
     function fn() {
       console.log(name);
      }
     fn(); // ldh
 }

2，const命令

（1）含义：

声明常量 值不能修改的量就叫做常量

（2）特点：

① 一定要声明且赋值。

  const  NAME = 'ldh';
  console.log(NAME);

② 不允许重复声明，建议常量使用大写。

   const Message = 'Goodbye!';
   const Mge = 30;  // 报错

③ 常量的值不能修改。

  contst PI = 3.1415; 
  PI = 3; //TypeError:Assignment to constant variable.

④ 块级作用域

 {
  const NAME = 'ldh';
  console.log(NAME);  // 写在{}外面无效。
 }

⑤ 对于数组和对象的元素修改，不算做对常量的修改，不会报错。

  const TEAM = ['a', 'b', 'c'];
  console.log(TEAM.push('d'));  // 4

3，解构赋值

（1）含义：

ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，这就称之为解构赋值。

（2）数组的解构

 const F4 = ['张三', '李四', '王五', '赵六'];
  let [a,b,c,d] = F4;  // 也可以是const
   console.log(a);  // 张三
   console.log(b);  // 李四
   console.log(c);  // 王五
   console.log(d);  // 赵六

（3）对象的解构

   const ldh = {
    name: '刘德华',
    age: 18,
    sing: function () {
      console.log('唱歌');
     },
  };
   let { name, age, sing } = ldh;
   console.log(name); // 刘德华
   console.log(age); // 18
   sing(); // 唱歌
  

4，模板字符串

（1）含义：

ES6引入新的声明字符串的方式 反引号 ``

（2）声明：

 let str = `我是一个字符串`;
 console.log(str,typeof str);

（3）内容中可以直接出现换行符

  let str = `<ul>
              <li>a</li>
               <li>b</li>
               <li>c</li>
               <ul>`;

（4)，变量拼接 ${}

   let name = '刘德华';
   let text = `${name}是我的偶像`;
   console.log(text);  // 刘德华是我的偶像

---

二，函数的扩展

1，函数参数的默认值

（1）含义：

ES6 允许给函数参数赋值 初始值

（2）例如：

① 形参初始值

  function add(a, b, c = 3) {
    // 默认值参数，一般放在最后位置。
     return a + b + c;
   }
   let result = add(1, 2);
   console.log(result); // 6

② 与解构赋值结合

  function fn({name , age = 20, sex }) {
     // let name = pink.name;
     // let age = pink.age;
    // let sex =  pink.sex;
     console.log(name);  // ldh
     console.log(age);  // 20
    console.log(sex);  // 男
  }
   fn({
     name: 'ldh',
     sex: '男',
   });

2，rest参数

（1）含义：

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments。

（2）例如：

① ES5 arguments 获取实参的方式

   function date() {
     console.log(arguments);
   }
   date('a', 'b', 'c', 'd');

② ES6 rest参数

  function date(...args) {
     console.log(args); // 得到一个数组
   }
   date('a', 'b', 'c', 'd');

③ rest 参数必须要放到参数最后

 
   function fn(a, b, ...args) {
     console.log(a);  // pink
     console.log(b);  // ldh
     console.log(args); // 得到一个长度为6的数组
   }
   fn('pink', 'ldh', 'a', 'b', 'c', 1, 2, 3);

3，箭头函数

（1）定义：

ES6 允许使用 [箭头] ( ) => 定义函数。

（2）语法：

   普通函数 声明一个函数
   let fn = function() {
         ...
   }
   
   箭头函数 声明一个函数
   let fn = (a, b) => {
     //括号里面是形参
     return a + b;
   };

   调用函数
   let result = fn(1, 2);
   console.log(result);  // 3

（3）例如：

① this 是静态的，this 始终指向函数声明时所在的作用域下 this 的值。

   function getName() {
     console.log(this.name);
   }
   let getName2 = () => {
     console.log(this.name);
   };
   //设置 window 对象的 name 属性。
   window.name = 'pink';
   //直接调用
   getName(); // pink
   getName2(); // pink

   // 创建一个对象
   const SCHOOL = {
     name: '尚硅谷',
   };
   //call 方法调用   可以改变普通函数 this 指向，但不能改变箭头函数 this 指向。
   getName.call(SCHOOL); // 尚硅谷
   getName2.call(SCHOOL); // pink

② 箭头函数不能作为构造实例化对象

  let Ldh = (name, age) => {
     this.name = name;
     this.age = age;
   };
   let pink = new Ldh('刘德华', 18);
   console.log(pink);
   //以上代码会报错

③ 箭头函数不能使用 arguments 变量

   let fn = () => {
     console.log(arguments);
   };
   fn(1, 2, 3);
   //以上代码会报错

4，箭头函数的简写

（1）省略小括号，当形参有且只有一个的时候。

  let add = n => {
     return n + n;
   };
   console.log(add(9)); // 18

（2）省略花括号，当代码体只有一条语句的时候。

   let pow = n => n * n;   // 此时 return 必须省略，而且语句的执行结果就是函数的返回值。
   console.log(pow(9));  // 81
   //相当于执行以下操作
   let pow = (n) => {
     return n * n;
   };
   console.log(pow(9)); // 81

（3）注意：

① 箭头函数应用场景：适合于 this 无关的回调、定时器和数组的方法回调。
② 不太适合事件回调，对象的方法。

---

三，数组的扩展

1，扩展运算符简介

（1）含义：

[…] 扩展运算符能将 [数组] 转换为逗号分隔的 [参数序列]

（2）例如：

  // 声明一个数组
  // const f4 =['a', 'b', 'b', 'c'];  // => 'a', 'b', 'b', 'c'
  // // 声明一个函数
  // function fn() {
  //   console.log(arguments);
  // }
  // fn(...f4);  // 类似 fn('a', 'b', 'b', 'c')
  // fn(f4);

2，扩展运算符运用

（1）数组的合并

  const name1 = ['a', 'b'];
   const name2 = ['c', 'd'];
   // const name3 = name1.concat(name2);  // 传统写法
   const name3 = [...name1, ...name2];  // 新方法
   console.log(name3);

（2）数组的克隆

   const f4 = ['a', 'b', 'c', 'd'];
   const newf4 = [...f4];
   console.log(newf4);  // ['a', 'b', 'c', 'd']

（3）将伪数组转换为真正的数组

   const divs = document.querySelectorAll('div');    // body部分写上4个div标签
  const divArr = [...divs];
  console.log(divArr);  // [div, div, div, div]

3，数组新增的方法

① Array.of()

//将一组值转换为数组
var arr=Array.of(1,2,3,4);
console.log(arr);//[1,2,3,4]

② Array.from()

   //将伪数组转换为数组
    var aLi=Array.from(document.getElementsByTagName("li"));
    console.log(aLi instanceof Array);//instanceof判断某对象是否属于某类的实例

③ Array.find()

  //通过条件查找数据，返回第一个符合条件的数据
    var arr=[1,2,4,3];
    var n=arr.find(function(item,index,array){
        return item>3;
    })
    console.log(n);  // 4

④ Array.findIndex()

    //查找数组中符合条件的数据的下标，如果没有查找到则返回undefined
    var arr=[1,2,4,3];
    var n=arr.findIndex(function(item,index,array){
        return item>3;
    })
    console.log(n);  // 2

⑤ fill()

// fill()方法使用给定的值填充一个数组。
var arr =  ['a','b','c']
arr.fill(7); // [7,7,7]
 new Array(3).fill(7); //[7,7,7]

⑥ includes()

 // 该方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。
 ES6引入了该方法。
  var arr =   [1,2,3]
  arr.includes(2);  // true
  arr.includes(4);  // false
  [1,2,NaN].includes(NaN);  // true

⑦ for of 和 for in

// 1、for of是ES6的，fon in是ES5的
// 2、for of遍历的是值，for in遍历的是键
// 3、for of不能遍历对象，for in既可以遍历数组也可以遍历对象
// 4、for of遍历数组的时候，如果有未定义的项，遍历出来是undefined，for in遍历不到
// 5、for of不能遍历到原型上定义的属性（自定义属性），for in可以遍历到
// 6、for of的兼容性不是很好，移动端安卓微信浏览器不支持，Safari支持
      
    Array.prototype.hehe="呵呵";
    var arr=[1,2,3,,4];
    for(let item of arr){
        console.log(item)//1 2 3 undefined 4
    }
    for(let prop in arr){
        console.log(prop)//0 1 2 4 hehe
    }
    var obj={
        name:"孙艺珍",
        age:20
    };
    for(let item of obj){//报错
        console.log(item)
    }
    for(let prop in obj){
        console.log(prop)//name age
    }

---

四，对象的扩展

1，对象的简写方式

  // ES6 允许大括号里面，直接写入变量和函数，作为对象的属性和方法。
  let name = 'pink';
  let change = function (a) {
    console.log('可以改变我们！');
   };
   const school = {
     name,   //当key值与value值一样的时候我们可以写一个
     change,
     improve() {       // 传统方法 improve:function() {}
       console.log('可以提高我们的技能');
     },
   };
   console.log(name); // pink
   school.change();  // 可以改变我们
   school.improve();  // 可以提高我们的技能

2，对象的新增方法

① Object.is()

 //判断两个对象是否指向同一个内存地址
     var obj1={a:1,b:2};
     var obj2=obj1;
     Object.is(obj1,obj2);//true
     Object.is('foo','foo'); //true
	 Object.is({},{}); //false  
	 // 同值相等，与===类似，不同之处在于：+0不等于-0；NaN等于自身

② Object.assign()

//合并对象
var obj1={name:"孙艺珍",age:20};
var obj2={sex:"女"};
var newObj=Object.assign(obj1,obj2);
console.log(newObj);   //{name:"孙艺珍",age:20,sex:"女"}

---