模板字符串
1.内容中可以出现换行符
let str = `<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>`
2.变量拼接
let love = 'mm'
let result = `${love}是演员`
console.log(result)// mm是演员
简化对象
const age = function(){
console.log('长大啦')
}
name='wzx'
const home = {
name,
age,
warm(){
console.log('温暖你')
}
}//{name: 'wzx', age: ƒ, warm: ƒ}
箭头函数
箭头函数是静态的。this始终指向函数声明时所在作用域下的this值
function getName1() {
console.log(this.name)
}
let getName2 = ()=>{
console.log(this.name)
}
window.name = 'pp'
const action = {
name:'dpp'
}
// 直接调用
getName1();//pp
getName2();//pp
//call调用
getName1.call(action);//dpp
getName2.call(action);//pp
绑定事件
ad.addEventListener("click",function(){
setTimeout(()=>{
console.log(this)
this.style.background='pink';
},2000);
})
箭头函数适合做与this无关的回调，不适合与this有关的回调。
函数参数默认值
形参初始值 具有默认值的参数，一般靠后
function add(a,b,c=100){
return a+b+c;
}
let result = add(1,2)
console.log(result)//103
与解构赋值结合
function connect({host,username,password,port}){
console.log(host)
console.log(username)
console.log(password)
console.log(port)
}
connect({
host:'www://pp.com',
username:'pppp',
password:'pppp',
port:3306
})
rest参数
function date(...args){
console.log(args)
}
date('66','77','88');//['66', '77', '88']
rest参数必须放最后
function f(a,b,...args){
console.log(a)
console.log(b)
console.log(args)
}
f(1,2,3,4,5,6) //1 //2 //[3,4,5,6]
扩展运算符
const boys=['qq','ww','ee']
function play(){
console.log(arguments)
}
play(...boys) //0:"qq" 1:"ww" 2:"ee"
应用
1、数组合并
const actor1 = ['王宝强','刘昊然']
const actor2 = ['马冬梅','马希梅']
const zuhe = [...actor1,...actor2]
console.log(zuhe)
2、数组克隆(浅拷贝)
浅拷贝：深拷贝会另外创造数组，里面复制一份相同的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
//数组克隆(浅拷贝)
const champion = ['E','D','G']
const lower = [...champion];
console.log(lower)
3、将伪数组转化为真正的数组
<body>
<div></div>
<div></div>
<div></div>
</body>
const divs = document.querySelectorAll('div');
const arr = [...divs]
console.log(arr)//[div, div, div]
Symbol
let s2 = Symbol('pp');
let s3 = Symbol('pp');
console.log(s2 === s3) //false
let s4 = Symbol.for('pp');
let s5 = Symbol.for('pp');
console.log(s4 === s5) //true
不能与其他数据进行运算 如：// let result = s2 +100;
let wolves = {
[Symbol('say')]:function (){
console.log('我可以发言')
},
[Symbol('kill')]:function (){
console.log('狼人杀人啦')
}
}
console.log(wolves) //{Symbol(say): ƒ, Symbol(kill): ƒ}
迭代器
const xiyou = ['孙悟空','唐僧','沙僧','猪八戒']
const iterator = xiyou[Symbol.iterator]();
console.log(iterator.next())//孙悟空
console.log(iterator.next())//唐僧
console.log(iterator.next())//沙僧
console.log(iterator.next())//猪八戒
console.log(iterator.next())//undefined
生成器
function * gen(){ //生成器
yield '你爱我';
yield '我爱你';
yield '蜜雪冰城甜蜜蜜';
}
let iterator = gen();
console.log(iterator.next().value);//你爱我
console.log(iterator.next().value);//我爱你
console.log(iterator.next().value);//蜜雪冰城甜蜜蜜
生成器函数参数
function * gen(arg){
console.log(arg)
let one = yield 111;
console.log(one)
let two = yield 222;
console.log(two)
let three = yield 333;
console.log(three)
}
let iterator = gen('AAA')
console.log(iterator.next()); //AAA //{value: 111, done: false}
console.log(iterator.next('BBB')) //BBB //{value: 222, done: false}
console.log(iterator.next('CCC')) //CCC //{value: 333, done: false}
console.log(iterator.next('DDD')) //DDD //{value: undefined, done: true}
iterator.next('BBB') 实质就是给one 的返回值设置成BBB，因此打印one时，结果就是BBB。下面的同理。
promise
const p = new Promise(function (resolve,reject){
setTimeout(function (){
// let data = '读取数据成功';
// resolve(data);
let message = '读取数据失败';
reject(message)
},1000)
})
p.then(function (value){
//console.log(value)
},function (reason){
console.log(reason)
})
Promise()中要填两个参数，第一个参数表示成功，第二个表示失败。同样p.then()中要填两个方法，第一个方法是输出成功时获得的数据，第二个方法是输出失败时获得的数据。失败和成功只能输出一个。 (promise 有三个状态——初始化、成功和失败)
