0
点赞
收藏
分享

微信扫一扫

js语法(es6)

q松_松q 2023-10-12 阅读 40

1:ES6声明变量

1.变量var声明变量的问题 ES5

2.let声明变量特点 ES6

3.const声明变量特点 ES6

注意:const声明一个常量,这个常量是引用数据类型(对象,数组,函数....),一旦赋值(引用地址不能修改),改的是值。

2:Symbol()

用于表示一个独一无二的值,不能与其他数据类型进行运算

3:模板字符串

var name="lzj"
console.log(`我是${name}`)

用法:`${}`

4:解构

var obj={
  name:"ljz";
  age:12;
}
const {name,age}=obj

对象解构语法: let {变量,变量,变量}=对象,要和变量同名才可以解构。

let arr=[10,11,23]
let [a,b,c]=arr

数组解构语法:let[变量,变量...]=arr。将数组中的值赋值给变量

5:扩展运算符

let arr =[10,11,12]
console.log(...arr)

扩展运算符:将数组或对象中的值一个一个拿出来。

6:箭头函数

function fn(a,b){
  return a+b
}
console.log(fn(1,3))
var fn =function(){
  console.log("我也很普通")
}
(function() {
  console.log('1111')
}
)()
let fn =()=>{ console.log('1111') }

箭头函数中,this指向外层作用域。

7:promise对象

一个promise对象有以下几种状态:

promise对象有以下两个特点:

解决问题:回调地狱、ajax 请求和响应需要时间 顺序不可控 。目的 控制顺序。

