ES6进修笔记

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 <b>${basket.count}</b> items
       in your basket, <em>${basket.onSale}</em>
      are on sale!
    `);

2.标签模板的一个主要运用就是过滤HTML字符串,防备用户输入歹意内容。

带标签的字符串模板

tag标签现实是一个处置惩罚字符串模板的一个函数,会顺次接收到多个参数,string示意一般字符串,values示意字符串模板(…示意能够婚配多个值)

tag函数一切参数的现实值以下:
第一个参数:[‘本日 ‘, ‘ 昨天 ‘, ”]
第二个参数: ’11’
第三个参数:’22’

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

let breakfast = tag`本日 \n ${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

对象

    原文作者:Hayley
    原文地址: https://segmentfault.com/a/1190000008481193
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