ECMAScript6新方法(2)

字符串扩展

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()// 我的职业是司机
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,093评论 0 3
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,205评论 0 4
  • [TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都...
    郭子web阅读 1,768评论 0 1
  • 官网 中文版本 好的网站 Content-type: text/htmlBASH Section: User ...
    不排版阅读 4,364评论 0 5
  • 参考基础教程的整理,方便记忆 一、Object对象 (O大写) 所有其他对象都继承自这个对象。Object本身也是...
    Viaphlyn阅读 2,302评论 0 0