1 let 和 const
let 的作用域与 const 命令相同:只在声明所在的块级作用域内有效。且不存在变量提升 。
1.1 let
let 所声明的变量,可以改变。
let a = 123a = 456 // 正确,可以改变let b = [123]b = [456] // 正确,可以改变
1.2 const
const 声明一个只读的常量。一旦声明,常量的值就不能改变。
简单类型的数据(数值、字符串、布尔值),不可以变动
const a = 123a = 456 // 报错,不可改变let b = [123]b = [456] // 报错,不可以重新赋值,不可改变
复合类型的数据(主要是对象和数组),可以这样子变动
const a = [123]a.push(456) // 成功const b = {}b.name = 'demo' // 成功
let 与 const 没有变量提升,什么是变量提升如果不明白百度一下吧!
2 解构(Destructuring)
2.1 数组
一次性声明多个变量:
let [a, b, c] = [1, 2, 3];console.log(a) // 1console.log(b) // 2console.log(c) // 3
结合扩展运算符:
let [head, ...tail] = [1, 2, 3, 4];console.log(head) // 1console.log(tail) // [2, 3, 4]
2.2 对象
let { a, b } = { a: "aaa", b: "bbb" };a // "aaa"b // "bbb"
数组中,变量的取值由它 排列的位置 决定;而对象中,变量必须与 属性 同名,才能取到正确的值。
2.3 字符串
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';a // "h"b // "e"c // "l"d // "l"e // "o"
2.4 用途实例
1.交换变量的值
function example() { let [a, b, c] = [1, 2, 3] return [a, b, c] }let [a, b, c] = example();// 返回一个对象function example() { return { foo: 1, bar: 2 };} let { foo, bar } = example();
2.函数参数的默认值
3.输入模块的指定方法
const { SourceMapConsumer, SourceNode } = require("source-map");
在 utils.js 中:export const function A (){ console.log('A')}export const function B (){ console.log('B')}export const function C (){ console.log('C')}/** ------------------------- **/在 组件中引用时:import { A, B, C } from "./utils.js" //调用A() // 输出 A
3. 模板字符串(template string)
3.1 纯字符串
所有模板字符串的空格和换行,都是被保留的.
console.log(`输出值为 N, 换行`)// "输出值为 N换行"
3.2 字符串中加变量
let x = 1;let y = 2;console.log(`输出值为:${x}`) // "输出值为:1"console.log(`输出值为:${x + y}`) // "输出值为:3"
3.3 模板字符串之中还能调用函数。
function fn() { return "Hello World";}console.log(`输出值为:${fn()}`) // "输出值为:Hello World"
4. 字符串函数扩展
-
includes():返回布尔值,表示是否找到了参数字符串。
-
startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
-
endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!';s.startsWith('Hello') // trues.endsWith('!') // trues.includes('o') // true
这三个方法都支持第二个参数,表示开始搜索的位置。
let s = 'Hello world!';s.startsWith('world', 6) // trues.endsWith('Hello', 5) // trues.includes('Hello', 6) // false
let site = ['runoob', 'google', 'taobao'];
if(site.includes('runoob')){
// 这里是判断里面有没有这个字符如果有就进入
}else{
// 这里是判断里面没有这个字符就进入
}
5. 函数的扩展
除了在解构中说到的函数参数的默认值,还有不少经常会用到的方法。
5. 1 rest 参数
ES6 引入 rest 参数(形式为…变量名),用于获取函数的多余参数,这样就不需要使用 arguments 对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
function add(...values) { let sum = 0; for (let val of values) { sum += val; } return sum;}add(2, 5, 3) // 10
上面代码的 add 函数是一个求和函数,利用 rest 参数,可以向该函数传入任意数目的参数。
注意,rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。
// 这样会报错function f(a, ...b, c) { // ...}
5.2 箭头函数
ES6 允许使用“箭头”(=>)定义函数。
const f = v => v;console.log('输出值:', f(3)) // 输出值: 3// 等同于const f = function (v) { return v;};
如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
// 等同于const f = function () { return 5 };const sum = (num1, num2) => num1 + num2;// 等同于const sum = function(num1, num2) { return num1 + num2;};
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用 return 语句返回。
const sum = (num1, num2) => { return num1 + num2; }
箭头函数的一个用处是简化回调函数。
const square = n => n * n;// 正常函数写法[1,2,3].map(function (x) { return x * x;});// 箭头函数写法[1,2,3].map(x => x * x);
注意: 函数体内的 this 对象,就是定义时所在的对象,而不是使用时所在的对象。
this 对象的指向是可变的,但是在箭头函数中,它是固定的。
function foo() { setTimeout(() => { console.log('id:', this.id); }, 100);}let id = 21;foo.call({ id: 42 });// id: 42
6. 数组的扩展
扩展运算符(spread)是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
6.1 数组合并的新写法。
const arr1 = ['a', 'b'];const arr2 = ['c'];const arr3 = ['d', 'e'];// ES5 的合并数组arr1.concat(arr2, arr3);// [ 'a', 'b', 'c', 'd', 'e' ]// ES6 的合并数组[...arr1, ...arr2, ...arr3]// [ 'a', 'b', 'c', 'd', 'e' ]
6.2 函数调用。
function add(x, y) { return x + y;}const numbers = [4, 4];add(...numbers) // 8
6.3 复制数组的简便写法。
const a1 = [1, 2];// 写法一const a2 = [...a1];a2[0] = 2;a1 // [1, 2]// 写法二const [...a2] = a1;a2[0] = 2;a1 // [1, 2]
6.4 将字符串转为真正的数组。
[...'hello']// [ "h", "e", "l", "l", "o" ]
6.5 数组实例的 entries(),keys() 和 values()
用 for…of 循环进行遍历,唯一的区别是 keys() 是对键名的遍历、values() 是对键值的遍历,entries() 是对键值对的遍历。
for (let index of ['a', 'b'].keys()) { console.log(index);}// 0// 1for (let elem of ['a', 'b'].values()) { console.log(elem);}// 'a'// 'b'for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem);}// 0 "a"// 1 "b"
6.6 includes()
Array.prototype.includes 方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的 includes 方法类似。ES2016 引入了该方法。
[1, 2, 3].includes(2) // true[1, 2, 3].includes(4) // false[1, 2, NaN].includes(NaN) // true
该方法的第二个参数表示搜索的起始位置,默认为 0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为 -4,但数组长度为 3 ),则会重置为从 0 开始。
[1, 2, 3].includes(3, 3); // false[1, 2, 3].includes(3, -1); // true
7. 对象的扩展
7.1Object.assign()
Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。
const target = { a: 1 };const source1 = { b: 2 };const source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1, b:2, c:3}
Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。
注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
const target = { a: 1, b: 1 };const source1 = { b: 2, c: 2 };const source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1, b:2, c:3}
Object.assign 方法实行的是浅拷贝,而不是深拷贝。
const obj1 = {a: {b: 1}};const obj2 = Object.assign({}, obj1);obj1.a.b = 2;obj2.a.b // 2
上面代码中,源对象 obj1 的 a 属性的值是一个对象,Object.assign 拷贝得到的是这个对象的引用。这个对象的任何变化,都会反映到目标对象上面。
8. Set
ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。
Set 本身是一个构造函数,用来生成 Set 数据结构。
// 基本用法const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(i);}// 2 3 5 4// 去除数组的重复成员const array = [1, 1, 2, 3, 4, 4][...new Set(array)]// [1, 2, 3, 4]
9. import 和 export
import 导入模块、export 导出模块
// example2.js // 导出默认, 有且只有一个默认export default const example2 = { name : 'my name', age : 'my age', getName = function(){ return 'my name' }}//全部导入 // 名字可以修改import people from './example2.js'-------------------我是一条华丽的分界线---------------------------// example1.js // 部分导出export let name = 'my name'export let age = 'my age'export let getName = function(){ return 'my name'}// 导入部分 // 名字必须和 定义的名字一样。import {name, age} from './example1.js'//有一种特殊情况,即允许你将整个模块当作单一对象进行导入//该模块的所有导出都会作为对象的属性存在import * as example from "./example1.js"console.log(example.name)console.log(example.age)console.log(example.getName())-------------------我是一条华丽的分界线---------------------------// example3.js // 有导出默认, 有且只有一个默认,// 又有部分导出export default const example3 = { birthday : '2018 09 20'}export let name = 'my name'export let age = 'my age'export let getName = function(){ return 'my name'}// 导入默认与部分import example3, {name, age} from './example1.js'
10. Class
对Class 我最近在写react,用的比较多,大家可以学习react,我以前用vue,过几天会有vue的总结
10.1基本用法:
//定义类class FunSum { constructor(x, y) { this.x = x; this.y = y; } sum() { console.log( this.x +this.y') }}// 使用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。let f = new FunSum(10, 20);f.sum() // 30
10.2 继承
class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调用父类的constructor(x, y) this.color = color; } toString() { return this.color + ' ' + super.toString(); // 调用父类的toString() }}
上面代码中,constructor 方法和 toString 方法之中,都出现了super关键字,它在这里表示父类的构造函数,用来新建父类的 this 对象。
子类必须在 constructor 方法中调用 super 方法(类似ES5 Object.create 指向父类 prototype 然后 prototype.constructor 给自己的原型中添加构造函数、指向自己的原型 ),否则新建实例时会报错。这是因为子类自己的 this 对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用 super 方法,子类就得不到 this 对象。
大家看到这里是不是有点疑惑了! 为啥子没有异步 Promise与async/await 呢
这个我过几天会给大家分享!!
本人才疏学浅,如有不对的地方还望大神指点一二