一些 ES6的扩展

一些 ES6的扩展

es6部分

let，const

1.var 定义的变量：全局变量和局部变量（函数）

function fn(){
    var num = 10;
    alert(num)
}
fn();
alert(num); //num is not define

for(var i=1;i<=10;i++){ //i是全局的
    
}
alert(i); //11

es6中新增了let命令，用来声明变量，它的用法相似于var，可是所声明的变量，只在let命令所在的代码块内{}有效

​ 即let所声明的变量就“绑定”这个区域，再也不受外部的影响

​ es6中还新增了const命令，它用来声明常量，通常被const声明的变量不可改变

​ var 和let的区别：

​ 1.let声明的不存在变量提高

​ 2.let不容许在相同做用域内，重复声明同一个变量

​ 3.ES6中容许块级做用域的任意嵌套，外层没法读取内层做用域的变量，反之能够

案例：

{
    alert(a); //a is not define
    let b = 10;
    {
        let a = 10;
        alert(b);   //10
    }
}

解构赋值

变量的结构赋值 -- 快速的给变量赋值

1.解构赋值：数组，对象，字符串

let arr = [1,2,3,4,5];

//通常咱们赋值
//let a = arr[0];
//let b =arr[1]

//解构赋值 赋值
let [a,b,c,d,e] = arr // a = 1 ，b =2 ....

对象解构赋值

对象解构赋值，变量名和属性名保持一致，若是修改的话，获得的值是后者

let {name:xingming,age:nianling} = {name:'zhangsan',age:100};
console.log(xingming,nianling); //zhangsan,100

扩展运算符

扩张运算符用三个点表示（...）,功能是把数组或类数组对象展开成一系列用逗号隔开的值

let arr=[1,2,3,4,5];
console.log(arr);
console.log(...arr); //1 2 3 4 5  用console.log输出看不到‘，’号

let arr=[1,6,7,3,5,6,8,9,0];
console.log(Math.max(...arr)) //9

至关于 console.log(Math.max(1,6,7,3,5,6,8,9,0)) //这里证实是用‘，’隔开

扩展运算符还能够用于数组的合并

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [7,8,9];

console.log([...arr1,...arr2,...arr3]) //[1,2,3,4,5,6,7,8,9]

扩展运算符还能够用于引用传递浅拷贝

let arr1 = [1,2,3];
let arr2 = arr1;
arr2.push(4);
console.log(arr1);  //[1,2,3]
console.log(arr2);  //[1,2,3,4]


//对象浅拷贝
//obj1复制给obj2
const obj1 = {a: 1};
const obj2 = {...obj1};

字符串的扩展 --模板字符串

//1.模板字符串
let obj={
    name：'zxh',
    age:20,
    sex:'男'
}

document.body.innerHTML = '个人姓名是'+obj.name+',我今年'+.....等很麻烦
document.body.innerHTML = `个人姓名是${obj.name}，我今年${obj.age}`  结果同样

字符串的扩展 --字符串新加的方法

// repeat(n)方法返回一个新字符串，表示将原字符串重复n次
let str = 'hello';
console.log(str.repeat(10)); //输出10次hello

//includes():返回布尔值，表示是否找到了参数字符串
let str = 'javascript';
console.log(str.includes('ava'))  //返回true

//startsWith():放回布尔值，表示参数字符串是否在源字符串头部
let str = 'javascript';
console.log(str.startsWith('java')) //true

//endsWith():放回布尔值，表示参数字符串是否在源字符串尾部
let str = 'javascript';
console.log(str.endsWith('java')) //false
console.log(str.endsWith('t')) //true
console.log(str.endsWith('pt')) //true

函数

1.函数的默认参数

2.箭头函数

<script>
    const sum = function(n1,n2){
        return n1+n2;
    }
    console.log(sum()) //NaN
    console.log(sum(1,2)) //3
</script>


//函数参数默认值

//在之前这样设置
const sum = function(){
    n1 = n1 || 10;
    n2 = n2 || 20;
    return n1+n2
}

//如今
const sum = function(n1=10，n2=10){
    return n1+n2
}

2.箭头函数

特色:简洁

const sum = function(a,b){
    return a+b
}

//用箭头函数表示
const sum1 = (a,b) => n1 + n2

重要：箭头函数里面的this是定义的时候肯定的，this一旦肯定没法改变

总结：1.箭头函数最吸引最吸引人的地方是简洁。同时函数体内this对象，就是定义时所在的 对象，而不是使用时所在的对象，this不会改变了

​ 2.不能够当作构造函数，也就是说不可使用new命令，不然会抛出一个错误

​ 3.不可使用arguments对象，该对象在函数体内不存在

​ 4.箭头函数必定是匿名函数

​ 5.箭头函数适合于无复杂逻辑或者无反作用的纯函数场景下，例如map，reduce， filter的回调函数（函数看成参数）定义中；

​ 6.不要在最外层定义箭头函数，由于在函数内部操做this会容易污染全局做用域。最起 码在箭头函数外部包一层普通函数，将this控制在可见的范围内

数组和对象的扩展

1.数组的扩展

​ 1.Array.from()方法用于将对象转为真正的数组（类数组转数组）

let obj={
    0:'zhangsan',
    1:'lisi',
    2:'wangwu',
    length:3
}
//须要固定的对象格式才可使用Array.from()方法转成数组，不然无效
console.log(Array.from(obj))    //['zhangsan','kisi','wangwu']

​ 2.Array.of()方法用于将一组值，转换为数组

console.log(Array.of('zhangsan','lisi','wangwu')) //['zhangsan','lisi','wangwu']

​ 3.fill()方法使用给定值，填充一个数组

var a = [1,2,3,4,5]
console.log(a.fill('hello')) //['hello','hello','hello','hello','hello']

console.log(a.fill('hello',2,3)) //[1,2,'hello',4,5]

2.对象的扩展

对象的简介表示

var num = 100
var obj = {
    num:100,
    shownum:function(){
        return this.num;
}
}

//当属性和属性名重名的时候能够省略  //方法能够省略function
var obj = {
    num，
    shownum(){
        return this.num;
}
}