首页 ES6

# 新的声明变量的方式

之前用的都是 var 来声明变量。

1
2
3
4
5
6
7
8
9
10
11
alert(a);//undefined
var a=1;
---------
alert(a);// undefined,var fun
fun();//undefined(); not defined,not a function,IE8及以下会执行函数
if(false){
	var a=1;   
    var fun=function fun(){
        console.log(1);
    }
}

  1. let 关键字
    声明变量的另一种方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    let的特点： (面试)
    1、是块级作用域，无论在哪里声明，都只能在所包含的作用域内访问，比如函数和代码块（{}这种形式）都可以形成块级作用域
    2、在同级作用域内，不能重复声明,包括混用var 和let
    3、没有变量提升，也就是没有预解析，必须要先声明再使用（即所谓的暂死区，变量没执行时是不会被扫描到的，必须执行到才会将变量释放并可用）

    作用：
    1. 让我们的代码写得更规范严谨
    2. 解决了之前使用闭包才能解决的问题
    3. 建议在移动端开发中使用let来代替var

  2. const
    声明常量的一种方式。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    特点：
        1、声明时必须要赋值，且该值不可改变
    		const a;不行的
        2、是块级作用域。同let
        3、对于对象，不能改对象本身，但可以改里面的属性值，也就是只能通过访问的方式改属性值。类似于指针，不能改变地址，但能改变里面的值
    	const obj={}
        obj=123;//不行的，即不能该对象本身
    	obj.name="张三";//可以的，可以给该对象添加属性
        4、建议使用大写字母来命名

    作用：希望定义的值不被改变（锁定初始值）
    const pi=3.1415;//比如希望π的值就是我设置的值
    pi=4;//报错
    const xhr=new XMLHttpRequest();//比如希望ajax对象不会被其他人或其他变量给改变。也需要常量
    //其他人就无法改变你的变量的值了
    var xhr=1;//无法更改

# 解构赋值

概念：按照一定模式，将数组或对象中提取值（结构拆开）用于给变量赋值。
通俗讲就是将一个结构给解开，用于给变量或属性赋值。也就是解构在左边，赋值在右边。

  1. 数组的解构赋值
    之前定义多个变量需要分别进行。而现在可以像数组那样批量声明和赋值变量。

    注意：左右两边必须要有中括号，才是解构赋值，如果左边有，右边没有则会报错。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //例子1：
    let [a, b, c] = [1, 2, 3]; 等价于let a=1,b=2,c=3;
    let [a, b, c, d] = [1, 2, 3]; 等价于let a=1,b=2,c=3,d=undefined;
    //例子2：在左边可以给变量默认值
    let [a, b, c=5] = [1, 2]; 等价于let a=1,b=2,c=5;
    //注意：如果同时给了默认值和初始值，那么初始值会替换默认值
    let [a, b, c=5] = [1, 2, 3]; 等价于let a=1,b=2,c=3  即c不会等于5，而是等于3
    //例子3：可以使用逗号省略变量名
    let [a,,c] =[1,2,3]; 此时相当于let a=1,c=3

  2. 对象的结构赋值
    可以使用一个 let 声明批量定义多个对象。左边的变量名必须要在右边也出现相同的属性名。且没有顺序之分。
    对象的结构赋值，右边的属性值可以是任意类型的数据。

    1
    2
    3
    4
    //注意：匹配设置对象后，可以通过左边的变量名来访问右边对象的属性或方法，但是不允许在同级作用域中再次出现重复命名。即：
    let {foo,bar}={foo:"abc",bar:"123"}; 
    let foo=10;
    console.log(foo) // 报错，不允许重复声明。因为foo已经被声明了。

  3. 字符串
    字符串之所以能够解构赋值，是因为字符串被转换成了一个类似数组的对象

    1
    let [a, b, c, d, e] = 'hello'; //此时：a=h,b=e,...

  4. 函数参数

    假设参数是对象、数组、字符串以上 3 种时，可以用结构赋值的写法来写。
    a. 参数是数组

    1
    2
    3
    4
    5
    6
    //函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。
    function add([x, y]){
        return x + y;
    }
    //调用
    add([1, 2]); // 3

    b. 参数是对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //d=5为默认值
    function fun({a,b,c,d=5}){
        console.log(a);
        console.log(b);
        console.log(c);
    }
    // 调用
    fun({
        a:1,
        b:2,
        c:3
    });

# 模板字符串

模板字符串（template string）是增强版的字符串。用反引号（左上角的 1 旁边的符号），可以格式化 HTML 结构输出。

使用 ${字符串变量或表达式} 占位符来表示具体的字符串，该模式放在反引号内即可，而不再需要用 + 号切割

1
2
3
4
5
//例子:
let name="KOUOK";
console.log(`hello,${name}`);
console.log(`hello,${name+1}`);
console.log(`hello,${2+2}`);

# 对象的简洁表示法

  1. 属性和方法的简写

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var wo="属性值";
    var obj={
        //wo:wo,
        wo,
        //只能在对象中的方法简写
        skill(){
            
        }
    }

  2. Object.assign () 合并对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var obj1={
        name:"药水哥"
    }
    var obj2={
        age:18
    }
    obj2=obj1;//不靠谱
    obj2.sex="男"
    //之前是如何实现的
    for(prop in obj){
        obj2[prop]=obj[prop];
    }
    obj2.sex="男";//不影响obj了
    语法：
    Object.assign(target,ojb2,obj3);
    作用：将多个对象合并到目标对象中，会改变目标对象。
    //JQ的extend几乎一样
    var newObj=$.extend(obj,obj2);//会改变obj对象
    //使用场景：用户参数与系统默认参数进行合并

