javascript-es6学习笔记

最新推荐文章于 2024-08-30 20:29:15 发布
最新推荐文章于 2024-08-30 20:29:15 发布
阅读量147 收藏
点赞数
文章标签： javascript json php ViewUI
原文链接：http://www.cnblogs.com/leigepython/p/8595824.html
版权

es6技术培训文档

第一阶段:
1.let与const用法
2.变量的解构赋值
3.字符串的扩展
4.正则的扩展
5.数组的扩展
6.函数的扩展
7.对象的扩展
8.Symbol
9.Set和Map数据结构

第二阶段:
1.Reflect
2.Promise对象
3.Iteractor和for..of遍历
4.Generator函数的异步应用
5.async函数
6.Class的基本的语法
7.Decorator
8.Module的加载实现

--------------------------------------------------
第一课:

环境配置:
--------------------------
第一步：
cnpm install -g babel-cli

第二步:
cnpm install --save-dev babel-preset-es2015 babel-cli

第三步:
在pack.json同级目录中建立.babelrc文件，并在文件中写入
{
"presets": ["es2015"], //转换成es5的定法
"plugins": [] //定义一个组件数组
}

第四步:执行
babel ./src/index.js -o dist/index.js

第五步:查看结果:
"use strict";
var name = "zhilei";
console.log(name);

第六步:如果不想用上面的命令的话，想自定义的一个命令，则可以在pack.json中配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"babel ./src/index.js -o dist/index.js"
},

这样的话，我们就可以执行cnpm run build

----------------------------------------------------------------------
第二课:
变量的声明方式:
let
//局部声明
const
//声明常量
var
//全局的声明


第三课:解构赋值
----------------------------------------------------------------------
//给一个默认的值 这个相当于php中的索引数组 即下标为数字的
let [a,b=100]=[1000,undefined];

//也可以给一个初始值
let {username,age="1000"} ={username:"志雷教育",age:undefined}

//数组之间一定要一一对象
let [aa,[c,d]]=[1,[3,3]];

console.log(aa);
console.log(c);
console.log(d);


第四课:扩展运算符与rest运算符
----------------------------------------------------------------------
1.扩展运算符:(相当于python中的*args,**kwargs)
let a1=["one",'two'];
let a2=[...a1]; //将a1数组内的数组一一的遍历给a2
a2.push("three");
console.log(a1);
console.log(a2);

2.rest(剩余运算符)
function one(a,...two) {
console.log(a);
console.log(two.length);
}

//王传给a
one("王",1,2,3);

3.for in 与for of
1)for in用法
let arr=["殷超","志雷","宗斌"];
for (let i in arr){
//只能取数组的key
console.log(arr[i]);
}

2)for of 用法相当于php中 foreach()

第五课:新增字符串的功能
----------------------------------------------------------------------
1)字符中模板``
let a=10;
let b=100;
let content=`我的名字是:"${a+b}"我是一个帅哥!!!"`;
alert(content);

2)字符串查找
includes()
startsWith()
endsWith()
repeat()

1、includes()
let a ="志雷教育".includes("志雷");
alert(a);
2.startsWith();
let a ="志雷教育".startsWith("志雷");
alert(a);

3.endsWith()
let a ="志雷教育".endsWith("志雷");
alert(a);

4.repeat()
let a ="S".repeat(10);
document.write(a);
------------------------------------------------------------
Symbol()用法

let key="username";
let key1=Symbol("age");
let json={
[key]:"zhilei",
[key1]:10
};

console.log(json);

console.log(json[key1]);


------------------------------------------------------------
set增删改查

//将集合中的元素转为数组
var s=new Set(["one","two","three","one"]);
// var arr=[...s];
// console.log(arr);

var arr=[1,2,3,];
var new_arr=arr.map((x)=>{
return x*10;
});
console.log(new_arr);

console.log("-".repeat(100));

