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( ...
随机推荐
- 搭建VUE项目的准备(利用vue-cli来构建项目)
首先需要明确的是:Vue.js 不支持 IE8 及其以下 IE 版本,一般用与移动端,基础:开启最高权限的DOS命令(否则会出现意外的错误提示) 注意:个人小推荐如果我们不知道如何才能开启最高权限 ...
- js创建数组的三个方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- “No module named context_processors”
之前因为django国际化的问题在settings.py里面改了很多东西,国际化是好使了,但是今天要用站点管理admin的时候出!错!了! 我前天用的时候还好好的啊,我的models.py和admin ...
- Shell脚本报错:-bash: ./switch.sh: /bin/bash^M: bad interpreter: No such file or directory
在学习shell中测试case参数命令代码如下 #!/bin/bash #switch测试 case $1 in start) echo 'start' ;; ...
- javascript模块化编程库require.js的用法
随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...
- 【前端】jQuery移动端左滑删除
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/left_slide_menu.html <!doctype html> <html> &l ...
- Android shape使用详解
在android开发过程中,shape是比较常用的,用于设定控件的形状,可以在selector,layout等里面使用,有6个子标签,各属性说明如下: <?xml version="1 ...
- 吐槽版︱MRO-Microsoft R Open快捷键+界面识别+功能设置
下载了之后,发现连运行(RUN键)在哪都不知道,蒙逼的在哪倒弄半天,都执行不了...问了别人,都说"ctrl+enter",但是我的电脑执行不了,于是今天就狠狠的一个一个按钮的点一 ...
- mysql数据库常用数据类型
1.整数:TINYINT.SMALLINT.MEDIUMINT.INT(INTEGER).BIGINT,比较常用的是INT,这五种类型只是取值范围不一样,具体的范围可以在mysql shell界面使用 ...
- SQL注入攻击三部曲之进阶篇
SQL注入攻击三部曲之进阶篇 通过入门篇的学习,我们知道了SQL注入攻击的判断方法,但是如果想侵入网站,获取网站的机密内容,那么仅靠入门篇的知识是无法达到的.本篇文章我们将进一步的分析SQL注入攻击. ...