03、ES6扩展

function haha(name,age){
//一般字符串的方式拼接
div1.innerText = ‘我的名字是‘ + name + ‘，我今年‘ + age + ‘岁了‘;

//模板字符串的方式拼接
div2.innerText = `我的名字是 ${name} ，我今年 ${age} 岁了`

//明显看出了模板字符串比一般字符串简洁、容易书写、不易出错的特点
}

div2.innerText = `我的名字是 ${ `Mr. ${name} ` } `; //在名字前面加了个Mr.

div1.innerHTML = ‘<span>好人</span>‘;
//一般字符串：一个字符串必须一行填写完，若要换行就得在尾部加上 \ ，否则就会报错

div2.innerHTML = `<span>
好
人
</span>`
//模板字符串：一个字符串可以分多去写，只要在尾部换行即可

{
    const str1 = ‘bb‘;

    let str2 = str1.padStart(8,‘hello‘);

    //就是以bb结尾，前面循环hello字符串达到8位。

    console.log(str2); //结果是 hellohbb 
}

{
    const str1 = ‘aa‘;

    let str2 = str1.padEnd(8,‘hello‘);

    //就是以aa开头，后面循环hello字符串达到8位。

    console.log(str2); //结果是 aahelloh
}

{
    const str = ‘ha‘;

    let str1 = str.repeat(10);

    //就是将str常量循环10次

    console.log(str1);  //结果是 hahahahahahahahahaha
}

{
    const str = "I am happy!";

    let status = str.startsWith(‘I‘); //检测字符串是否以I开头，是返回true，否返回false

    console.log(status);  //结果是true
}

{
    const str = "I am happy!";

    let status = str.endsWith(‘happy!‘); //检测字符串是否以happy!j结尾，是返回true，否返回false

    console.log(status);  //结果是true
}

{
    //es6之前，检测字符串里是否含有xx
    var str = "I am happy!";
    if(str.indexOf(‘am‘) !== -1){  //判断表达式可以改成(~str.indexOf(‘am‘))，因为 ~x = -(x+1)
        console.log("存在")
    } 

    //es6的includes方法，检测字符串里是否含有xx
    const stt = "I am happy!";
    if(stt.includes(‘hap‘)){
        console.log(‘includes方法检测到hap存在‘);
    }
}

//遍历字符串（es6的for of 方法）
const str = ‘zhangzhanghaha‘;

for(let word of str){
    console.log(word);
}

//遍历字符串（字符串方法）
const str = ‘zhangzhanghaha‘;

for(var i = 0, len = str.length; i < len; i++){
    // console.log(str[i]);  //这两种方法都行
    console.log(str.charAt(i)); //这两种方法都行
}

//遍历字符串（字符串转数组后遍历）
const str = ‘zhangzhanghaha‘;

let arr = str.split(‘‘);  //将字符串转为数组，两种方法都行
let arr = Array.prototype.slice.call(str);  //将字符串转为数组，两种方法都行

// console.log(arr);

arr.forEach(function(word){  //遍历输出
    console.log(word);
});

//遍历字符串（扩展运算符转为数组，后遍历）
const str = ‘zhangzhanghaha‘;

// const stt = [...str]; //两种扩展方式都可以
const [...stt] = str; //两种扩展方式都可以

//console.log(stt); 

stt.forEach(function(word){  //遍历输出
    console.log(word);
});

"\u{20BB7}"
// "?"

"\u{41}\u{42}\u{43}"
// "ABC"

let hello = 123;
hell\u{6F} // 123

‘\u{1F680}‘ === ‘\uD83D\uDE80‘
// true

‘\z‘ === ‘z‘  // true
‘\172‘ === ‘z‘ // true
‘\x7A‘ === ‘z‘ // true
‘\u007A‘ === ‘z‘ // true
‘\u{7A}‘ === ‘z‘ // true

const reg = new RegExp(/\w/g,‘i‘);  //第一个参数写的g修饰符，会被第二个参数的i修饰符代替掉

//匹配Unicode码点，要求与正则表达式的码点保持一致

//没有加u的情况，只要含有与其对应的就返回true，后面可以增加多个
console.log(/^\ud83d/.test(‘\ud83d\udc36‘));

//加了u的情况，将‘ ‘里面的Unicode码点看作一个整体来匹配，只要完全符合才返回true
console.log(/^\ud83d/u.test(‘\ud83d\udc36‘));

