ES6(简单总结)

const / let  
const / let  不存在变量提升 因为他们是块级作用域, 在代码块(用{}表示)中使用
let或const声明变量, 该变量会陷入暂时性死区直到该变量的声明被处理.
关于使用let与const规则:
1使用let声明的变量可以重新赋值,但是不能在同一作用域内重新声明
2使用const声明的变量必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值.
const存在有时候可以改变内容有时候改变会报错原因:
对象类型
引用类型 Object Function
引用地址,保存的只是一个指向实际数据的指针
const定义引用数据类,不能修改指针指向新的对象 ,但可以修改它指向的数据。
基本类型 Number Boolean String undefined null
地址固定,值就保存在变量指向的那个内存地址
const声明引用类型的对象的话,值是能被改动的,const声明基本类型的值就不能改动

`${expression}` 表示的占位符 ,新增的拼接方法

新增解构数组和对象  let {a , b, c} = allData  / const [x, y, z] = point;

简写方法的名称:
let gemstone = {
type,
color,
carat,
calculateWorth() { ... }      <--这里
};

for...of循环 {默认情况下,对象不可迭代}f
for...of 循环用于循环访问任何可迭代的数据类型。
for...of 循环还具有其他优势,解决了 for 和 for...in 循环的不足之处。你可以随时停止或退出 for...of 循环。
for...of 循环将只循环访问对象中的值。

for 循环的最大缺点是需要跟踪计数器和退出条件。
虽然 for 循环在循环数组时的确具有优势,但是某些数据结构不是数组,因此并非始终适合使用 loop 循环。

for...in循环访问所有可枚举的属性,意味着如果向数组的原型中添加任何其他属性,这些属性也会出现在循环中。

forEach() 实际上是数组方法,因此只能用在数组中。也无法停止或退出 forEach 循环。

展开运算符 ...  使你能够将字面量对象展开为多个元素
如果你需要结合多个数组,在有展开运算符之前,必须使用 Array的 concat() 方法。const produce = fruits.concat(vegetables);
使用展开符来结合数组  const produce = [...fruits,...vegetables];

剩余参数(可变参数)
用途1: 将变量赋数组值时: const [total, subtotal, tax, ...items] = order;
用途2: 可变参数函数 
对于参数不固定的函数,ES6之前是使用参数对象(arguments)处理:
function sum() {
let total = 0;  
for(const argument of arguments) {
total += argument;
}
return total;
}
在ES6中使用剩余参数运算符则更为简洁,可读性提高:
function sum(...nums) {
let total = 0;  
for(const num of nums) {
total += num;
}
return total;
}

ES6箭头函数
普通函数可以是函数声明或者函数表达式, 但是箭头函数始终都是表达式, 全程是箭头函数表达式, 因此因此仅在表达式有效时才能使用,包括:
1存储在变量中,
2当做参数传递给函数,
3存储在对象的属性中。
写法分类
简写主体语法:
const upperizedNames = ['Farrin', 'Kagure', 'Asser'].map(
name => name.toUpperCase()  
);
常规主体语法:
const upperizedNames = ['Farrin', 'Kagure', 'Asser'].map( name => {
name = name.toUpperCase();
return `${name} has ${name.length} characters in their name`;
});

javascript标准函数this
new 对象 
sundae这个构造函数内的this的值是实例对象, 因为他使用new被调用.
const mySundae = new Sundae('Chocolate', ['Sprinkles', 'Hot Fudge']); 
指定的对象
函数使用call/apply被调用,this的值指向指定的obj2,因为call()第一个参数明确设置this的指向
const result = obj1.printName.call(obj2);  
上下`文对象  
函数是对象的方法, this指向就是那个对象,此处this就是指向data
data.teleport();        
全局对象或 undefined
此处是this指向全局对象,在严格模式下,指向undefined.
teleport();

箭头函数和this
对于普通函数, this的值基于函数如何被调用, 对于箭头函数,this的值基于函数周围的上下文, 换句话说,this的值和函数外面的this的值是一样的.

默认参数函数
function greet(name, greeting) {
name = (typeof name !== 'undefined') ?  name : 'Student';
greeting = (typeof greeting !== 'undefined') ?  greeting : 'Welcome';

return `${greeting} ${name}!`;
}
greet(); // Welcome Student!
greet('James'); // Welcome James!
greet('Richard', 'Howdy'); // Howdy Richard!
ES6引入一种新的方式创建默认值, 他叫默认函数参数:
function greet(name = 'Student', greeting = 'Welcome') {
return `${greeting} ${name}!`;
}
greet(); // Welcome Student!
greet('James'); // Welcome James!
greet('Richard', 'Howdy'); // Howdy Richard!

默认值与解构
默认值与解构数组
function createGrid([width = 5, height = 5] = []) {
return `Generating a grid of ${width} by ${height}`;
}
createGrid(); // Generates a 5 x 5 grid
默认值与解构函数
function createSundae({scoops = 1, toppings = ['Hot Fudge']}={}) {
const scoopText = scoops === 1 ? 'scoop' : 'scoops';
return `Your sundae has ${scoops} ${scoopText} with ${toppings.join(' and ')} toppings.`;
}
数组默认值与对象默认值
function createSundae({scoops = 1, toppings = ['Hot Fudge']} = {}) { … }
对象使用scoops默认值 createSundae({toppings: ['Hot Fudge', 'Sprinkles', 'Caramel']});
function createSundae([scoops = 1, toppings = ['Hot Fudge']] = []) { … }
数组使用scoops默认值 createSundae([undefined, ['Hot Fudge', 'Sprinkles', 'Caramel']]);

Javascript类
ES5创建类:
function Plane(numEngines) {
this.numEngines = numEngines;
this.enginesActive = false;
}
/ / 由所有实例 "继承" 的方法
Plane.prototype.startEngines = function () {
console.log('starting engines...');
this.enginesActive = true;
};

ES6类只是一个语法糖,原型继续实际上在底层隐藏起来, 与传统类机制语言有些区别.
class Plane {
//constructor方法虽然在类中,但不是原型上的方法,只是用来生成实例的.
constructor(numEngines) {
this.numEngines = numEngines;
this.enginesActive = false;
}
//原型上的方法, 由所有实例对象共享.
startEngines() {
console.log('starting engines…');
this.enginesActive = true;
}
}
console.log(typeof Plane); //function

静态方法
要添加静态方法,请在方法名称前面加上关键字 static
class Plane {
constructor(numEngines) {
this.numEngines = numEngines;
this.enginesActive = false;
}
static badWeather(planes) {
for (plane of planes) {
plane.enginesActive = false;
}
}
startEngines() {
console.log('starting engines…');
this.enginesActive = true;
}
}
关键字class带来其他基于类的语言的很多思想,但是没有向javascript中添加此功能
javascript类实际上还是原型继承
创建javascript类的新实例时必须使用new关键字

super 和 extends
使用新的super和extends关键字扩展类:
super 必须在 this 之前被调用
  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值