//将其转换为数组，只用数组用map使用
var new_s=Array.from(s).map(x=>{
return x+"111";
});
console.log(new_s);


/*
1.求交集
2.求并集
*/

var a=new Set([1,2,3,4]);
var b=new Set([1,2,5,4]);
var c=new Set([...a,...b]);
console.log(c); //求并集

var inter=new Set([...a].filter(x=>b.has(x)));

console.log(inter);

//求差集

var cha=new Set([...a].filter(x=>!b.has(x)));

console.log(cha);

weekSet()用法
--------------------------------------------------------
let weekSet = new WeakSet();

//不能直接将对象，只能声明好对实例，然后再加对象

let json={username:"zhilei",age:10};

//虽然值是相同的，但是却是生存在两个不同的内存空间
let json1={username:"zhilei",age:10};

weekSet.add(json1);

weekSet.add(json);

console.log(weekSet);

map对象
--------------------------------------------------------

//第一步：声明一个map实例
let map = new Map();

//第二步：给这个实例赋key,value值
map.set("username","zhilei");
map.set("age",10);
map.set("content",{bookname:"php",price:10,count:10});

//第三步：取值：get()方法
console.log(map.get("username"));

//第四步：删除 delete clear
map.delete('age');

//清空
// map.clear();

//查看长度
console.log(map.size);


//判断是否一个key
console.log(map.has('content'));

/*
总结:

增加 set
取: get
查: has
删除 :delete clear
长度: size

*/

proxy()用法
--------------------------------------------------

let pro = new Proxy({
name:"zhilei"
},{
get:function (target,key,property) {
console.log("come in get");
return target[key]; //要将结果返回出去
},
set(target,key,value,receiver){
console.log(`${key}= ${value}`);
return target[key]=value; //必须返回，否则的话，就没有结果
//vulue是新的值
}
});

console.log(pro.name);

pro.name="志雷";

proxy apply用法
----------------------------------------------
let target=function () {
return 'hello ';
};

let handler={
apply(target,ctx,args){
console.log("aaaaaaaaaa");
return Reflect.apply(...arguments);
}
};

let pro= new Proxy(target,handler);

console.log(pro());

promise对象:
----------------------------------------------------------

let state=1;
function step1(resolve,reject) {
console.log("开始做饭");
if (state==1){
resolve("做饭完成!!!")
}else{
reject("做饭失败!!!");
}
}

function step2(resolve,reject) {
console.log("坐下来吃饭");
if (state==1){
resolve("吃饭完成!!!")
}else{
reject("无法吃饭!!!");
}
}

function step3(resolve,reject) {
console.log("开始收拾桌子");
if (state==1){
resolve("收拾完成!!!")
}else{
reject("收拾失败!!!");
}
}

new Promise(step1).then(function (val) {
console.log(val);
return new Promise(step2);
}).then(function (val) {
console.log(val);
return new Promise(step3)
}).then(function (val) {
console.log(val);
});


数组遍历的几种方法:
-----------------------------------------------------

<!--数组的遍历-->
arr=["one","two","three","four"];

//第一种的遍历的方法
for(i in arr){
console.log(arr[i]);
}

console.log("-".repeat(100));

// 第二种遍历的方法
for(let i=0;i<arr.length;i++){
console.log(arr[i]);
}

console.log("-".repeat(100));

//第三咱遍历的方法

for([value,key] of arr.entries()){
console.log(value,key);
}

console.log("-".repeat(100));

//第四种逐个遍历的方法
var all=arr.entries();
console.log(all.next().value);
console.log("-".repeat(100));


var all=arr.entries();
console.log(all.next().value);
console.log("-".repeat(100));

var all=arr.entries();
console.log(all.next().value);
console.log("-".repeat(100));

json转为数组
-------------------------------------------------
//如果想将json转为数组的话，则json的key只能是一个数字

let json={
0:"zhilek",
1:10,
2:"male",
length:3
};

// let arr= Array.from(json);
// console.log(arr);

