day31(Es6新特性)this,json与字符串相互转换,箭头函数,综合案例,解构赋值,字符串新增方法

这里写目录标题

  • let
    • 特点
  • const
    • 特点
    • 注意点一
    • 注意点二
  • this
    • 与事件体连用
    • 与普通方法连用(除了事件体及构造方法)
  • bind
    • 作用 参数 以及 代码演示
  • json对象和字符串的相互转换
    • 字符串转json对象
    • json对象转字符串
  • for。。。in 与 for。。。of
    • for...in
    • for...of
  • 箭头函数
    • 特点以及代码演示
  • 综合案例:五星好评
    • 代码演示
  • 解构赋值
  • 字符串新增方法
    • includes
    • startsWith
    • endsWith

let

特点

let是定义变量的关键字,var的作用相同
    let a = 123;
    console.log(a);
特点:
    1.必须先定义后使用
    2.不能重复定义
    3.块级作用域,被let修饰的变量,在该作用域下,变量不会丢失,也不能在该作用域外使用
            {   
        let a = 123;
    }
    console.log(a);
    var oLis = document.querySelectorAll("li");

    for(let i=0; i<oLis.length; i++){
        oLis[i].onclick = function(){
            console.log(i);
        }
    }
    console.log(i);
    4.暂时性死区:当内部变量与外部变量同名时,内部变量屏蔽外部变量(暂时性死区(TDZ:Temporal Dead Zone):实际上,在块作用域开始的时候,let所声明的变量已经存在,但是他不允许被访问,直到该变量的声明语句出现,从块作用域开始到该变量声明语句间的区域被称为暂时性死区)
    let a = 123;
    {
        let a = 456;
        console.log(a);
    }
    console.log(a);

const

特点

1.const 修饰的变量称为只读变量(对于数组等容器来讲主要在于不能
	用重新赋值的办法来改变其内容,也即不能改变或产生新的地址)(无
	论是内置基本类型还是引用类型,const 修饰的是栈空间存储的内
	容)
2.必须初始化
3.必须先定义后使用
4.不能重复定义
5.块级作用域
6.暂时性死区

软性规则:习惯上只读变量名大写

注意点一

const arr = [6,4,7,3,8];
    arr[1] = 6666;--------------const定义数组arr,此处修改他
    	的第一个元素的数值是可以的,并不会报错,因为const修饰的是
    	引用类型存储在栈空间的地址,而不是它存储在堆空间的数据本
    	身,当我们直接去改变数据本身是可以改变的
    arr = [6,7,8];----------------------这里的修改则会报错,因
    	为直接赋值去掉数组元素是改变了栈空间中堆空间数据存放的地
    	址,而栈空间的内容正是被const所修饰,而无法改变的(但此处
    	使用api则可以在不报错的情况下修改数组元素及其数值,因为
    	api是在原数组的基础上进行修改,并不会产生新的地址)
	console.log(arr);

注意点二

var,let,const的异同?

    1.都是用来定义变量的关键字
    2.var自带声明提升
    3.const修饰只读变量且必须初始化(只修饰存储在栈空间的内容)
    4.let和const的共同点:
        必须先定义后使用,
        不能重复定义,
        块级作用域,
        暂时性死区。

this

this:函数体内的内置对象(只能在函数体内使用)

与事件体连用

与事件体连用->代表触发该事件的元素本身
   document.onclick = function(){
        console.log(this);
    }

    var oInput = document.querySelector("input");
    oInput.onblur = function(){
        console.log(this.value);
    }

与普通方法连用(除了事件体及构造方法)

与普通函数连用(除了事件体以及构造方法)->调用该普通函数的对象
function fun(){
        console.log(this);
    }

    window.fun();

    let json = {
        a:123,
        fun:function(){
            console.log(this);
        }
    }

    json.fun();

bind

作用 参数 以及 代码演示

作用:修改事件体内this的指向,bind是函数对象的一个函数
参数:函数对象.bind(希望this指向的目标元素)
代码展示:
     let fun = function(){

    }
fun.bind()--->        function(){
                                
                            }.bind() 
                            
案例:
style:
     #box{
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
html:
    <div id="box"></div>
script:
    let oBox = document.querySelector("#box");
    document.onclick = function(){
        this.style.display = "none";
    }.bind(oBox);

json对象和字符串的相互转换

字符串转json对象

将json格式字符串转换为JSON对象通常我们称之为JSON的反序列化
语法:JSON.parse(json格式字符串)----------常用(转成的json对象通过返回值带回)
    let str = '{"name":"laowang","age":18}';
    let json = JSON.parse(str);
    console.log(json.name,json.age);

json对象转字符串

将json对象转化为json格式字符串形式通常我们称之为JSON的序列化
语法:JSON.stringify(json对象)(转成的json对象形式的字符串通过返回值带回)
    let json = {"name":"laowang","age":18};
    let str = JSON.stringify(json);
    console.log(str);

