es6 语法 解构 拼接 扩展运算 数组降为 symbol 迭代器 生成器 定时器 map 映射 对象字面量 私有属性 构造函数继承
es6 语法 解构 拼接 扩展运算 数组降为 symbol 迭代器 生成器 定时器 map 映射 对象字面量 私有属性 构造函数继承 promise async await
解构
// 解构var character = {name:'Brucezzz',pseudonym:'Bruce',metadata:{age:32,gender:'male',airbags: "说两句啊",airconditioning: false,color: 'red'},}// 解构添加var { c = 101, } = character //c从新添加 101console.log(c,'结构一')var { boo = {size:10}} =character //在boo 里边添加 {size:10}console.log(boo,'结构二')// 解构加上 从新 修改 对象解构 普通结构var getCarProductModel = ({ name, pseudonym,metadata:{ airbags ,color}}) => ({ //({ name, pseudonym,metadata:{ airbags ,color}}) 解构sku: name + ':' + pseudonym + ':' + airbags +color, //从新赋值name, pseudonym,})console.log(getCarProductModel(character),'结构三')
拼接
// 连接符写法一function join(...arr){ //解构 // return arr.join('--')}console.log(join('--','first', 'second', 'third')) //添加分割线// 连接符写法二function join(separator,...arr){return arr.join(separator)}console.log(join('-+-', 'first', 'second', 'third')) //添加分割线
扩展运算
// 扩展运算符// 多个扩展let arr1 = ['kl','kkk']let arr3 = [1, 2, 3, 4, 5, 6];arc = [...arr1,...arr3] //解构每个对象的值 然后添加到一个 arc中console.log(arc) //(8) ['kl', 'kkk', 1, 2, 3, 4, 5, 6]var {x,v,...s} = {x:1,v:3,b:2,d:6} //三点语法 x和v获取单个值 剩下的用...代替 console.log(x,v,s) // 拓展运算符 二function cas(){return ["lll",...arguments,'sdljdsl'] //剩余参数长度}console.log(cas('a', 'b', 'c')) //(5) ['lll', 'a', 'b', 'c', 'sdljdsl']// 也可以直接单独输出数组 剩余长度console.log([..."hadowRoot"]) //(9) ['h', 'a', 'd', 'o', 'w', 'R', 'o', 'o', 't']
数组降为
// // 数组降维var arr = [1,3,4,[4,5,6,7]]console.log(arr.flat()) //(7) [1, 3, 4, 4, 5, 6, 7]symbol
// Symbollet aa = Symbol('nihao')let ba = Symbol('nihao')console.log(aa===ba) //false// // Symbol.forlet a = Symbol.for('jj')let b = Symbol.for('jj')console.log(a===b) //true
迭代器
// // 迭代器 //false表示数组成员没遍历结束，true表示结束。// iterator next()let Uname = ["搜到", "的撒", "的风格", "范德萨", "公司发", "告诉对方"];for(let a of Uname){//对上边的Uname进行遍历console.log(a,'--uname') //遍历打印}let iterator = Uname[Symbol.iterator]() //进行迭代器赋值//利用迭代器输出内容 iterator.next() 表示下一个 下一个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: '公司发', done: false}console.log(iterator.next())//{value: '告诉对方', done: false}console.log(iterator.next())//{value: 'undefined', done: true}
生成器
// 生成器function* fun2(arg) {// 打印arg包裹的数据console.log(arg)//定义初始变量let A = yield '一直没有耳朵'; let B = yield '一直没有尾巴';let C = yield '真奇怪';console.log(A) //打印A对应的next里边的数据 console.log(B) //打印B对应的next里边的数据 }let tor = fun2('aaa') //进行生成器赋值console.log(tor.next()) //第一个不被打印输出 所以留出即可console.log(tor.next('sljds'))console.log(tor.next('sal'))console.log(tor.next())定时器
// 定时器// 定义函数 包裹定时器 定义初始内容function get(){setTimeout(()=>{let data = '啥了'iterator.next(data)// 利用iterator.next 迭代器 控制data输出},100)}function kl(){setInterval(()=>{let data = 'kkkkk'iterator.next(data)},11)}map 映射
// // Map 映射 键值对的形式 一一对应 可以是各种形式的对应// // 一let m1 = new Map() //m1 一个新的映射m1.set('name','zmy') //m1 新增一个 name => zmyconsole.log(m1) //Map(1) {'name' => 'zmy'}// 二let m2 = new Map()m2.set('kl',function(){console.log(m2)})console.log(m2) //Map(1) {'kl' => ƒ}// 三let m3 = new Map()let ll = {s:'asdj'}m3.set('ll',"lolo")console.log(m3) //Map(1) {'ll' => 'lolo'}
循环 for array.for
let i = 0for(let i=0;i<10;i++){console.log(i)}// a of b 循环let Uname = ["搜到", "的撒", "的风格", "范德萨", "公司发", "告诉对方"];for(let a of Uname){console.log(a) //搜到 的撒 的风格 范德萨 公司发 告诉对方}// Array.from遍历let arrayLike = {'0': 'T','1': 'h','2': 'i','3': 'n','4': 'k',length: 5 //控制遍历几个};const arr = Array.from(arrayLike) //遍历console.log(arr) //['T', 'h', 'i', 'n', 'k']// 索引遍历 a of b for (let index of arr.keys()) {console.log(index);}
对象字面量
// // 对象字面量 添加数据的方法var expertise = 'slslos' //定义一个变量var Person = { name : 'ai',age:12,// [expertise]: 是简写属性 不可和计算属性 同时使用[expertise]:{ //[expertise]这样写 就是相当于在的expertise基础上加东西yue:2,inko:['sdjso','sdhs']}}console.log(Person)// // 调用别的对象属性// var grou = {// id :'hd',// name:'ds'// }// var klkl ={// [grou] :grou, //全部数据 // [grou.id] :grou.id, //单个数据// kl:'asjlaj' //后添加的数据// }// console.log(klkl)
私有属性
// 私有属性 { # }class person{// 共有属性name;// 私有属性#age;//构造方法constructor(name,age){this.name = namethis.#age = age}cos(){console.log(this.name,'共有属性')console.log(this.age,'私有属性')}}var girl = new person('loskd',99)console.log(girl)girl.cos() //私有属性不可访问
构造函数继承
// // 构造函数式继承 { extends 继承父的所有元素}class phl{//构造方法constructor(name,price){this.name = namethis.price = price}cla(){console.log('我可以改变世界')}}// const mi = new phl(133, '小米', 'red', 4.7)// console.log(mi);// mi.cla()class smallcall extends phl{// 构造方法记得把需要的父的内容constructor一下啊constructor(price, name, color, size) {super(price, name) //调用父类的constructor方法this.color = colorthis.size = size}cla(){console.log("sdjfs")}}const mi = new smallcall(133, '小米', 'red', 4.7)console.log(mi);mi.cla()//输出 子的cla
promise async await
// promise async awaitasync function foo(){var a = await new Promise((res) =>{ //创建新的Promise setTimeout(()=>{res("正确输出") //定时器输出正确的内容},200)});console.log(a) //打印try{ //继续 连续var b = await new Promise((res,rej)=>{ setTimeout(()=>{rej('错误输出') //输出错误},99) })}catch(b){ //错误监听返回和then原理差不多console.log(b)}var ses = await new Promise((res) =>{ //创建新的Promise setTimeout(()=>{res('ses')},880)})var c= await 'ljds' //修改输出的内容console.log(c) //打印新的内容console.log(ses) //原有的内容}foo()//执行foo()// 数据二使用数据一的数据async function getData() {// 假装请求数据1var data1 = await new Promise((resolve) => {setTimeout(() => {resolve('data1'); //定时器输出正确的内容}, 1000);});// return data1 //返回data1就是直接输出data1的数据// console.log(data1); // // 假装请求数据2且此请求依赖数据1return new Promise((resolve) => { //返回新的promisse然后继续使用setTimeout(() => {resolve('data2'); //输出正确的内容}, 1000);});}getData().then((v) => { //监听getData的数据变化 V就是一个形参没有意义 console.log(v);});