var s = ‘aaa_aa_a‘;
var r1 = /a+/g;
var r2 = /a+/y;
 
console.log(r1.exec(s)) //["aaa", index: 0, input: "aaa_aa_a"]
console.log(r2.exec(s)) //["aaa", index: 0, input: "aaa_aa_a"]
console.log(r1.exec(s)) //["aa", index: 4, input: "aaa_aa_a"]
console.log(r2.exec(s)) //null
console.log(r1.exec(s)) //["a", index: 7, input: "aaa_aa_a"]
console.log(r2.exec(s)) //["aaa", index: 0, input: "aaa_aa_a"]

//八进制(octonary)，以0o或0O开头，o可以大写也可以小写
console.log(0o16); //结果为14

//二进制(binary)，以0b或0B开头，b可以大写也可以小写
console.log(0b1111); //结果是15

//本来parseInt是window的对象方法，现在转为Number对象了
 zhi = Number.parseInt(‘28px‘);    //必须以数字开头才可以提取出来，如果不是，结果NaN。

//本来parseFloat是window的对象方法，现在转为Number对象了
zhi1 = Number.parseFloat(‘0.123abc‘)； //从第一个字符开始解析每个字符，直至遇到一个无效的浮点数字符为止。

//注： 如果字符串中包含有效的16进制格式，paseInt(‘0xf‘)将‘0x‘转换为相同大小的十进制，而paseFloat(‘0xf‘)只会输出0

//判断某个数字是否是NaN
console.log(Number.isNaN(NaN)); //ture
console.log(Number.isNaN(-NaN));//ture
console.log(Number.isNaN(33));//false
console.log(Number.isNaN(‘HI‘));//false

//判断某个数字是否是有限的
console.log(Number.isFinite(123)); //true
console.log(Number.isFinite(‘123‘)); //false
console.log(Number.isFinite(8 / 0)); //false
console.log(Number.isFinite(8 / 4)); //true

//最大安全数是： 2的53次减1 (Number.MAX_SAFE_INTEGER)
console.log(Number.MAX_SAFE_INTEGER);

//最小安全数是： -2的53次减1 (Number.MIN_SAFE_INTEGER)
console.log(Number.MIN_SAFE_INTEGER);

//判断某个数字是否是安全数： Number.isSafeInteger
console.log(Number.isSafeInteger(1234567)); //true
console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1)); //false

//Number对象的幂运算
console.log(2**3); //2的3次
console.log((2**53) - 1); //2的53次减1
console.log(2**3**2); //不加括号的时候是从右到左运算的，先算3的2次(是9)，再算2的9次
console.log( (2**3) ** 2); //先算2的3次(是8)，在算8的2次

//Math对象也有幂运算
console.log(Math.pow(2,53) - 1); //2的53次减1

//es6之前设置默认参数
function add(a,b){
    a = a || 1; //设置默认值为1
    b = b || 1; //设置默认值为1
    return a + b;
}
console.log(add());

//es6设置默认参数
function add(a = 1 , b = 1){
    return a + b;
}
console.log(add());

//将abc三个数组的值提取出来，合并到一个新的数组里面
const a = [1,2,3];
const b = [4,5,6];
const c = [7,8,9];

const d = [...a,...b,...c];  //...a表示继承a里面的全部值

function add(type,...number){    //除了第一个参数，剩下的参数都结合在number里面
    console.log(type);
    console.log(...number);
}
add(‘sum‘,1,2,3,4,5,6);

function sum(...numbers){
    return numbers.reduce(function(a,b){
        return a+b;
    },0);
}
console.log(sum(1,2,3,4,5));

//当函数只有一行代码，并且有返回值时，可以
const add = ( a , b ) => a + b; //箭头前面是接收的参数，箭头后面的是返回值代码
console.log(add(1,2));

//当函数只有一行代码，并且不需要返回值时，可以
const aadd = ( a , b ) => void console.log(a + b);
aadd(3,3);

//当函数有多行代码，有返回值时，可以
const ha = (a,b) => {
    a +=2;
    b +=2;
    return a+b;
}
console.log(ha(1,2));

//当函数有多行代码，但不需要返回值，可以
//在 { } 里面省略掉 return 即可

const count = (...arg) => {     //利用剩余参数方法做一个类数组
    console.log(arg[0]);
    console.log(arg[1]);
}
count(1,2,3,4,5,6,7);

