ES6小解

 

 

ES6

 

var：声明变量

let：声明变量

const：声明常量  不可以修改  常量变量名称一律大写

 

let不可以重复声明一个变量， 它声明的变量的作用域是代码块内部

            let a = 11;

            //let a = 12;     在定义的时候报错

            console.log(a);

     

          for (var i=0; i<3; i++){

                for (var i=0; i<2; i++){

                    console.log("var i = " + i);

                }

            }          var 定义 只能打印          var i = 0；  var i = 1

 

            for (let i=0; i<3; i++){

                for (let i=0; i<2; i++){

                    console.log("let i = " + i);

                }

            }          let定义 能打印出          let i = 0;let i = 1;let i = 0;let i = 1;let i = 0;let i = 1;

          

   1： 字符串新增:

            传统上，JavaScript只有 indexOf 方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了 三种新方法。

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

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

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

            repeat()： 返回一个新字符串，表示将原字符串重复n次.

 

 

            模板字符中，支持字符串插值

            document.write(`Hello ${first} ${last}!`);   //注意引号

 

           常用的 字符串的方法

            str.concat()

            str.slice()

            str.splice()

            str.split()

            str.replace()

            str.indexOf()

            str.search()

            str.match()

            str.length

            str[0]

     新增方法

            let str = "hello world!";

            console.log( str.includes("hello") );

            console.log( str.startsWith("hel") );

            console.log( str.endsWith("!") );

            console.log( str.repeat(3) );               返回新的字符串   把str 重复3次   //hello worle!hello worle!hello worle!

 

            console.log( str.includes("lo", 3) ); //从下标3开始匹配                    匹配从第3位开始是否有 lo 字符串

            console.log( str.startsWith("wo", 6) ); //从下标为6开始                   匹配从第6位开始是否以 wo 开始

            console.log( str.endsWith("wo", 8) ); //到下标8为止（不包括8）     匹配到第7位结束是否以  wo 结尾

 

        //模板字符串，支持字符串插值     字符串的拼接

            var str1 = 'hello';

            var str2 = " Jeff";

            console.log( str1 + " I am " + str2 );

            console.log( `${str1} I am ${str2}` );       注意 这里不是引号   是 波浪号那个键

          

 

 

 

 

2 数组新增：          

          a:   Array.from方法用于将两类对象转为真正的数组：

                    类似数组的对象（array-like object）

                    和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）

                    Array.from()还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理.

        

            var obj = {

                "0":"张三",

                "1":"李四",

                "2":"王五",

                "length":3

            }

            var arr = Array.from(obj);

            console.log(arr);

 

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

            var arr2 = Array.from(arr, function(n){

                return n*n;

            })

            console.log(arr2);

 

            /*

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

            */

            var arr = Array.of(3, 11, 8);

            console.log(arr); //[ 3, 11, 8 ]

 

            /*

         b：   find()和findIndex()

            数组实例的find方法，用于找出第一个符合条件的数组成员。

            它的参数是一个回调函数，所有数组成员依次执行该回调函数，

            直到找出第一个返回值为true的成员，然后返回该成员。

            如果没有符合条件的成员，则返回undefined。

            */

            var arr = [2,1,-2,4,5,7,-3,6];

            var v = arr.find(function(n, i, array){

                console.log(arguments.length); //3

                console.log(n);

                console.log(i);

                console.log(array);

                return n<0; //当数组中某个元素小于0时，则返回true

            });

            console.log(v);

 

            var index = arr.findIndex(n=>n<0);

            var index = arr.findIndex(function(n){return n<0;});

            console.log(index);

 

3 函数新增：

         

a:设置默认参数     

           //函数默认参数          

            function fn1(n){

                return n || "千锋";

            }

            console.log( fn1("张三") );

 

            //ES6默认参数

            function fn2(n="千锋"){

                return n;

            }

            console.log( fn2() );

 

 

b:  //...  :扩展运算符   rest语法

            var arr = ["张三","李四","王五"];

            function fn3(a,b,c){

                console.log(a, b, c);

            }

            fn3(...arr);

 

            //合并数组

            var arr1 = ["a", "b"];

            var arr2 = ["c", "d"];

            var arr3 = [...arr1, ...arr2];

            console.log(arr3); // [ "a", "b", "c", "d" ]

 

 

 

c: //箭头函数 =>

 

            //一个参数， 一个返回值

            function func(n){

                return n;

            }

            var func1 = function (n){

                return n;

            }

            //等价于:

            var func2 = n=>n;

            console.log( func2("李四") );

 

            //参数个数是0或者多个,则需要写括号

            var func3 = (m,n)=>m+n;

            console.log( func3(1,1) );

 

            //执行代码如果有多行则需要添加大括号

            var func4 = (m,n)=>{

                var s=m+n;

                return s;

            };

            console.log( func4(3,4) );

 

 

            //如果直接返回对象， 则需要加上括号()

            var fn = id => ({id: 11, name: "zhangsan"});

          

               如果箭头函数里面没有大括号，表示有返回值

         ES6中，不再出现全局的this指向window

 

           d: //回调函数

            //函数的函数名既是函数名， 也是指向该函数的对象

            function fn1(f){

                console.log("fn1");

                f();

            }

            fn1( function(){

                console.log("哈哈")

                }

            );

 

            一般的遍历:

            //while

            //do-while

            //for

            //for-in

            //for-of

            //forEach

 

            //forEach

            var arr = [1,3,5,7,9];

            arr.forEach(function(n,i){

                console.log(n, i);               n 是值 ，  i 是键名

                //break;        //forEach中不能使用 break,continue,return

            })

 

            for-of

            for (let n of arr){

                console.log(n); //值

            }

            for (let i of arr.keys()){

                console.log(i); //下标

            }

            for (let [i,n] of arr.entries()){

                console.log(n, i);        //值和下标的集合

            }

 

