ES6学习——对ES5的一些拓展

1.ES6简介

        ES6是 JavaScript 语⾔的下⼀代标准，在 2015 年 6 ⽉正式发布。它的⽬标，是使得 JavaScript 语⾔可以⽤来编写复杂的⼤型应⽤程序，成为企业级开发语⾔。之前我们学的是 ES5，是在2011年发布的。ES6 既是⼀个历史名词，也是⼀个泛指，含义是 5.1 版以后的 JavaScript 的下⼀代标准，涵盖了 ES2015、ES2016、ES2017 等等，⽽ ES2015 则是正式 名称，特指该年发布的正式版本的语⾔标准。 nodejs对ES6的⽀持很⾼，⽬前多数浏览器也对ES6进⾏了⽀持，不过我们在企业级开发中 仍需要通过Babel将ES6的⾼级语法转换为ES5，这样使得我们的程序兼容性更强。

安装nodejs

https://nodejs.org/en/ 官网安装

注释

1.// xxxx         注释一行

2./*xxxxx*/      可以注释好多行

2.变量声明

2.1ES5中的变量声明var

                1.可以重复声明
                2.具有变量声明的提升
                3.没有局部作用域
               

                function foo(){
                    var result=0;
                    for (var i=0;i<=100;i++){
                        result +=i;
                    }
                console.log(i,result)//101,5050   在大括号外部还可以访问i
                }
                foo()

2.2ES6中的变量声明

 let 声明变量

1.                 不能重复声明
2.                 不存在变量提升
3.                 有局部作用域

                function foo(){
                    var r=0;
                    for(let i=0;i<=100;i++){
                        r+=i;
                    }
                    // console.log('i',i);//会报错
                    return r;
                }
                console.log(foo());

const声明一个常量 

只能赋值一次的变量，其他与let保持相同特性

但是当const声明一个引用值时，在地址值不变的情况下可以修改内部值。
               

                let a = 3;
                a++;
                const b;
                b++;//error
                const obj={
                    age:1
                }
                obj.age++;//可以 地址值没变

3.解构

            ES6 允许按照⼀定模式，从数组和对象中提取值，对变量进⾏赋值，这被称为解构。解构 的本质是模式匹配，也就是说只要等号两边的模式相同，左边的变量就会被赋予对应的值。解构 时如果解构不成功，变量的值就等于 undefined 。

 3.1.对象解构

通过⼤括号来匹配等号右边的对象。

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
//foo=aaa bar=bbb
let {foo} = {bar: 'baz'}; //foo为 undefined


let {age,gender="男"}={age:12,gender:"女"}
//如果gender在右边对象中未定义就是默认值男，如果定义了就是右边的值
//gender='女'

let{toString}=2;//获取了number原型中的toString方法。
toString ===Number.prototype.toString
//true

let {push} = [1,2,3] //获取数组中的push方法之后，可以给类数组用
let {push}=[]
let obj={"0":1,'1':2,'2':3,length:3};
push.call(obj,4)
//obj  { '0': 1, '1': 2, '2': 3, '3': 4, length: 4 }

3.2. 数组结构

通过中括号来匹配等号右边的数组值。

                let [a,b,c ]=['t','o','j']
                let [a,b,c ]=['t','o']
                let [a,b,c='1' ]=['t','o','j']//c=j
                let [a,[b]]=[1,[2,3]]//a=1,b=2

4.string类型拓展

4.1. 遍历

ES6 为字符串添加了遍历器接⼝，使得字符串可以被 for...of 循环遍历。

可迭代对象

let str = "hello world"
for(let s of str){
console.log(s);
}

4.2实例方法

includes()：返回布尔值，表示是否找到了参数字符串。

startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。

endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

repeat()

'hello'.repeat(2) // "hellohello"

padStart()

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

padEnd()

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

trimStart()

trimEnd()

const s = ' abc ';
s.trim() // "abc"
s.trimStart() // "abc "
s.trimEnd() // " abc"

replaceAll()

'aabbcc'.replace('b', '_') // 'aa_bcc'
'aabbcc'.replace(/b/g, '_') // 'aa__cc'
'aabbcc'.replaceAll('b', '_') // 'aa__cc'

5.数值拓展

Number.isFinite(), Number.isNaN()

与isFinite、isNaN不同，这两个新⽅法只对数值有效，Number.isFinite() 对于⾮数值⼀律返回 false , Number.isNaN() 只有对于 NaN 才返回 true ，⾮NaN ⼀律返回 false 。

Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isNaN(NaN) // true
Number.isNaN(15) // false

Number.parseInt(), Number.parseFloat()

ES6 将全局⽅法 parseInt() 和 parseFloat() ，移植到 Number 对象上⾯，⾏为完全保持不变。

Number.isInteger()

Number.isInteger() ⽤来判断⼀个数值是否为整数。

