ES6入门(三)扩展

参考阮一峰的ECMAScript 6 入门

扩展

字符串扩展

  • 传统的写法相当繁琐不方便,ES6引入了模板字符串,用反引号(`)标识,可以在字符串中嵌入变量。
    const Dell = {
        name: 'Dell',
        age: 23,
        getMsg1: function(){
            console.log('Name:' + this.name + ',Age:' + this.age);
        },
        getMsg2: function(){
            // 在字符串中通过插值嵌入变量
            console.log(`Name:${this.name},Age:${this.age}`);
        }
    }
    Dell.getMsg1();
    Dell.getMsg2();
    
  • 字符串对象的新增方法
    1.includes(), startsWith(), endsWith()传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。indexOf() 方法返回指定的字符串值在字符串中首次出现的位置,对大小写敏感,如果要检索的字符串值没有出现,则该方法返回 -1。
    var str ='Hello World';
    if( str.indexOf('hello',0)!==-1){		
        console.log('存在');
        }else{		
            console.log('不存在');
        }// 输出: 不存在
    
    ES6 又提供了三种新方法:
    includes():返回布尔值,表示是否找到了参数字符串。
    startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
    endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
    let s ='Hello world!';	
    s.startsWith('world',6)// true	
    s.endsWith('Hello',5)// true	
    s.includes('Hello',6// false
    
    三个方法都支持第二个参数,表示开始搜索的位置。endsWith方法针对0~n个字符,而其他两个方法针对从第n个位置直到字符串结束。
    2.repeat()
    repeat方法返回一个新字符串,表示将原字符串重复n次。参数如果是小数,会被取整。
    'hello'.repeat(2)// "hellohello"
    'x'.repeat(2.9)// "xx"
    'x'.repeat(2.2)// "xx"
    
    如果repeat的参数是负数或者Infinity,会报错。
    'na'.repeat(Infinity)// RangeError
    'na'.repeat(-1) //引发RangeError 
    
    但是,如果参数是 0 到 -1 之间的小数,则等同于 0,这是因为会先进行取整运算。0 到 -1之间的小数,取整以后等于 -0,repeat视同为 0。
    'na'.repeat(-0.9)// ""
    
    参数NaN等同于 0。
    'na'.repeat(NaN)// ""
    
    如果repeat的参数是字符串,则会先转换成数字。
    'na'.repeat('na')// ""
    'na'.repeat('3')// "nanana"
    
    3.padStart()头部补全,padEnd()尾部补全
    ES2017引入了字符串补全长度的功能。
    如果某个字符串不够指定长度,会在头部或尾部补全。
    'x'.padStart(5,'ab')// 'ababx'
    'x'.padEnd(5,'ab')// 'xabab'
    
    上面代码中,padStart()和padEnd()一共接受两个参数:字符串补全生效的最大长度、用来补全的字符串。 如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。
    'xxx'.padStart(2,'ab')// 'xxx'
    
    如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串。
    'abc'.5(pathStart10,'0')// "0000123456"
    
    另一个用途是提示字符串格式。
    '12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
    '09-12'.padStart(10,'YYYY-MM-DD')// "YYYY-09-12"
    
  • for…of循环遍历。
    for(let i of'foo'){	  
        console.log(i); // "f"// "o"// "o"
    }
    
  • Unicode表示法
    Unicode是一项标准,包括字符集、编码方案等。它是为了解决传统的字符编码方案的局限而产生的,为每种语言中的每个字符设定了统一并且唯一的二进制编码,以满足跨平台、跨语言进行文本转换、处理的要求。
    采用\uxxxx形式表示一个字符,只限于码点在\u0000~\uFFFF之间的字符,超出这个范围的字符,必须用两个双字节的形式表示。ES6中可以将码点放入大括号。
    "\u{41}\u{42}\u{43}"// "ABC"
    

数值扩展

1.二进制和八进制ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。

0b111110111 === 503 // true
0o767 === 503 // true

可以使用Number方法将0b和0o前缀的字符串数值转为十进制。

Number('0b111')  // 7
Number('0o10')  // 8

2.Number.isFinite(), Number.isNaN()
ES6在Number对象上,新提供了Number.isFinite()和Number.isNaN()两个方法。

isFinite(25) // true
isFinite("25") // true
Number.isFinite(25) // true
Number.isFinite("25") // false
isNaN(NaN) // true
isNaN("NaN") // true
Number.isNaN(NaN) // true

它们与传统的全局方法isFinite()和isNaN()的区别在于,传统方法先调用Number()将非数值的值转为数值,再进行判断。
而这两个新方法只对数值有效,Number.isFinite()对于非数值一律返回false, Number.isNaN()只有对于NaN才返回true,非NaN一律返回false。
3.Number.parseInt(),Number.parseFloat()

// ES5的写法
parseInt('12.54')// 12
parseFloat('123.45')// 123.45
// ES6的写法
Number.parseInt('12.54')    // 12
Number.parseFloat('123.45'// 123.45 

函数扩展

1.默认参数
ES6之前,一般采用以下方法为函数的参数指定默认值:

function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}
log('Hello') // Hello World

ES6 允许为函数的参数设置默认值,只有传入undefined才能触发该参数等于默认值,null则没有这个效果。

function foo(a,x = 5, y = 6) {
  console.log(a, x, y);
}
foo(1, undefined, null)
// 1 5 null

2.箭头函数(=>)
如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。可以使用大括号将它们括起来,但是,如果箭头函数直接返回一个对象,必须在对象外面加上括号。

//   函数名   |   函数参数   |     函数体
let getItem=(id,name)=>({id: id, name: name});

如果箭头函数只有一行语句,且不需要返回值,可以不用写大括号。

let fn = () => void a(); 

箭头函数的一个用处是简化回调函数。

// 正常函数写法
[1,2,3].map(function(x){return x * x;});
// 箭头函数写法
const result =[1,2,3].map(x => x * x);
console.log(result);// [1, 4, 9]

对象扩展

属性和方法简洁写法

var name = 'Dell'; 
var person = { 
    //等于同于name:name     
    name,
    getName(){         
        console.log(name); 
    } 

super关键字
this关键字总是指向函数所在的当前对象,ES6 新增了一个类似的关键字super,指向当前对象的原型对象。
super关键字表示原型对象时,只能用在对象的方法之中,用在其他地方都会报错。

const proto ={    
    x:'hello',
    foo(){      
        console.log(this.x);
    }
};
const obj ={    
    x:'world',
    foo(){
        super.foo();// 调用原型对象的foo方法
    }
};
Object.setPrototypeOf(obj,proto); 
obj.foo();  // “world” 

Object.setPrototypeOf(),为现有对象设置原型,返回一个新对象。接收两个参数:现有对象、原型对象。
创建的两个对象都有相同名字的属性和方法,Object.setPrototypeOf(obj, proto)使得obj的原型对象为proto。
因为super指向当前对象的原型对象proto,所以super.foo指向原型对象proto的foo方法,但是绑定的this却还是当前对象obj,因此输出的就是world。

数组扩展

扩展运算符:
扩展运算符将一个数组,变为参数序列。

function fn(x,y,z){
    console.log(x+y+z);
}
var arr = [1,2,3];
fn(...arr); // 6
// apply()方法
fn.apply(null,arr); // 6

新的方法:
1.Array.from()
只要是部署了 Iterator 接口的数据结构,Array.from都能将其转为数组。
把一个类似数组的对象转为真正的数组。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    length: 2
};
let arr2 = Array.from(arrayLike); 
console.log(arr2);// ['a', 'b']

Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

2.Array.of()
Array.of方法用于将一组值,转换为数组。

Array.of(3, 11, 8) // [3,11,8]

3.Array.find() 和 Array.findIndex()
数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。

[1, 4, -5, 10].find((n) => n < 0)
// -5

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

find函数接收了第二个参数person对象,回调函数中的this对象指向person对象。
4.Array.fill()
fill方法用于填充一个数组。
可以接受三个参数:给定值、用于指定填充的起始位置、结束位置。

new Array(3).fill(7)
// [7, 7, 7]

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

5.keys(),values(),entries()
用于遍历数组。它们都返回一个遍历器对象,可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

6.Array.includes()
includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。
该方法的二个参数:给定的值、搜索的起始位置(默认为0)

[1, 2, 3].includes(2)     // true
[1, 2, NaN].includes(NaN) // true

[1, 2, 3].includes(3, 1);  // true
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值