const hah = () => {
    const name = ‘静静‘;
    const age = 23;
    return{
        name : name, //返回一个name属性，属性值是上面定义的name
        age : age, //返回一个age属性，属性值是上面定义的age
        happy : function(){  //返回一个函数
            console.log(this.name + this.age);    
        }
    };
};
const mei = hah();

const bbc = () => {
    const name = ‘萱萱‘;
    const age = 23;
    return{
        name, //相当于name=name
        age,  //相当于age=age
        happy(){ //可以省略function字段
            console.log(this.name + this.age);
        }
    }
}
const bb = bbc();

const name = ‘ying‘;
const age = 23;

const aa = {
    [name] : ‘好‘, //属性名用上面的name变量
    [‘a‘ + (age - 1)] : ‘非常好‘  //同时属性名还可以进行简单的运算
}

const oo = {    //const声明的常量，引用数据可修改，但不能清空
    a : 1,
    b : 2,
    c : {
        cc : ‘cc‘,
    }
}
const bb = {...oo}; //拷贝oo对象的数据： 基本数据类型是深拷贝，引用数据类型是浅拷贝
console.log(bb);

bb.c.cc = ‘ddddddd‘; //因为是引用数据类型，修改bb的数据oo也会修改
console.log(oo);    

const a1 = {
    a:1,
    b:2
}
const b1 = {
    c:3,
    d:4
}
const ab = {...a1,...b1};  //拷贝a1，b1，里面是基本数据类型的话就深拷贝
console.log(ab);

ab.a = 33;     //更改ab.a的话，a1.a不会受到影响
console.log(a1.a);

console.log(+0 === -0); //全等判断下是返回true
console.log(Object.is(+0,-0)); //Object.is判断下返回false

console.log(NaN === NaN); //全等判断下返回false
console.log(Object.is(NaN,NaN)); //Object.is判断下返回true

const a1 = {
    a:1,
    b:2
}
const b1 = {
    c:3,
    d:4
}
const ab = Object.assign( a1 , b1 , {e:5,f:6} );  //合并对象
console.log(ab);

const a1 = {
    a:1,
    b:2,
    c:3,
    d:4,
    e:5
}
console.log(Object.keys(a1)); //将对象里的key值都塞到一个数组里

const a1 = {
    a:1,
    b:2,
    c:3,
    d:4,
    e:5
}
console.log(Object.values(a1)); //将对象里的key值都塞到一个数组里

const a1 = {
    a:1,
    b:2,
    c:3,
    d:4,
    e:5
}
console.log(Object.entries(a1)); //将对象里的 每个键值对做一个数组  再将每一个数组塞到一个大数组里

// 遍历key值
for(let i of Object.keys(a1)){
    console.log(i);
}
// 遍历value值
for(let j of Object.values(a1)){
    console.log(j);
}
//遍历键值对
for(let [k,v] of Object.entries(a1)){
    console.log(k,v);
}

//__proto__  对象里面的原型
const a1 = {a:1}; 
console.log(a1); //可以看出__proto__的原型是Object
//可以将这个原型打印出来
console.log(a1.__proto__);

const a = {
    a:1
}
const b = {
    b:1
}
const obj = Object.create(a); //将a对象作为原型，生成一个obj对象

//这样的话 obj.__proto__ === a
console.log(obj.__proto__); //这里跟输出a对象一模一样

//现在我们开始修改对象的原型
Object.setPrototypeOf(obj,b); //将obj对象的原型，修改成b对象的原型
console.log(obj.__proto__); //这样obj输出的就是b了

const a = {
    a:1
}
const obj = Object.create(a); //将a对象作为原型，生成一个obj对象

//这样的话 obj.__proto__ === Object.getPrototypeOf(obj) === a
console.log(obj.__proto__); //这里跟输出a对象一模一样
console.log(Object.getPrototypeOf(obj)); //这里跟输出a对象一模一样

//我们还可以判断 obj.__proto__ 和 Object.getPrototypeOf(obj) 是否全等
console.log(obj.__proto__ === Object.getPrototypeOf(obj)); //结果是true的

const a = {
    name : ‘小蝴蝶‘
}
const b = {
    say(){ //只有对象里的函数，并且使用的是简洁表示法才会有super
        console.log(`我的名字是${super.name}`); //2、这样这里就能访问到a对象里面的方法
    }
}
Object.setPrototypeOf(b,a); //1、将a的原型赋值给b
b.say();

