美文网首页
ECMAScript6新方法(2)

ECMAScript6新方法(2)

作者: 一刀一个小黄鱼 | 来源:发表于2017-07-31 23:54 被阅读28次

字符串扩展

ES6加强了对Unicode的支持,并且扩展了字符串对象。

获取字符unicode编码
var s = "𠮷";
var a = s.codePointAt()
//参数不写默认是第0位,超出长度为undefined
console.log(a) //134071

var s2 = "abcde";
console.log(s2.codePointAt()) //97
console.log(s2.codePointAt(1)) //98
console.log(s2.codePointAt(2)) //99
console.log(s2.codePointAt(10)) //undefined
通过unicode码点返回对应字符
//es5 ,不能识别辅助平面的字符
String.fromCharCode()
console.log(String.fromCharCode(97)) //a

//es6 ,可以识别辅助平面的字符
String.fromCodePoint()
console.log(String.fromCodePoint(0x20BB7)) //𠮷
字符的Unicode表示法

JavaScript允许采用“\uxxxx”形式表示一个字符,其中“xxxx”表示字符的码点,"\u0061"//a,

但是,这种表示法只限于\u0000——\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表达。

//之前
console.log("\uD842\uDFB7") //𠮷
console.log("\u0041\u0042\u0043") //ABC 省略了00?
//es6,只要将码点放入大括号,就能正确解读该字符。
console.log("\u{20BB7}") //𠮷
console.log("\u{41}\u{42}\u{43}") //ABC
复制字符串

将str复制几分并返回,num代表复制的次数。

str.repeat(num)
var s = "abced";
console.log(s.repeat(2)) //abcedabced 
//新的字符串 不会影响原有的
查找字符串 str.includes()

参数: 1、要查找的字符串 2、起始位置

返回布尔值,表示是否找到了参数字符串

var str = "abcdef";
console.log("a") // true 不传第2个参数默认为0
console.log("g") //false
console.log("a",1) //false
字符串是否在源字符串的头部 str.startsWith()

参数: 1、要查找的字符串 2、起始位置

返回布尔值

var str = "abcdef";
console.log(str.startsWith("a")) //true
console.log(str.startsWith("b")) //false
console.log(str.startsWith("b",1)) //true
console.log(str.startsWith("e",3)) //true
表示参数字符串是否在源字符串的尾部 str.endsWith()

参数: 1、要查找的字符串 2、起始位置(针对的是n个字符)

返回布尔值

var str = "abcdef";
console.log(s.endsWith("d")) //true
console.log(s.endsWith("d",3)) //false
console.log(s.endsWith("c",3)) //true

二进制和八进制表示法

ES6提供了二进制和八进制数值的新的写法,分别用前缀0b和0o表示

Math对象的扩展

Math.trunc() 去除小数部分返回整数部分

console.log(Math.trunc(1.25)) //1

Math.sign() 判断一个数字是正数,负数还是零

返回值:

-1 负数 ;0 零 ; 1 :正数

console.log(Math.sign(-25)) //-1
console.log(Math.sign(0)) //0
console.log(Math.sign(0.01)) //1
Math.hypot(...values) 返回所有参数的平方和的平方根(勾股定理)
var h = [3,4];  //
console.log(Math.hypot(...h)) //5
console.log(Math.hypot(2,3,4)) //5.385164807134504

数组扩展

Array.from()
用于将类数组对象转为真正的数组

语法:Array.from(arrayLike[, mapFn[, thisArg]])

//不定参
function fn(){
    console.log(Array.from(arguments))
};
fn(1,2,3,4,5);//[1, 2, 3, 4, 5]

//字符串
console.log(Array.from("javascipt")) //["j", "a", "v", "a", "s", "c", "i", "p", "t"]
Array.of()
方法用于将一组值,转换为数组。返回
console.log(Arry.of("a","b","c")) //["a","b","c"]
arr.find()

arr.find(callback[, thisArg])

callback接收3个参数:elment 当前遍历到的元素, index 当前遍历到的索引,array 数组本身

找出第一个符合条件的数组元素,没有返回undefined

var arry = [1,25,84,35]
var a = arry.find(function(el){
    return el > 15
})
console.log(a) //25

arr.findIndex()

找出第一个符合条件的数组元素的位置,没有找到返回-1

var arry = [1,25,84,35]
var a = arry.findIndex(function(el){
    return el > 25
})
console.log(a) //2

arr.fill()

一个固定值填充一个数组中从起始索引到终止索引内的全部元素

fill 方法接受三个参数 value, start 以及 end. startend 参数是可选的, 其默认值分别为 0this 对象的 length 属性值.

如果 start 是个负数, 则开始索引会被自动计算成为 length+start, 其中 lengththis 对象的 length 属性值. 如果 end 是个负数, 则结束索引会被自动计算成为 length+end.

arr.fill(value) 
arr.fill(value, start) 
arr.fill(value, start, end)

