足不出户 走遍全世界
当前位置: 主页 > 未解之谜 > 世界之谜
更新时间:2018-11-14   来源:互联网   编辑:辛董辛  点击数: 32715次  

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/

当前文章:http://www.kismile.com/10448/index.html

发布时间:2018-11-14 06:01:15

自己做点小生意 中国手赚 说吧赚q币 快乐赚官网下载安装 现在那个网游比较赚钱 能赚钱的项目 网上兼职能干什么挣钱 全自动挂机冲浪赚钱 如何靠抖音赚钱 2018dnf如何赚钱

编辑:建扁安

关于奇站|联系我们|网站地图|网站地图|征稿启事|意见反馈|免责声明|法律声明|版权声明|不良信息举报

Copyright @ 2010-2016 网站版权所有  闽ICP备15054582号  内容监督电话