4：对象：

          1： Object.is()用来比较两个值是否严格相等。

              它与严格比较运算符（===）的行为基本一致，

              不同之处只有两个：一是+0不等于-0，二是NaN等于自身

          2：Object.assign() 方法用来将源对象（source）的所有可枚举属性，

                复制到目标对象（target）。它至少需要两个对象作为参数，

                第一个参数是目标对象，后面的参数都是源对象。

                只要有一个参数不是对象，就会抛出TypeError错误。

 

                   a：合并对象

                         从第二个参数开始合并到第一个参数；若有相同属性，覆盖前面的，若属性不同，则添加进第一个参数；

                         能返回新的对象，第一个对象并不改变；

            var obj1 = {a:1, b:2};

            var obj2 = {b:3, c:4};

            var obj3 = {b:22, c:55, d:6};

     

            var obj = Object.assign(obj1, obj2, obj3);

            console.log(obj); //{ a: 1, b: 22, c: 55, d: 6 }

            console.log(obj1); //{ a: 1, b: 22, c: 55, d: 6 }

            console.log(obj2); //{ b: 3, c: 4 }

            console.log(obj3); //{ b: 22, c: 55, d: 6 }

 

           b:克隆对象

            function cloneObj(obj){

                return Object.assign({}, obj);

            }

            console.log( cloneObj({name:1,age:2}) ); //{ name: 1, age: 2 }

 

                    

 

 

 

 

5： Set:

           Set的属性和方法:

                size : 数量

                add(value)：添加某个值，返回Set结构本身

                delete(value)：删除某个值，返回一个布尔值，表示删除是否成功

                has(value)：返回一个布尔值，表示该值是否为Set的成员

                clear()：清除所有成员，没有返回值

            

        a:  console.log(set.size); //6

 

            var set = new Set();

            console.log(set); //[  ]

 

       b:  //链式写法

            set.add(2).add(3).add(8);

            console.log(set); //[ 2, 3, 8 ]

 

       c:  set.delete(3);

            console.log(set); //[ 2, 8 ]

 

            console.log( set.has(8) ); //true

 

       d:  set.clear();

            console.log(set);  //[  ]

 

 

            //for-of

            var set = new Set([1,3,2]);

 

            for (let n of set){

                console.log(n);

            }

 

 

            //数组的去重问题

            var arr = [1,2,1,2,3,4,3,4,6,6,2];       

            var set = new Set(arr);

            var newArr = new Array(...set);

            console.log(newArr); //[ 1, 2, 3, 4, 6 ]

 

 

, 冒泡排序

          

  var arr = [2,3,1,5,7,9,4];

            for (let i=0; i<arr.length-1; i++){  //趟数

 

                for (let j=0; j<arr.length-1-i; j++){

                    if (arr[j] > arr[j+1]){

                        var tmp = arr[j];                                        交换 方法一

                        arr[j] = arr[j+1];

                        arr[j+1] = tmp;

 

                       [arr[j], arr[j+1]] = [arr[j+1], arr[j]];          方法二：         解构赋值      最简单

 

                        arr[j] = arr[j]^arr[j+1];                              方法三：          位运算

                        arr[j+1] = arr[j]^arr[j+1];

                        arr[j] = arr[j]^arr[j+1];

                    }

                }

            }

 

 

 

 

6:map

          Map 是一个“超对象”，其 key 除了可以是 String 类型之外，还可以为其他类型（如：对象）

 

            他的方法和 Set 差不多:

             size：返回成员总数。

             set(key, value)：设置一个键值对。

             get(key)：读取一个键。

             has(key)：返回一个布尔值，表示某个键是否在Map数据结构中。

             delete(key)：删除某个键。

            clear()：清除所有成员。

 

             keys()：返回键名的遍历器。

            values()：返回键值的遍历器。

            entries()：返回所有成员的遍历器。 （默认值） 

 

          var m = new Map();

          m.set("0","小狗");

          m.set("1","小猫");

          m.set("2","小猪");

          console.log(m);     打印出一个类似关联数组的Map数组  {"0" => "小狗", "1" => "小猫", "2" => "小猪"}

 

          for( let key of m.keys() ){ console.log( key );

          for( let k of m.values() ){ console.log( k );

 

 

7：解构赋值

          数组：

            var [a,b,c] = [1,2,3];

            console.log(a);

            console.log(b);

            console.log(c);

 

            var [a,b,c] = [11,22];

            console.log(a);

            console.log(b);

            console.log(c);

 

            var [a,[b,c],d] = [111,[222,333],666];

            console.log(a);

            console.log(b);

            console.log(c);

            console.log(d);

 

 

            对象：

            var {name,age} = {name:"张三",age:33};

            console.log(name); //张三

            console.log(age); //33

 

 

            //交换两个变量的值

            var a = 10;

            var b = 11;

            [a,b] = [b,a];

            console.log(a, b); //11 10

 

            function func([x,y]){

                return x - y

            }

            console.log( func([19,11]) );

 

解析结构：

     

let person = {
    name : "张三",
    age : 18,
    lik : "打游戏",
    eat : function () {
        console.log("什么都吃");
    }
};
//ES5中
var name = person.name;
var age = person.age;
//E6中
let {name,age,lik,eat} = person;
console.log(name);

 

     

class

     

 

     继承：

     

 

 

 

          Promise 避免回调函数里面嵌套回调函数的问题，

          不用的话 可读性差，不方便维护

          then 中 若失败的回调不用存在 可以不写