for。。。in 与 for。。。of

for…in

功能:遍历下标或json的key,常用于遍历json对象(也可以用来遍历数组等,但是如果数组对象的原型链上添加了自定义属性,需要通过hasOwnProperty()判断属性是否属于数组本身,forin的特性就是会吧原型链上的自定义属性一起遍历)
语法:for(let 索引 in 容器){
       循环体内的索引:a.数组是下标 b.json就是key
    }
 let json = {
        "name":"老王",
        "age":18
    }
for(let index in json){
        console.log(json[index]);
    }

for…of

功能:遍历元素内容(注意事项:不能遍历json)
    常用于遍历没有下标的容器-------------set(集合),map(映射)
    let arr = [6,5,7,"heihei",8,9,3];

    for(let item of arr){
        console.log(item);
    }

箭头函数

特点以及代码演示

箭头函数:匿名函数的另一种写法
    let f = function(){
        console.log("f");
    }
    let f = ()=>{
        console.log("f");
    }
    f();
    document.onclick = ()=>{
        console.log("haha");
    }
特点:
    1.当箭头函数只有一个参数时,可以省略参数的()
    let f = a=>{
        console.log(a+5);
    }
    f(8);

    2.当函数体只有一条语句时,可以省略{}
    let f = a=> console.log(a+5);
    f(8);

    3.当函数体只有一条语句时,则自带return
    let f = a => a + 13;
    console.log(f(10));
关于this:
    箭头函数的this问题--->代表箭头函数父元素的前缀/父元素的this指向(箭头函数没有this指向,如果上下文存在函数,会继承上下文函数的this指向,如果上下文没有函数,则继承全局变量的前缀,也即window)
    document.onclick = ()=>{
        console.log(this);-----------------此处this代表的不是document,而是window,因为函数document的父元素前缀是window
    }
    
    let stu = {
        "name":"凢凢",
        "show":()=>{
            console.log(this);
        }
    }

    stu.show();----------------被调用时,函数show里面的this代表的是window,是函数show所在的父元素stu的前缀window

综合案例:五星好评

代码演示

style:
    * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 27px;
            height: 27px;
            background: url(img/star.gif) no-repeat top center;
            float: left;
        }    
html:
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
script:
    var hbs = document.getElementsByTagName("div");
    for (let i = 0; i < hbs.length; i++) {
        hbs[i].onmouseover = function () {
            for (let j = 0; j < hbs.length; j++) {
                if (j <= i) {
                    hbs[j].style.backgroundPosition = "bottom center";
                } else {
                    hbs[j].style.backgroundPosition = "";
                }
            }
        }
        hbs[i].onclick = function () {
            for (let h = 0; h < hbs.length; h++) {
                if (h <= i) {
                    hbs[h].style.backgroundPosition = "bottom center";
                } else {
                    hbs[h].style.backgroundPosition = "";
                }
                hbs[h].onmouseover = null;--------------点击事件之后,所有的星星需要循环解绑划入事件
            }
        }
    }

解构赋值

解构赋值:解析结构进行赋值
    1.定义变量时批量赋值
        a.数组方式赋值
            let x,y;
            x = 1;
            y = 2;
            let [x,y] = [1,2];
            console.log(x,y);
        b.json对象方式赋值--->可以去掉json访问属性时的前缀:let {key1,key2} = json对象;
        
            上下文环境:在访问json对象的属性时,可能出现很长的前缀,比如:xxx.xxx.xxx.xxx.xxx.name
            let stu = {
                "name":"马浩奇",
                "age":18
            }
        
            let {name,age} = stu;
        
            console.log(name,age);
    2.交换两个变量的值
    let x,y;
    x = 123;
    y = 456;

    [x,y] = [y,x];

    console.log(x,y);-------------此时X,Y原本的赋值已经被交换,x = 456,y = 123;
    补充:无参交换
    var a = 1,b = 2;
        a = a + b;
        b = a - b;
        a = a - b;
        console.log(a,b)---------------此时a,b值发生交换

字符串新增方法

includes

功能:判断字符串是否包含目标字符串
参数:字符串.includes("目标字符串")
	let str = "hello world.js";
	console.log(str.includes("yingying"));

startsWith

功能:判断字符串是否以目标字符串作为开头
参数:字符串.startsWith("目标字符串")
	let str = "hello world.js";
	console.log(str.startsWith("el"));

endsWith

功能:判断字符串是否以目标字符串作为结尾(常用来判断文档后缀名,来判断文档类型)
参数:字符串.endsWith("目标字符串")
	let str = "hello world.js";
	console.log(str.endsWith(".js"));

你可能感兴趣的:(es6,json,前端,javascript,css,html5)