es6学习笔记--字符串&数值&数组&函数&对象的扩展
这几天抽空学习了es6语法，关于字符串，数值，数组，函数以及对象的扩展，看到es6标准入门这本书，里面讲的扩展特别多，我认为有几部分在项目上用不到，就挑有用的当笔记学习了。
字符串的扩展
str.includes(str1, n) 返回布尔值，表示是否找到了参数字符串
params： 第一个参数str1 必选， 要匹配的字符
第二个参数n 可选 表示开始搜索的索引位置 第n个开始搜索到结束
let str = 'hello world' let str1 = 'hello' console.log(str.includes(str1)); // true console.log(str.includes(str1, 4)) // false
str.startsWith(str1, n) 返回布尔值，表示参数字符串是否在原字符串的头部
params： 和includes一样
let str = 'hello world' let str1 = 'hello' console.log(str.startsWith(str1)); // true console.log(str.startsWith(str1, 0)) // true
str.endsWidth(str1, n) 返回布尔值，表示参数字符串是否在原字符串的尾部。
params： 第一个参数str1 必选， 要匹配的字符
第二个参数n 可选 表示开始搜索的索引位置 从第一个搜索到第n个结束
let str = 'hello world' let str1 = 'hello' console.log(str.endsWith(str1)); // false console.log(str.endsWith(str1, 6)) // false
str.repeat(n) 返回一个新字符串，表示将原字符串重复n次
let str = 'peter'; str1 = str.repeat(2); console.log(str1) // peterpeter
ps: 1 n如果是小数，则会取整，不是四舍五入
2 如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。
0 到-1 之间的小数，取整以后等于-0，repeat视同为 0
3 n如果是负数，或Infinity，会报错，
4 n如果是NaN ，则返回 空
5 n如果是字符串类型的，解析器会强制转换成number类型，若是非数字的字符串，则返回 空。
let str = 'peter'; str1 = str.repeat(1.1); console.log(str1) // peter console.log('peter'.repeat(-2)); // Uncaught RangeError: Invalid count value console.log('peter'.repeat(Infinity)); // Uncaught RangeError: Invalid count value console.log('peter'.repeat('abc')); // (为空，string类型) console.log('peter'.repeat('3')); // peterpeterpeter console.log('peter'.repeat(NaN)) // (为空,string类型)
str.padStart(len, str1) 若某个字符串不够指定长度，用str1补全头部
str.padEnd(len, str1) 若某个字符串不够指定长度，用str1补全尾部
params: len: 可选 最小长度
str1: 必选 补全的字符串
1 省略第二个参数，默认使用空格补全长度
let str = 'hello' console.log(str.padStart('peter ')) // hello console.log(str.padEnd(' peter')) // hello
2 若原字符串的长度，>=指定的最小长度，则返回原字符串
若两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串
let str = 'hello' console.log(str.padStart(5, 'peter ')) // hello console.log(str.padEnd(8,' peter')) // hello pe console.log( '1'.padStart(10, '0') ) // "0000000001" console.log( '12'.padStart(10, '0') ) // "0000000012" console.log( '123456'.padStart(10, '0') ) // "0000123456" console.log( '13'.padStart(10, '2018-01-00') ) // "2018-01-12" console.log( '18-03-13'.padStart(10, '2018-00-00') ) // 2018-03-13
另外这本书也讲了模板字符串，这个我在一开始学的时候已经整理好了笔记，传送门
数值的扩展
前缀 0b 或者 0B 代表二进制
console.log( 0b1011 === 11 ) // true
前缀 0o 或者 0O 代表八进制
console.log( 0o555 === 365 ) // true
八进制，二进制，十二进制，六进制转成十进制 用Number()
console.log( Number(0b1011) ) // 11 console.log( Number(0o555) ) // 365
Number.isFinite() 判断数值是否是有限的，返回是布尔值
ps: 只要判断的数值不是number类型的，一律为false
console.log( Number.isFinite(22222) ) //true console.log( Number.isFinite(NaN) ) // false console.log( Number.isFinite('abc') ) // false
Number.isNaN() 判断数值是否为NaN ，返回值是布尔值
ps: 只要值不是NaN，一律为false
console.log( Number.isNaN(NaN) ) // true console.log( Number.isNaN(123) ) // false console.log( Number.isNaN('abc') ) // false
Number.parseInt() 将数值转化为整型,只去开头数字的整数部分，若开头是非数字的会返回NaN
Number.parseFloat() 将数值转化为浮点型，在上一个方法中小数点以前方法一样，小数点之后遇到非数字截止则返回
功能和parseInt(),parseFloat()一样，优点是减少了全局方法。
console.log(Number.parseInt(12.34)) // 12 console.log(Number.parseFloat('12.345af')) // 12.345
Number.isInteger() 判断数值是不是整数 返回值是布尔值
console.log(Number.isInteger(20.2)) // false console.log(Number.isInteger(23)) //true
Number.EPSILON 常量 代表 1 与大于 1 的最小浮点数之间的差
Number.EPSILON === Math.pow(2, -52) // true
Math对象
Math.trunc() 去除一个数的小数部分，返回整数部分 不四舍五入
ps:对于一个不是数字的值，返回结果为NaN
console.log(Math.trunc(12.34)) // 12
Math.sign() 用来判断一个数到底是正数、负数、还是零 ，有5种参数
参数为正数，返回+1；
参数为负数，返回-1；
参数为 0，返回0；
参数为-0，返回-0;
其他值，返回NaN
ps: 常见的false，null，会返回 0
NaN ,undefined,非数字的字符串类型(包括空)，返回是NaN
true 返回为 +1
console.log(Math.sign(-5)) // -1 console.log(Math.sign(5)) // +1 console.log(Math.sign(0)) // 0 console.log(Math.sign(NaN)) // NaN console.log(Math.sign(false)) // 0 console.log(Math.sign(null)) // 0 console.log(Math.sign()) // NaN console.log(Math.sign('abc')) // NaN console.log(Math.sign('123')) // 1 console.log(Math.sign(true)) // 1
Math.cbrt() 计算一个数的立方根,返回一个计算后的值
ps: 非数值类型的返回NaN
console.log(Math.cbrt(8)) // 2 console.log(Math.cbrt(true)) // 1 console.log(Math.cbrt('abc')) // NaN console.log(Math.cbrt(false)) // 0 console.log(Math.cbrt(NaN)) // NaN console.log(Math.cbrt(undefined)) //NaN console.log(Math.cbrt('8')); // 2
Math.log10(x) 返回以 10 为底的x的对数
console.log(Math.log10(10)) // 1 console.log(Math.log10(2)) // 0.3010299956639812
Math.log2(x) 返回以 2 为底的x的对数
console.log(Math.log2(2)) // 1 console.log(Math.log2(10)) // 3.321928094887362
指数运算 **
console.log(2 ** 3) // 8 console.log(2 ** 4) // 16
函数的扩展
rest参数 ...变量名
在函数的参数中，最后一个参数用...变量名，代表把这之后的所有参数放到数组中。简化操作。
function fn(a,...arg){ console.log(arg) } fn(1,2,3,4) // 这样代表 a传的参数是1， ...arg传的参数是[2,3,4]
rest参数和argument的区别：
1 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
2 arguments对象不是一个真正的数组，是个伪数组。而剩余参数是真正的Array实例，可以调用数组的方法。
3 arguments对象还有一些附加的属性
ps: 将伪数组转化成数组：Array.prototype.slice.call(arguments)
rest参数只能作为函数的最后一个参数，否则会报错。
function fn(a, ...arg, b){ console.log(arg) } fn(1,2,3,4) // Uncaught SyntaxError: Rest parameter must be last formal parameter
函数的参数的自身length不包含rest参数,即rest本身的自带length为 0
console.log((function(a) {}).length); // 1 console.log((function(...arg) {}).length); // 0 console.log((function(a,b,...arg){}).length) // 2
箭头函数 =>
省略了function，简化了操作。
let fn = (a, b) => a + b console.log(fn(1,2)) // 3
等价与
let fn = function(a, b){ return a + b } console.log(fn(1,2)) // 3
圆括号 () 代表参数(没有参数或者多个参数),
大括号 {} 代表执行代码块(多于两条语句时，并return。如果只有一条语句，则不加{})
ps:箭头函数返回一个对象，必须在对象外面加上括号，否则会报错,因为大括号{}被解析成代码执行块
let obj = (id)=>{ id:1, name: 'peter' } console.log(obj()) // Uncaught SyntaxError:
let obj = (id)=>({ id:1, name: 'peter' }) console.log(obj()) // {id: 1, name: "peter"}
let a= [1,2,3,4].map(v=>v * v) console.log(a) // [1, 4, 9, 16]
箭头函数的注意点:
1 箭头函数没有this值，箭头函数内的this值继承自外围作用域
let fn = (a, b) => { console.log(this) } console.log(fn(1,2)) // window
2 箭头函数不能适用与对象中方法声明,因为this也是指向window
let obj = { name:'peter', say: ()=> { setTimeout(() => { console.log(this) }); } } obj.say(); // window
修改后
let obj = { name:'peter', say: function () { setTimeout(() => { console.log(this) }); } } obj.say(); // obj
3 箭头函数不能用于构造器，即不能new
let Foo = () => {}; let foo = new Foo(); // TypeError: Foo is not a constructor
4 不可以使用arguments对象，该对象在函数体内不存在 ,若使用会报错
let fn = (a,b)=>{ console.log(arguments) } fn(1,2) // Uncaught ReferenceError: arguments is not defined let fn1 = function(a, b){ console.log(arguments) } fn1(1,2) // Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
5 箭头函数没有prototype属性
let Foo = () => {}; console.log(Foo.prototype); // undefined
6 不可以使用yield命令，因此箭头函数不能用作 Generator 函数
yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作生成器。
7 =>不能换行
var func = () => 1; // SyntaxError: expected expression, got '=>'
什么情况下不能使用箭头函数，这位博主讲的很清楚，可以去看看 传送门
数组的扩展
扩展运算符 ...[]
用三个点将数组分成用逗号分隔的参数序列 相当与rest的逆运算
function push(array, ...items) { array.push(...items); console.log(array) // [1, 2, 3, 4, 1, 2, 3, 4, 5, 5] } let item = [1,2,3,4,5,5] push([1,2,3,4],...item) function add(x, y) { return x + y; } console.log(add(...[1,2])) // 3
使用扩展运算符的好处：
1 可以不使用apply方法将数组转成参数
// ES5 的写法 let arr = Math.max.apply(null, [14, 3, 77]) console.log(arr) // 77 // ES6 的写法 let arr1 = Math.max(...[14, 3, 77]) console.log(arr1) // 77
// ES5的 写法 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; Array.prototype.push.apply(arr1, arr2); // ES6 的写法 let arr1 = [0, 1, 2]; let arr2 = [3, 4, 5]; arr1.push(...arr2);
2 可以不使用concat合并数组
let arr = [1,2,3,4].concat([5,6,7,8]) console.log(arr) // [1, 2, 3, 4, 5, 6, 7, 8] let arr1 = [1,2,3,4,...[5,6,7,8]] console.log(arr1) // [1, 2, 3, 4, 5, 6, 7, 8]
3 可以将字符串转化成数组
let arr = [...'abc'] console.log(arr) // ["a", "b", "c"]
4 可以将伪数组转化成数组
let nodeList = document.querySelectorAll('div');
console.log(nodeList) // NodeList(4) [div, div, div, div]
console.log(Array .isArray( nodeList )) // false
let array = [...nodeList];
console.log(array) // [div, div, div, div]
console.log(Array .isArray( array )) // true
ps:不能将类似于对象形式的伪数组转化成数组
let array = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; console.log([...array]); // Uncaught TypeError: array is not iterable
5 方便使用Generator 函数
es6 的方法已经总结道数组方法里了. 传送门
对象的扩展
扩展运算符 ...{}
对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中
let z = { a: 3, b: 4 };
let n = { ...z };
console.log(n) // { a: 3, b: 4 }
对象属性简写表示法：
对象可以用变量和函数作为对象的属性和方法，当属性名和属性值相同时，可以省略一个。方法也可以简写，看例子：
let birth = '2018/03/14'; const Person = { name: 'peter', birth, // 等同于birth: birth hello() { console.log('我的名字是', this.name); } // 等同于hello: function ()... };
属性名表达式
在声明对象的属性时，可以用标识符声明，es6可以用表达式来声明。
在使用对象字面量声明对象时，可以用中括号[]里写表达式
let name = 'foo'; let obj = { [name](){console.log(0)}, ['a' + 'bc']: 123 }; console.log(obj) // {foo: ƒ, abc: 123}
ps，属性名表达式与简洁表示法，不能同时使用，会报错
super关键字
super 指向当前对象的原型对象,只用在对象的方法中
const proto = { foo: 'hello' }; const obj = { foo: 'world', find() { return super.foo; } }; Object.setPrototypeOf(obj, proto); console.log(obj.find())// "hello"
对象方法:
Object.is(a, b) 在严格模式下用来比较两个值是否相等，返回值是布尔值
ps： +0 和 -0 在严格模式下相等， 但用Object.is() 不相等
NaN 在严格模式不相等， 但用Object.is() 相等
console.log(+0 === -0) //true console.log(Object.is(+0, -0)) // false console.log(NaN === NaN) // false console.log(Object.is(NaN, NaN)) // true
Object.assign(target,source1,source2...) 对象合并，浅拷贝,将源对象（source）的所有可枚举属性，复制到目标对象（target）。
params： target 目标对象，要合并的所存在的容器，只有一个
source 源对象，被合并的对象，可以多个
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
console.log(target) // {a:1, b:2, c:3}
ps: 1 目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性，在嵌套中，该方法也是替换而不是添加
2 如果只有一个参数，Object.assign会直接返回该参数。
3 只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（enumerable: false）
4 属性名为 Symbol 值的属性，也会被Object.assign拷贝。
5 浅拷贝，源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。
const target = { a: 1, b: 1,c:{d:1,e:1} };
const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
console.log(target) // {a:1, b:2, c:3}
console.log(Object.assign({a:{b:1,c:1}})) // {a: {…}}
const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
console.log(obj2.a.b) // 2
Object.setPrototypeOf(obj, proto) 用来设置一个对象的prototype对象，返回参数对象本身
params: obj: 代表当前的对象
proto: 要设置的原型对象名
let proto = {}; let obj = { x: 10 }; Object.setPrototypeOf(obj, proto); proto.y = 20; proto.z = 40; console.log(obj.x) // 10 console.log(obj.y) // 20 console.log(obj.z) // 40
上段代码将proto对象设为obj对象的原型，所以从obj对象可以读取proto对象的属性。
Object.getPrototypeOf(obj) // 用来获取一个对象的prototype对象，返回参数对象本身
let proto = {}; let obj = { x: 10 }; Object.setPrototypeOf(obj, proto); proto.y = 20; proto.z = 40; console.log(Object.getPrototypeOf(obj)) // {y: 20, z: 40}
Object.keys() 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名
let obj = { name: 'peter', age: 25, sex: '男' } console.log(Object.keys(obj)) // ["name", "age", "sex"]
Object.values() 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值
let obj = { name: 'peter', age: 25, sex: '男' } console.log(Object.values(obj)) // ["peter", 25, "男"]
Object.entries() 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。
let obj = { name: 'peter', age: 25, sex: '男' } console.log(Object.entries(obj)) // [Array(2), Array(2), Array(2)]
ps:当对象里套着一个对象时，以上方法是返回遍历第一次的值
对应的笔记和实例，我放到了GitHub，https://github.com/sqh17/notes
有什么问题请私信或留下评论，一起加油。
参考资料
阮一峰大大的es6标准入门：http://es6.ruanyifeng.com/
