冬休み研究-ES6(1)
constをしましょう
letに関するいくつかの考慮事項
1.変数を繰り返し宣言することはできません
2. Varにはブロックレベルのスコープはありませんが、letにはあります(ブロックレベルのスコープには{}条件付きループなどが含まれます)
3. letの変数昇格はありません(var has、つまり、使用する前に、位置に関係なく、コード内の変数の宣言を検出します)
4.スコープチェーンには影響しません
<script>
{
let name="paopao";
function say(){
console.log(name);
}
say();
}
</script>
<script>
let items = document.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
this.style.background = 'pink';
}//用this不要紧,但是发现用items[i]会报错,因为var是全局的,但是用let就可以
for (let i = 0; i < items.length; i++) {
items[i].onclick = function () {
items[i].style.background = 'pink';
}
}
</script>
const
1.いくつかの注意:
定数を定義するときは、必ず初期値を割り当ててください
ブロックスコープ
配列要素とオブジェクト要素は変更されず、一定の変更は報告されません( 即数组本身和数组内容的改变,内容可以变,常量指向地址不能变
)
可変破壊割り当て
//数组解构
<script>
const Fruit=['banana','apple','peach','watermelen'];
let [a,b,c,d]=Fruit;//定义四个变量和数组每个元素对应
console.log(a+" "+ b+" "+c+" "+d);
</script>
//对象解构
<script>
const paopao={
name:"红",
age:19,
eat:function () {
console.log("吹泡泡");
}
}
let{name,age,eat}=paopao;//对象用{}数组用[]
console.log(name+age+eat)
</script>
テンプレート文字列
<script>
let str = `泡泡
果果
`;
console.log(str);//可以换行,''和""就不行
</script>
<script>
let love="果果";
let obj=`${love}和泡泡`;
console.log(obj);
</script>
オブジェクトを簡素化する
メンバー変数とメンバー関数は直接記述でき、メソッドはfunctionキーワードを省略できます
<script>
let name="红";
let play=function(){
console.log("吹泡泡");
}
const Guo={
name,
play,//直接放变量名
eat(){
console.log("吃绿绿");
}//省略function
}
</script>
矢印機能
予防:
1.オブジェクトをインスタンス化するコンストラクターとして使用することはできません。コンストラクターのみを使用できます。
2.引数変数は使用できません
3.仮パラメーターが1つしかない場合は、真ん中()を省略できます。
4.コード本体にステートメントが1つしかない場合は、{}を省略します(この時点ではreturnステートメントも省略され、実行結果は戻り値になります)
let fn=(a,b)=>{
return a+b;
}
//this是静态的始终指向函数声明时的作用域下的this的值
<script>
function getName1() {
console.log(this.name);
}
let getName2 = () => {
console.log(this.name);
}
window.name = "泡泡";
const school = {
name: "果果"
}
getName1.call(school); //call方法可以改变this的值,指向school
getName2.call(school); //输出果果、泡泡,箭头函数依然指向的是全局对象,只能指向函数在声明时所在作用域
let fun = () => {
console.log(arguments);
}
fun(1, 2, 3, 4);//报错argumrnts未定义
</script>
//省略()
let add=n=>{
return n+n;
}
console.log(add(8));
//省略{}
let pow=n=>n*n;
console.log(pow(8));
矢印関数の2つの小さなアプリケーション
<style>
div{
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div id="ad">
</div>
<script>
let ad=document.getElementById('ad');
ad.addEventListener("click",function(){
let _this=this;//在外界保留下this的值使其向上找的时候找到这个值,否则是window
setTimeout(function(){
_this.style.background='pink';
},3000);
});
//用箭头函数
setTimeout(()=>{
this.style.background='pink';
},3000);//箭头函数的this就是声明时候的作用域此时指向事件源ad
</script>
<script>
const arr=[1,2,3,4,5,6,7];
const result=arr.filter(item=>item%2===0);
console.log(result);
</script>