WEB前端ES6知识点2【笔记】

目录

函数参数默认值设置

rest参数

扩展运算符

Symbol

对象添加Symbol属性和方法，表示独一无二的值

Symbol内置值（共11个）

---

函数参数默认值设置

ES6允许给函数参数赋初始值

• 形参初始值，具有默认值的参数，一般位置要靠后（潜规则）

function add (a,b,c=3) {
    return a+b+c;
    }
    console.log(add(1,2)); //6

• 可以与解构赋值结合使用

function connect(options){
    let host=options.host;
    let username=options.username;
    //options写重复了 麻烦
}
connect({
    host:'root',
    username:'root',
    password:'root',
    prot:3306
})
// 可以与解构赋值结合使用
function connect({host='127.0.0.1',username,password,prot}){
    console.log(host); 
    console.log(username); 
    console.log(password);
    console.log(prot);
} //直接进行赋值
connect({
    host:'root',  //如果没有参数，就会用上面的赋值参数，有就用这个
    username:'root',
    password:'root',
    prot:3306
})

rest参数

• 引入rest参数，用于获取函数实参，用于代替arguments（放在了函数声明形参这）

//ES5获取实参的方式
//获取的是对象Object
function date(){
    console.log(arguments);
}
date('早上','中午','下午');

//ES6获取实参的方式
//获取的是数组，可以用数组的特性，filter some every map...
function date(...args){
    console.log(args);
}
date('早上','中午','下午');
//rest 参数必须放到最后
function fn(a,b,...args){
    console.log(a);
    console.log(b);
    console.log(args);
}
fn(1,2,3,4,5,6);

扩展运算符

• 扩展运算符能将数组转换为逗号分隔的参数序列

const tfboys=['王俊凯','王源','易烊千玺']  //=>'王俊凯','王源','易烊千玺'

function turn(){
    console.log(arguments);
}

turn(...tfboys);//等同于turn('王俊凯','王源','易烊千玺');
//放在了函数调用实参

• 扩展运算符的应用

1. 数组的合并
2. 数组的克隆
3. 将伪数组转换为真正的数组

const aa=['A','B'];
const bb=['C','D'];
//ES5   const cc=aa.concat(bb);
const cc=[...aa,...bb];
console.log(cc);

const aa=['A','B'];
const bb=[...aa];//浅拷贝
console.log(bb);

const divs=document.querySelectorAll('div');
const divArr=[...divs];
console.log(divArr);//对arguments也可以转化为数组 但是有const，所有不需要

Symbol

新的原始数据类型，表示独一无二，第七种数据类型，类似字符串的数据类型

1)Symbol 的值是唯一的，用来解决命名冲突的问题
2)Symbol 值不能与其他数据进行运算
3)Symbol 定义的对象属性不能使用for...in 循环遍历，但是可以使用Reflect.ownKeys 来获取对象的所有键名

let s = Symbol('参数');

console.log(s,typeof s);

---

let s 1= Symbol('HELLO');

let s 2= Symbol('HELLO');

console.log(s1 === s2);   //false  因为编号不一样

---

Symbol.for  创建

let s = Symbol.for('参数');

let s3= Symbol.for('你好');

let s4= Symbol.for('你好');

console.log(s3 === s4);   //true

注意事项：

不能与其他数据进行运算  （加减 比较 拼接都不可以 和自己也不行）

js数据类型   (USONB)    undefined  string symbol  object null number boolean

对象添加Symbol属性和方法，表示独一无二的值

与谋元素相关但是不确定这个对象里面是否有该元素可以用symbol

//对象添加Symbol的方法
//方法一
//向对象中添加方法 up  down,不确定里面是否有这个
let game = {}
//声明一个对象
let methods = {
    up:Symbol(),
    down:Symbol(),
};

game[methods.up] = function(){
    console.log("我可以改变形状");
}

game[methods.down] = function(){
    console.log("我可以快速下降");
}

console.log(game);
//方法二
let youxi={
    name:'狼人杀',
    [Symbol('say')]:function(){
        console.log('我可以发言');
    },
    [Symbol('zibao')]:function(){
        console.log('我可以自爆');
    }
}
console.log(youxi);

Symbol内置值（共11个）

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 arr2 = [4,5,6];
arr2[Symbol.isConcatSpreadable] = false;
console.log(arr.concat(arr2));

Symbol.hasInstance	当其他对象使用 instanceof 运算符，判断是否为该对 象的实例时，会调用这个方法
Symbol.isConcatSpreadable	对象的 Symbol.isConcatSpreadable 属性等于的是一个 布尔值，表示该对象用于 Array.prototype.concat()时， 是否可以展开。
Symbol.species	创建衍生对象时，会使用该属性
Symbol.match	当执行 str.match(myObject) 时，如果该属性存在，会 调用它，返回该方法的返回值。
Symbol.replace	当该对象被 str.replace(myObject)方法调用时，会返回 该方法的返回值。
Symbol.search	当该对象被 str.search (myObject)方法调用时，会返回 该方法的返回值。
Symbol.split	当该对象被 str.split(myObject)方法调用时，会返回该 方法的返回值。
Symbol.iterator	对象进行 for...of 循环时，会调用 Symbol.iterator 方法， 返回该对象的默认遍历器
Symbol.toPrimitive	该对象被转为原始类型的值时，会调用这个方法，返 回该对象对应的原始类型值。
Symbol. toStringTag	在该对象上面调用 toString 方法时，返回该方法的返 回值
Symbol. unscopables	该对象指定了使用 with 关键字时，哪些属性会被 with 环境