ES6扩展：
unicode:
Unicode是一项标准 包括字符集、编码方案等
他是为了解决传统的字符编码方案的局限而产生的，为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。
1.codePointAt 获取字符串中对应字符的一个码点
'🐶'.codePointAt(0).toString(16);
2.at 根据下标取字符
'🐶abc'.at(0)
string：
1.模板字符串：使用 ` ` 对字符串进行规范，特别是用到innerHTML的时候，使用${}引入变量。
2.部分新方法:
//padStart,padEnd 分别在前面和后面补齐字符串 let str = 'i' let str1 = str.padStart(5,'mooc') document.write(str1+"<br>") let str2 = str.padEnd(5,'mooc') document.write(str2)
//repeat console.log(str.repeat(10)) var repeat = function(str,num){ return new Array(num+1).join(str) } console.log(repeat("i",3))
//startsWith endsWith //判断以什么开头 let str ="a promise is a promise" if(str.startsWith("a promise") && str.endsWith("a promise")){ console.log("yes") }else{ console.log("no no no") }
//includes判断是否包含子串，不过这个和indexOf返回-1，这个返回的是Boolean if(~str.indexOf("a promise")){ console.log("yes") } if(str.includes("a promise")){ console.log("yes") } // 小技巧，一些返回的是-1的值，可以通过取反来代替 // 如 str.indexOf("a promise") ！== -1 可以用 ~str.indexOf("a promise")来替代， // 原因为，~x = -(-x + 1)当x = -1的时候，为0
3.for...of遍历字符串
先来补充一下几种常见的字符串转为数组的方式：
1 var Ostr = Array.prototype.slice.call(str) 2 var Ostr = str.split("") 3 const Ostr = [...str] 4 const [...Ostr] = str
遍历数组：
1.传统方法
2.使用数组的forEach方法
3.使用字符串的for...of方法
//使用字符串的for...of方法 let str = "helloworld" for(word of str) console.log(word) //使用数组的forEach方法 let arr = [...str] arr.forEach(function(word){ console.log(word) })
RegExp:
新增了两个修饰符 u 用来匹配Unicode，y 黏连匹配，和g有区别，必须匹配成功的串紧跟的字符也匹配才能继续匹配。
数值：
1.isNaN
console.log(Number.isNaN(NaN)); console.log(Number.isNaN(-NaN)); console.log(Number.isNaN(1)); console.log(Number.isNaN('1')); console.log(Number.isNaN(true));
2.isFinite 有限数值
console.log(Number.isFinite(Infinity)); console.log(Number.isFinite(2 / 0)); console.log(Number.isFinite(2 / 4)); console.log(Number.isFinite(1234)); console.log(Number.isFinite('1234')); console.log(Number.isFinite(true)); console.log(Number.isFinite(NaN));
3.幂运算 默认向右结合
let a = (2 ** 10) ** 0;
console.log(a);
函数：
箭头函数：
//普通用法 let fn1 = function(a,b){ return a+b; } let fn2 = (a,b) => a+b; //解决不返回pop函数值的问题 const fn = arr => arr.pop(); fn([1,2,3]);//pop会返回数组的最后一个数值
const fn = arr => void arr.pop();
const fn = arr =>{ arr.pop(); }//添加void关键字或一个花括号后数组返回undefined
箭头函数和普通函数的区别：
1.箭头函数没有arguments属性，普通函数具有
首先来普及一下什么是arguments属性：arguments是所在函数的一个内置类数组对象，可以使用数组的[i]和.length属性
arguments对象：函数对象内，自动创建的专门接收所有参数值得类数组对象。
arguments[i]: 获得传入的下标为i的参数值
arguments.length: 获得传入的参数个数
//普通函数拥有类数组对象arguments const fn1 = () => console.log(arguments) fn1(1,2,3) //箭头函数没有 const fn2 = function(){ console.log(arguments) } fn2(1,2,3) //但是可以用剩余构造参数方法来实现 const fn3 = function(...args){ console.log(args) } fn3(1,2,3)
2.箭头函数没有自己的this
const xiaoming = { name: '小明', say1: function() { console.log(this); }, say2: () => { console.log(this); } } xiaoming.say1();//this指向xiaoming这个对象 xiaoming.say2();//this指向该对象的上一级，window
//要通过_this才能拿到当前对象的属性age const xiaoming = { name: 'xiaoming', age: null, getAge: function() { let _this = this; // ...ajax setTimeout(function() { _this.age = 14; console.log(_this); }, 1000);//普通函数this指针拿不到 } }; xiaoming.getAge(); //直接拿到当前对象的属性age const xiaoming = { name: 'xiaoming', age: null, getAge: function() { // ...ajax setTimeout(() => { this.age = 14; console.log(this); }, 1000); } }; xiaoming.getAge();
普通函数的“this永远指向当前正在执行的函数对象”
函数的剩余参数：
function sum(...numbers) { return numbers.reduce(function(a, b) { return a + b; }, 0); } console.log(sum(1, 2, 3, 4));
对象：
对象的简洁表示法：
//ES5之前是这样的 const getUserInfo = (id = 1) => { // AJAX .... const name = 'xiaoming'; const age = 10; return { name: name, age: age, say: function() { console.log(this.name + this.age); } }; }; const xiaoming = getUserInfo(); //ES6 const getUserInfo = (id = 1) => { // AJAX .... const name = 'xiaoming'; const age = 10; return { name,//可以自动进行赋值 age, say() { console.log(this.name + this.age); }//省略了关键字function }; }; const xiaoming = getUserInfo();
属性名表达式：为定义特殊的属性名加入了奇奇怪怪的操作
const key = 'age'; const xiaoming = { name: 'xiaoming', [`${key}123`]: 14 };
复制和合并对象：都是属于浅拷贝，只拷贝地址
//复制对象 const cObj1 = { ...obj1 }; //合并对象 const newObj = { ...obj2, ...obj1 };
对象部分新的属性和方法：
1.object.is
// console.log(Object.is(+0, -0)); false // console.log(+0 === -0); true // console.log(Object.is(NaN, NaN)); true // console.log(NaN === NaN); false
2.Object.assign 合并对象，结果和上面使用剩余参数合并对象一致，浅拷贝
const obj = Object.assign({a: 1}, {b: 2}, {c: 3}, {d: 4, e: 5});
3.Object.keys(传入对象)（返回对象的主键） Object.values(传入对象)（返回对象的值） Object.entries(传入对象)（返回对象的字段）
//可以使用for...of对其进行遍历
for (let [k, v] of Object.entries(obj)) { console.log(k, v); }
4. __proto__ 得到对象的原型
5.Object.setPrototypeOf() 传入两个参数，第一个参数为要修改的对象，第二个为指定的原型
const obj1 = { a: 1 }; const obj2 = { b: 1 } const obj = Object.create(obj1); console.log(obj.__proto__); Object.setPrototypeOf(obj, obj2); console.log(obj.__proto__);
6.Object.getPrototypeOf(传入对象) 获得对象的原型
7.super关键字 对对象的原型进行操作 但是使用有条件，对象的函数定义必须要使用ES6新的定义方法才能使用super关键字
const obj = {name: 'xiaoming'};
const cObj = {
say() {
console.log(`My name is ${super.name}`);
}
}
Object.setPrototypeOf(cObj, obj);
cObj.say();
数组：
1.结合扩展运算符使用
//在使用ajax和服务端取数据的时候，使用扩展运算符能比较方便 const user = ['小明', 14, ['吃饭', '打游戏'], '我没有女朋友']; function say(name, age, hobby, desc) { console.log(`我叫${ name }, 我今年${ age } 岁, 我喜欢${ hobby.join('和') }, ${ desc }`); } say(user[0], user[1], user[2], user[3]);//一般方法 say(...user);
2.apply方法（接收两个参数，第一个参数为对象，可以改变指向对象的指针，如果为null则不改变，第二个为要传递的数组名）
//上面的例子同样也可以使用apply进行传递 say.apply(null, user);
3.数组的添加，复制和合并
const cArr1 = [1, 2, 3, ...arr3]; const cArr2 = [...arr1]; const [...cArr3] = arr3; const cArr4 = [...arr1, ...arr2, ...arr3];
4.生成器函数（可以暂停函数的执行，直到调用next()方法）
function *g() { console.log(1); yield 'hi~'; console.log(2); yield 'imooc~'; } // const arr = [...g()]; const gg = g(); gg.next(); setTimeout(function() { gg.next(); }, 1000);
5.不同的数据类型也可以通过剩余参数转换为数组对象
let set = new Set([1, 2, 2, 3]); console.log([...set]);
数组的一些新的方法
6.Array.from（可以将类数组转为数组类型，比如arguments），可以接收两个参数，第二个参数可以为回调函数
const obj = { 0: 1, 1: '22', 2: false, length: 2 }; console.log(Array.from(obj, item => item * 2)); //当然也可以使用以前的转为数组的方法，但是没有回调函数 Array.prototype.slice.call() [].slice.call() [...]
7.Array.of（用来将传递进去的参数转为数组）
console.log(Array.of(1, 2, '123', false));
8.Array#fill（填充数组的默认值，一般可以用在构造函数，给数组赋初始值）
let arr = new Array(10).fill(0, 0, 3);
9.Array.includes（判断数组是否包含值）
10.keys()，values()和entries()方法，和对象的方法类似，但是有区别，数组调用这些方法直接 数组名.keys(参数)，而对象需要用 Object.keys(对象名) ，返回的都是迭代器，结合for..of
const arr = [1, 2, 3, 444]; //keys console.log(arr.keys()); for (let i of arr.keys()) { console.log(i); } //values for (let v of arr.values()) { console.log(v); } //entries for (let [i, v] of arr.entries()) { console.log(i, v); }
11.find() 根据条件(回调) 按顺序遍历数组 当回调返回true时 就返回当前遍历到的值
const res = [1, 7, 6, 3].find((value, index, arr) => value % 2 === 0);
console.log(res);
12.findIndex() 根据条件(回调) 按顺序遍历数组 当回调返回true时 就返回当前遍历到的下标
const res = [1, 7, 6, 3, NaN].findIndex((value, index, arr) => Number.isNaN(value));
console.log(res);
