关于ES6的一些新特性的学习

一、关于变量

ES5

1.只有全局作用域变量和函数作用域变量

2.“变量提升”(当程序进入一个新的函数时,会将该函数中所有的变量的声明放在函数开始的位置。仅仅会提升变量的声明,不会提升变量的赋值)

ES6新增:块级作用域变量

1、let定义块级作用域变量

1、没有变量的提升,必须先声明后使用

2、let声明的变量,不能与前面的let,var,conset声明的变量重名

    {
        {
        //console.log(a)//报错  必须先声明再使用
        let a = 10;//只在当前大括号可以使用
        var b = "abc";//全局作用域变量
        console.log(a);//10
        //let a = 10//报错 Uncaught SyntaxError: Identifier ‘a‘ has already been declared
        console.log(b);//bac
        }
        console.log(b);//abc
        // console.log(a);//报错 只能在大括号中使用
    }

2、const 定义只读变量

1、const声明变量的同时必须赋值,const声明的变量必须初始化,一旦初始化完毕就不允许修改

2、const声明变量也是一个块级作用域变量

3、const声明的变量没有“变量的提升”,必须先声明后使用

4、const声明的变量不能与前面的let, var , const声明的变量重名

    {
        const VERSION = "1.2.3"
        console.log( VERSION )//也只能在括号里使用
    }
    //console.log( VERSION )//VERSION is not defined  报错  也是只读变量

二、关于函数

ES6可以给形参函数设置默认值

就是说,当我们调用函数时,如果设置了默认形参,即使没给函数传入实参,那么函数的实参就是默认形参。

function fun2(a=1,b=2){
    console.log(a,b)//1,2
}
fun2(11,22);//11 22
fun2(100);//100 2

在构造函数中也可是使用的

