2021-08-26 es6

es6中定义变量

  通过let 和 const 定义

1. 使用let和const声明的变量，不能重复声明同名变量

  2. 使用let和const声明的变量，解析的时候，不会预解析

3. 只要在js的{}大括号中，使用let和const声明的变量，都会被{}限制使用范围

  使用let和const声明变量的大括号，`暂时性死区`

if(true){

  let num = 100;

  const arr = [1,2]

  console.log(num);

}

  console.log(num); // 报错

  console.log(arr); // 报错

  let 和 const 的区别

      使用let 声明的变量，我们还是叫做变量

      使用const声明的变量，我们叫做常量

      使用let 声明的时候可以不赋值

      但是使用 const声明的时候，常量必须赋值

      使用let声明的变量，可以改变变量的值

      使用const声明的常量，不可以改变常量的值  // 常量 obj中存储的是对象空间的地址

  const obj = {

    name:'leon'

  }

    修改对象中的属性值，不会改变对象空间的地址

  obj.name = 'zs';

  console.log(obj);

赋值式定义函数，可以使用es6中的箭头函数简写

  箭头函数，其实就是赋值式定义函数的简写(不能简写声明式定义的函数)


    箭头函数语法：

      省略了function 关键键值

      使用 => 将函数中的()和{}连接

      let fn = (参数)=>{ 函数体代码 }

      等价于

      let fn = function(参数){ 函数体代码 }


箭头函数简写1

  如果箭头函数中的形参参数，只有一个的话，可以省略小阔号

  let fn = a =>{

    console.log(a);

  }

fn(123)

箭头函数简写2

当箭头函数的函数体代码中，只有一行代码的时候可以省略大括号

let fn = a => console.log(a);

fn(8090);

  当箭头函数的函数体代码中，只有一个行并且是 return 函数返回值的时候，可以省略return关键字， 箭头函数会将这一行代码作为结果返回

let fn = a =>{

    return a+10;

  }

省略大括号和return

箭头函数注意事项

1. 箭头函数中没有arguments

var fn = function(a,b){

    在函数内部，可以使用arguments获取所有的实参

  console.log(arguments);

}

fn(1,2,3,4,5,6);

var fn = a => console.log(arguments);

fn(1,2,3,4,5);// 报错


2. 箭头函数中没有自己的this关键字

函数的中的this关键字，谁调用指向谁(除箭头函数外)

箭头函数中的this的指向和谁调用没有关系，和定义函数的位置有关

箭头函数中的this指向，定义函数的上下文 context

document.querySelector('button').onclick = function(){

console.log(this); // 指向绑定事件的元素 button

  var fn = function(){

  console.log(this); // 此处的this指向window

  }

fn();

    console.log(this); // 指向绑定事件的元素 button

    var ff = ()=>{

      箭头函数在哪里定义，就在定义箭头函数的上一行输出this

        上一行的this指向谁，箭头函数中的this就指向谁

      console.log(this);

    }

    ff();

  }


  console.log(this); // window

  var f1 = ()=> console.log(this);

  f1()


  在定义箭头函数的上一行不能打印输出this，则上推移

  以前写函数的默认值

  function fn(a){

      通过短路写法，写函数的默认值

    a = a || 100;

    console.log(a);

  }

  fn();

  fn(1000);

es6中新增了函数的参数默认值写法

    在定义函数形参的小括号中，给形参赋值，就是函数的参数默认值

  如果调用函数的时候，没有传递参数，则函数内部使用默认值

  如果调用函数的时候，传递了参数，则函数内的形参就使用传递的参数

  function ff(a=666){

    console.log(a);

  }

  ff();

  ff(888);

  在箭头函数中也可以使用函数参数的默认值

    如果箭头函数使用函数的默认值，则不能省略小括号

  var ff = (a=100)=>console.log(a);

  ff()


  var ff = a=100 =>console.log(a); // 报错

解构赋值：解析数据结构，并且赋值

  {} 解构对象

  let obj = {

    name:'leon',

    age:18,

    hobby:'code'

  }

  let name = obj.name;


  可以使用解构赋值

    左边的变量名必须和右边对象的属性名一致

  let { name } = obj;  // 相当于 let name = obj.name

  console.log(name);

  解构赋值多个数据

  let {name,age,hobby} = obj;


    相当于 let name = obj.name

    相当于 let age = obj.age

    相当于 let hobby = obj.hobby


  console.log(name,age,hobby);

  解构赋值重命名

  let {name:userName,age:userAge} = obj; 

  console.log(userName,userAge);

  相当于  let userName = obj.name;

  let userAge = obj.age;

  多级解构赋值

  let stu = {

    name:'zhangsan',

    info:{

      classId:11,

      className:'终极一班'

    }

  };

  获取学生所在的班级名称

  let info = stu.info;

    console.log(info);

  let className = info.className;

  console.log(className);

  使用解构赋值

  let { info } = stu;

  let { className } = info;

  console.log(className);

  一行写完

  let { info:{ className:clsName } } = stu;

  console.log(clsName);

  {} 解构赋值对象

  [] 解构赋值数组

  let arr =  [1,2,3,'4'];

  let num1 = arr[0];

  let num2 = arr[1];

  使用解构赋值

    将数组中的元素，逐个取出，按照对应的顺序给左边的变量赋值

    如果左边的变量太多，没有赋值成功，则值为undefined

  let [ num1,num2,num3] = arr;

  console.log(num1,num2,num3);

  let [ num1,num2,num3,num4,num5] = arr;

  console.log(num4,num5);

  多级解构赋值数组

  let arr = [

    1,

    2,

    [3,4]

  ]

    解构赋值数组

  let [ num1, num2, [num3,num4]]  = arr;

  console.log(num1,num2,num3,num4);

  解构赋值数组和解构赋值对象联用

  let arr = [

    {name:'leon',age:32},

    {name:'zhangsan',age:17},

    {name:'lisi',age:18}

  ]

  let [ {name:userName,age} ]  = arr;

  console.log(userName,age);

  变量的值交换

  var num1 = 10;

  var num2 = 20;

  var [num2,num1] = [num1,num2];

  console.log(num2);

  console.log(num1);