# 箭头函数（重难点）

概念：使用箭头 => 定义的函数

1
2
3
4
5
6
7
8
9
10
//php:Array('name'=>"药水哥")
function fun(a){
    return a
}
//以上改箭头如何改
var fun=(a)=>{
    return a;
}
//可以进一步简化为：
var fun=a=>a;

3 个特征：

1）、不需要 function 关键字来创建函数
var fun= function (x){
return x;
}
可简写为：var fun= x=> x;
注意：如果只有一个参数，可以不写 (), 如果没有参数或多个参数就一定要写
比如 var fun=()=> 5; 等价于 var fun=function (){ return 5;}
2）、省略 return 关键字
函数语句和返回值只有一个表达式时是可以省略 {} 和 return 关键字的
3）、继承当前上下文的 this 关键字，即在哪里定义 this 指的就是谁，而不是看它在哪里调用

注意事项：（面试题）
1、不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误
2、不可以使用 arguments 对象，该对象在函数体内不存在，如果要用，可以用 Rest 参数代替
3、在箭头函数中，this 指向是固定的，也就是绑定在了定义时所在的作用域下。

4、返回一个对象，且只有一条 return 语句时，需要加 ()；函数体包含多条语句时不可省略 {}，有多条语句并有返回值还需要手动写 return 返回

1
2
3
4
5
6
7
8
9
//第4个注意事项的例子：
var fun=function (a,b){
    return{
        a:1,
        b:2
    }
}
//如果函数只有一条return语句，则return关键字和{}都可以省略
var fun=(a,b)=>({a:1,b:2})

# 函数的默认值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//假设用户传参了，则用用户的，否则用参数默认值，比如10
//最靠谱的给参数设置默认值的方式
function fun(a=10){
    alert(a);//undefined，10
}
fun();//10
fun(0);//0
//之前的写法：
function fun(a){
    //给参数设置一个默认值
    a=a||10;//短路运算,但是假设用户传递的是0，则会得不到用户的期待
    alert(a);//undefined，10
}
fun(0);//用户没有调用

# 函数的 rest 参数

简单理解为 arguments 的升级强化版。

如同 arguments 那样，但是是使用… 变量名表示，也就是将实参放入该参数数组中，该数组为一个真正的数组，可以使用数组的方法

arguments 作用：函数的重载。根据传递不同的参数个数来实现不同的功能。

它的缺点：是伪数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//原来的arguments
function fun(){
    if(aruments.length==0){
       
    }
    if(aruments.length==2){
       aruments[0]+aruments[1]
    }
}
fun();
fun(1,2);
///1、----使用rest参数
function fun(...arg){
    //...rest参数
    //arg是真数组
  if(arg.length=0){
     //假设用户没有传参
   } 
   //假设用户传递的是2个参数
  if(arg.length==2){
     arg[0]+arg[1]
  }
}
//调用
fun();
fun(1);
fun(2,3);
fun(1,2,3);
//作用：代替arguments参数
//2、确定的使用形参，不确定的参数使用rest参数，即可选的参数使用rest参数来代替
function fun(a,...arg){
    console.log(a+arg[0]);
}
fun(1,2)
fun(1,2,3);

//例子2
function fun(a,b,...arg){
    console.log(a+b+arg[0]);
}

# 对象和数组的扩展运算符

语法：… 对象或… 数组

作用：深度复制对象或数组（合并对象或数组）

  1. 对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var obj1={
        name:"药水哥"
    }
    var obj2={
        sex:"男"
    }
    //需求，将obj1，obj2合并为一个对象
    var obj3={...obj1,...obj2}
    很明显是Ojbect.assign()的一个更简单的写法，语法糖形式。
    语法糖：添加了某种语法，不影响程序功能，但更方便程序员使用。

  2. 数组

    1
    2
    3
    var arr=[1,2,3];
    var brr=[4,3,4];
    var crr=[...arr,...brr];//[1,2,3,4,3,4];

# 数组新增的那 5 个方法（重点）

共同点：写法都类似，只是功能不一样。

  1. forEach
    相当于是 JQ 的 each 方法，遍历数组的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    var arr=[1,2,3,34,45];
    var sum=0;
    //传统的JS的写法
    for(var i=0;i<arr.length;i++){
        sum+=arr[i]
    }
    //forEach,JS，隐式迭代
    arr.forEach(function(item,index){
        //item是数组中的每一项
        //index是数组的索引
    	sum+=item;
    });
    //JQ:
    $.each(arr,function(index,item){
        //item是数组中的每一项
        //index是数组的索引
    	sum+=item;
    });

  2. map
    映射。地图。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    //需求，将数组的每一项数组元素*2并返回生成一个新的数组
    //通过A数组按照某种模式或公式得到一个新的数组，他们之间存在映射关系，称之为影子数组
    var arr=[3,4,54,5,1];
    var brr=[6,8,108,10,2];//新数组
    //语法
    var 影子数组=老数组.map(function(item,index){
        //item指定的是数组的每一项数组元素
        //index指的是索引
    	return 表达式|值
    });
    //传统方式来写
    var arr=[3,4,54,5,1];
    var brr=[];
    arr.forEach(function(item,index){
        brr.push(item*2);
    });
    //map方法来写
    var brr=arr.map(function(item){
        return item*2;
    });
    //箭头来帮忙
    var brr=arr.map(item=>item*2);

  3. filter

  4. every

  5. find

兼容性：在 IE9 以上和现代浏览器中支持

更新于 阅读次数 次

请我喝[茶]~(￣▽￣)~*

tz 微信支付

微信支付

tz 支付宝

支付宝