ES6
函数参数默认值
ES6允许给函数参数赋初始值
1、形参初始值 ,具有默认值的参数,一般位置要靠后(潜规则)
function add(a,b,c=10){
return a+b+c;
}
let result = add(1,2);
console.log(result);
//如果c=10与b换个位置,则会输出NaN
2、与解构赋值结合
function connect({host='122',username,password,port}){
console.log(host);
console.log(username);
console.log(password);
console.log(port);
}
connect({
host: 'com',//如果host没有值则会使用host='122',输出122
username: 'root',
password: 'oo',
port: 3306
})
rest参数
ES6引入rest参数,用于获得函数的实参,用来代替arguments
1、ES5获取实参的方式
function date(){
console.log(arguments);
}
date('效力','智慧','加油');
2、rest参数
function date(...args){
console.log(args);//可以使用数组的方法filter,some,every,map等
}
date('效力','智慧','加油');
function fn(a,b,...args){
console.log(a);
console.log(b);
console.log(args);
}
fn(1,2,3,4,5,6);
扩展运算符
扩展运算符能将数组转换为逗号分隔的参数序列
//声明一个数组
const n = ['你','我','他'];
//声明一个函数
function c(){
console.log(arguments);
}
c(...n);
扩展运算符的应用
1、数组的合并
const ab = ['谢娜','张杰'];
const fenghuang = ['曾毅','玲花'];
//合并的另一种方法
//const zuixuan = ab.concat(fenghuang);
const zuixuan = [...ab,...fenghuang];
console.log(zuixuan);
2、数组的克隆
const s = ['a','b','c'];
const t = [...s];
console.log(t);
3、将伪数组转为真正的数组
<body>
<div></div>
<div></div>
<div></div>
<script>
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr);
</script>
</body>
Symbol
ES6引入了一种新的原始数据Symbol,表示独一无二的值,他是JavaScript语言的第七种数据类型,是一种类似于字符串的数据类型
1、特点
2、代码
//创建Symbol
let s = Symbol();
//添加标识的Symbol
let s2 = Symbol('努力');
let s3 = Symbol('努力');
console.log(s2 === s3);//false
//用Symbol.for创建
let s4 = Symbol.for('加油');
let s5 = Symbol.for('加油');
console.log(s4 === s5);//true
3、不能与其他数据进行运算
七种基本数据类型记法
Symbol创建对象属性
1、向对象中添加方法(为了防止你创建的方法和对象本身的方法冲突,选择在另一个对象中用symbol创建独一无二的方法,用[ ]调用,不会污染本身对象中的方法)
let game = {...};
//声明一个对象
let methods = {
up: Symbol(),
down: Symmbol()
};
//向game对象中添加up和down方法
game[methods.up] = function(){
console.log('我很厉害');
}
game[methods.down] = function(){
console.log('我很不厉害');
}
console.log(game);
2、添加方法方式二
let youxi = {
name: '狼人杀',
[Symbol('say')]: function(){
console.log('发言');
},
[Symbol('zibao')]: function(){
console.log('自报');
}
};
console.log(youxi);
Symbol内置属性
class Person{
static [Symbol.hasInstance](param){
console.log(param);
console.log('我被用来检测类型了');
return false;
}
}
let o = {};
console.log(o instanceof Person);
----------------------------------------------------------------------------
const arr = [1,2,3];
const arr = [4,5,6];
arr2[Symbol.isConcatSpreadable] = false;
console.log(arr.concat(arr2));
迭代器
//声明一个数组
const xiyou = ['孙悟空','猪八戒','沙和尚','唐僧'];
//使用for...of遍历数组
for(let v of xiyou){
console.log(v);
}
-----------------------------------------------------------------------------
//声明一个数组
const xiyou = ['孙悟空','猪八戒','沙和尚','唐僧'];
let iterator = xiyou[Symbol.iterator]();
//调用对象的next方法
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
迭代器自定义遍历对象
//声明一个对象
const banji = {
name: '终极一班',
stus: ['xiaoming',
'xiaoing','xiaotian','knight'
],
[Symbol.iterator](){
//索引变量
let index = 0;
let _this = this;
return {
next:function (){
if(index<_this.stus.length){
const result = {
value:_this.stus[i],done:false
};
//下标自增
index++;
return result;
}
else{
return {value: undefined, done: true};
}
}
}
}
};
//遍历这个对象
for(let v of banji){
console.log(v);
}
生成器(争对异步编程)
生成器就是一个特殊的函数
function * gen(){
console.log('hello');
}
let iterator = gen();
iterator.next();//hello
函数代码的分隔符yield
function * gen(){
console.log('111');
yield '耳朵';
console.log('222');
yield '尾巴';
console.log('333');
yield '真奇怪';
console.log('444');
}//分成四部分
let iterator = gen();
iterator.next();//111
iterator.next();//222
iterator.next();//333
iterator.next();//444
//遍历
for (let v of gen()){
console.log(v);//输出耳朵,尾巴,真奇怪
}
生成器函数参数
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());
//next方法可以传入实参
console.log(iterator.next('BBB'));
console.log(iterator.next('CCC'));
console.log(iterator.next('DDD'));
生成函数实例
1、1s后控制台输出111,2s后输出222,3s后输出333
首先介绍一下回调地狱
function one(){
setTimeout(()=>{
console.log(111);
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
1、模拟获取(用户数据,订单数据,商品数据)
function getUsers(){
setTimeout(()=>{
let data = '用户数据';
//调用next方法,并且将数据传入
iterator.next(data);
}
,1000)
}
function getOrders(){
setTimeout(()=>{
let data = '订单数据';
//调用next方法,并且将数据传入
iterator.next(data);
}
,1000)
}
function getGoods(){
setTimeout(()=>{
let data = '商品数据';
//调用next方法,并且将数据传入
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();