Es6分分快三计划

作者:分分快三计划

  2、新增map、reduce、filter、forEach函数

  常见的数组操作函数。

// map: 用给定的映射遍历数组,不改变原数组,生成新数组;
let arr = [12, 58, 99, 86, 45, 21];
let newArr = arr.map(item=>item>=60?"及格":"不及格");
console.log(arr, newArr);

// reduce: 遍历累加
let sum = arr.reduce((item1, item2, index)=>item1 item2); // index表示下标,这里可不写
console.log(sum);

// filter: 过滤器
let filter = arr.filter(item=>item<=60);
console.log(filter);

let arr2 = [
    {title: "奔驰", price: 20},
    {title: "宝马", price: 35},
    {title: "路虎", price: 30},
    {title: "特斯拉", price: 40},
    {title: "大众", price: 15},
    {title: "标致", price:15},
];
let filter2 = arr2.filter(item=>item.price >=30);
console.log(filter2);

// forEach  循环遍历
let newArr2 = arr.forEach((item, index)=>console.log(item, index));
newArr2;  // 没有返

    ⑵. =号右边必须是js中合法的数据结构

6.for - of 循环
for
while
for...in
for(var name of 要循环的东西){

二、数组

    ⑴. 左右两边的结构必须完全一致

    *默认情况下就是循环的entries,也就是说,如果不写entries(),结果是一样的

4)只想循环map中的key
    for(var item of map.keys() )
     只想循环map中的value
    for(var item of map.values())

八、generator-yield

  生成器。惰性执行函数,和python中的生成器一致。

function *show() {
    console.log("------1-----");
    let a = yield 12;
    console.log("------2-----");
    console.log(a);
    return a;
}

let gen = show();
let a = gen.next(123);  // 当yield 后赋值时,第一次执行到yield时返回该值
let b = gen.next(456);
console.log(a, b); // a是一个json对象

 


    1:
        function show(){
            alert(1);
        }

        let show = () => {
            alert(1);
        };
    2:
        function show(a){alert(a);}

        let show = (a)=>{
            alert(a);
        }

  2.默认参数

  可以像python那样在函数定义时设置默认参数的值。并且可以通过...args来展开元素,同样类似python的*args。

function show2(a, b=4, c=123) {
    console.log(a, b, c);
}
show2(7);

function show(a, b, ...args) {
    console.log(a   b);
    console.log(args); // 剩余的写进...args数组里,必须写在最后
}
show(3, 5, 7, 9, 11);

  ...args甚至可以拆解数组。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
  1. ... 具有展开数组的功能

  2. 函数的默认参数, 语法: (a, b=2, c='默认')=> {} ,可以直接给参数赋值,即定义默认参数。

}
要循环的东西,可以是数组,但是不能是json
for-of循环,  不能用于循环json

  1.var关键字的弊端

  var关键字的弊端:1.可以重复声明变量;2.无法限制变量修改;3.没有会计作用域,只有函数作用域。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">

<script>
    var oBtn = document.getElementsByTagName("input");
    for(var i=0; i< oBtn.length; i  ){
        oBtn[i].onclick = function () {
            alert(i);  // 三个按钮都是3
        }
    }
  // 点击按钮alert出来的都是3。因为事件没触发时,for循环已经遍历结束,当事件触发时i的值已经是3了。
</script>
</body>
</html>

  惯用的解决办法是将onclick写进一个匿名函数。

for(var i=0; i< oBtn.length; i  ){
    (function (i) {
        oBtn[i].onclick = function () {
            alert(i);  // 三个按钮都是3
        }
    })(i);
}

二、箭头函数

例1:代替arguments
    function sum(...args)
例2:扩展参数的作用
    function sum(a,b,...agrs){
        //args   除了a和b之外,其它参数的一个数组
    }
    ****...args  必须放在所有参数的最后
例3:复制数组
    1)循环每一项来复制
    2)var arr2 = [...arr1];  不是引用
    3)Array.from(arr1)  //不兼容IE  不是引用

  2.模板字符串

  用返单引号(``)包裹的字符串,其中的变量可以用${}来替换。它可以写多行字符串。

let title="标题", content="内容";
let str = `
<div><h1>${title}</h1><p>${content}</p></div>
`;
alert(str);

