ES6let、const……
解构赋值从对象/数组中提取值,按照对应位置,对变量赋值。对象也可以实现解构
let [a,b,c]= [1,2,3]let person = {name:"xioaming",age:18}let {name,age} = personlet {name:uname,age:uage}=person//左侧用于匹配,右侧用于赋值变量
参数赋值初始值function add(a,b,c=10){}//具有默认值的参数值,一般位置要靠后add(1,2)//与结构赋值结合function connect({host="127.0.0.1",username,password,port=3000}){}conncet({ host:'localhost', username:"root", password:"root", port:3306})
箭头函数……
this指是函数外最近的那个this,无法被bind/call/apply指定
剩余参数将一个不定数量的参数表示为一个数组
function sum(first,...args){ //args为数组}sum(1,2,3,4,5)//剩余参数与解构配合使用let students=['xm','xw','xz']let [s1,...s2] = studentsconsole.log(s1)//'xm'console.log(s2)//['xw','xz']
扩展运算符(展开语法)将数组或对象转为用逗号分隔的参数序列
let arr = [1,2,3]console.log(...arr)//应用:合并数组let arr1=[1,2,3]let arr2=[4,5,6]let arr3=[...arr1,...arr2]//arr1.push(...arr2)//应用:将伪数组转为数组let arr = [...arguments]//拓展//构造函数方法Array.fron()转数组let arrayLike={ '0':'a', '1':'b', length:2}let arr2=Array.from(arraylike,[function])//find()找出第一个符合条件的数组成员,如果没有找到返回undefinedlet arr =[ { id:1, name:"xm" }, { id:2, name:"xz" }]let target = arr.find((item,index)=>item.id===2)//{id:1,name:"xm"}//findIndex()找出第一个符合条件的数组成员的位置,如果没找到返回-1let inex = arr.find((item,index)=>item.name==="xz")//1//includes()表示某个数组是否包含给定的值,返回布尔值[1,2,3].includes(2)//true[1,2,3].include(4)//false//startsWith()参数字符串是否在原字符串的头部,返回布尔 let str = "hello world!"str.startsWith('hello')//true//endsWith()参数字符串是否在原字符串的尾部,返回布尔 str.endsWith('!')//true//repeat() 将原字符串重复n次,返回一个新字符串‘x1'.repeat(3) //"x1x1x1"
symbol数据类型表示独一无二的值
特点
值是唯一的,用来解决命名冲突的问题不能与其他数据进行运算定义的对象属性不能使用for…in循环遍历。但可以使用Relect.ownkeys来获取对象的所有键名
//创建symbollet s = Symbol()let s2 = Symbol("xiaoming")//传入的是一个描述字符串,与结果无关let s3 = Symbol("xiaoming")//与s2不一样s2 === s3 //false//Symbol.for创建let s4 = Symbol.for('xiaoming')let s5 = Symbol.for('xioaming')s4 === s5//true//不能运算//let result = s+100//let result = s>100//let result = s+s//向对象中添加方法up downlet game={}//game.up=function(){}//会有风险,里面可能已经存在let methods={ up:Symbol(), down:Symbol()}game[methods.up]=function(){ console.log("up");}game[methods.down]=function(){ console.log("down");}game[methods.up]()//调用let say = Symbol('say')let youxi = { name:"123", [say]:function(){ console.log('say'); }, [Symbol('do')]:function(){ console.log('do'); },}youxi[say]()//调用/*--------内置Symbol值-------------*///Symbol.hasInstanceclass Person{ static [Symbol.hasInstance](param){ console.log(param)//{a:1} console.log("我被用来检测类型了") return true//控制instanceof的结果 }}let o={a:1}o instanceof Person //Symbol.isConcatSpreadableconst arr=[1,2,3]const arr2=[4,5,6]console.log(arr.concat(arr2));//[1, 2, 3, 4, 5, 6]arr2[Symbol.isConcatSpreadable] = falseconsole.log(arr.concat(arr2));//[1, 2, 3, Array(3)]
迭代器(Iterator)ES6创造了一种新的遍历命令for…of循环,Iterator接口主要供for…of消费
是对象里的一个属性Symbol.iterator
原生具备iterator接口的数据(可以用for of遍历)
ArrayArgumentsSetMapStringTypedArrayNodeList
工作原理
1. 由Symbol.iterator指向的函数创建一个指针对象,指向当前数据结构的起始位置 2. 第一次调用对象的next方法,指针自动指向数据结构的第一个成员 3. 接下来不断调用next方法,指针一直往后移动,直到指向最后一个成员 4. 每调用next方法会返回一个包含value和done属性的对象需要自定义遍历数据的时候,要想到迭代器
const xiyou=['唐僧','孙悟空','猪八戒','沙僧']let iterator = xiyou[Symbol.iterator]()console.log(iterator.next());//{value: "唐僧", done: false}console.log(iterator.next());//{value: "孙悟空", done: false}console.log(iterator.next());//{value: "猪八戒", done: false}console.log(iterator.next());//{value: "沙僧", done: false}console.log(iterator.next());//{value: undefined, done: true}/*-----迭代器应用,for of遍历对象内数组-------*/const banji = { name: "一班", stus: [ 'xiaoming', 'xiaowang', 'xiaozhang' ], [Symbol.iterator]() { //索引变量 let index = 0 let _this = this return { next() { if (index < _this.stus.length) { const result = { value: _this.stus[index], done: false } //下标自增 index++ return result } else { return { value: undefined, done: true } } } } }}for(s of banji){ console.log(s);}
生成器生成器函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同
//*的偏向无所谓function * gen(){ //yield函数代码的分割符 yield '一只没有耳朵' yield '一只没有尾巴' yield '真奇怪'}for(let v of gen()){ console.log(v);}//一只没有耳朵// 一只没有尾巴// 真奇怪let iterator=gen()console.log(iterator.next());//{value: "一只没有耳朵", done: false}console.log(iterator.next());//{value: "一只没有尾巴", done: false}console.log(iterator.next());//{value: "真奇怪", done: false}console.log(iterator.next());//{value: undefined, done: true}//参数传递function* gen(arg) { console.log(arg);//AAA let one = yield 111 console.log(one);//BBB yield 222 yield 333}let iterator = gen('AAA')console.log(iterator.next());//{value: 111, done: false}//next()传入的实参将作为上一个yield语句的返回结果console.log(iterator.next('BBB'));//{value: 222, done: false}//实例//1//异步编程 文件操作 网络操作(ajax,request) 数据库操作//1s后控制台输出111 2s后输出222 3s后输出333function one(){ setTimeout(()=>{ console.log(111); console.log(iterator); iterator.next() },1000)}function two(){ setTimeout(()=>{ console.log(222); iterator.next() },2000)}function three(){ setTimeout(()=>{ console.log(333); iterator.next() },3000)}function* gen(){ yield one() yield two() yield three()}let iterator = gen()iterator.next()//2//模拟获取 用户数据 订单数据 商品数据function getUsers(){ setTimeout(()=>{ let data = "用户数据" //调用next方法,并将数据传入 iterator.next(data) },1000)}function getOrders(){ setTimeout(()=>{ let data = "订单数据" iterator.next(data) },1000)}function getGoods(){ setTimeout(()=>{ let data = "商品数据" iterator.next(data) },1000)}function* gen(){ let users = yield getUsers() console.log(users); let orders = yield getOrders() console.log(orders); let goods = yield getGoods() console.log(goods);}let iterator = gen()iterator.next()
Promiseconst p = new Promise((resolve, reject) => { setTimeout(() => { resolve('用户数据') }, 1000)})const result = p.then(value => { console.log(value);//用户数据 //return //1.非promise类型的属性 // return '123' //2.是promise对象 // return new Promise((resolve,reject)=>{ // resolve('ok') // }) //3.抛出错误 //throw '出错啦!'})console.log(result);//return 非promise类型的属性 // [[PromiseStatus]]: "resolved" // [[PromiseValue]]: "123"//return promise对象 //[[PromiseStatus]]: "resolved" // [[PromiseValue]]: "ok"//return 抛出错误 //[[PromiseStatus]]: "rejected" //[[PromiseValue]]: "出错啦!"//链式调用new Promise((resolve, reject) => { setTimeout(() => { resolve("111") }, 1000)}).then(str => { console.log(str); return new Promise((resolve, reject) => { setTimeout(() => { resolve("222") }, 2000) })}).then(str => { console.log(str); return new Promise((resolve, reject) => { setTimeout(() => { resolve("333") }, 3000) })}).then(str=>{ console.log(str);})
Set数据结构类似于数组,但是成员的值都是唯一的,没有重复的值
const set = new Set([1,2,3,4])//数组去重let arr = [1,3,5,1,4,45,14,5]let newArr = [...new Set(arr)]console.log(newArr);//[1, 3, 5, 4, 45, 14]//实例方法//add(value) 添加某个值,返回Set结构本身//delete(value) 删除某个值,返回一个布尔值,表示删除成功//has(value) 返回一个布尔值,表示改制是否为Set成员//clear() 清除所有成员,无返回值//遍历 也有forEach方法const s = new Set([2,3,4,5,6,7])s.forEach(value=>{ console.log(value);})
Map数据结构类似于对象,也是键值对的集合。但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当做键。Map也实现了iterator接口,所以可以使用拓展运算符和for…of进行遍历。
Map的属性和方法
size 返回Map元素个数
set 增加一个新的元素,返回当前Map
get 返回键名对象的键值
has 检测Map中是否包含某个元素,返回boolean值
clear 清空集合,返回undefined
0 留言
2020-10-07 10:55:49
奖励22点积分