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 之前被调用
ES6(简单总结)
最新推荐文章于 2024-08-12 22:28:07 发布