ECMA6语法定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECMA6语法定义</title>
</head>
<body>
<h1>ECMA6语法定义</h1>
<h3>变量和常量</h3>
<p>
let 声明的变量只在 let 命令所在的代码块内有效。<br />
- let 是在代码块内有效，var 是在全局范围内有效
</p>
<script>
function ee() {
alert("ee:" + abc);
}
ee();
var abc = 999;
</script>
<script>
function dd() {
alert("dd:" + abc);
var abc = "other";
alert("dd:---" + abc);
}
dd();
</script>
<script>
for (var k = 0; k < 10; k++)
;
alert(k);
for (let k1 = 0; k1 < 10; k1++)
;
alert(k1);
</script>
<p>
let 只能声明一次 var 可以声明多次
</p>
<script>
var k1 = 123;
var k1 = "abcd";
alert(k1);
let k2 = 123;
alert(k2);
</script>
<p>
let不存在变量提升，var会变量提升
</p>
<script>
let kk = 123;
</script>
<script>
document.write(ss);
var ss = 999;
</script>
<hr />
<h2>常量</h2>
<p>
const 声明一个只读的常量，一旦声明，常量的值就不能改变<br />
const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错
</p>
<script>
const kk9 = 123;
kk9 += 1;
</script>
<hr />
<script>
var PI = "a";
if (true) {
console.log(PI);
const PI = "3.1415926";
}
</script>
<p>
ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量
从块的开始就形成一个封闭作用域。代码块内，在声明变量 PI 之前使用它会报错。
</p>
</body>
</html>
复合类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合类型</title>
</head>
<body>
<h2>复合类型</h2>
<p>
复合类型是指由多个基本数据类型或者复合类型构成的数据体。<br />
js中的复合类型有对象Object、数组Array和Function函数三大类
</p>
<h3>对象</h3>
<p>
对象是一系列命名变量和函数的集合，对象中的命名变量称为属性，
对象中的函数称为方法。对象中访问属性和函数的方法都是通过. 点
运算符实现的。例如获取浏览器的版本navigator.appVersion
<br />
js是基于对象的脚本语言，所以提供了大量的内置对象供开发者使用
- Array数组类
- Date日期类
- Math数学类
- Object对象类
- String字符串类
... ...
还有一组的DOM对象，例如document.write()；一组BOM对象，例如window.alert()
</p>
<script>
alert(navigator.appVersion)
</script>
<hr />
<h3>数组</h3>
<p>
- 什么是数组<br />
- 数组就是一组数据的集合，其表现形式就是内存中的一段连续的内存地址<br />
- 数组名称其实就是连续内存地址的首地址<br />
- 数组特点<br />
- 数组定义时无需指定数据类型，数组定义时可以无需指定数组长度<br />
- 数组可以存储任何数据类型的数据（比如一个元素保存整型，一个元素保存
字符串型，这个在JS中是可以的）
</p>
<script>
var arr = new Array();
arr[0] = 123;
arr[1] = "abcd";
arr[5] = true;
alert(arr.length);
for (var k = 0; k < arr.length; k++) {
console.log(arr[k]);
}
console.log(arr[100]);
</script>
<hr />
<h3>数组的基本操作</h3>
<p>
js为数组提供了一个length属性可以获取数组的长度，实际上js的数组长度可以任意变化
- 数组长度可变，索引值从0开始
- 同一个数组中的元素类型可以互不相同
- 访问数组元素时不会产生越界问题，访问并未赋值的数组元素时返回undefined
</p>
<h3>多维数组</h3>
<p>
</p>
<script>
var a = new Array();
for (var i = 0; i < 3; i++) {
a[i] = new Array();
for (var j = 0; j < 5; j++) {
a[i][j] = i + j;
}
}
var a = [[1, 2, 3, 5, 6, 7], [2, 3, 4], [3, 9, 0, 10, 12]];
document.write("<table border=1>");
for (var i = 0; i < a.length; i++) {
document.write("<tr>");
for (var k = 0; k < a[i].length; k++) {
document.write("<td>" + a[i][k] + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
<h3>数组常见方法</h3>
<strong>
在java中使用List<String> list=Arrays.asList(arr);获取一个不可变的集合，
存储的元素个数不能变化。试图修改结构则一定UnsupportedOperationException
<hr />
String ss="adslfkjasldkfjsalkdfjdsafkajsdflksadjflsakd";<br />
String[] arr=ss.split("a");<br />
for(String temp:arr)<br />
System.out.println(temp+":"+temp.length());<br />
String ss1=String.join("567", arr);<br />
System.out.println(ss1);<br />
</strong>
<p>
concat(arrayX,arrayX,......,arrayX)方法用于连接两个或多个数组，参数
可以是具体的值，也可以是数组对象。可以是任意多个<br />
join(separator)方法用于把数组中的所有元素放入一个字符串，separator可选。
指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符<br />
<strong>可以用于模拟实现栈或者队列</strong><br />
pop() 方法用于删除并返回数组的最后一个元素<br />
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度<br />
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值<br />
unshift(newelement1,newelement2,....,newelementX)方法可向数组的开头添加一
个或更多元素，并返回新的长度<br />
reverse() 方法用于颠倒数组中元素的顺序<br />
slice(start,end)方法可从已有的数组中返回选定的元素<br />
sort(sortby)方法用于对数组的元素进行排序。其中sortby为一个函数
- function(a,b){ return a-b}
- a-b输出从小到大排序，b-a输出从大到小排序<br />
splice(index,howmany,item1,.....,itemX)从数组中添加/删除项目，然后返回被删除的项目
- index必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置
- howmany必需。要删除的项目数量。如果设置为 0，则不会删除项目
</p>
<script>
var arr1 = [1, 2, 3];
var arr2 = [0, 7, 19, 20];
var arr3 = arr1.concat(arr2);
for (var k = 0; k < arr3.length; k++) {
document.write(arr3[k] + " ");
}
alert(arr1.length);
arr1 = [1, 7, 2, 'b', 9, 3, 10, 3, 8, 'a'];
arr2 = arr1.sort(function (a, b) {
return a - b;
});
for (var k in arr2)
console.log(arr2[k]);
document.write('11a' - 10);
document.write("<hr/>");
arr1 = [9, 8, 3];
for (var k = 0; k < arr1.length; k++) {
document.write(arr1[0 - k - 1]);
}
document.write("<hr/>");
arr2 = arr1.splice(-1, 2);
document.writeln(arr2.length);
for (var k = 0; k < arr2.length; k++)
document.writeln(arr2[k]);
document.write("<br/>");
document.writeln(arr1.length);
document.write("<br/>");
arr1 = [9, 8, 3];
arr1.splice(1, 0, 4, 5, 6, 7);
for (var k = 0; k < arr1.length; k++)
document.writeln(arr1[k]);
document.write("<br/>");
arr1 = [9, 8, 3, 10];
arr2 = arr1.splice(-3, 2, 4, 5, 6, 7);
for (var k = 0; k < arr1.length; k++)
document.writeln(arr1[k]);
document.write("<br/>");
for (var k = 0; k < arr2.length; k++)
document.writeln(arr2[k]);
</script>
<hr/>
<h3>函数</h3>
<p>
函数可以包含一段可执行的代码，可以接受调用者传入参数，可以返回处理结果。
函数参数列表可以不需要数据类型声明，函数的返回值也不需要数据类型声明。
<br/>语法格式:
function functionName(param1, params2,....){}
<br/>调用语法：
functionName(values,value2,...)
</p>
<button id="but1" onclick="ff('abc')">点我</button>
<script>
function ff(param1){
alert(param1+"：Click me!");
}
</script>
<script>
document.getElementById("but1").onclick=function(){
alert("DOM树");
}
</script>
<script>
ddd();
function ddd(){
alert("小杰说：'我爱黄毛!'");
}
</script>
<script>
</script>
</body>
</html>
浏览器加载原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浏览器加载原理</title>
</head>
<body>
<h2>浏览器加载原理</h2>
<p>
1、浏览器按照从上到下的顺序下载HTML文档，一边下载一边加载到内存，
不是全部下载后再全部加载到内存。另外DOM树结构的绘制优先于关联元素
的加载，比如图片<br/>
2、通常来说，浏览器执行JavaScript脚本有两大特性：①载入后马上执行。
②执行时会阻塞页面后续内容（包括页面的渲染、其它资源的下载）<br/>
载入后马上执行
document.getElementById("but1").onclick=function(){
alert("DOM树");
}
<hr/>
特殊案例:<br/>
<script>
ddd();
function ddd(){
alert("小杰说：'我爱黄毛!'");
}
</script><br/>
阻塞后续执行
alert('dddd');如果不点击确认按钮，则后续的代码不执行<br/>
3、浏览器加载HTML文档时如果遇到<script>标签就会停止后面元素的加载，
先对JavaScript脚本文件进行解析和执行
</p>
</body>
</html>
流程控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流程控制</title>
</head>
<body>
<h1>流程控制</h1>
<p>
流程控制：就是程序代码执行顺序，通过规定的语句让程序代码有条件的按照一定的方式执行<br />
按照结构编程的原理，任何程序都是由顺序结构、选择结构和循环结构三种结构组成
</p>
<h2>分支选择</h2>
<p>if--else if---else<br />
var kk=接收一个数据;<br />
if(kk==3)<br />
输出一个数据;<br />
else<br />
输出另外的数据;<br />
</p>
<input id="in1" /><span id="sp1"></span><br />
<input type="button" onclick="ff()" />
<script>
function ff() {
var kk = document.getElementById("in1").value;
var ss = "";
if (kk == '')
ss = "请输入数据";
else {
try {
var re = /^\d*$/;
if (!re.test(kk))
throw new Error("格式错误!");
ss = parseInt(kk);
ss = "您输入的数据为:" + kk;
} catch (error) {
ss = "请输入合法的整数";
}
}
document.getElementById("sp1").innerHTML = ss;
}
</script>
<p>
语法结构：
switch(expression){<br />
case condition1:<br />
break;<br />
default:<br />
语句n;<br />
}
<hr />
swith工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个
case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用
break 来阻止代码自动地向下一个 case 运行
</p>
<input id="in2"><span id="sp2"></span>
<input type="button" onclick="ff2()" />
<script>
function ff2() {
let in2 = document.getElementById("in2").value;
let kk = Math.round(in2 / 10);
var ss = "";
switch (kk) {
case 10:
ss = "满分";
break;
case 9:
case 8:
ss = "良好";
break;
case 7:
case 6:
ss = "及格";
break;
default:
ss = "不及格"
}
document.getElementById("sp2").innerHTML = ss;
}
</script>
<h2>while循环</h2>
<p>
while(expression){
}
</p>
<h2>do/while循环</h2>
<p>
do{
}while(expression);
</p>
<h2>for循环</h2>
<p>
for(初始化语句; 条件判断语句; 步长长度值){
}
</p>
<h2>break和continue</h2>
<p>continue用于终止本次循环，接着开始下一次循环。
break用于完全终止循环，开始执行循环后续的代码
</p>
<h2>
作业：
</h2>
<ol>
<li>判断101-200之间有多少个素数，并输出所有素数</li>
<li>求s=a+aa+aaa+aaaa+aa...a的值，其中a是一个数字。例如2+22+222+2222+22222(此时共有5个数相加)，几个数相加有键盘控制</li>
<li>打印出所有的"水仙花数"，所谓"水仙花数"是指一个三位数，其各位数字立方和等于该数本身。例如：153是一个"水仙花数"，因为153=1的三次方＋5的三次方＋3的三次方</li>
<li>输入一个数字，然后判断是否为正整数，如果不是，提示重新输入；如果是，将该数字左右反转，然后输出（列如：12345，翻转之后为54321）</li>
<li>在页面中接收一个用户输入的数字，并判断该数是否是质数</li>
</li>
</ol>
</body>
</html>
事件处理机制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件处理机制</title>
</head>
<body>
<h1>事件处理机制</h1>
<p>
1、发生一件事情即为事件，比如鼠标点击、双击、键盘按钮被按下。
事件句柄event handler如onclick、onload等<br/>
2、JavaScript事件注册，就是把控件的事件和处理事件的代码联系起
来的方法<br/>
3、如何进行事件的注册<br/>
<h3>直接在控件标签中写代码</h3>
</p>
<input type="button" value="测试" onclick = "javascript:alert('你好！');"/>
<p>
默认utf-8编码显示，编码问题的处理办法
</p>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<h3>事件处理程序</h3>
<p>
编写一个事件处理程序（函数），在控件标签中将该函数指定给一个事件。
</p>
<script>
function show() {
alert("你好!");
}
</script>
<input type="button" value="测试" onclick = "show()"/>
<p>
在页面加载事件onload中，为控件绑定一个函数。其中onload表示在页面加载完成后回调的处理函数
</p>
<body onload="abc()">
<script>
function abc() {
document.getElementById("b").onclick = function(){
alert('你好');
};
}
</script>
<button id="b">猴子</button>
<p>另外一种页面加载事件的写法</p>
<script type="text/javascript">
window.onload=function(){
document.getElementsByTagName("input").item(2).onclick=function() {
alert('页面加载另一种写法')
};
}
</script>
<input type="button" value="确定"/>
<h3>事件对象的使用</h3>
<p>
在IE10或者chrome浏览器中是window.event，在其他浏览器中，
是事件处理函数的第一个参数
</p>
<button onclick="rr(event)">点击</button>
<script>
function rr(evt){
alert(evt.screenX+"："+evt.screenY);
}
</script>
</body>
</html>
语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语句</title>
</head>
<body>
<h2>语句</h2>
<p>
语句是js的基本执行单位，要求所有的语句必须以分号结束。
<br />
JavaScript脚本语言的基本构成是由控制语句、函数、对象、方法、属性等来实现编程的
<br />
JavaScript是一种基于对象的事件驱动的脚本设计语言，所以在编写程序的过程中要遇到各
种各样的事件，所以要给不同的事件设定一定的规则来控制该流程。一般是由事件event触发
自定义函数的执行
<br />
JavaScript常用的流程控制有三种结构：顺序结构、选择结构、循环结构
</p>
<h2>语句块</h2>
<p>
{}，但是注意js中的语句块不能作为变量的作用域，只是在编辑器中方便管理代码。因为javascript并
没有块级作用域，所以这种写法是无害的。<br />
在ECMAScript中有代码块的概念，注意变量的提升问题
</p>
<h2>空语句</h2>
<p>
直接写一个分号；即可
for(var k=0;k<1000;k++); </p>
<h2>异常抛出语句</h2>
<p>
js中所有的异常都是Error对象，抛出方式为throw new Error(errorString)
<br />
js一旦遇到异常则立即查找对应的异常捕捉块。如果没有对应的异常捕捉块，则
异常将传播给浏览器，程序非正常终止。<br />
chrome浏览器提供了强大的js调试工具可以查看报错信息
</p>
<p>
try{
}catch(e){
}finally{
}
</p>
<input id="in1" /><span id="err1"></span><br />
<input type="button" onclick="ffff()" value="判断">
<script>
function ffff() {
var ss = "";
try {
var kk2 = document.getElementById("in1").value;
var re = /^\d*$/;
if (!re.test(kk2))
throw new Error("格式错误!");
kk2 = parseInt(kk2);
kk2++;
ss += "数据格式正确：" + kk2;
} catch (e) {
ss += "error:" + e.message
} finally {
ss += ",finally...."
}
document.getElementById("err1").innerHTML = ss;
}
</script>
<fieldset>
<legend>按钮操作加减</legend>
<input type="button" value="+" onclick="ttt('+')"><input id="in2"
value="0"><button onclick="ttt('-')">-</button>
<script>
function ttt(fh){
var input=document.getElementById("in2");
var k1=input.value;
if(fh=='+')
k1++;
else
k1--;
input.value=k1;
}
</script>
</fieldset>
<h3>js异常和java异常的区别</h3>
<p>
1、js只有一个异常类Error，无需在定义异常时声明抛出，所以没有throws语句<br/>
2、js是弱类型语言，所以在catch语句中异常类型无需执行异常的类型判定<br/>
3、js只有一个异常类，所以也只有一个catch语句<br/>
4、获取异常的描述信息是通过异常对象的message属性，不是通过getMessage()方法实现的。
</p>
<h3>with语句</h3>
<p>
with是一种简化写法，使用with语句可以避免重复书写对象<br/>
需要输出九九乘法口诀表
</p>
<script>
document.write("<table width='60%'>");
with(document){
write("<caption>九九乘法口诀表</caption>");
for(let i=1;i<10;i++){
write("<tr>");
for(let k=1;k<=i;k++){
write("<td>"+k+"*"+i+"="+(i*k)+"</td>");
}
write("</tr>")
}
write("</table>")
}
</script>
</body>
</html>
运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>运算符</title>
</head>
<body>
<h1>运算符</h1>
<article>
<h2>赋值运算符</h2>
<p>
变量赋值 var k=123
允许连续赋值var a=b=c=d=7
加强的赋值计算+= -= *= /= %= &= |= ^= <<=>>= >>>=
</p>
<h2>算术运算符</h2>
<p>
执行基本的数学计算，其中包括加法+ 、减法- 、乘法* 、除法/ 、求余% 、
自加++ 、自减--<br />
复杂的计算可以依赖Math类的方法实现，例如开方Math.sqrt(4) 、乘方
Math.pow(a,5) 、随机数Math.random() 等
</p>
<h2>位运算符</h2>
<p>
按位与& 、按位或 | 、按位非 ~ 、按位异或 ^ 、左移位 << 、右移位>>、无符号右移位 >>>
</p>
<h2>比较运算符</h2>
<p>
判定两个值的大小，计算结果是一个布尔值
大于>、大于等于>=、小于<、小于等于<=、等于==、不等于!=、 <Strong>严格等于===、严格不等于!==</strong>
js支持自动类型转换，所以'5'==5返回为true，但是'5'===5返回false
</p>
<h2>逻辑运算符</h2>
<p>
逻辑运算用于操作两个布尔类型的变量或常量，并支持短路计算 逻辑运算符有逻辑与&& 、
逻辑或|| 、逻辑非!
<strong>但是实际上位运算也可以用于逻辑计算，但是位计算不会进行短路操作</strong>
</p>
<h2>三目运算符</h2>
<p>
表达式1?表达式2：表达式式3
注意每个部分的表达式只能是一条语句，不能是多条语句
</p>
<h2>逗号运算符</h2>
<p>逗号运算符允许将多个表达式排在一起，整个表达式返回最右边表达式的值。
a=(b=5, c=7, d=54);
</p>
<h2>void运算符</h2>
<p>void用于强行指定表达式不会返回值
a=void(b=5, c=7, d=56);
</p>
<h2>typeof和instanceof运算符</h2>
<p>
typeof运算符用于判断某个变量的数据类型，既可以作为函数使用，例如typeof(a)；
也可以当作运算符使用，例如typeof a<br/>
instanceof运算符用于判断某个变量是否为指定的类型a instanceof Array 或者 a instanceof Object
</p>
</article>
<script>
var a = b = c = d = 10;
console.log(a);
console.log(bb = "abcd");
</script>
<script>
let arr = [];
while (arr.length < 6) {
let kk1 = Math.round(Math.random() * 100);
let bb = false;
for (let k = 0; k < arr.length; k++) {
if (kk1 == arr[k]) {
bb = true;
break;
}
}
if (!bb)
arr.push(kk1);
}
for (let k = 0; k < arr.length; k++) {
document.writeln(arr[k]);
}
</script>
<script>
console.log(3 & 10);
console.log(3 | 10);
console.log(10 >> 2);
console.log(10 << 2);
</script>
<script>
console.log(-10 >> 2);
console.log(-10 >>> 2);
</script>
<script>
var kk = null;
console.log(kk == null)
console.log(kk == undefined)
console.log(null == undefined)
console.log(window.isNaN(kk));
console.log("method:用于区分null和undefined");
console.log(kk === null);
console.log(kk === undefined);
</script>
<script>
var k = 5;
var b = 2;
console.log(++b < 10 || 3 > k++);
console.log(b + ":" + k);
console.log(++b < 10 | 3 > k++);
console.log(b + ":" + k);
if (-19)
console.log("apple");
else
console.log("android");
</script>
<script>
var kk=123;
console.log(typeof kk);
console.log(typeof(kk));
</script>
<script>
var aa=[];
console.log(typeof(aa));
console.log(aa instanceof Array);
console.log(aa instanceof Object);
</script>
</body>
</html>
本文详细解读了ECMA6语法的变量与常量、复合类型（对象、数组与函数）的定义与操作，涵盖了浏览器加载原理，以及流程控制（if-else、switch、循环）、事件处理机制。通过实例演示了语句与运算符的使用，包括赋值、比较、逻辑运算等。
扫一扫
3543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
