es6的常用方法
es6常用的方法
1.let/const
let 声明的变量只在 let 命令所在的代码块内有效。
只能声明一次，否则会报错，而var能声明多次
不存在变量提升
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
ps: 应在使用变量之钱声明变量，否则会出现暂时性死区
2.箭头函数
es6允许使用箭头（=>）定义函数
var f = v =>v; //等同于 var f = function(v){ return v; } //参数只有一个时省略括号 var people = nama =>"hello"+name //参数为多个时 var people = (name,age)=>{ const fullName = "h"+name }
箭头函数相对于普通函数有几下几个特点
-
- 没有arguments参数,取而代之的是rest参数
- 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
- 没有原型属性
- 不能使用call,aplly改变指针方向
- 不能作为构造函数，不能使用new
3.字符串
3.1 includes(),startsWith(),endsWith()
- includes()： 返回布尔值，表示是否找到了参数字符串
- startsWith()：返回布尔值 ，表示字符串是否在源字符串的头部
- endsWith()：返回布尔值 ，表示字符串是否在源字符串的头部
var s = "helllo world"; s.starsWith("hello")//true s.endsWith("rld")//true s.includes("o")//true /*第二个参数表示开始搜索的位置*/ var s = 'Hello world'; s.startsWith('world', 6) // true s.endsWith('Hello', 5) // true 第二个参数代表截取到前5 个 s.includes('Hello', 6) // false
3.2 repeat()
该方法返回一个新的字符串，讲源字符串重复拼接n次
var s = 'a' s.repeat(2)//"aa" s.repeat(3.6)//"aaa" 会向下取整 s.repeat('4')//"aaaa"会将字符串转换成数字 s.repeat("hh")//''''相当于0次 s.repeat("NAN")//""相当于0次 s.repeat("-1")//报错
3.3模板字符串
var firstname="meng"; var lastname = "tong"; console.log(`我的名字叫${firstname}${lastname}`） //模板字符串要用反引号，如果在字符串中需要用到反引号，则需要进行转义
字符串模板还可以在大括号中调用函数等操作。如
${fistname()}//调用函数
${firstname+lastname}//运算
4. 解构
4.1 解构的基本用法
只要左右模式相同，就会被赋对应值
var [a,b,c]=[1,2,3]；//a=1;b=2;c=3 var [a,[b,c],d]=[1,[2,3],4];//a=1,b=2,c=3,d=4
解构赋值可以有默认值，赋值为不严格等于undefined时生效
var [a = 1,b] = [,2]//a=1,b=2 var[a = b,b = 3] = [4,undefined]//a=4,b=3
4.1.1对象的解构赋值
对象解构赋值和数组类似，只不过对象需要严格按照对象名来对应，因为对象不像数组是有顺序的，没有对应的则解构不成功
var {aa,bb}={aa:'abc',bb=456}//aa="abc",bb=456
4.1.2字符串的解构赋值
字符串类似数组，可以对他的长度进行解构
var {length:len}="nishuosha"//len=9
4.1.2参数的解构赋值
[[1, 2], [3, 4]].map(([a, b]) => a + b);// [ 3, 7 ]
4.1 解构的常用方法
[a,b]=[b,a]//交换变量的值 const { SourceMapConsumer, SourceNode } = require("source-map");//模块加载 /*返回数组*/ function aa(){ return [a,b,c] } [a,b,c] = aa() /*提取json数据*/ var jsonData = { id: 42, status: "OK", data: [867, 5309 }; let { id, status, data: number } = jsonData;
5. set和map数据结构
5.1 set
set是类似于数组的构造函数，但是成员中没有重复的值
/*set结构不会填加重复的值 */ var s= new Set(); [1,2,2,2,4,3].map(x=>s.add(x));//s中有1,2,4,3 var set = new Set([1,2,3,3,4]); [...set]//[1,2,3,4]//会自动删除重复的项
5.2weakset
weakset与set类似，但是与set有两个区别
1.weakset的成员只能是对象，不能有其他类型的值
2.weakset中的对象都是弱引用，垃圾回收机制不考虑是否被引，无法引用weakset的成员，是不可遍历的。
5.3map
map是类似于对象，是键值对的集合，但键不仅可以是字符串，还可以包括对象，除非想抽离出一个现实的类使用object， 如果只是需要key: value的数据结构，使用Map结构。因为Map有内建的遍历机制。
var map = new Map(); var o = {p:"Hello World" }; map.set(o,'content') map.get(o)//‘content’ map.has(o)//true map.delete(o)//true map.has(o)//false
map的键是根据内存地址绑定的，因此值相同的两个键在map解构中可能被视为两个键
5.4WeakMap
weakMap和map类似，唯一的区别是只接受对象作为键值，不会被垃圾回收
6 symbol
symbol值是通过symbol函数生成的，所有的symbol的属性名都是独一无二的，保证了属性名不会冲突
let s = symbol(); typeof s //symbol
Symbol函数的参数只是表示对当前Symbol值的描述，因此相同参数的Symbol函数的返回值是不相等的
//没有参数的情况 var s1 = Symbol(); var s2 = Symbol(); s1===s2//false //有参数的情况 var s1 = Symbol('a'); var s2 = Symbol("a"); s1===s2//false
7 Module
使用import取代require
import {func1,func2} from "moduleA"
使用export取代module.exports
import Vue from "vue"
const A = 2
export default A
8 promise
promise直观上的优点是解决了函数层层嵌套的坑，变成了垂直编码，promise对象有以下两个特点
/*代替层层嵌套*/
func1(value1) .then(func2) .then(func3) .then(func4) .then(func5, value5 => { // Do something with value 5 })
（1）对象的状态不受外界的影响，promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果可以改变这个状态。
（2）一旦状态改变就不会在变。
new Promise((resolve, reject) => reject(new Error('Failed to fulfill Promise'))) .catch(reason => console.log(reason))
）
8.1 reject的用法
reject是在回调失败的情况下调用的
8.1 all的用法
并行执行多个异步操作
Promise.all(promises) .then((results) => { // Do something with results of all our promises })
9 Async await
async可以看做多个异步操作，包装成的一个promise对象，使异步操作变得更加方便。
await后面紧跟的函数表示需要等待的结果
async返回一个promise对象，
async function f() { return 'hello world';//返回的值将会成为then 回调的参数 } f().then(v => console.log(v)) // "hello world" async function f() { throw new Error('出错了');//如果内部抛出错误，会导致将promise对象编程reject状态。因此最好使用catch接收 } f().then( v => console.log(v), e => console.log(e) ) // Error: 出错了
async中必须等到await命令的promise对象执行完，才会执行then中的回调
async function f() { return await 123; } f().then(v => console.log(v))
async function getStockPriceByName(name) { var symbol = await getStockSymbol(name); var stockPrice = await getStockPrice(symbol); return stockPrice; } getStockPriceByName('goog').then(function (result) { console.log(result); });
10 数组的扩展
10.1Array.from()
将类数组转换成真正的数组
let arr = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; // ES5的写法 var arr1 = [].slice.call(arr); // ['a', 'b', 'c'] // ES6的写法 let arr2 = Array.from(arr); // ['a', 'b', 'c']
将set对象生成的类数组转换成真正的数组
let namesSet = new Set(['a', 'b']) Array.from(namesSet) // ['a', 'b'] /*以下方法也可以转换*/ [...namesSet]
任何有length的属性都可以转换成数组
Array.from({ length: 3 }); // [ undefined, undefined, undefined ]
10.2 Array.of()
将一组值转换为数组
Array.of(2,3,4)//[2,3,4]
Array.of基本上可以代替Array()或者new Array()
Arrayy.of()//[]
10.3 copyWithin()
数组实例的方法，在当前数组内部，将指定位置的成员复制到其他位置（覆盖原来的），会改变原数组；
他接受三个参数。
- target（必需）：从该位置开始替换数据
-
start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。
- end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数
[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]从0位置开始替换数据，从3位置开始读取数据（4,5）替换了1，2
10.4 数组实例的find()和findIndex()
find返回第一个符合条件的数组成员，返回该成员，如果没有undefinds
[1,2,3,4,5].find((n)=>n<2)//1
findindex()返回第一个符合条件的索引值,如果没有-1
[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; }) // 2
10.5 数组实例的fill()
使用给定值，填充一个数组。在初始化一个数组是十分方便。第二个和第三个参数分表表示起始位置和结束位置
['a', 'b', 'c'].fill(7) // [7, 7, 7] new Array(3).fill(7) // [7, 7, 7] 填充 ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']
10.6 数组实例的entries()，keys()和values()
用for...of遍历
entries()键值对遍历、keys()健明遍历、values()键值遍历
10.7 数组实例的includes()
数组中是否包含，第二个参数表示搜索的起始位置，如果为负数，则为倒数位置。
[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, NaN].includes(NaN); // true
10.8数组的空位
es6数组方法明确会将空位置转换为undefined
