ES6教程

最新推荐文章于 2024-07-24 10:40:52 发布

天怀

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量177

点赞数

分类专栏：前端学习路线文章标签：前端开发语言 es6

本文链接：https://blog.csdn.net/qq_39165819/article/details/125231688

版权

前端学习路线专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1. let

<body>
  <script>
    //声明变量
    //1.变量不能重复声明
    let a;
    let b,c,d;
    let e = 100;
    let f = 521,g = 'iloveyou',h = [];
    //2.块级作用域
    {
      let star;//出块就不行了，读不到了  用if等判断语句也是
    }
    //不存在变量提升
    console.log(song)
    var song='恋爱大人'//这样是可以得,let 是不可以得
    //4.不影响作用域链
    {
      let school = '尚硅谷';
      function fn(){
        console.log(school);
      }
    }

  </script>
</body>

let举例

    <style>
        div{
            border: 2px solid gray;
            width: 200px;
            height: 200px;
            margin:400px auto;
            float: left;
            border-collapse: collapse;
        }
        /*div:hover{*/
        /*    background-color: cadetblue;*/
        /*}*/
    </style>
<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        let div = document.querySelectorAll('div');
        for (let i = 0;i<div.length;i++){
            div[i].onclick=function (){
                {
                    div[i].style.background='cyan';
                }
            }
        }
        //此处不能用var
        //for (var i = 0;i<div.length;i++){
        //var 是全局变量
        //代码相当于
        // {
        //     var i=0;
        // }
        // {
        //     var i=1;
        // }
        // {
        //     var i=2;
        // }
        //做完三次循环后，i会自增一次，此时i=3;
        //var i时，i是全局变量，不受约束
    </script>
</body>

效果
在这里插入图片描述

2.声明变量

//声明常量
const school = '尚硅谷';
//1.一定要附初始值
//2.一般常量要用大写
//3.常量的值不能修改
//4.块级作用域
//5.对于数组和对象的元素修改，不算对常量的修改，不会报错
const team = ['UZI','MXLG']

3.结构赋值

对数组的解构

//1.数组的解构
const f4 = ['小沈阳','刘能','赵四'];
let [xiao,liu,zhao,song] = f4;
log(xiao)

//对象的解构
const zhao = {
	name:'赵本山',
	age:'不详'
}
let {name,age}=zhao

4.模板字符串

字符串引用新的模式``  '' ""
1.声明
let str = '我也是一个字符串'
log(str , typeof str);
2.内容中可以出现换行符
let str = `<ul>
			<li>沈腾</li>
			<li>玛丽<li>
			</ul>`
3.变量拼接
let lovest = '魏翔';
let str=`${lovest}你好`

5.对象的简化写法

es6允许在大括号中直接写入变量和函数

const school = {
	name,
	change
}

//回调地狱
setTimeout(()=>{
	log(111);
	setTimeout(()=>{
		log(222);
		 setTimeout(()=>{
		 	log(333);
		 },3000)
	},2000)
},1000)

//使用生成器解决回调地狱
function one(){
	setTimeout(()=>{
		log(111)
		iterator.next();
	})
}
function two(){
	setTimeout(()=>{
		log(111)
		iterator.next();
	})
}
function three(){
	setTimeout(()=>{
		log(111)
		iterator.next();
	})
}

function * gen(){
	yield one();
	yield two();
	yield three();
}
let iterator=gen();
iterator.next();

6.promise

  <script>
      //实例化对象
      const p = new Promise(function (resolve,reject){
        setTimeout(function (){
          let err = '数据读取失败';
          reject(err);
        },1000);
      });
      //调用promise对象的then方法
      p.then(function (value){
        console.log(value);
      },function (reason){
        console.error(reason);
      })
  </script>

