03、ES6扩展

2020-04-27 21:07:53 阅读：141 来源： 互联网

标签：03 const log ES6 扩展数组字符串 console ...

模板字符串

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

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;
hell\u{6F} // 123

'\u{1F680}' === '\uD83D\uDE80'
// 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('\ud83d\udc36'));

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

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

标签：03,const,log,ES6,扩展,数组,字符串,console,...
来源： https://www.cnblogs.com/mingliangge/p/12620140.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

03、ES6扩展

模板字符串

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

字符串新方法

padStart

padEnd

repeat

startsWith

endsWith

includes

遍历字符串

for of 方法

其他方法

Unicode表示法

正则修饰符扩展

ES6构造函数的变化

u修饰符

y修饰符

数值扩展

新的进制表示法

新的方法

函数扩展

默认参数

剩余参数（...）

...当扩展运算符时：

...当剩余参数时：

箭头函数

对象扩展

简洁表示法

属性名表达式

扩展运算符及新方法

扩展运算符

Object.is

Object.assign

Object.keys

Object.values

Object.entries

遍历上面的数组

新方法

__proto__

Object.setPrototypeOf

Object.getPrototypeOf

super

数组扩展

生成器函数

set集合

Array.from

Array.of

Array # fill

Array.includes

keys、values 和 entries

find

findIndex

proto