03ES6扩展

Posted 2021-02-21 mingliangge

模板字符串

模板字符串与一般字符串的区别

1、一般字符串用 ‘ ‘ 或者 " " 拼接起来的，模板字符串是用 ` ` 来拼接的。

2、一般字符串和变量的连接是用  + 连接起来的，模板字符串是在 ` ` 里面用 ${ 变量名 } 方式来拼接的，如：

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

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

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

 

3、 另外模板字符串还可以进行嵌套，如

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

 

4、一般字符串换行 必须在尾部用    而模板字符串换行  在尾部直接回车即可，如：

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

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

 

字符串新方法

padStart

//padStart顾名思义在xx字符串前面填充

{
    const str1 = ‘bb‘;

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

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

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

padEnd

//padEnd顾名思义在xx字符串后面填充

{
    const str1 = ‘aa‘;

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

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

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

 

repeat

//repeat顾名思义就是重复输出字符串n次

{
    const str = ‘ha‘;

    let str1 = str.repeat(10);

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

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

 

startsWith

//startsWith顾名思义就是检测字符串是否以xx开头，如：

{
    const str = "I am happy!";

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

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

endsWith

//endsWith顾名思义就是检测字符串是否以xx结尾，如：

{
    const str = "I am happy!";

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

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

 

includes

//includes顾名思义就是用来检测字符串中是否含有xx，如：

{
    //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存在‘);
    }
}

 

遍历字符串

for of 方法

//遍历字符串（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);
});

 

Unicode表示法

Unicode是一项标准，包含字符集、编码方案等。

//它是为了解决传统的字符编码方案的局限而产生的，为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。

1、一般浏览器只支持 0000 - ffff 的Unicode编码字符，为了解决这个局限性就有了Unicode表示法。

2、ES6对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。如：

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

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

let hello = 123;
hellu{6F} // 123

‘u{1F680}‘ === ‘uD83DuDE80‘
// true

 

3、javascript共有6种方法可以表示一个字符。

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

 

正则修饰符扩展

//之前学过有i、m、g修饰符，现在es6新增有u、y

ES6构造函数的变化

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

u修饰符

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

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

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

y修饰符

//也称粘连修饰符。y 修饰符的作用与 g 修饰符类似，也是全局匹配，后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于，g 修饰符只要剩余位置中存在匹配就可，而 y 修饰符确保匹配必须从剩余的第一个位置开始，这也就是“粘连”的含义。

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 与 parseFloat

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

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

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

 

isNaN

//判断某个数字是否是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

 

isFinite

//判断某个数字是否是有限的
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之前

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

 

ES6

//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 即可

注意：箭头函数没有类数组 argument ，若需要类数组可以利用剩余参数方法做，如：

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

注意：箭头函数没有自己的this指向，一般函数的this指向是函数本身，箭头函数的this是自身所处环境的this

 

对象扩展

简洁表示法

一般表示形式

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);

 

Object.is

// 与 === 作用几乎一样，不一样的地方就是：

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

 

Object.assign

// 与   ...扩展运算符的合并对象操作   几乎一样。

//不一样地地方就是： ... 有更多地功能，而Object.assign没有

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);

 

 

Object.keys

//获取对象里每一个key值

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

Object.values

//获取对象里每一个value值

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

Object.entries

//获取对象里每一个键值对

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__

//某个对像都有的原型

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

 

Object.setPrototypeOf

//可以修改对象的原型。但性能比较低下，个人建议谨慎使用

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了

 

Object.getPrototypeOf

//可以读取对象的原型

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的

 

super

//可以访问  原型对象上的属性和方法

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);

 

注：生成器函数的* ，可以跟function黏在一起，也可以跟函数名黏在一起，二选一

另外生成器函数是可以分段执行的

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

 

 

set集合

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

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

 

 

Array.from

//将类数组 转换 为数组

//手动创建一个类数组。手动创建的类数组，属性名必须是数组，必须手写一个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

//将传进去的参数合成一个数组

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

 

 

Array # fill

//填充数组

//新建一个长度为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(‘你好‘);  //这样里面的所有值都会覆盖成‘你好‘

 

 

Array.includes

//判断某数组  是否含有xx值，有就返回true，没有就返回false

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

 

 

keys、values 和 entries

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);
}

 

 

find

//根据条件(回调函数)，按顺序遍历数组，当回调返回true时，就返回当前遍历到的值

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

 

 

findIndex

//根据条件(回调函数)，按顺序遍历数组，当回调返回true时，就返回当前遍历到的下标

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

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

 

//findIndex的回调函数，return那里可以做一下复杂的判断表达式：Number.isNaN(value)    .判断里面的值是否NaN