// 假装flag是状态
let flag=false
let p= new promise((resolve,reject)=>{
  if(flag){
    resolve("返回数据")
  }else{
    reject("抛出异常")
  }
}
                   // .then()处理成功的回调   也就是resolve打包的数据
                   // .catch()处理失败的回调   也就是reject暴露的异常
 p.then(data=>{
  console.log(data);
}).catch(error=>{
  
    console.log(error);
  })

promise本身是同步的,.then()和.catch()是异步的

promise的all和race方法

let p1= new promise((resolve,reject)=>{
   setTimeout(()=>{
     resolve("成功")
   },3000)
})
let p2= new promise((resolve,reject)=>{
   setTimeout(()=>{
     // resolve("成功")
     reject("失败二")
   },2000)
})
let p3= new promise((resolve,reject)=>{
   setTimeout(()=>{
     resolve("成功")
   },1000)
})
let p=Promise.all([p1,p2,p3]);
 p.then(data=>{
  console.log(data);
}).catch(error=>{
  
    console.log(error);
  })
                    

Promise.all([多个Promise对象]) 统一处理多个异步程序(定时器,时间可控)

let p1= new promise((resolve,reject)=>{
   setTimeout(()=>{
     resolve("成功")
   },3000)
})
let p2= new promise((resolve,reject)=>{
   setTimeout(()=>{
     // resolve("成功")
     reject("失败二")
   },2000)
})
let p3= new promise((resolve,reject)=>{
   setTimeout(()=>{
     resolve("成功")
   },1000)
})
let p=Promise.all([p1,p2,p3]);
 p.then(data=>{
  console.log(data);
}).catch(error=>{
  
    console.log(error);
  })
                   

Promise.race()谁快返回谁。

8:async和await

async function getVal(){

await p1.then(res=>console.log(res));
  await p1.then(res=>console.log(res));
  await p1.then(res=>console.log(res));
}

async/awiat的使用规则:

9:新增数组方法

ES6新增了许多有用的数组方法,下面是其中一些常用的方法:

1.Array.from() 可接受3个参数(后两个参数可以没有)

Array.from(arraylLike, MapFn, thisArg)

2:includes()方法 查看数组某个元素是否存在

3.Array.of构建数组

4:forEach不改变原数组,若要改变需要配合index

传入一个函数,函数参数依次为 value、index、arr

  • value:数组当前项的值(必填
  • index:数组当前项的索引(可选
  • arr:数组对象本身(可选,一般不选

5.map 一般用于取数组中某个值返回出来

map() 和 forEach() 的区别就是 map() 会返回一个新数组

6.filter 筛选数组,返回筛选后的数组

新方法中的元素是通过指定数组中符合条件的所有元素

  • value:数组当前的值
  • index :数组当前的索引
  • arr:数组对象本身(一般省略不写)

7:every()依据判断条件,数组的元素是否全满足,若满足则返回ture

callback的参数:

value --当前索引的值
index --索引

8:some() 方法用于检测数组中的元素是否满足指定条件,通俗一点 查找数组中是否有满足条件的元素

10:新增对象方法

ES6新增了很多对象方法,这些方法使得对象的操作更加方便和灵活。以下是一些常用的ES6新增的对象方法:

1.Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

Object.assign(target, ...sources)

参数:target--->目标对象

source--->源对象

返回值:target,即目标对象

有多个源对象情况也是和一个源对象一样的。没有同名的属性会直接复制到目标对象上,同名的属性后面的属性值会覆盖前面的同名属性值。

2:Object.keys():返回一个包含所有可枚举属性名称的数组。

作用:遍历对象
返回结果:返回对象中每一项key的数组

3:Object.values():返回一个包含所有可枚举属性值的数组。

4:Object.entries():返回一个包含所有可枚举属性键值对的数组。

11.Set和map

Set

add()

delete()

has()判断指定值是否存在

clear()清除所有值

for ...of由于Set只有键值没有键名,所以说keys和values返回值相同

entries实现键值对

利用Set实现数组去重

set实现交集 A∩B

实现并集A∪B

实现差集A-B

// 主要用于数组去重,字符串去重
// let set = new Set()
// 1:add添加
// set.add('ljz')
// set.add('xzq')
// set.add('hzd').add('plf')
// console.log(set);
// 2:delete删除
// set.delete('plf')
// console.log(set);
//3:判断指定值是否存在has
// console.log(set.has('plf'));
// console.log(set.has('hzd'))
// 4clear 清除所有值
// set.clear()
// console.log(set);
// 遍历for...of
// for (let i of set.keys()) {

//     console.log(i);
// }
// for (let i of set.values()) {

//     console.log(i);
// }
// 实现键值对
// for (let i of set.entries()) {

//     console.log(i);
// }

// Set实现数组去重
// let arr = [1, 2, 3, 4, 2, 3, 1, 3, 6]
// let set = new Set(arr);
// let result = [...set]
// console.log(result);
// set实现交集
let arr1 = [1, 2, 3, 4, 5, 6, 7]
let arr2 = [2, 3, 4, 7]
let set1 = new Set(arr1)
let set2 = new Set(arr2)
console.log(...set1);
// let result = [...new Set(arr1)].filter(item => set.has(item))
// console.log(result);
// 实现并集
// let result1 = [...new Set([...arr1, ...arr2])]
// console.log(result1);
// 实现差集A-B
let result = [...set1].filter(item => !set2.has(item))
console.log(result);

Map集合

类似于对象,也是键值对的集合,但是键的范围不局限于字符串,各种类型的值都可以当做键

1.set()给Map添加数据

2:get()获取某个key的值,返回key的值

3:has监测是否存在某个key,返回布尔值存在:true;不存在:false

4:delete()删除某个key及其对应的value,返回布尔值

5:clear()清除所有值

6:for...of遍历

7:keys():获取Map的所有key、

8:values()获取Map的所有值

9:entries():获取Map所有成员

10:转为数组

11:forEach遍历

// 1:set()添加数据
// let map = new Map()
// map.set('name', '小王').set('age', 18);
// console.log(map);
// 2:get()获取某个key的值,返回key的值
// console.log(map.get('name'));
// 3:has监测是否存在某个key,返回布尔值存在:true;不存在:false
// console.log(map.has('age'));
// 4:delete()删除某个key及其对应的value,返回布尔值
// console.log(map.delete('age'));
// console.log(map);
// 5:clear()清除所有值
// console.log(map.clear());
// console.log(map);
// for...of遍历
// map.set('syudy', function () {
//     console.log('有在好好学习');
// })
// console.log(map);

// keys():获取Map的所有key、
// for (let key of map.keys()) {
//     console.log(key);
// }
// values()获取Map的所有值
// for (let value of map.values()) {
//     console.log(value);
// }
// entries():获取Map所有成员
// for (let item of map.entries()) {
//     console.log(item);
// }

// 转为数组
const map = new Map([[1, 'one'], [2, 'tow'], [3, 'three']])
// console.log([...map.keys()]);
// console.log([...map.values()]);
// console.log([...map.entries()]);
// console.log([...map]);

// forEach遍历
console.log(map);
map.forEach((value, key, map) => {
    console.log(value, key, map);
})

set和map是es6新增的集合类型。

Set

map:

创建:new Map()

遍历:遍历也可以用forEach和for of

举报

相关推荐

0 条评论