//将数组转为字符串

let arr=["one","two","three"];

//第一种方法 直接转字符串
console.log(arr.toString());

//第二种方法 ，自定义连接号
console.log(arr.join("-"));

对象扩展:
<script>
//如果提前定义好的话 ，则可以直接的调用
var age=100;
var one={
username:"zhilei",
one(){
alert(1111111)
},
age,
two() {
console.log("2222222222222")
}
};

console.log(one.username);
one.one();
console.log(one.age);
one.two();


function getPoint() {
var x = 1;
var y = 10;
return {x, y};
}

console.log(getPoint().x)
console.log(getPoint().y)

</script>

对象赋值:
---------------------------------------------------
<script>
<!--es6对象-->
let username="zhilei";
let age=10;
//es5的用法
// let a={username:usernmae,age:age};

//es6的用法

let b={username,age};
console.log(b);

</script>

key值构建
-----------------------------------------------------
<meta charset="utf-8">
<script>
//key值构建

let key="username";


//如果用key值来构建的话，则要加[]号来使用

let one={
[key]:"志雷"
};

console.log(one);

</script>

自定义构建对象:
-------------------------------------------------------
<meta charset="utf-8">
<script>
//自定义构建对象

let one={
aa(a,b) {
return a+b;
}
};

console.log(one.aa(100,200));

</script>

Object.is()用法
----------------------------------------------------
<script>
// is方法

//同值相等
console.log(-0===+0); true
console.log(NaN===NaN); //false


//严格相等
console.log(Object.is(-0,+0)); //false
console.log(Object.is(NaN,NaN)); //true

</script>

Object.assign()对象的合并
-----------------------------------------------------
<script>
//对象合并
let one={username:"zhilei"};
let two={age:10};
let three={sex:"male"};

let four=Object.assign(one,two,three);

console.log(four);
</script>

class运用(与php一样)

export import用法(与python的一样)

 

转载于:https://www.cnblogs.com/leigepython/p/8595824.html