Number.isInteger(25) // true
Number.isInteger(25.1) // false

 6.对象拓展

6.1对象简写

ES6 允许在⼤括号⾥⾯，直接写⼊变量和函数，作为对象的属性和⽅法。这样的书写更加简洁。

let name = "terry"
let age = 12;
let sayHello = function(){
console.log('hello world');
}
let obj = { name,age,sayName,foo(){ } }

6.2对象的扩展运算符

解构赋值

let {name,...other} = { name: 'terry', age: 12, gender: 'male' };
name // 'terry'
other // {age: 12, gender: 'male'}

扩展运算符

对象的扩展运算符（ ... ）⽤于取出参数对象的所有可遍历属性，拷⻉到当前对象之 中。 对象的扩展运算符等同于使⽤ Object.assign() ⽅法。

let obj = {name: 'terry', age: 12, gender: 'male'}
let o = {...obj}
o // {name: 'terry', age: 12, gender: 'male'}

6.3 Object静态⽅法扩展

Object.is()

⽤于⽐较两个值是否相等，与严格⽐较运算符（===）的⾏为基本⼀致。不同之处只有两 个：⼀是 +0 不等于 -0 ，⼆是 NaN 等于⾃身。

+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

Object.assign()

⽤于对象的合并，将源对象（source）的所有可枚举属性，复制到⽬标对象（target）

let obj1 = { name: 'terry', age: 13, gender: 'male' }
let obj2 = Object.assign({},obj1)
obj1 === obj2 // false
obj1.age = obj.age + 1;
obj1.age // 14
obj2.age // 13

如果源对象中的对象存在嵌套关系，进⾏浅拷⻉

let o1 = {a:{age:1}}
let o2 = Object.assign({},o1)
o1 === o2 // false
o1.a.age = 2
o2.a.age // 2

let p1 = { page: 2, pageSize: 10 }
let p2 = { title: '新冠'}
Object.assign(p1,p2)//{ page: 2, pageSize: 10, title: '新冠' }
p1//{ page: 2, pageSize: 10, title: '新冠' }   // p1的值改变了
p2//{ title: '新冠' }
Object.assign(p1,p2)===p1//true

Object.setPrototypeOf()

为某个对象设置原型

let prototype = {
foo(){console.log('foo')},
bar(){console.log('bar')}
}
let obj = {}
Object.setPrototypeOf(obj,prototype)

Object.getPrototypeOf()

Object.getPrototype(obj)

Object.getOwnPropertySymbols() 获取指定对象的所有 Symbol 属性名。该⽅法返回⼀个数组，成员是当前对象的所有⽤作 属性名的 Symbol 值。

Object.keys() 该⽅法返回⼀个数组，成员是参数对象⾃身的（不含继承的）所有可遍历（enumerable） 属性的键名。

Object.values(obj)返回值的数组
Object.entries(obj)返回键值对组成的数组的数组

Object.defineProperty(obj,'weight',{//自定义属性weight：50
                    configurable:true,//如果为true 可以被删除
                    /*当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。
                    默认为 false。*/
                    enumerable:false,
                    value:50})

7.数组拓展

7.1静态方法

                Array.from()
                将类似数组的对象和可遍历的对象转换为真正的为数组
                Array.of()
                用于将一组值转换成数组
                Array.of(3, 11, 8) // [3,11,8]

7.2非静态

                    Array.prototype.keys()
                    Array.prototype.values()
                    Array.prototype.entries()// 它们三个都返回⼀个遍历器对象（迭代器对象）
                    与Object.keys() values() entries()的区别： 数组原型内的方法数组直接调用，返回的是迭代器对象，Object构造函数内的方法，只能Object调用，返回的是数组
                    
                    Array.prototype.includes(‘xxx’)//返回布尔值，如果包含该参数返回true，否则返回false
                    Array.prototype.flat(Infinity)//将数组拉平，拉平的层数与参数有关
                这三个方法返回值为迭代器对象
                    迭代器对象的调用
                    1.for -of
                    2.Iterator.next()
                    3. ...拓展运算符

8.函数拓展

8.1  函数默认值

声明参数的时候，可以通过'='为参数设置⼀个默认值

function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World

8.2. 参数解构

function foo({x, y = 5}) {
console.log(x, y);
}
foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

8.3. rest参数

⽤于将所有的参数整合到⼀个数组中

function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10

8.4. 箭头函数

更简便的函数写法。如果箭头函数不需要参数或需要多个参数，就使⽤⼀个圆括号代表参数 部分；如果箭头函数的代码块部分多于⼀条语句，就要使⽤⼤括号将它们括起来，并且使⽤ return 语句返回。 箭头函数中的this指向包含该箭头函数的外部函数的this

var f = v => v;
// 等同于
var f = function (v) {
return v;
};
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
var sum = (num1, num2) => { return num1 + num2; }