let命令
let 关键字用来定义变量
let 的特性:
a.不能够重复定义
b.不存在变量提升
c.存在块级作用域
b.不存在作用域链问题
ES6 中 let
<script>
//测试一
var name = "admin"
var name = "root"
console.log(name);//结果:root
/*
//测试二
let name = "admin"
let name = "root"
console.log(name);//结果:报错
*/
/*
测试三
console.log(name); //结果，报错
let name = "admin"
*/
/*
//测试四
{
let i = 20
}
console.log(i) //报错 (因为块级作用域，没有在括号里，所以报错)
*/
</script>
变量
<script>
//1.ES5中定义变量 变量名的规则
//var name = "任嘉伦";
//2.ES6中定义变量 使用let 关键字
let name = "任嘉伦"
//ES6新特性1: 不能狗重复声明
/*
let name = "任嘉伦"
let name = "赵露思" //会报错
*/
//ES6新特性2: 块级作用域
/*
循环结构 for(){} while(){} do(){}
选择结构 if(){} if(){}else{} if(){}elseif(){}.....else switch(){}
函数 function fun_name(){}
*/
{
let num = 12;
}
//console.log(num); //结果:报错
//ES6新特性3: 没有变量提升
//ES6方法
console.log(color); 结果: 报错
let color = 'red'
//ES5方法
/*
console.log(color); 结果: undefined
var color = 'red'
*/
</script>
关于const
const 是用来声明常量，常量就是固定不变的量，在我们开发的过程中当一个变量希望它的值在声明以后，不被(自己或他人)改变。
语法: const 常量名称 = 值
注意:
常量的值一旦定义不能被修改
常量的名称一般使用大写
常量在定义时必须赋值
不允许重复定义的
块级作用域
const 常量
<script>
//定义一个常量PI
const PI=3.14 //常量在定义时必须赋值
console.log(PI);
//const 定义的对象或数组时，可以修改对象和数组中的元素值，不能直接修改
const ARR = ['zhangsan','lisi']
ARR[1] = ['李四']
ARR[2] = '王五'
console.log(ARR)
</script>
for 的经典例案例
<script>
var arr =[];//定义了一个空数组
for(var i=1; i < 10; i++) {
// //循环体
arr[i] = function () {
// //将i的值返回到外边(函数)
return i;
}
}
console.log(arr[4]());//结果:10
</script>
单击变色
</style>
</head>
<body>
<div class="container">
<h2>点击换色</h2>
<div class="item">one</div>
<div class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
</div>
<script>
//1.获取到需要绑定单击事件的标签
var divObj = document.getElementsByClassName("item")
//2.给标签绑定单机事件
for(var i = 0;i<divObj.length;i++){
console.log(i);
divObj[i].onclick=function(){
//alert(i)
//3.改变div的背景颜色 this表示当前这个对象
this.style.backgroundColor = 'cyan'
}
}
/*
console.log(divObj);
divObj[0].onclick = function(){
alert(0)
}
divObj[0].onclick = function(){
alert(10)
}
*/
//扩展:点击时随机颜色
// 两个颜色之间互相切换
</script>
解构赋值
数组解构赋值
对象解构赋值:
a.等号的左侧要使用或括号( {} )包裹变量名
b.变量名要和对象中要解构的属性名保持一致
c.等号右侧就是要解构的对象
字符串解构赋值
ES6 简化赋值
<script>
//1. es5 赋值方式
/*
var name = "张三"
var age;
age = 20
var a = 5;
a = age+a
*/
//2.ES6中的解构赋值 目的在于可以简化同时定义多个变量并赋初
/*var num1 = 12;
var num2 = 13;
var num3 = 15;
var num4 = 20;
var num5 = 23;
*/
/*
//ES5(js)方法 (不是很简化)
var num1 = 12，num2 = 13， num3 = 15，num4 = 20,num5 = 23
*/
//ES6解构赋值的用法 (比ES5更简化)
let[num1,num2,num3,num4,num5] = [12,13,15,20,23]
// console.log(num1);
let[name,age] = [18,'zhangsan']
console.log(age);//结果:zhangsan
</script>
不完全解构
<script>
//1.变量名比等号右侧的值少,且没有其他特殊处理，多出的值会被忽略
let [a,b,c] = [10,15,17,23,31] //结果: a是10 b是15 c是17
//2.变量名比等号右侧的值多,多出的变量名值为 undefined
let [a1,b1,c1] = [10,15] //结果: a1是10 b1是15 c1是undefined
//console.log(c1);
//3.剩余运算符(...)，会将剩下的值以数组的方式存储到c2变量中
let [a2,b2,...c2] = [10,15,17,23,31] //结果: a2是10 b2是15 c是2
console.log(c2);
//4.默认值,当等号左侧的变量设置了默认值，在等号右侧又可以找到
let [a3,b3,c3=`default`] = [10,15,zhangsan]
console.log(c3);//结果: zhangsan
//5.undefined 和 unll
let [test = 12] = [undefined]
console.log(test);//结果: 12
let [test = 12] = [unll]
console.log(test1);//结果: null
</script>
对象的结构赋值
<script>
//js如何定义对象，对象中有属性和值() 属性名:值属性
let obj = {
name:"任国超",
age:18,
sex:1,
study:function(){}
}
//使用对象中的某个值: 对象名称.属性名
obj.age //访问对象中的属性
obj.study() //调用方法
//对象的解构赋值
/*注意:
a.等号的左侧要使用花括号( {} )包裹变量名
b.变量名要和对象中要解构的属性名保持一致
c.等号右侧就是要解构的对象
*/
let obj1 = {
name:"任国超",
age:18,
sex:1,
study:function(){}
}
let {name,age} = obj1
console.log(name);
</script>
?
运算符复习
<script>
/*
运算符:帮助我们完成业务逻辑
运算符号的分类:
算数运算符
+ - * % ++ --
比较运算符
> < >= != == !== ===
= 表示赋值，就是把等号右边赋值给等号左边的变量
== 表示比较，如果两边的值相等，返回true,否则返回fale
=== 表示比较，两边的值和数据类型都是相同，返回true,否则返回fale
赋值运算符
= += -= *= /= %=
a+=b 等价于 a = a+b
逻辑运算符
注:大多数情况都会用在条件里边
&& 只有当两边的条件都为真时，整体返回true,其他情况全返回false
|| 只有当两边的条件都为假时，整体返回false,其他情况全返回true
! 非真即假 非假即真
字符串拼接运算
注:变量和字符串拼接
5+5 //结果 10
10+'5' //结果 105 因为是拼接运算，所以是将+号两边拼接为105
三元运算符
条件?条件为真的执行:条件为假的执行
*/
//取余运算 % 例: 4%5余数是4
//++ -- 注意:参与运算的是一个变量
var num = 10
num++ //num =11
var num = 10
++num //num =11 // num++ 和 ++num 对于num这个变量来讲没有任何区别
var res = ++num //num = 11 res = 11
var res = num++ //num = 11 res = 10
//15*'zhangsan' //结果:NaN
//NaN+NaN //结果:NaN
</script>
ES6 运算符拓展
<script >
//指数运算符 符号 ++
// 5的3次方
console.log( 5**3);
//指数赋值运算符 符号 **=
var a = 2;
a**=4 //等价于 a = a**4
console.log(a);
</script>
|