<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>
<button onclick="_let()">let</button>
<button onclick="_const()">const</button>
<button onclick="mbstring()">模板字面量</button>
<button onclick="arrows()">箭头函数</button>
<button onclick="sum()">函数默认值</button>
<button onclick="apply__()">apply__</button>
<button onclick="arrayObj ()">属性简写</button>
<button onclick="pro()">面向对象</button>
<script>
function _let(){ // 块变量
let sex = '男';
// let sex = '女'; // 错误
let isF = true;
let anmi = '鱼'; // 块
par = 'all'; // 全局变量
if( isF ){
par = 'isF-> all' // 将上一个全局变量替换
let anmi ='niu'; // 在块里面定义
console.log(anmi); // isF 里面
console.log('this isf'+par); // 覆盖后的全局变量
}
console.log(anmi);
console.log(par)
}
function _const(){
// 定义一个无法修改的常量
const PI = 3.14;
// PI = 3.15; //报错
console.log(PI);
}
// 模板字面量
function mbstring(){
// 平常的写法
var book = {
name : 'student is good'
}
console.log('我是普通的'+book.name);
// 模板字面量
console.log(`我是模板字面量${ book.name }
新行
第三行。`)
}
// 箭头函数
function arrows(){
var arrElement = function arrElement(r){
const PI = 3.14;
let area = PI * 2 * 2;
}
// 箭头函数写法
let arrElementS = (r) =>{
3.14 * r * r;
}
console.log( arrElement(2) )
}
// 函数默认值
function sum() {
function sums (x=1,y=2,z=3){
return x + y + z;
}
// 修改 两个参数
console.log('修改 两个参数'+sums(4,2)) // 9
console.log('默认'+sums()) // 6
}
// apply()
function apply__(){
function apply_(name,age){
this.age = age;
this.name = name;
}
// apply : 数组形式
function apply_x(name,age){
apply_.apply(this,arguments); // 使用 apply_的方法
}
var apply_x = new apply_x('dcf',20);
console.log(apply_x.name) // dcf
//直接指定参数列表对应值的位置 --> call
function call_(name,age){
apply_.call(this,name,age);
}
var call_ = new call_('call',10);
console.log(call_.name); // call
}
function arrayObj (){
// 数组解构，一次初始化多个变量
var [x,y] = ['a','b'];
// 相同代码
// var x = 'a'
// var x = 'b'
console.log('前'+x+','+y);
// 值互换
[x,y] = [y,x];
console.log('后'+x+','+y);
// 属性简写
function Elemobj(){
var obj= {x,y};
console.log(obj)
}
Elemobj()
}
// 面向对象
function pro(){
// function prototype_(title,par,name){
// this.title = title;
// this.name = name;
// this.par = par;
// }
// prototype_.prototype.prin = function(){
// return this.title;
// }
// var x = new prototype_('a','no','fd');
// console.log( x.prin() )
// console.log( x )
//ES6 简化书写
class book {
constructor ( title,par,name ){
this.title = title;
this.name = name;
this.par = par;
}
prin(){
return this.title;
}
}
}
</script>
</body>
</html>