ECMAScript 6(未完)

最新推荐文章于 2024-04-22 20:07:06 发布
最新推荐文章于 2024-04-22 20:07:06 发布
阅读量150 收藏
点赞数
原文链接：https://my.oschina.net/u/4185179/blog/3089349
版权

基本语法

1、let声明变量

<!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-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<body>

<script> { var a=100; let b=200; } console.log(a); //console.log(b); var c=300; var c=400; console.log(c); let d=500; console.log(d); console.log(e); var e=600; console.log(f); let f=700; </script>

</body>

</html>

2、const声明常量（只读变量）

<!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-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<body>

<script> const PI=3.1415; PI=3; console.log(PI) //const PI2; </script>

</body>

</html> 3、解构赋值 <!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-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> let a =1,b=2,c=3; console.log(a,b,c); let [x,y,z]=[1,2,3]; console.log(x,y,z);

let user={name:'zhang3',age:33};
let name1=user.name;
let age1=user.age;
console.log(name1,age1);

let{name,age}=user;
console.log(name,age);
</script>

</body> </html>

4、模板字符串

<!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-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> let str ='hello'; let name='java190401'; console.log(str+' '+name+' !'); console.log(`${str} ${name}`);

let headhtml=
`

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> ` console.log(headhtml); function getName(){

return 'java190401';

} console.log(${str} ${getName()}); </script>

</body> </html> 5、声明对象简写 <!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-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> let name='zhang3'; let age=33; let user={name:name,age:age}; let user2={name,age}; console.log(user); console.log(user2); </script> </body> </html> 6、定义方法简写 <!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-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> let user={name:'zhang3', age:33, sayHi(){ console.log('hi zhang3'); } } user.sayHi(); </script> </body> </html> 7、对象拓展运算符 <!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-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> let user= {name:'zhang3',age:33} let someone1=user; let someone2={...user}; console.log(someone1); console.log(someone2); let name={name:'li4'}; let age={age:44}; let someone3={...name,...age}; console.log(someone3);

let someone4={...someone1,...someone3};
console.log(someone4);
</script>

</body> </html> 8、函数的默认参数 <!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-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> function getUser(name,age=18){ console.log(name,age); } getUser('zhang3',33); getUser('zhang3',''); getUser('zhang3',null); getUser('zhang3'); </script> </body> </html> 9、不定参数 <!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-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> function f1(...values){ console.log(values.length); console.log(values); } f1(1,2,3,4,5) ; </script> </body> </html> 10、箭头函数 <!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-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> let f1=function (a){ return a ; } console.log(f1(100));

//let f2=(a)=>{return a;}
let f2=a=>a;
console.log(f2(200));

$.get('url',data=>{
})
</script>

</body> </html> 11、Promise <!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-UA-Compatible" content="ie=edge"> <title>Document</title> </head>

<body> <script src="jquery-1.7.2.min.js"></script> <script>

    let p1 = new Promise((resolve, reject) => {

        setTimeout(() => {
            console.log('setTimeout.....');
            resolve()
        }, 3000)
    })

    p1.then(() => {
        return new Promise((resolve, reject) => {

            $.ajax({
                url: 'mock/user.json',
                type: 'get',
                success(data) {
                    console.log(data);
                    resolve(data)
                },
                error(error) {
                    reject(error)
                }
            })


        })
    })
        .then(data => {
            $.get(`mock/user-login-${data.id}.json`, data => {
                console.log("查询成功");
                console.log(data);
            })
        },
            error => {
                console.log("查询失败");
                console.log(error);
            }
        )


</script>

</body>

</html>

转载于:https://my.oschina.net/u/4185179/blog/3089349