//数组分解成每一项参数。当然也可使用解构赋值的方法
const yy = (a,b,c,d) => {
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
}

// console.log(...[1,2,3,4]);
//或者
const bb = [1,2,3,4];
console.log(...bb);
//还可以
//console.log ( yy.apply(null,bb) ) ;  //结果跟上面这个扩展运算符没什么区别

// 合并数组
const a = [1];
const b = [2];
const c = [3];

const ob = [3,2,1,...a,...c]; //合并现有的数组 跟 已有的数组
console.log(ob)

const obj = [...a,...b,...c]; //合并已有的数组
console.log(obj);

//复制数组
const obj1 = [...a]; //复制了a数组
const [...obj2] = a; //这样也可以复制a数组

//扩展运算符可以： 将生成器函数传出来的值，作为数组对象形成数组

function *ha(){
    console.log(‘先输出这条语句‘);
    yield ‘传出去的第一个值‘; //[ji?ld]，将引号里面的值传出去

    console.log(‘后输出这条语句‘);
    yield ‘传出去的第二个值‘; //[ji?ld]，将引号里面的值传出去
}

const arr = [...ha()]; //接收生成器函数传出来的值，并放在一个数组里面
console.log(arr);

//另外生成器函数是可以断点执行的
const gg = ha(); 
gg.next(); //先执行第一个yield及以上的内容
setTimeout(function(){
    gg.next();  //后执行第二个yield及中间的内容
},1000);

//set集合
let set = new Set([1,2,3,4,5]);

//利用扩展运算符转成数组
const a = [...set];
console.log(a);

//手动创建一个类数组。手动创建的类数组，属性名必须是数组，必须手写一个length
const arg = {
    1:‘diyi‘,
    2:‘haha‘,
    3:‘en‘,
    4:false,
    length:2  //因为长度是2，所以转换成类数组的时候只会取前面两项
}

//开始将arg类数组转换为数组
// console.log(Array.from(arg));

//Array.from还有一个回调函数。该回调函数可以改变返回的数组
console.log(Array.from(arg,function(item){  //item表示数组的每一项
    return item + ‘123‘;  //每一项后面都加一个123的字符串
}));

Array.prototype.slice.call();

[].slice.call();

[...]

//Array.of
console.log(Array.of(1,2,3,4,5,6)); //将传进去的参数和成一个数组

//新建一个长度为10的数组
let arr = new Array(10); //长度为10的数组创建好了，但是里面是空的

//所以我们可以进行填充
let arr1 = new Array(10).fill(3); //在里面填充10个3

//当然我们还可以指定填充多少个
let arr2 = new Array(10).fill(3,0,3);  
//第一个参数： 是填充的内容，
//第二个参数： 是从下标为0的数组开始，
//第三个参数： 填充到下标为3的值，不包括下标为3的

//最后还有，当数组是非空数组时，里面的值会被覆盖
let arr3 = [1,2,3,4,5];
arr3.fill(‘你好‘);  //这样里面的所有值都会覆盖成‘你好‘

const arr = [1,2,3,4,5];
console.log(arr.includes(2)); //判断arr数组是否含有2
console.log(arr.includes(22));

const arr = [‘aa‘,‘bb‘,‘cc‘,‘dd‘,‘ee‘];

// keys
for(let i of arr.keys()){  //输出数组每一项的下标
    console.log(i);
}

// values
for(let j of arr.values()){  //输出数组每一项的值
    console.log(j);
}

// entries
for(let [k,v] of arr.entries()){  //输出每一项下标 及 对应的值
    console.log(k,v);
}

const arr = [1,3,4,5].
find(function(value,index,array){  
//默认传入三个参数，命名随意
//第一个参数： 数组的值
//第二个参数： 数组的下标
//第三个参数： 数组本身

    console.log(‘value值为‘+value);
    console.log(‘对应的下标为为‘+index);
    // console.log(‘数组本身为‘+array);

    return value % 2 === 0; 
    //当values为偶数时，返回true
    //然后返回当前为true的那项数组，及前面遍历到的数组。即4为偶数，从值为1的开始遍历到值为4的
});
console.log(arr);  //当打印这个数组时，返回的是 另其为true的value值，即4

//用法跟find一模一样，但最后返回的是下标。
//用的是上面的例子，这里做一下简化
const arr = [1,3,4,5].findIndex((value,index,array) => value % 2 === 0);

console.log(arr); //这里返回的就是4对应的下标