ES6学习笔记

Gu_Yan 发布于2019-08-20 14:34 / 2932人阅读

摘要：所以，如果一个数组成员不严格等于，默认值是不会生效的因为不严格等于对象解构对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

http://es6.ruanyifeng.com/?se...

一、作用域 let

//i作用域在全局，每次循环i都被重新赋值了而覆盖了之前的值
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

//for循环还有一个特别之处，就是循环语句部分是一个父作用域，
//而循环体内部是一个多带带的子作用域
//所以循环体内的i每次的作用域都不一样而互不影响
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

const

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了

二、解构 数组解构

1.如果解构不成功，变量值===undefined

let [a, b, c] = [1, 2, 3]; //模式匹配

2.默认值
注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的

let [foo = true] = [];
foo // true

let [x, y = "b"] = ["a"]; // x="a", y="b"
let [x, y = "b"] = ["a", undefined]; // x="a", y="b"

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null 因为null不严格等于undefined

对象解构

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"

三、字符串模板

1.普通模板${}和反斜杠设置和识别，大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性，会保留空格和换行，可嵌套使用

   $("#result").append(`
      There are ${basket.count} items
       in your basket, ${basket.onSale}
      are on sale!
    `);

2.标签模板的一个重要应用就是过滤HTML字符串，防止用户输入恶意内容。

带标签的字符串模板

tag标签实际是一个处理字符串模板的一个函数，会依次接收到多个参数，string表示普通字符串，values表示字符串模板（...表示可以匹配多个值）

tag函数所有参数的实际值如下：
第一个参数：["今天 ", " 昨天 ", ""]
第二个参数： "11"
第三个参数："22"

let dessert = "11",
    drink = "22";

let breakfast = tag`今天 
 ${dessert} 昨天 ${drink} !`;

function tag(strings, ...values) {
  // console.log(strings)
  // console.log(values)
  let result = ""
  for (var i = 0; i < values.length; i++) {
    result += strings[i]
    result += values[i]
  }

  return result
}
console.log(breakfast) //今天 11 昨天 22

函数 默认参数

function breakfast (yesterday = "11", today = "22") {
  return `${yesterday} ${today}`
}
console.log(breakfast() //11 22
console.log(breakfast("33","44")) //33 44

展开操作符 ...

let fruits = ["apple", "banana"],
    foods = ["cake", ...fruits];

console.log(fruits)  //["apple", "banana"]
console.log(...fruits) //apple banana 把数组里面的内容展开
console.log(foods) //["cake", apple", "banana"]

剩余操作符 Rest相当于...

function breakfast(apple, banana, ...foods) {
  console.log(apple, drink, ...foods)
}
breakfast("apple", "banana", "orange", "cake") //apple banana orange cake

解构参数

function breakfast(apple, banana, {location, restaurant} = {}) {
  console.log(apple, banana, location, restaurant)
}
breakfast("apple", "banana", {location: "shenzhen", restaurant: "lucha"}) //apple banana shenzhen lucha

函数名字 name

superBreakfast（函数声明）优先级高于breakfast（变量）

let breakfast = function superBreakfast (argument){

}
console.log(breakfast.name) //superBreakfast

箭头函数箭头函数

let breakfast = (dessert, drink) => { //es6
  return dessert + drink;
};

var breakfast = function breakfast(dessert) { //es5
  return dessert + drink;
}

function foo() {
  setTimeout(function () {
    console.log(this === window);
  }, 100);
}

foo()//true

//1.this
//setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，
//而它的真正执行要等到100毫秒后,箭头函数导致this总是指向函数定义生效时所在的
//对象，这里的this===undefined
function foo() {
  setTimeout(() =>{
    console.log(this === window);
  }, 100);
}
foo() //false

this的动态切换虽然为js创造了巨大的灵活性，也使编程变得困难和模糊。利用call、apply、bind这三个方法，可以改变this的指向，使它指向我们期望的对象

call、apply、bind原理

call()和apply() 原理

他们的作用是可以改变其this的指向，调用方式略有不同

bind() 原理

该方法会创建一个新函数，当这个新函数被调用时，bind()第一个参数将作为它运行时的this，之后的序列参数将会在传递的实参数前传入作为它的参数，返回由指定的this值和初始化参数改造的原函数拷贝

this.x = 9;
var module = {
  x: 81,
  getX: function() {
    return this.x;
  }
}

module.getX() //81

var retrieveX = module.getX
retrieveX() //9

var boundGetX = retrieveX.bind(module);
boundGetX() //81

对象

云服务器服务器托管学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81752.html

es6学习笔记-顶层对象_v1.0_byKL

摘要：学习笔记顶层对象虽然是笔记但是基本是抄了一次大师的文章了顶层对象顶层对象，在浏览器环境指的是对象，在指的是对象。之中，顶层对象的属性与全局变量是等价的。的写法模块的写法上面代码将顶层对象放入变量。参考引用顶层对象实战 es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象顶层对象，在浏览器环境指的是window对象，在Node指的是gl...

Meils 2019-08-21 11:31 评论0 收藏0
ES6学习笔记

摘要：本笔记为阅读阮老师的文章自己的总结，仅作自用，感谢阮老师的技术分享。字符串的遍历器接口新增判断字符串的包含情况返回值，表示是否找到了字符串。返回值表示参数字符串是否在原字符串的头部。本笔记为阅读http://es6.ruanyifeng.com/ 阮老师的文章自己的总结，仅作自用，感谢阮老师的技术分享。 1.超过uFFFF的字符ES5无法正确显示，会显示成前面的uFFFF的码点符号加...

zxhaaa 2019-08-26 11:58 评论0 收藏0
《深入理解ES6》笔记——导读

摘要：最近买了深入理解的书籍来看，为什么学习这么久还要买这本书呢主要是看到核心团队成员及的创造者为本书做了序，作为一个粉丝，还是挺看好这本书能给我带来一个新的升华，而且本书的作者也非常厉害。使用ES6开发已经有1年多了，以前看的是阮一峰老师的ES6教程，也看过MDN文档的ES6语法介绍。最近买了《深入理解ES6》的书籍来看，为什么学习ES6这么久还要买这本书呢？主要是看到Daniel A...

Godtoy 2019-08-20 18:01 评论0 收藏0
React学习笔记3：用es2015（ES6）重写CommentBox

摘要：新搭建的个人博客，本文地址学习笔记用重写在一开始的时候配置中我们就加入了的支持，就是下面的配置，但之前的学习笔记都使用的完成，所以专门作一篇笔记，记录使用完成创建相关文件修改，增加该入口文件修改，引入该文件做个简单的测试，看下浏览器全部用来新搭建的个人博客，本文地址：React学习笔记3：用es2015（ES6）重写CommentBox在一开始的时候webpack配置中我们就加入了e...

selfimpr 2019-08-19 17:30 评论0 收藏0
ES6零基础教学_解析彩票项目-学习笔记（一）

摘要：彩票项目实战学习记录一完整走了一遍课程，觉得还不错。支持正版人人有责零基础教学解析彩票项目下面是项目课程的目录路线一个项目分为三部分业务逻辑，自动构建系统，模拟数据和真实数据接口处理。彩票项目实战学习记录（一）完整走了一遍课程，觉得还不错。总结: es6的知识点说得还算清楚，主要是为了了解和使用，不是深究，所以浅尝即止即可，所以觉得还不错。完整还原了项目开发的代码设计和开发过...

blastz 2019-08-22 13:52 评论0 收藏0