7、数据格式 map
数据格式:
1)普通变量 var a = 12;
2)数组 var arr = [11,22];
3)JSON var json = {name:1,age:2};
4)map
map: 和json非常像 的一种新的数据格式(键/值 对)
1) 怎么弄一个map出来
map 是js中的一个对象
var map = new Map();
2) 增加内容
map.set('key','value');
例:
var map = new Map();
map.set('name','小红');
map.set('age',18);
3)获取内容
map.get('key');
例:
//建一个新对象
var map = new Map();
//设置值
map.set('name','小红');
map.set('age',18);
//获取值
map.get('name'); -- 小红
4)删除一项
map.delete('key');
用for-of循环,来循环map
1) 普通循环
for(var item of map){
item -> 数组
item[0]是map中的key
item[1] -> map中的value
}
2)利用解构赋值的形式
for(var [key,value] of map ){
alert(key);
alert(value);
}
3)循环map 的 entries()
for(let item of map.entries())

  1.箭头函数

  箭头函数是函数的一种简写。

let show = function () {
    console.log("what the hell?")
};
show();
// es6写法
let newShow = ()=>{
    console.log("what the hell?")
};
newShow();

  带参数的写法。如果参数只有一个,那么()可以省略。

let alt = a=>{console.log(a*10)};// 单个参数

let add = (a, b) => {console.log(a   b);
}; // 两个参数
add(3,5);

  如果函数只有一个返回值,那么{}省略。

let arr = [12, 234, 345, 64, 23, 87];
arr.sort(function (n1, n2) { return n1 - n2 });
// 简写为
arr.sort((n1, n2) =>n1 - n2);
console.log(arr);

一、变量声明

箭头函数,只是在函数定义时,写法有区别,在调用的时候,和原来一样。

三、字符串

    ⑴. [a,b] = [1,10]            //  a=1, b=10

values(): 
    item ->  值

四、函数

1.语法: let 变量 = 值, const 变量 = 值

定义变量:
1.let:
特点:
1)支持块作用域
2)不允许在相同作用域重复定义
块作用域:
{} let
以前: 函数作用域
2.const: 定义常量
常量: 一经定义,以后不可以再改变
正是因为这个特性,要求常量在定义时,必须赋初始值,否则以后就没机会了。
通常:约定,常量的名字全用大写字母
const PI = 3.14159265;
3.字符串:
let str = ; //反单引号 使用来定义字符串的话,就可以用字符串模板: ${变量}
4.解构赋值
//写法1: √
var a = 10;
var b = 12;
var c = 20;
//写法2: √
var a=10,b=12,c=20;
概念:赋值等号 左边的结构和右边一模一样。
[a,b,c] = [10,12,20]; //a = 10,b=12,c=20
[a,[b,e],c] = [100,[200,300],400];
[a,{f,g},d]=[12,{90,98},4] ×
[a,{f,g},d]=[12,{f:90,g:98},4] √
let [a,{f,g},d]=[12,{f=90,g=98},4]; ×
如果在解构赋值时,碰到json格式,那么右边必须是一个合法的json
并且,json中的每一项名字是一一对应的,和顺序无关
应用1:
用于函数的json参数初始化
function sum({a=0,b=0} = {}){
a ;
b ;
return a b;
}
5.不定参数、扩展参数 ...
原来:arguments
现在: ...
...args 是一个真正的数组。

  1.解构赋值

let arr = [1, 2, 3];

// let a = arr[0];
// let b = arr[1];
// let c = arr[2];

// 等价于
let [a, b, c] = [1, 2, 3];
console.log(a, b, c);

let {l, m, n} = {l: 1, m:2, n:3};
console.log(l, m, n);

let [x, y, z] = [{p1: 123, p2: 234}, [345, 456], 789];
console.log(x, y, z);

let [{p11, p12}, [p21, p22], p31] = [{p11: 123, p12: 234}, [345, 456], 789];
console.log(p11, p12, p21, p22, p31);

  注意,当右侧是一个json数据时,左侧相应的变量必须与其键名对应。

  1. 注意事项:
ES6 不是什么新语言,也不是新框架,它就是原生 JS,
只不过是升过级的JS的一些写法。

  2.let和const关键字

  let和const关键字使得变量不可以被重复声明,且变量具有块级作用域。不同的是,let用来声明变量,const用来声明常量(不可被修改的常量)。

  注:在Java中,Java: int a = 123; int a = 12; 报错,变量不可以重复声明,因为它存在堆内存中,变量直接代表一块内存空间。而对象的值存在堆中,变量实际上这个对象的引用。js的var同样应遵循这样的规则。

// let写法
for(let i=0; i< oBtn.length; i  ){
    oBtn[i].onclick = function () {
        alert(i);  // 三个按钮都是3
    }
}
  1. startWith ,endsWith

  2. 字符串模板     ` `(返单引号)   ,

  3. ${内容}   ,  这种写法可以在字符串模板里塞内容