agg7911
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
黑马程序员前端JavaScript高级——ES6学习笔记
weixin_44566194的博客
10-29 2942
黑马程序员前端教程的PPT和代码学习笔记，里面包含了面向对象的编程思想，以及构造函数，类和对象、原型链、箭头函数、数组和字符串新增方法、函数递归、深拷贝浅拷贝、正则表达式等知识点。本文是对CSDN其他博主记录的一个补充，因为黑马也是今年才陆续补充一些知识点的视频的，本文将其收录于此，雷同勿怪。
超详细ES6变动，ES6学习笔记，JavaScriptES6学习笔记
09-16
本学习笔记将聚焦于与ES5的区别，帮助初学者快速掌握ES6的核心概念。** 1. **变量声明：let和const** - `let`替代了`var`进行块级作用域的变量声明，解决了`var`的变量提升和函数作用域问题。 - `const`用于声明...
ES6实用教程
Mount华的博客
01-01 3447
一、ES6的概念 ES6是 新一代的JS语言标准，包含ES2015、ES2016、ES2017、ES2018等。ES2015特指在2015年发布的新一代JS语言标准，现阶段在绝大部分情景下，ES2015默认为ES6。ES2015可以理解为ES5和ES6的时间分界线。 二、变量声明 ES5里面var没有块级作用域，这样一来，会导致很多问题。例如for循环变量泄露，变量覆盖，变量提升等问题。 ES6用...
简述Function类型
weixin_33910434的博客
08-16 148
Function类型 概述 Function与函数 函数是这样的一段JavaScript代码，她只定义一次，但是可能被执行或调用多次。Function类型是JavaScript提供的引用类型之一，通过Function可u需变更创建对象。在JavaScript中，函数也是以对象形式存在的。每一个函数都是一个Function对象。函数名，本质...
自调/回调函数与对象的创建、枚举、检测
weixin_30319097的博客
10-27 179
//TODO 自调函数- 所谓自调函数就是在定义函数后自行调用 // TODO （）第一对括号放置匿名函数，（）第二对括号“立即调用” 方法一 方法二 方法三 方法四 匿名函数在调用...
ElasticSearch6.x之聚合查询
LMR的博客
06-11 9166
/* * https://elasticsearch.cn/article/102 * * select team, count(*) as player_count from player group by team; */ @Test public void testAgg1() { //指定索引和type Sea...
console.log(add(1,2)(3))结果是6
亚洲的博客
03-15 609
console.log(add(1,2)(3))结果是6 let add = function(a,b){ return function(c){ return a+b+c } } console.log(add(1,2)(3)) console.log(add(1)(2，3))结果是6 let add = function(a){ return function(b,c){ return a+b+c } } console.log(add(
javascript-completo-es6:Curso完成JavaScript ES6 da Origamid
03-26
JavaScript ES6是..."javascript-completo-es6-master"可能包含了课程的源代码、练习、笔记或其他相关资源，可以帮助学习者实践和巩固这些概念。虽然课程暂时停止更新，但这些基础知识仍然具有很高的学习价值。
ES6 学习笔记.pdf
07-05
通过这份学习笔记，我们可以看到ES6作为一个重要的JavaScript版本更新，它所引入的新特性极大推动了JavaScript的发展，使之更加成熟和强大，尤其在异步编程和模块化方面，为前端开发提供了更多现代化的解决方案。
es6学习笔记
08-12
本学习笔记将深入探讨ES6中的核心概念，帮助你全面掌握这一现代JavaScript语法。 1. **let 和 const 声明** 在ES6之前，我们主要使用`var`进行变量声明，但`let`和`const`的引入解决了作用域和提升（hoisting）的...
面试题，哈哈哈哈！
where_slr的博客
08-26 1141
function getPersonInfo(one, two, three) { console.log(one); console.log(two); console.log(three); } const person = "Lydia"; const age = 21; getPersonInfo`${person} is ${age} years old`; //['',...
面试知识点总结1（2019-8-30）
Rui012345的博客
08-30 235
一、CSS定位（position属性） static： 正常布局，即元素正常的流式布局 top、right、left、bottom、z-index在static定位元素下无效 relative: 相对定位，处于文档流，是相对于其原本的位置来定位的，不影响其他div，，而relative定位的子元素会撑大父元素 对table-*元素无效 absolute: 绝对定位，脱离文档流...
ES6.X，你必须知道的API和相关技巧
hellozhxy的博客
08-06 2326
题记 [Elasticsearch6.X相关核心知识点必知必会](http://elasticsearch-cheatsheet.jolicode.com/  Elasticsearch5.X相关核心知识点必知必会（如下）。 0. ES相关推荐 首先，不要再使用curl，请安装sense（kibana5.x中默认包含sense）  1）ES官方向导 https://www.elastic.c...
js计算练习
酷酷的旭
08-13 5610
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
Firebug控制台详解(装)
btsk
03-27 556
Firebug是网页开发的利器，能够极大地提升工作效率。 但是，它不太容易上手。我曾经翻译过一篇《Firebug入门指南》，介绍了一些基本用法。今天，继续介绍它的高级用法。 =================================== Firebug控制台详解 作者：阮一峰 控制台（Console）是Firebug的第一个面板，也是最重要的面板，...
vue ref和reactive区别
灰海
08-25 4454
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
jQuery基础——DOM
m0_54066656的博客
08-27 1726
JQ基础——DOM操作
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 1052
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
JavaScript ES6 学习笔记：块级作用域、Promise、Class 等核心知识点
ES6 学习笔记 **块级绑定** 在 ES6 中，引入了块级绑定（Block Scope），解决了 var 声明变量的问题。块级绑定使得变量的作用域限定在当前块中，不会污染全局对象。 **变量声明** 在 ES6 中，引入了 let 和 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值