chuanxutong3926
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页用css排列文本呈圆型
02-19
很早以前自已搞的css排序文本，发现圆型排序都没人应用，希望对需要的人有用。
使用css实现环形文本效果
A_bad_boy_hahaha的博客
06-17 1234
css实现环形文本效果
HTML+CSS 实现文字环绕效果
最新发布
ma_no_lo的博客
04-22 406
前端中文字环绕效果
CSS旋转的环形文字效果
qq_44675204的博客
05-02 3188
<template> <div class="circle"> <svg viewBox="0 0 100 100"> <path d="M 50 50 m -50 0 a 50 50 0 1 1 100 0 a 50 50 0 1 1 -100 0 z" id="circle" /> <text><textPath xlink:href="#circle">早知道是这样&nbsp;像梦一场.
利用CSS实现任意形状的文字环绕
weixin_44286392的博客
07-03 2687
利用CSS的shape-outside属性来实现任意形状的文字环绕 实现效果如下图所示 shape-outside CSS的shape-outside 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。 默认情况下，内联内容包围其边距框; shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中 详情可以参考以下网站： https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-out
ECMAScript 6入门
12-27
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 [1] 。
Learning ECMAScript 6
03-13
Learning ECMAScript 6 Learning ECMAScript 6 Learning ECMAScript 6 Learning ECMAScript 6
ECMAScript6简书
12-06
​ 在ES5中, arguments是一个伪数组,可以使用length来遍历他,但却不能使用完全Array的api(slice/sort).在ES6中,可以使用新特性叫做rest参数,他的形式为 ...参数名,比如...args,rest是一个真数组,所以至此Array所有...
深度解析 ECMAScript 6
05-01
**ECMAScript 6（简称ES6）是JavaScript语言的一个重大升级版本，它引入了许多新的特性和语法糖，极大地提升了开发效率和代码的可读性。对于已经掌握基础JavaScript的开发者来说，理解并掌握ES6的新特性至关重要。**...
Understanding ECMAScript 6
10-28
ECMAScript 6 represents the biggest update to the core of JavaScript in the history of the language. In Understanding ECMAScript 6, expert developer Nicholas C. Zakas provides a complete guide to the ...
让文字环绕圆形图片
chizhu5455的博客
05-22 495
样式如下 .curve { width: 33%; height: auto; min-width: 150px; float: left; margin-right:2rem; border-radius: 50%; -webkit-shape-outsid...
【CSS】用shape完美实现文字环绕 circle、ellipse、polygon
码婆Doph
11-25 6587
shape简介shape有一下两个属性： 1.shape-outside：让文字从图片外部开始环绕，以及设置图片的形状 2.shape-inside：设置图片的内部形状，目前基本不支持shape关键字如下（类似box-sizing）： margin-box content-box border-box padding-box 基本形状用以下函数来定义： circle(size a
html如何带圆圈的文字,用css围绕圆圈文字
weixin_28813401的博客
06-09 3179
body{margin:0;padding:20px;width:830px;margin:0 auto;}p{width:400px;margin-right:15px;text-align:justify;overflow:hidden;float:left;}p:before{content:'';width: 200px;height: 600px;}#left:before{float:...
【CSS】在圆上设置文字
qq_45587822的博客
04-03 1426
没有什么超级简单的通法可以在圆（或任何类型的曲线）上设置css类型。 但这是可以完成的！ 我们下面将在这里探索一种实现方法。 但是事先警告，我们将使用一些CSS3和JavaScript，不支持某些必需技术的旧版浏览器（IE7等等） 就请散场了吧。 如果您对一个实际的项目感兴趣，则最好还是使用带有适当alt文本的图像或适当的特征检测来为此类事情提供最好的解决方案，该功能可以在能够处理该问题的浏览器...
css实现文字环绕
SakuraLLj的专栏
09-09 3331
给被环绕的元素添加float: left即可：<html> <head> <style type="text/css"> .div1{ float: left; width: 100px; background-color: #0f0;
CSS环绕球体的旋转文字-3D效果
weixin_33916256的博客
03-06 1312
代码地址如下：http://www.demodashi.com/demo/12482.html 项目文件结构截图 只需要一个html文件既可： 项目截图： 代码实现原理： 该示例的实现过程很简单，主要是使用了CSS3的透视、3D旋转、位移、渐变、阴影，可以说是一次比较全面的练习。 HTML部分： &lt;div class="wrapper"&gt; &lt;div class="...
css实现圆中居中显示文字
热门推荐
Eggbeauty的博客
11-11 1万+
css实现圆中居中显示文字 很久没更新博客了…趁做毕设的机会记录一下。 需求 画一个实心圆，并在圆中居中显示一行标题 实现思路 画圆：这里需要注意 border-radius:50% 居中显示文字：此处需要令 line-height 值等于 height ，并设置 text-align:center 代码 html代码 &amp;lt;view class=&quot;circle&quot;&amp;gt; &amp;...
实现文字环绕
qq_45768871的博客
01-18 1071
实现文字环绕 要想让文字环绕在图片的周围，让图片 float 就可以了；如果还想要实现文字圆形环绕图片的效果，可以使用 shape-outside: circle(); 属性。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1
css合并两个文本框,css重叠的圆圈和文本框
weixin_42394054的博客
08-03 417
body {display: flex;justify-content: center;align-items: center;margin: 0;background-color: white;height: 100vh;}.container {display: flex;width: 100%;padding: 10px;overflow: hidden;}.left {position: ...
ecmascript 6入门 pdf
12-22
ECMAScript 6是JavaScript的一种标准，也被称为ES6或ES2015。它带来了许多新的语言特性和改进，使得JavaScript更为强大和灵活。如果你想学习ECMAScript 6，我建议你可以找一本入门级的PDF书籍，比如《ECMAScript 6...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值