【ES6】---JavaScript(一)

一、新增数据类型Symbol

    

概念:

    Symbol代表独一无二的

    Symbol类型的值通过Symbol函数来生成,同时Symbol函数返回的值是唯一的

    Symbol函数可以接收字符串作为参数,但是即使相同参数返回的值也是唯一的

作用:

    属性私有化

    数据保护

没有参数的情况
var s1 = Symbol();
var s2 = Symbol();
s1 === s2 // false


有参数的情况
var s1 = Symbol("foo");
var s2 = Symbol("foo");

s1 === s2 // false



var mySymbol = Symbol();

// 第一种写法var a = {};
a[mySymbol] = 'Hello!';

// 第二种写法var a = {
[mySymbol]: 'Hello!'
};

// 第三种写法var a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });


Object.getOwnPropertySymbols(obj)  枚举symbol的key值
注意:Symbol作为对象的key值得时候不能被for in进行遍历

  

二、块级作用域

    概念:

        在ES6中凡是{}包裹的代码都是块级作用域,凡是在块级作用域中用let const声明的变量都在有一个暂时性死区

{
  let a = 20;
}
console.log(a);//报错

  

三、var  let const 变量声明

    

    对比不同

var
    支持变量声明与解析

    不支持块级作用域

    允许重复声明

let
    不支持变量声明与解析

    支持块级作用域

    不允许重复声明

    用let声明的变量或者方法只会在代码块中有效
    {
        let a = 10;
       var b = 20;
    }

    console.log(a);//报错

const

    不支持变量声明与解析

    支持块级作用域
    
    不允许重复声明
    
    声明常量,一旦确定不允许被修改

    声明常量必须赋值  不能跟var 一样声明后再定义

  

四、解构赋值

        概念:

                允许按照一定模式,从对象和数组中提取值

// 数组解构
    let [a,b,c] = [1,2,3];

// 对象解构
    let {name,age} = {name:"张三",age:19};
//  注意对象解构  key值必须一一对应


//  对象解构+别名
let {name : _name , top : _top } = {name:"张三",top:20}
//  因为name和top属于关键字,因此我们可以通过别名的方式来更改名称

//  多重解构

let {obj : { name }, arr:[ a, b]} = {obj:{name:"张三"},arr:[10,20]}


//  案例:
    let {letf:l , top: t} = document.getElementById("box");

  

五、扩展用算符

    概念:

        将数组或者对象转换成参数序列  使用逗号分隔的序列

    作用:

            1、数组、对象的合并

            2、函数剩余参数

            3、替代arguments

// 数组合并
var arr  = [10,20,30];
var arr1 = [40,50,60];
var newArr = [...arr,...arr1];
// 展开数组
console.log(Math.max(...arr));

// 对象合并
var obj = {100,height:200};
var obj2 = {left:100,top:200};
var newObj = {...obj,...obj2};

  

六、字符串模板

    

   1、字符串太长需要换行怎么办?

// 常规解决方案:
          var a = '<div>'+
                    '<span>'+num+'</span>'+
                  'div>';
// ES6神器:
var b = `
    <div>
         <span></span>
    </div>
  `;

    2、字符串拼接太麻烦怎么办?

// ES6神器(字符串模板):
   var phone = 18200000000;
   var intro = `my name is pine, my phone is ${phone}`; 
   console.log(intro); //${phone}被替换成18200000000
   /* 
     说明:
          1、使用 `` 反单因号  代替 '' 或者 ""
          2、使用 ${变量} 实现变量拼接
    */

      3、includes  字符串搜索

// 之前使用indexOf进行查找,利用的是indexOf方法的特性,找打了返回下标,
// 找不到返回-1,所以每次你需要这么写:
     var str = 'abcd';
     if( str.indexOf('c') > -1 ){}  //需要判断是否>-1
     
 // ES6神器:includes方法
 // str.includes(查找的内容);  找到返回true,找不到返回false
   var str = 'good method!';
   str.includes('method'); //true

  4、判断首尾 startsWith endsWith

 /*
    startsWith用于判断是否位于头部,
    endsWith判断是否位于尾部,
     可以说这两个方法是includes方法的扩展
   */
   let  str = 'how are you?';
   str.startsWith('how');//true
   str.endsWith('?');//true

  

5、repeat 字符串重复(懒人福利)

 //str.repeat(n); 将字符串重复n次(n是整数)

  let str = 'money';
  str.repeat(2); // 'moneymoney'

  

七、对象新增的方法

    1、对象的简写

var a = 10;
var obj = {a}
//等价
var obj = {a:10};

//当key值与value值一样的时候我们可以写一个

    2、Object.is

//判断2个对象是否指向同一个内存地址
var obj = {a:1,b:2};
var obj1 = obj

Object.is(obj,obj1);// true

      3、Object.assign

/Object.assign 合并对象
var obj = {name:"Alley",age:18};
var obj2 = {sex:"男"}

var newObj = Object.assign(obj,obj2);
console.log(newObj); //{name:"Alley",age:18,sex:"男"}

  

【ES6】---JavaScript(二)

1、路在何方? 路在脚下 2、何去何从? 每个人都在探索,未来的方向在何处。如果说某些方向是世人已经公认的,那么就先按照公认的去走吧(ps:站在巨人的肩膀上看世界会清晰)。 如果说方向,当今世人还不清晰准确。那么就大胆往前走吧,对与错并不重要。心中的方向更加重要。
原文地址:https://www.cnblogs.com/yuanjili666/p/11683393.html