<script>
// Set集合实践
let arr = [1,2,3,4,5,4,3,2,1];
// 数组去重
let s1 = new Set(arr);
console.log(s1);
// 交集
let arr2 = [3,4,5,6,5,4,3];
let result = [...new Set(arr)].filter(item=>new
Set(arr2).has(item));
console.log(result);
// 并集
// ... 为扩展运算符，将数组转化为逗号分隔的序列
let union = [...new Set([...arr,...arr2])];
console.log(union);
// 差集：比如集合1和集合2求差集，就是1里面有的，2里面没的
let result1 = [...new Set(arr)].filter(item=>!(new
Set(arr2).has(item)));
console.log(result1);
</script>

7.es6的get和set

  <script>
    //get和set
    class phone{
      get price(){
        console.log("价格属性被读取了");
        return "iloveyou";
      }
      set price(newVal){
        console.log(newVal);
      }
    }
    let s=new phone();
    s.price;
    s.price ="你好"
  </script>

  <script>
    //1.Object.is 判断两个值是否完全相等
    console.log(Object.is(120,120));//===
    console.log(Object.is(NaN,NaN));//===
    console.log(NaN===NaN);//false
  //  2.Object.assign对象的合并
    const config={
      name:'小米',
      port:3306,
      pass:'root',
      test:'test'
    }
    const config2={
      host:'http://atguigu.com',
      port: 3306,
      name: 'atguigu.com',
      pass: 'iloveyou'
    }
    console.log(Object.assign(config,config2));
  </script>

8.模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
模块化的好处
模块化的优势：
1.防止命名冲突
2.代码复用
3.高维护性
es6的模块化语法
主要由两个命令构成export 和 import
文件格式
在这里插入图片描述

<body>
  <script type="module">
<!--    引入m1.js模块内容-->
  //通用导入方式
  import * as m1 from '../es6暴露的三种方式/m1.js';
  import * as m2 from '../es6暴露的三种方式/m2.js';
  import * as m3 from '../es6暴露的三种方式/m3.js';
  //解构赋值方式
    import {m1,test} from "./m1.js";
    import {school as guigu, findjob} from "./m2.js";
    import {default as m3} from './m3.js';

  //  简便形式 针对默认暴露
    import m3 from './m3.js'

  </script>
</body>
暴露方式   js文件中
//分别暴露
export let m1='你好';
export function test(){
    console.log("我们可以开发新的技能");
}

//统一暴露
let school = '尚硅谷';
function findjob(){
    console.log("你好");
}

export {school,findjob};

//默认暴露
export default {
    school:"人神魔科技大学",
    change:function (){
        console.log("we can change you");
    }
}

也可以使用app.js统一引入
在这里插入图片描述

9.Babel对es6模块化代码转换

Babel 是一个JavaScript 编译器;
Babel 能够将新的ES规范语法转换为ES的语法
因为不是所有的浏览器都支持最新的es规范，所以一般项目中都需要Babel进行转换；
步骤：使用Babel转换JS代码–打包成一个文件–使用时引入即可；

一、初始化项目

npm init -y

二、安装

npm i babel-cli babel-preset-env browserify

三、使用babel转换

npx babel js（js目录） -d dist/js（转化后的js目录） --presets=babel-preset-env

四、打包

npx browserify dist/js/app.js -o dist/bundle.js

五、引入

<script src="./js/bundle.js" type="module"></script>

10.ES6模块话引入NPM包

一、安装jquery

npm i jquery

二、在app.js使用jquery

//入口文件
//修改背景颜色为粉色
import $ from 'jquery';// 相当于const $ = require("jquery");
$('body').css('background','pink');

天怀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6教程

let举例效果3.结构赋值对数组的解构4.模板字符串5.对象的简化写法es6允许在大括号中直接写入变量和函数6.promise7.es6的get和set8.模块化模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。模块化的好处模块化的优势：1.防止命名冲突2.代码复用3.高维护性es6的模块化语法主要由两个命令构成export 和 import文件格式也可以使用app.js统一引入Babel 是一个JavaScript 编译器;
复制链接

扫一扫

专栏目录