es6学习笔记--字符串&数值&数组&函数&对象的扩展
这几天抽空学习了es6语法,关于字符串,数值,数组,函数以及对象的扩展,看到es6标准入门这本书,里面讲的扩展特别多,我认为有几部分在项目上用不到,就挑有用的当笔记学习了。
字符串的扩展
let str = 'hello world'
let str1 = 'hello'
console.log(str.includes(str1)); // true
console.log(str.includes(str1, 4)) // false
let str = 'hello world'
let str1 = 'hello'
console.log(str.startsWith(str1)); // true
console.log(str.startsWith(str1, 0)) // true
let str = 'hello world'
let str1 = 'hello'
console.log(str.endsWith(str1)); // false
console.log(str.endsWith(str1, 6)) // false
let str = 'peter';
str1 = str.repeat(2);
console.log(str1) // peterpeter
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类型)
let str = 'hello'
console.log(str.padStart('peter ')) // hello
console.log(str.padEnd(' peter')) // hello
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
另外这本书也讲了模板字符串,这个我在一开始学的时候已经整理好了笔记,传送门
console.log( 0b1011 === 11 ) // true
console.log( 0o555 === 365 ) // true
console.log( Number(0b1011) ) //
console.log( Number(0o555) ) //
console.log( Number.isFinite(22222) ) //true
console.log( Number.isFinite(NaN) ) // false
console.log( Number.isFinite('abc') ) // false
console.log( Number.isNaN(NaN) ) // true
console.log( Number.isNaN(123) ) // false
console.log( Number.isNaN('abc') ) // false
console.log(Number.parseInt(12.34)) //
console.log(Number.parseFloat('12.345af')) // 12.345
console.log(Number.isInteger(20.2)) // false
console.log(Number.isInteger(23)) //true
console.log(Math.trunc(12.34)) //
console.log(Math.sign(-5)) // -1
console.log(Math.sign(5)) // +1
console.log(Math.sign(0)) //
console.log(Math.sign(NaN)) // NaN
console.log(Math.sign(false)) //
console.log(Math.sign(null)) //
console.log(Math.sign()) // NaN
console.log(Math.sign('abc')) // NaN
console.log(Math.sign('123')) //
console.log(Math.sign(true)) //
console.log(Math.cbrt(8)) //
console.log(Math.cbrt(true)) //
console.log(Math.cbrt('abc')) // NaN
console.log(Math.cbrt(false)) //
console.log(Math.cbrt(NaN)) // NaN
console.log(Math.cbrt(undefined)) //NaN
console.log(Math.cbrt('8')); //
console.log(Math.log10(10)) //
console.log(Math.log10(2)) // 0.3010299956639812
console.log(Math.log2(2)) //
console.log(Math.log2(10)) // 3.321928094887362
console.log(2 ** 3) //
console.log(2 ** 4) //
function fn(a,...arg){
console.log(arg)
}
fn(1,2,3,4) // 这样代表 a传的参数是1, ...arg传的参数是[2,3,4]
function fn(a, ...arg, b){
console.log(arg)
}
fn(1,2,3,4) // Uncaught SyntaxError: Rest parameter must be last formal parameter
console.log((function(a) {}).length); //
console.log((function(...arg) {}).length); //
console.log((function(a,b,...arg){}).length) //
let fn = (a, b) => a + b
console.log(fn(1,2)) //
等价与
let fn = function(a, b){
return a + b
}
console.log(fn(1,2)) //
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]
let fn = (a, b) => {
console.log(this)
}
console.log(fn(1,2)) // 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
let Foo = () => {};
let foo = new Foo(); // TypeError: Foo is not a constructor
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): ƒ]
let Foo = () => {};
console.log(Foo.prototype); // undefined
var func = ()
=> 1; // SyntaxError: expected expression, got '=>'
什么情况下不能使用箭头函数,这位博主讲的很清楚,可以去看看 传送门
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])) //
// ES5 的写法
let arr = Math.max.apply(null, [14, 3, 77])
console.log(arr) //
// ES6 的写法
let arr1 = Math.max(...[14, 3, 77])
console.log(arr1) //
// 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);
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]
let arr = [...'abc']
console.log(arr) // ["a", "b", "c"]
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
let array = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
console.log([...array]); // Uncaught TypeError: array is not iterable
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 ()...
};
let name = 'foo';
let obj = {
[name](){console.log(0)},
['a' + 'bc']: 123
};
console.log(obj) // {foo: ƒ, abc: 123}
const proto = {
foo: 'hello'
};
const obj = {
foo: 'world',
find() {
return super.foo;
}
};
Object.setPrototypeOf(obj, proto);
console.log(obj.find())// "hello"
console.log(+0 === -0) //true
console.log(Object.is(+0, -0)) // false
console.log(NaN === NaN) // false
console.log(Object.is(NaN, NaN)) // true
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}
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) //
let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);
proto.y = 20;
proto.z = 40;
console.log(obj.x) //
console.log(obj.y) //
console.log(obj.z) //
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}
let obj = {
name: 'peter',
age: 25,
sex: '男'
}
console.log(Object.keys(obj)) // ["name", "age", "sex"]
let obj = {
name: 'peter',
age: 25,
sex: '男'
}
console.log(Object.values(obj)) // ["peter", 25, "男"]
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/
es6学习笔记--字符串&数值&数组&函数&对象的扩展的更多相关文章
- ES6学习笔记(字符串和数值)
(一)字符串的扩展 1.字符串的遍历 for (let codePoint of 'foo') { console.log(codePoint) } // "f" // " ...
- ES6学习笔记(三)——数值的扩展
看到这条条目录有没有感觉很枯燥,觉得自己的工作中还用不到它所以实在没有耐心看下去,我也是最近得闲,逼自己静下心来去学习去总结,只有在别人浮躁的时候你能静下心来去学去看去总结,你才能进步.毕竟作为前端不 ...
- ES6学习笔记(五)函数的扩展
1.函数参数的默认值 1.1基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console. ...
- ES6学习笔记(5)----数值的扩展
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 数值的扩展 1.Number对象的扩展(1)javascript的全局函数isNaN,isFin ...
- 学习笔记---C++伪函数(函数对象)
C++里面的伪函数(函数对象)其实就是一个类重载了()运算符,这样类的对象在使用()操作符时,看起来就像一个函数调用一样,这就叫做伪函数. class Hello{ public: void oper ...
- ES6__字符串、数组、对象的扩展
/** * 字符串的扩展 */ // 模板字符串 tab上面的反向符号 // 添加${} // let flag = true; // // let html = `<ul> // < ...
- es6重点笔记:数值,函数和数组
本篇全是重点,捡常用的怼,数值的扩展比较少,所以和函数放一起: 一,数值 1,Number.EPSILON:用来检测浮点数的计算,如果误差小于这个,就无误 2,Math.trunc():取整,去除小数 ...
- Java 学习笔记 二维数组和对象数组
定义二维数组 int[][] a = new int[4][5]; 可以不指定列数 int[][] a = new int[4][]; 获取行 int i = a.length(); 如果使用第一个例 ...
- ES6学习笔记四(类和对象)
{ // 构造函数和实例 class Parent{ constructor(name='mukewan'){ this.name=name; } } let v_parent=new Parent( ...
随机推荐
- PHP实现WebService的简单示例和实现步骤
首先我创建的文件有: api.php api的接口类文件 api.wsdl 我创建产生的最后要调用的接口文件 cometrue.php 注册service api类内容的所有内容的执行文件 creat ...
- ubuntu重启、关机命令
重启命令 : 1.reboot 2.shutdown -r now 立刻重启 3.shutdown -r 10 过10分钟自动重启 4.shutdown -r 20:35 ...
- Python——文件操作详解
python中对文件.文件夹(文件操作函数)的操作需要涉及到os模块和shutil模块. 得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd() 返回指定目录下的所有文件和目 ...
- 深度学习中batch normalization
目录 1 Batch Normalization笔记 1.1 引包 1.2 构建模型: 1.3 构建训练函数 1.4 结论 Batch Normalization笔记 我们将会用MNIST数 ...
- 《Android进阶之光》--Android新特性
Android 5.0新特性 1)全新的Material Design设计风格 2)支持多种设备 3)全新的通知中心设计--按照优先级显示 4)支持64位ART虚拟机 5)多任务视窗Overview ...
- float 与 display:inline-block
float: 1.会导致高度塌陷 <style type="text/css"> li{ float:left; height:200px; width:200px; ...
- Spring data mongodb ObjectId ,根据id日期条件查询,省略@CreatedDate注解
先看看ObjectId 的json 结构,非常丰富,这里有唯一机器码,日期,时间戳等等,所以强烈建议ID 使用 ObjectId 类型,并且自带索引 Spring data mongodb 注解 @C ...
- R实战 第三篇:数据处理
在实际分析数据之前,必须对数据进行清理和转化,使数据符合相应的格式,提高数据的质量.数据处理通常包括增加新的变量.处理缺失值.类型转换.数据排序.数据集的合并和获取子集等. 一,增加新的变量 通常需要 ...
- Python多进程----从入门到放弃
Python多进程 (所有只写如何起多进程跑数据,多进程数据汇总处理不提的都是耍流氓,恩,就这么任性) (1)进程间数据问题,因为多进程是完全copy出的子进程,具有独立的单元,数据存储就是问题了 ( ...
- mac 系统安装 eclipse 方法
经过好几天的折腾,终于在各种不靠谱的经验.说明的忽悠中把自己心爱的 mac 安装上了 eclipse,看到别人的不靠谱,我决定自己写一篇经验,为了大家能够不走我这么多的弯路,也为了自己将来可以回来看看 ...