function Person(name,age,sex="男"){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
var p1 = new Person("张三",20);
console.log(p1)// Person {name: "张三", age: 20, sex: "男"}
var p2 = new Person("赵四",30);
console.log(p2)// Person {name: "赵四", age: 30, sex: "男"}
var p3 = new Person("翠花",20,"女");
console.log(p3)// Person {name: "翠花", age: 20, sex: "女"

箭头函数

//正常函数
var fun3 = function(a){
    console.log(a);
}
//箭头函数
var fun3 = (a)=>{console.log(a);}
fun3(999);

比如我们用箭头函数计算一个1到100的和

var fun4 = ()=>{
    var sum=0;
    for(var i = 0; i<=100; i++){
        sum = sum+i
    }
    return sum;
}
console.log(fun4());//1000
var person = {
    name:"tom",
    sayHi:()=>{
        console.log(this);//window对象
        console.log("hello,everyone. my name is "+this.name);//hello,everyone. my name is window的name
    }
}
person.sayHi();

同时复习一下this的认识

1.在函数体外,this指的就是window对象

2.在函数替内,谁调用函数this就指向谁

3.在构造函数中,this指的是新创建的对象

4.在html标签中,this指的是当前的这个标签元素

5.在ES6中,对于箭头函数,要看它在哪里创建的,和当前函数的作用域。

三、关于数组的展开运算

在数组之前加上三个点(...)

var arr = [1,2,3,4,5];
console.log(arr);//[1, 2, 3, 4, 5]
console.log(...arr)// 1 2 3 4 5

可以根据数组的展开运算用数组给函数批量的传参

function fun5(a,b,c,d,e,f){
    //如果没有展开数组,打印结果如下
    //console.log(a,b,c,d,e,f)//[1, 2, 3, 4, 5] undefined undefined undefined undefined undefine
    console.log(a,b,c,d,e,f)//11 22 33 44 55 66
    //return a+b+c+d+e+f
}
//fun5([1,2,3,4,5])
fun5(...[11,22,33,44,55,66])

四、关于apply和call

apply和call,都是对象本身没有某个属性或者方法,去引用其他对象的属性或方法,也就是说两者都可以改变this的属性

不同之处

apply(this的指向,数组/arguments)

call(this的指向,参数1,参数2,参数3)

var name ="window的name";
var obj = {
    name:"obj的name",
    showName:function(v1,v2,v3){

        console.log(v1,v2,v3)
    }
}
obj.showName();
obj.showName.apply(window,[10,20,30]);//10 20 30
//apply括号里的是谁,调用的前面的函数里面的this就是谁
obj.showName.call(window,10,20,30)//10  20  30
var color = "yellow";
function showColor(){
    console.log(this.color)
}
var obj = {
    color:"red",
}
showColor();//yellow
showColor.apply(obj);//red
showColor.call(obj);//red
showColor.apply(this);//yellow
showColor.call(window);//yellow

五、关于解构赋值

数组的解构赋值

    var [a,b,c]=[11,22,33]
    console.log(a,b,c)//11 22 33

    var [e,[f,g],k] = [1,[2,3],5]
    console.log(e,f,g,k)//1 2 3 5

对象的解构赋值

    var{name,age}={name:"张三",age:"20"}
    console.log(name,age)//张三 20

以前我们互换两个变量的值,需要借助第三个变量,利用解构赋值,就方便很多了

    var f1 = 88;
    var f2 = 99;
    [f1,f2]=[f2,f1];
    console.log(f1,f2)//99 88

解构json

    var jike = {"name":"tom","age":"23","sex":"男"};
    var {name,age,sex}=jike;
    console.log(name,age,sex)//tom 23 男

    function cal(a,b){
        var ret1 = a+b;
        var ret2 = a-b;
        var ret3 = a*b;
        var ret4 = a/b;
        return [ret1,ret2,ret3,ret4]
    }
    var [r1,r2,r3,r4] = cal(10,5);
    console.log(r1,r2,r3,r4)//15 5 50 2

六、string中加入include方法

includes("字符"); 用于判断字符串中是否包含某个字符

存在返回true 不存在返回false

includes("字符",startIndex); 用于判断字符串中下标startIndex是否是某个字符

是返回true 不是返回false

var str = "hello";
console.log( str.includes("e") )//true
console.log( str.includes("e",3) );//false

七、创建对象

ES5中创建对象的几种方法

1.字面量法

2.工厂模式

3.构造函数

4.组合方式 构造函数+原型模式

ES6中创建对象

class 类名{
        //肯定存在一个构造函数
        //如果不写构造函数,有一个默认的构造函数,内容为空
    constructor(){}  //注意:这里不需要逗号
        //下面是函数属性 比如属性有run  dark
    run(){}
    dark(){}
}

举个例子

class Person{
    //肯定存在一个构造函数
    constructor(name,age,sex,nativePlace){
        this.name=name;//注意:这里是分号
        this.age=age;
        this.sex=sex;
        this.nativePlace=nativePlace;
    }
    //下面是函数属性
    eat(){console.log("红烧排骨")}
    study(){console.log("英文")}
    play(){console.log("敲代码")}
}

var sunShine = new Person("fanfan","22","女","黑龙江");
console.log(sunShine)//Person {name: "fanfan", age: "22", sex: "女", nativePlace: "黑龙江"}

八、继承

class Animal{
    constructor(age,sex){
        this.age = age;
        this.sex = sex;
    }
    eat(){
        console.log("吃吃吃")
    }
}
class Dog extends Animal{
    constructor(name,age,sex){
        //super指的是父类,先调用父类的构造函数,然后再去添加属性
        super(age,sex)
        //console.log(super);//不能打印只能使用
        this.name=name;
    }
    bark(){
        console.log("哇哇哇")
    }
    //重写:在子类中重新定义父类中的方法
    // eat(){
    //  console.log("喝喝喝")
    // }
}
var d = new Dog("妞妞","男",5)
console.log(d)
d.bark();
d.eat();
//ES6的继承,有两条继承链,构造函数  和  原型函数条
console.log( Dog.prototype)//Animal {}
console.log( Dog.constructor==Animal.constructor)//true
console.log( Dog.prototype.__proto__==Animal.prototype)//true

九、Set()和Map()

set()有序列表集合(没有重复)

Set()是指有序列表集合 (set中的元素是没有重复的)

set包含的方法

add()、has()、delete()、clear()等

add()添加

var s = new Set();
s.add(1);
s.add(window);
s.add(true);
s.add(1);
console.log(s);//一共三个元素
console.log(s.size)//数组的长度是3

delete(value) 删除指定元素

//结合上栗
s.delete(window);
console.log(s)   //1  true
console.log(s.size)   //2

has( value )用来判断指定的值是否在set集合中

存在返回true 不存在返回false

//结合上栗
console.log( s.has(1) )//true

clear() 同来清空set集合的

//结合上栗
s.clear()
console.log(s)//此时为空

举个例子:生成10个1-20的随机数,要求不可以重复

var arr3 = new Set();

 while(arr3.size<10){
    var yuan = parseInt(Math.random() * (20 - 1 + 1) + 1);
    arr3.add(yuan);
 }
 console.log(arr3)

Map() 用来存放键值对的集合 key/value

var map = new Map();
map.set("name","张三");
map.set("age",20);
console.log(map)    //Map {"name" => "张三", "age" => 20}

get(key)根据key值取得value

console.log( map.get("name"))//张三

has() 判断是否存在某个键值对

存在返回true 不存在返回fasle

console.log( map.has("age") ) //true
 console.log( map.has("age1") ) //false

clear() 清空集合


map.clear();
console.log(map);//Map {}

转自:https://www.jianshu.com/p/b3f3afcae230
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文地址:https://www.cnblogs.com/lxl0419/p/8428808.html

时间: 2024-10-10 11:20:02

关于ES6的一些新特性的学习的相关文章

ios开发ios9新特性关键字学习:泛型,逆变,协变,__kindof

一:如何去学习?都去学习什么? 1:学习优秀项目的设计思想,多问几个为什么,为什么要这么设计,这么设计的好处是什么,还能不能在优化 ,如何应用到自己的项目中 2:学习优秀项目的代码风格,代码的封装设计思想,为什么要这么设计,这么设计的好处是什么,还能不能在优化 ,如何应用到自己的项目中,每行代码都要用心去写,每一行代码都要力求使最简洁的 3:学习别人遇到问题是如何分析问题,解决问题的方法是什么 4:遇到新东西应该如何去学习:1:先研究要学习的东西作用是什么 ,有什么好处  2:如何使用:具体的语

ES6语法的新特性

ES6 就是ECMAScript 6是新版本JavaScript语言的标准.虽然目前已经更新到ES7,但是很多浏览器还不知处ES7语法,该标准仍在更新中,但目前部门网站都指出ES6的语法.目前ES6也是使用最多的最新的javaScript语言标准.要查看ES6的支持情况请点此. 在2009年ES5问世以后,javaScript的标准就一直没有更新.从那时起ES标准委员会就已经开始筹划新的ES标准,在2015年发布了ES6.ES6是ECMAScript 的第6个版本. 经过持续几年的磨砺,它已成为

Java8部分新特性的学习

Java8中的新特性 一.Lambda表达式 Lambda表达式可以理解为一种可传递的匿名函数:它没有名称,但又参数列表.函数主体.返回类型,可能还有一个可以抛出的异常列表. 匿名:和匿名类类似的,它没有明确的名字 函数:Lambda函数不属于某个特定的类,但和方法一样都具有参数列表.函数主体.返回类型,还可以有抛出的异常列表 传递:Lambda表达式可以作为参数传递给方法或者存储在变量中. Lambda表达式的基本形式: (parameters)-> expression 或(paramete

Java 8新特性:学习如何使用Lambda表达式,一看必懂

我将分为两篇系列文章来描述了使用Java 8的新特性 - lambda表达式. 目录 介绍 我们为什么需要lambdas? Lambdas的语法 功能接口 方法参考 构造函数参考 可变范围 默认方法 结论 介绍 Java 8版本是当前java界流行最广的一个版本.它的主要改进是在面向对象的基础上增加了对函数式编程的支持.在本文中,我将展示lambda的基本语法,并阐释几种适用的上下文环境. 我们为什么需要lambdas? lambda表达式是一个可以传递的代码块,允许您稍后执行它,只执行一次或多

Java8 的一些新特性的学习理解

近期在学习队列相关的一些知识,在学习过程中发现Iterable<T>接口中新增了两个新的方法,出于好奇,就想知道这是什么东东,干什么用的.俗话说:实践出真知,所以就有了以下反复的测试. 先看下新增的这两个方法: 1 default void forEach(Consumer<? super T> action) { 2 Objects.requireNonNull(action); 3 for (T t : this) { 4 action.accept(t); 5 } 6 } 1

ES6中的新特性

本人最近学习es6一些方法,难免有些手痒,想着能不能将这些方法总结下,如下 1.数组的扩展 1)首先什么是伪数组 无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们,例如:函数的argument参数,调用getElementsByTagName,document.childNodes等等 2.函数扩展 document.querySelectorAll('元素') 相当于 document.getElementsByTagName('元素') 一样

postgresql9.4新特性jsonb学习

先科普下概念:PgSQL9.4 新增 JSONB 数据类型, JSONB 同时属于 JSON (JavaScript Object Notation) 数据类型,jsonb 和 json 的输入数据几乎完全通用,最大的差别体现在效率上,json 存储的数据几乎和输入数据一样,存储的是未解析的数据,调用函数时使用效率较低; 而 jsonb 存储的是分解的 binary 格式数据,使用时不需要再解析了,因此使用上效率较高; 另一方面 json 在写入时较快,而 jsonb 写入时由于需要转换导致写入

Java8 新特性 Lambda学习

import java.util.ArrayList;import java.util.Collections;import java.util.IntSummaryStatistics;import java.util.List;import java.util.stream.Collectors; public class TestLambda{        public static void main(String[] args)    {        List<Employee>

es6的常用新特性

https://www.ctolib.com/topics-120840.html