关于javascript:ES6新特性

ES6个性

ES6(ECMAScript2015)也就是ECMAScript6。因为2015年发行第六版，所以有两个名字ES6或者ECMAScript。ES6之后，ECMA每年都会准时更新，之前不会准时更新

获取`div`对象

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

let items = document.getElementsByClassName("item"); //将class为item的元素放在items，造成一个list items是一个外面放div的块对象数组

// 遍历这个list
for(let i=0;i<items.length.i++){
    items[i].onclick = function(){
        items[i].style.background = "pink";
    }
}

`let`和`const`的相同点

都是只在申明的块级作用域内有用

let和const的不同点:

let申明的变量能够扭转，而且是类型和值都能够扭转！，const申明的常量不能扭转，必须一旦申明就立刻初始化。
```
let x = 3;
x = 4;
===============
const x = 4; // 之后就不能在变了
```

ES6中的let和const取代了ES5中的var，让代码更平安。

`const`个性

const润饰的常量不能做批改，But,const润饰的数组和对象却是能够批改…

const NAME = 'fenn';
NAME = 'jiaying';  // 谬误

const NAMES = ['wei','fenn','jiaying'];
NAME.push('wang')

数组和对象的解构

// 数组的解构
const F4 = ['刘备','关羽','张飞'];
let [L,G,Z] = F4; // 实现解构，L变量存储的是刘备

// 对象的解构
const zhao = {
    name:'刘备',
    age:23,
    work:function(){
        console.log('三顾茅庐');
    }
}
const {name,age,work} = zhao; 
console.log(name);
work(); // 函数执行;

// 函数和对象解构的联合
function connect({host="99.11.6.106",username,password,port}){ //形参也能赋默认值
    console.log(host);
    console.log(username);
    console.log(password);
    console.log(port);
}

connect({
    host:"localhost",
    username:"root",
    password:"root",
    port:3306,
});

模板字符串“

也是一种字符串.这种字符串中能够存在换行符

let str = `<ul>
            <li>刘备</li>
            <li>关羽</li>
            <li>张飞</li>
            </ul>`;

另外，能够更不便的进行字符串拼接

let str1 = '刘备';
let str2 = '蜀中${str1}' // str2 蜀中刘备

对象简化写法

能够间接将变量和函数写入对象中

let name = '刘备';
let change = function(){
    console.log('Hello,chengdu')
}

const Liu = {
    name,
    change,
    f(){   // 这样也是一种简化，写全应该是f:function()
        ...
    }
}

箭头函数

箭头函数相比一般函数。它的this是动态的，不会因为call、apply办法的改变而变，箭头函数外面的this永远指向的是函数所处的对象

window.name = '刘备'
const WEI = {
    name:'曹操';
}
let getName = () => {
    console.log(this.name);
}

function getName2(){
    console.log(this.name);
}

// 间接调用
getName();
getName2();         // 一样的都是输入 刘备

// call扭转指向 调用
getName.call(WEI);  // 因为getName是箭头函数 不会被扭转指向
getName2.call(WEI); // 因为是一般函数，call指向WEI对象，getName2中的this就会变成WEI

这里也能够更好地了解call、apply、bind的作用.

箭头函数不能作为构造函数实例化对象。也就是说，实例化对象应用的函数依然用的是一般函数

let Person = (name,age) =>{   //当函数被用作结构的时候，还是只能应用function型函数
    this.name = name;
    this.age = age;
}
function Person(name,age){
    this.name = name;
    this.age = age;
}

let me = new Person('刘备',23);

不能应用arguments形参

箭头函数最罕用的用途还是this

// 这个例子来领会this指向
const obj1 =  {
    name:'刘备',
    getName:function(){
        this.name; // 一般函数 this指的是obj1
    }
}

const obj2 =  {
    name:'刘备',
    getName:() => {
        this.name; // 箭头函数 this指向的是window，不是obj2
    }
}

`filter()`函数

filter函数会返回一个新的数组，不会批改原来函数
参数是一个函数
参数里的匿名函数中的item会顺次执行这个函数,匿名函数返回true，则会保留在新的数组里

let nums = [1,2,3,4,5,6,7,8,9,10];
let nums2 = nums.filter((item) => {
    if(item %2 === 0){
        return true;
    }else{
        return false;
    }
})

形参设置默认值

这个个性很多语言也有。

function add(a,b,c=10){
    return a+b+c;
}
console.log(add(1,1)) // 输入12

`rest`参数和`arguments`参数

与arguments参数比拟相似，性能也类似

function fn(){
    console.log(arguments); // arguments参数不必被动定义，能够间接用;输入的是对象
}
fn("w","n","z");

function fn1(...args){
    console.log(args); // 输入的是一个数组
}

fn("王菲","那英");

function fn2(x,y,...args){
    console.log(args); // 输入的是数组[3,4,5,6,7]
}
fn2(1,2,3,4,5,6,7)

对于arguments参数的了解和应用，能够看这篇博客arguments参数的了解和应用

扩大运算符