var arr1 = ["a","b","c","d"]
arr1.fill("x")
console.log(arr1) //["x", "x", "x", "x"]  只有value 默认start为0 end为length
arr1.fill("x",1) //["a","x","x","x"];
arr1.fill("x",-1) //["a","b","c","x"];

//过界的话,数组没有变化

for of

对象没有迭代器,需要自己去建

var arr = ["a","b","c","d"]
for(let v of arr) {
  console.log(v) //a b c d
}

for下数组扩展

//arr.keys() 用于for of对数组键名的遍历
var arr = ["a","b","c","d"]
for(let v of arr.keys()) {
  console.log(v) //0 1 2 3
}
//arr.values() 用于for of对数组键值的遍历
//*目前浏览器未实现该方法

//arr.entries()用于for of对数组键值对的遍历
var arr = ["a","b","c"]
for (var [index,ele] of arr.entries()) {
    console.log(index,ele) 
    // 0 "a" ,1 "b" ,2 "c"
}

数据结构Set

在es6中新增了一个新的数据结构 - 集合,

Set是一个构造函数,可以不传入任何参数创建一个空的集合,也可以传入一个数组对其进行初始化

let s1 = new Set(["a","b","c"])

Set和数组类似,但是Set的值是唯一的不重复的

  • 不能通过下标进行取值
  • 集合是一个可迭代的对象
  • 有一个属性:size,类似数组的length属性
set.add(value) 为Set的实例添加值
 s1.add('d');
console.log(s1); //a b c d
set.delete(value) 删除Set实例的值
s1.delete("a");
console.log(s1); //b c d
set.has(value) 判断传入的参数是否为set的成员
s1.has("b") //true
s1.has("x") //false
set.clear()清除set中所有成员
s1.clear(); {}

Map()

ES6提供了map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。

Map也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

var arr = [1,2,3]
let m1 = new Map();
m1.set('a', 1); //{"a"=> 1}
m1.set('b', 1);
m1.set(arr, 'abc'); //{"a" => 1, "b" => 1, (3) [1, 2, 3] => "abc"}

get() 通过key获取value

m1.get("a") //1

其他的set添加新的键值对,has()查找key是否存在,delete(),clear()方法和上面set使用方法一样的

Class

糖衣语法,和构造函数本质上没有区别

//之前构造函数
function Creat(name,age){
  this.name = name;
  this.age = age;
}
Creat.prototype.say = function(){
    console.log(`我叫${this.name},我今年${this.age}岁`)
}
var c1 = new Creat("小明",18)
c1.say() //我叫小明,我今年18岁

Class语法

class Creat{
  constructor(name,age) {
    this.name = name;
    this.age = age;
  }
  say(){
    console.log(`我叫${this.name},我今年${this.age}岁`)
  }
}
var c1 = new Creat("小李",24)
c1.say() //我叫小李,我今年24岁

当我们通过class模式创建拥有不同类型的对象时,就可以extends(继承)

class Occ extends Creat {  //Occ继承Creat
  constructor(name,age,type){
    //super -> 父类构造器
    super(name,age);  //相当Creat.call(this)
    this.type = type
  }
}
var c2 = new Occ("小王",26,"老师")
c2.say();// 我叫小王,我今年26岁
c2.myJob()// 我的职业是司机

相关文章

  • ECMAScript6新方法(2)

    字符串扩展 ES6加强了对Unicode的支持,并且扩展了字符串对象。 获取字符unicode编码 通过unico...

  • ECMAScript6新方法(1)

    ECMAScript6 ECMAScript 6 也称为ECMAScript2015,是2015年出版的ECMAS...

  • ES6常用特性

    1、什么是ECMAScript6?和JavaScript什么关系? 1.1 什么是ECMAScript6? 首先说...

  • ECMAScript6简介2

    一. 字符串的一些扩展 for...of遍历ES6为字符串添加了遍历器接口,似的字符串可以被for...of循环遍...

  • ECMAScript 6

    1、目前用的版本是ECMAScript3.0,后来改了名字叫ECMAScript5。2、ECMAScript6的特...

  • Angular2

    Angular2 开发语言:ECMAScript6 的标准已经完成。浏览器可以支持模块、类、lambda 表达式、...

  • HTM5新特性

    1.新方法 添加了getElementsByClassName() 2.classList属性 a. add():...

  • 更新、查询通用方法封装

    一. 元数据 二. 通用更新方法封装 1.代码展示 注: 在更新方法中有两个参数1).sql语句 2). 占位符数...

  • ECMAScript6

    ECMAScript6 大家对JavaScript,ECMAScript,TypeScript可能都有所耳闻,但是...

  • ECMAScript6简介

    一. ECMAScript6简介 ECMAScript和JavaScript的关系1996年,JavaScript...

网友评论

      本文标题:ECMAScript6新方法(2)

      本文链接:https://www.haomeiwen.com/subject/plydlxtx.html