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() 原理
他们的作用是可以改变其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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。