1,用let定义变量
2,用const定义常量
3,变量的解构赋值
const zhao={
name:'赵本山',
age:78,
xiaopin:function(){
console.log("我可以演小品")
}
};
let {name,age,xiaopin} =zhao;
console.log(name)
4,模板字符串
//内容中可以直接出现换行符
let str = `<ul>
<li>SV接口</li>
</ul>`
//变量拼接
let lover = '魏翔';
let out = `${lover}是我心目中最搞笑的演员`;
console.log(out)
5,箭头函数
------它的this指向取决于函数的作用域,是静态的,在哪里定义的就是指向哪里,指向外层函数的值,函数体中使用到的this指本身,此时要是换成箭头函数,this指向上一级函数
function getName(){
console.log(this.name)
}
//箭头函数
let getName2=()=>{
console.log(this.name)
}
//设置window对象的name属性
window.name='尚硅谷';
const school={
name:'khd'
}
//直接调用
getName(); //---------输出尚硅谷
getName2(); //---------输出尚硅谷
//call方法调用
getName.call(school) //---------输出khd
getName2.call(school) //---------输出尚硅谷
应用:
<body>
<div id="ad"></div>
</body>
<script>
//获取元素
let ad1=document.getElementById('ad');
//绑定侦听事件
ad1.addEventListener('click',function(){
//定时器
setTimeout(()=>{
//此时的this在ad1.addEventListener('click',function(){}的函数体中定义的,
//使用箭头函数后this的指向为ad1这个元素
this.style.background='pink'
},2000)
})
</script>
6,rest参数
// rest参数,用于获取函数的实参
//多个参数,rest参数必须放到最后
function fn(a,b,...args){
console.log(a);
console.log(b);
console.log(args);
}
fn(1,2,3,4,5,6,7)
//输出结果 a:1,b:2,...args为数组:34567
7,...扩展运算符
//数组的合并
const k1=['舒服','阿斯加德'];
const k2=['哦啊的','是电脑'];
const k=[...k1,...k2]
console.log(k)
//数组的克隆
//将伪数组转换成真正的数组
8,生成器--- *
<script>
// yield--函数代码的分隔符
function * gen(){
console.log(111);
yield '考试的合法';
console.log(222);
yield '地方';
console.log(333);
yield '不合适接收';
}
let inter=gen();
inter.next(); //输出111
inter.next(); //输出222
inter.next(); //输出333
</script>
console.log(inter.next());
console.log(inter.next()); //输出yield的内容
console.log(inter.next());
9,promise
<script>
// resolve--成功的结果,reject--失败的结果
const p=new Promise(function(resolve,reject){
setTimeout(function(){
let data="成功";
resolve(data);
let error="失败";
reject(error)
},1000)
});
//调用Promise对象的then方法,有两个参数,成功的和失败的
p.then(function(value){
console.log(value)
},function(reason){
console.log(reason)
})
</script>
promise发送ajax请求
<script>
const p=new Promise((resolve,reject)=>{
//创建对象
const xhr=new XMLHttpRequest();
//初始化--以什么方式发送数据,向哪里发送数据
xhr.open('GET','https://api.apiopen.top/getJoke');
//发送数据
xhr.send();
//绑定事件,处理相应结果
//在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200-299时,表示响应已就绪
xhr.onreadystatechange=function(){
//判断
if(xhr.readyState==4){
if(xhr.status>=200&&xhr.status<300){
//成功
resolve(xhr.response)
}else{
//失败
reject(xhr.status)
}
}
}
})
//指定回调
p.then(function(value){
console.log(value)
},function(reason){
console.log(reason)
})
</script>
10,set--集合(数组)
<script>
let arr=[1,2,2,5,6,8,5,4,3];
//数组去重
let result=[...new Set(arr)];
// console.log(result);---1,2,5,6,8,4,3
//交集
let arr1=[2,5,6,6,7,3,9];
let result1=[...new Set(arr)].filter(item=>{
let result2=new Set(arr1) //去重后成集合
if(result2.has(item)){
return true;
}else{
return false;
}
});
// console.log(result1)---2,5,6,3
//并集
let union=[...new Set([...arr,...arr1])]
console.log(union)--//合并后去重
//差集-交集取反
// 1集合有而2集合没有极为
</script>
<script>
let s =new Set();
let s1=new Set(['接口','事件','回调']);
//元素个数
console.log(s1.size);
//增加新的元素
s1.add('函数');
//删除元素
s1.delete('事件');
//检测
console.log(s1.has('接口'));
//清空
s1.clear();
for(let v of s1){
// of:指的是值
// in:指的是索引值
console.log(v)
}
</script>
11,Map
<script>
let m =new Map();
//添加元素
m.set('name','邯郸');
m.set('change',function(){
console.log('环境水电费')
});
//删除
m.delete('name');
//获取,通过get方法
console.log(m.get('change'));
//清空
m.clear()
</script>
12,数值扩展
<script>
//检测是否为NAN
console.log(Number.isNaN(123))
//字符串转化为整数
console.log(Number.parseFloat('3.516回复'))
console.log(Number.parseInt('456是否'))
//将小数部分抹掉
console.log(Math.trunc(3.5))
//Math.sign判断一个数是正数负数还是0
console.log(Math.sign(545));
console.log(Math.sign(0));
console.log(Math.sign(-156));
</script>
13,对象方法
<script>
//Object.is判断两个值是否完全相等
console.log(Object.is(120,120))
console.log(Object.is(NaN,NaN))
//对象的合并
const c1={
host:'192.255.555.55',
port:3306,
name:'root',
test:'ted'
}
const c2={
host:'896.56.88.13',
port:3658,
name:'sdkj'
}
//隐藏c1的值,但是不同的值会显示出来
console.log(Object.assign(c1,c2));
//Object.setPrototypeOf设置原型对象以及Object.getPrototypeOf获取原型对象
const school={
name:'邯郸学院'
}
const cities={
xiaoqu:['北京','上海','深圳']
}
Object.setPrototypeOf(school,cities)
console.log(school)
console.log(Object.getPrototypeOf(school))
</script>
14.模块化
是指将大的程序文件差分成许多小的文件,并把小文件组合起来
通用的导入方式:
<script>
//引入1.js的模块内容
//把1.js文件所暴露的内容全部存入m1的变量中
import * as m1 from '/路径/1.js'
</script>
解构赋值方式:
//解构赋值方式--变量名重复,可以使用别名的方式
import {school,teach} from '/路径/1.js'
import {school as c1,xuexiao} from '/路径/2.js'
// 分别暴露
export let school='邯郸学院';
export function xuexiao(){
console.log("数据开发")
};
//统一暴露
let school='邯郸学院';
function xuexiao(){
console.log("数据开发")
}
export {school,xuexiao}
//默认暴露
export default{
school:'邯郸学院',
xuexiao:function(){
console.log("数据开发")
}
}
15,判断一个数组中包不包含某个值
const mingzhu=['西游记','三国演义','红楼梦','水浒传'];
console.log(mingzhu.includes('三国演义'))--- true
//**代表幂运算
console.log(2**10) 即2的10次方
16,async和await
await返回的是promise成功的值,若失败了,则会抛出异常,用try catch进行捕获
17,ES8中对象方法的扩展
<script>
const school={
name:'邯郸学院',
cities:['北京','上海','深圳'],
xueke:['前端','JAVA','大数据']
}
//获取对象所有的键
console.log(Object.keys(school));
//获取对象所有的值
console.log(Object.values(school))
//entries得到的是一个数组(键和值)
console.log(Object.entries(school));
// 创建map
const m =new Map(Object.entries(school))
console.log(m)
</script>