循环map对象时:
map.entries()
map
以上两种写法是一个效果,得到的都是map对象的每一个item,包括key和value,是一个数组形式
循环数组:
arr.entries()
得到的是数组中每一项: [索引值,值]
arr.values() —— 报错,不支持
arr.keys() —— 得到的就是数组的索引值
8.函数
原来:
function show(){...}
var show = new Function();
show();
show(a);
show(a,b);
现在:
箭头函数: =>
省略了function,加了一个箭头=>

  1.新增startswith和endswith

let str = "http://www.baidu.com";
if(str.startsWith("https")){
    console.log("加密网址");
}else if(str.startsWith("http")){
    console.log("普通网址");
}

let str2 = "abc1234@163.com";
if(str2.endsWith("163.com")){
    console.log("163邮箱");
}else if(str2.endsWith("qq.com")){
    console.log("qq邮箱");
}

阮一峰老师讲的十分详细,建议阅读:http://es6.ruanyifeng.com/#docs/promise

*箭头函数里的this,固定化 自己没有去外边找 最大this是window
*箭头函数里arguments不能用了
*当参数正好有一个的时候,( ) 可以省略
*当函数里面只有一句话,而且正好是return的时候,{ }和里面的return 可以省略
9.JSON 有了简写形式
当json中的name和变量名一模一样时,可以简写为以下形式:
var a = 12;
var b = 18;
var json = {a:a,b:2};
json.a -> 12
json.b -> 18
var a = 12;
var b = 18;
var json = {a,b};

七、promise

  用同步的写法来管理异步。

function createPromise(url) {
    return new Promise(function (resolve, reject) {
        $.ajax({
            url, // url: url
            dataType: 'json',
            success(arr){ resolve(arr);},
            error(arr){vreject(arr);}
        })
    });
}
// 在当前目录下创建arr.txt和json.txt文件
Promise.all([createPromise("arr.txt"), "json.txt"]).then(function (arr) {
    alert("全都成功了!");
}, function (arr) {
    alert("至少有一个失败了!");
});

  高版本的Jquery中,$.ajax本身就是promise对象,所以上面的代码可简写为:

Promise.all([$.ajax({url:"arr.txt", dataType:"json"}), $.ajax({url: "json.txt", dataType: "json"})]).then(function (results) {
    let [arr, json] = results;
    // 分别处理自己的逻辑
    console.log("全都成功了!");
    console.log(arr, json);
}, arr=>alert("至少有一个失败了!"));

2. ... 具有收集参数的功能。函数除了a、b参数以外,之后的所有参数都会被 ...args收集,它会以数组的形式保存参数,且它只能是函数的最后一个参数。

for-of循环数组 : entries() keys() values()
entries():
item -> [索引,值]
keys():
item -> 索引

一、变量


六、类

  相比函数构造类的外挂式写法,添加了class和constructor来声明类和构造函数。

// 声明
class Person{
    constructor(name, gender){
        this.name = name;
        this.gender = gender;
    }
    showName(){
        console.log(this.name);
    }
    showGender(){
        console.log(this.gender);
    }
}

var sun = new Person("孙悟空", "male");
sun.showName();
sun.showGender();

// 继承
class Child extends Person{
    constructor(name, gender, age){
        super(name, gender);
        this.age = age;
    }
    showAge(){
        console.log(this.age);
    }
}

var child = new Child("小猴子", "male", 12);
child.showAge();

七、promise

五、json

  如果键名和值一致,那么键名可以省略。

let a=123;
let b=456;
// 当名字和值一样时可以简写
let json1 = {a, b};  // 等价于let json1 = {a: a, b: b}

let json2 = {
    a,
    b,
    show(item){
        console.log(item)
    }  // 等价于 show: function(){console.log(item};
};
json2.show(json2.a);

六、字符串新方法: 

    ⑶. 声明和赋值必须在一句话中完成。

    ⑵. {a,b} = {A:1, B:10}     //  a=1, b=10

  1. 语法:(a, b, ...args) => { }。  ...args 是函数中的一个形参,可自定义命名
  1. 语法: 

五、数组新增的方法:map , reduce, filter, forEach

  1. 语法:    ()=> {  }

  2. 若函数有且仅有一个参数时,可简写成: 参数 => { }      (省略弧括号)

  3. 若函数语句只有一个return时,可简写成:() => 语句      (省略花括号)


2.两种都是声明变量的关键字,let用于声明变量,const用于声明常量,增加块级作用域功能

三、函数的参数 与 ... 操作符



四、解构赋值

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 日记本 js基础