作用:将一个数组中内容，开展成多个变量。简略来说就是扔掉数组标记[]

const tfboys = ["王俊凯","易烊千玺","王源"];

function chunwan(){
    console.log(arguments);
}
chunwan(tfboys); // 控制台输入arguments个数只有一个,然而一个数组
chunwan(...tfboys)// 应用扩大运算符后,arguments.length是3 别离是 "王俊凯","易烊千玺","王源"

数组合并:

const list1 = ["a","b"];
const list2 = ["c","d"];
const list12 = [...list1,...list2];

数组对象转成数组:

<div></div>
<div></div>
<div></div>

const divs = document.querySelectorAll("div"); // 这是一个数组对象
const divArray = [...divs] // 这时候才转成数组

数组拷贝:

const A = ["e","g","m"];
const B = [...A] //又失去一个截然不同的数组B

数据类型`symbol`

Symbol是JS特有的数据类型

let s = symbol("symbol"); // 举世无双的一种数据类型

常常给对象增加属性和办法
Symbol函数承受一个可选的字符串，是为了减少对Symbol的形容
用Object.getOwnPropertyNames(),Object.keys()或者for ... in 办法遍历对象，无奈遍历到symbol属性
用Object.getOwnPropertySymbols)()则能够返回所有symbol属性
symbol属性不能new
symbol.for()创立共享symbol，如果已存在，间接返回第一个symbol

emperor = {}
const bastard1 = Symbol.for("如花");
emperor[bastard1] = "如花的儿子";
const bastard2 = Symbol.for("如花");
emperor[bastard2] = "如花的儿子";
const bastard3 = Symbol.for("似水");
emperor[bastard3] = "似水的儿子"
console.log(emperor); // 只会输入两个symbol  symbol["如花"]="如花的儿子" symbol["似水"]="似水的儿子"

console.log(bastard1 === bastard2) // 因为应用symbol.for创立，所以===成立 true
console.log(symbol() === symbol()) // false 因为symbol创立的唯一性

`iterator`

能够用原生附带迭代器的数据类型有

Array、arguments 、set、map、string。

不确定有没有itrator的话，能够输入对象，在对象中寻找有没有symbol.iterator属性,有的话就能够应用迭代器

const xiyou = ["唐僧","孙悟空","猪八戒","沙僧"];

for(let v of xiyou){ // for in的话输入的会是数组下标
    console.log(v);
}

迭代器symbol.iterator本人也是一个对象，能够打印输出。外面有一个办法next()。我感觉了解最重要的就是要晓得iterator是一个对象，而不是一个一般的指针。以前的了解有偏差

生成器函数

略

Promise

理解概念：回调函数。函数被当做参数且满足肯定条件后是回调函数

setTimeout(function(){
    console.log("3s后执行回调函数"); // 函数参数就是回调函数
},3000);

异步工作：不阻塞前面工作的执行。跨栏式执行叫做异步工作。

const p = new Promise(function(resolve,reject){
    setTimeout(function(
              let data = "从数据库\网络取得数据";
              resolve(data);
              let err = "取得数据失败";
              reject(err);
              ),3000);
});

p.then(function(value){
    console.log("");
},function(reason){
    
})

// promise封装读取文件readFile异步函数
// promise封装这种慢动作十分有用
const fs = require("fs");
const p = new Promise(function(resolve,reject){
    fs.readFile("./resouse/为学.md",(err,data)=>{
        if(err) reject(err); // 失败
        resolve(data); // 胜利
    });
});

p.then(function(value){
    console.log(value.toString());
},function(reason){
    console.err("读取失败");
})

// promise 封装Ajax/http申请
const p = new Promise(function(resolve,reject){
    // 1.Ajax创建对象
    const xhr = new XMLHttpRequest();
    // 2.初始化
    xhr.open("GET","https://api.apiopen.top/getJoke");
    // 3.发送
    xhr.send();
    // 4.绑定事件,解决响应后果
    xhr.onreadystatechange = function(){
        if(xhr.readyState = 4){
            if(xhr.status >=200 && xhr.status<300){
                console.log(xhr.response);
            }else{
                console.error(xhr.status);
            }
        }
    }
});

关于javascript:ES6新特性

ES6个性

获取`div`对象

`let`和`const`的相同点

`const`个性

数组和对象的解构

模板字符串“

对象简化写法

箭头函数

`filter()`函数

形参设置默认值

`rest`参数和`arguments`参数

扩大运算符

数据类型`symbol`

`iterator`

生成器函数

Promise

Ajax

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

关于javascript:ES6新特性

ES6个性

获取div对象

let和const的相同点

const个性

数组和对象的解构

模板字符串“

对象简化写法

箭头函数

filter()函数

形参设置默认值

rest参数和arguments参数

扩大运算符

数据类型symbol

iterator

生成器函数

Promise

Ajax

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

获取`div`对象

`let`和`const`的相同点

`const`个性

`filter()`函数

`rest`参数和`arguments`参数

数据类型`symbol`

`iterator`

发表回复取消回复