模板字符串，就是字符串的一种

  ''  ""  模板字符串： 反引号 ``

  普通字符串中没有回车换行

  let str1 = '<tr><td></td></tr>';

    模板字符串可以识别回车换行

  let str2 = `

    <tr>

    <td></td>

    </tr>

  `

  console.log(str1);

  console.log(str2);

  模板字符串中可以识别变量  ${ 变量 }

  let name = 'leon';

  let age = 18;

  let str = `

    大家好我是${name},我每年都是${age}

  `

  console.log(str);

  es6中的新增运算符 ...

  展开运算符 可以展开数组，对象

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

  将数组展开并输出

  console.log(...arr);


  let arr1 = [1,2,3];

  let arr2 = [4,5,6];

    let res = arr1.concat(arr2);

    console.log(res);

  let res = [...arr1,...arr2];

  console.log(res);

  展开对象

  let obj1 = {

    name:'chuanguo',

    hobby:'man'

  }

    将obj1展开放到对象obj2中

  let obj2 = {

    ...obj1,

    name2:'luoda',

    hobby2:'other province girl'

  }

  console.log(obj2);

  let arr = [1,4,5,0,6];

    将数组展开，放到方法中作为参数使用

  console.log(Math.max(...arr));

  console.log(Math.min(...arr));

  let arr = [1,4,5,0,6];

  let fn = (a,b,c,d,e) => console.log(a+b+c+d+e);

  展开数组，拿到数组中的元素，作为函数的实参使用

  fn(...arr);

  合并运算符 ...

  let fn = (a,b,...arr)=>{

    console.log(a,b);

    console.log(arr);

  }

  将参数中的没有赋值给到参数的数据，合并起来放在一个数组中

  fn(1,2,3,4,5,6,7);

函数中一个this关键字，this的指向

  函数的this指向和谁调用函数有关(除箭头函数)

  函数的this指向和定义函数的位置无关(除箭头函数)


    函数中的this指向

      全局函数中的this: window

      事件处理函数的this:事件源

      定时器中的函数的this: window

      对象方法中的函数this: 对象

      自调用函数中的this: window


    函数自调用中的this指向window

  (function(){console.log(this);})()

  function fn(){

    console.log('66');

  }

  console.log(fn);

  fn()

  (fn)()

  console.log(123);

  (function(){

    console.log('66');

  })()

  函数自调用别的写法

  console.log(123)

  ~(function(){console.log(678);})()

  !(function(){console.log(678);})()

  ;(function(){console.log(678);})()

  对象方法函数中的this，指向调用方法的对象

  let obj = {

    name:'luoda',

    fn(){

      console.log(this);

    }

  }

  obj.fn()


  定时器函数中的this指向了 window

  setInterval(function(){

    console.log(this); // window

  },200)


  事件处理函数中的this 事件源

  document.onclick = function(){

    console.log(this); // document

  }

  全局中的函数的this指向window

  function fn(){

    console.log(this);// Window

  }

  fn()

function fn(){console.log(this);}

let arr = [1,2,fn]

console.log(arr);

arr[2]()

JSON是一种数据格式，本质就是字符串

json格式的数据,就是将对象,或数组用单引号包裹,对象中的属性名用双引号包裹

let strJson = '{"name":"leon","age":18}';

console.log(strJson);

现在在前后端交互中json格式的数据，使用越来越多

比如前后端交互，数据传递，后端传递一个json格式数据

let strJson = '{"name":"leon","age":18}';

在前端使用json格式的数据，json格式数据是一个字符串，没有脑子的方法就是，就是字符串使用split方法取数据

我们可以使用JSON的方法parse将json格式的数据转为对象或数组

语法：JSON.parse(json格式的数据)

  返回一个转化的对象或数组

let obj = JSON.parse(strJson);

console.log(obj);

let arrStr = '["leon",18,"ctrl"]'; // 也是json格式的数据

使用JSON.parse方法转换

let arr = JSON.parse(arrStr);

console.log(arr);

如果我们要将一个对象或数组传递给后端，我们可以将对象或数组转json个是数据，再传输

let obj = {name:'leon','age':18};

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

使用JSON.stringify方法可以将对象或数组转为json格式的数据

let objStr = JSON.stringify(obj);

console.log(objStr);

console.log(JSON.stringify(arr)); // [1,2,3,4]

console.log(typeof JSON.stringify(arr)); // string

json格式的文件，是以json为后缀的文件

Object.prototype.toString.call()

可以检测所有数据的数据类型

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,591评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,448评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,823评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,204评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,228评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,190评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,078评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,923评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,334评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,550评论 2赞 333
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,727评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,428评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,022评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,672评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,826评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,734评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,619评论 2赞 354

推荐阅读更多精彩内容