标签：har length 括号 bind cto js对象 就是 简介 ...
var 可以重复定义、不能限制修改、没有块级作用域
var 需要封装进function
let 不能重复定义、变量、块级作用域{}
const 不能重复定义、常量、块级作用域{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function (){
var aBtn=document.getElementsByTagName('input');
for(var i=0;i<aBtn.length;i++){
aBtn[i].onclick=function (){
alert(i);
};
}
};
</script>
</head>
<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
</body>
</html>alert出来的都是3
把alert的内容放到函数中才正常
<script>
window.onload=function (){
var aBtn=document.getElementsByTagName('input');
for(var i=0;i<aBtn.length;i++){
// var 需要函数级作用域包起来
// let 和 const不用，它们只需要大括号即可
(function(i){
aBtn[i].onclick=function (){
alert(i);
};
})(i);
}
};
</script>
</head>
<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
</body>如let则不需要封装进function中
<script>
window.onload=function (){
let aBtn=document.getElementsByTagName('input');
// for 循环本身就是语法块
for(let i=0;i<aBtn.length;i++){
aBtn[i].onclick=function (){
alert(i);
};
}
};
</script>
</head>
<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
</body>解构赋值
1.左右两边必须一样
2.定义和赋值必须同时进行
<script>
window.onload=function (){
// 给a、b、c分别赋值
// 两边结构要一样，如同数组、同json等
let [a,b,c]=[12,13,15];
let {a,b,c}={a=12,b=13,c=15};
//粒度
let [a,b,c]=[12,{b:{f:66},g:12},c=12]
</script>//原来
function (参数,参数){
函数体
}
//箭头函数
(参数,参数)=>{
函数体
}
1.如果有且仅有1个参数，()可以省
2.如果函数体只有一句话，而且是return，{}可以省
*关于this
默认参数
(a, b=xx, c=xx)
参数展开(剩余参数、数组展开)
1.“三个点”的第1个用途：接收剩余参数
function show(a, b, ...args)
剩余参数必须在参数列表的最后
function show(a,b,...args){
}
def show(a,b,*args,c,d):
pass
2.“三个点”的第2个用途：展开一个数组 数组——5种
map 映射：一个对一个
let arr=[66,50,78,92,16]
let arr2=arr.map(item=>item>=60)
reduce 汇总：一堆->一个
let arr=[66,50,78,92,16]
let sum=arr.reduce((tmp,item.index)=>{
return tmp+item
});
filter 过滤：
let arr=[66,51,78,93,16]
let arr2=arr.filter(item=>item%2)
forEach 遍历：
let arr=[66,51,78,93,16]
let sum=0
arr.forEach(item=>{
sum+=item
});
// 把类数组对象转化成数组，才可以调用forEach进行遍历
Array.from([array-like])=>[x,x,x]
json——2变化
1.简写：名字和值一样的，可以省
let a=5;
let b=12;
json={a:a,b:b}等价于{a,b}
2.function可以不写
<script>
/*let json={
a: 12,
b: 5,
show: function (){
alert(this.a+this.b);
}
};*/
let json={
a: 12,
b: 5,
show(){
alert(this.a+this.b);
}
};
json.show();
</script>字符串模板：植入变量、任意折行
// 字符串模板 `` 反单引号
let json={name: 'mu', age: 18};
//alert('我叫：'+json.name+'，我今年'+json.age+'岁');
alert(`我叫：${json.name}，我今年${json.age}岁`);
// 随便换行
/*alert('abc');*/
alert(`ab
cde
f
d`);
if(sNum.startsWith('135')){
alert('移动');
}else{
alert('联通');
}
if(filename.endsWith('.txt')){
alert('文本文件');
}else{
alert('图片文件');
}//传统js对象
function Person(name, age){
this.name=name;
this.age=age;
}
//给对象增加函数
Person.prototype.showName=function (){
alert('我叫'+this.name);
};
Person.prototype.showAge=function (){
alert('我'+this.age+'岁');
};
let p=new Person('mu',18)
p.showName()
p.showAge()
//--------------------------------------------------
function Worker(name, age, job){
Person.call(this, name, age);
this.job=job;
}
Worker.prototype=new Person();
Worker.prototype.constructor=Worker;
Worker.prototype.showJob=function (){
alert('我是做：'+this.job);
};
let w=new Worker('mu', 18, '打杂的');
w.showName();
w.showAge();
w.showJob();
//------------------------------------------------
// class/constructor
class Person{
constructor(name, age){
this.name=name;
this.age=age;
}
showName(){
alert('我叫'+this.name);
}
showAge(){
alert('我'+this.age+'岁');
}
}
let p=new Person('mu', 18);
p.showName();
p.showAge();
//---------------------------------------------
// extends/super
class Worker extends Person{
constructor(name, age, job){
//super-超类(父类)
super(name, age);
this.job=job;
}
showJob(){
alert('我是做：'+this.job);
}
}
let w=new Worker('mu', 18, '打杂的');
w.showName();
w.showAge();
w.showJob();
//-------------------------------------------
// bind——给函数定死一个this
class Person{
constructor(name, age){
this.name=name;
this.age=age;
}
showName(){
alert(this);
alert('我叫'+this.name);
}
showAge(){
alert('我'+this.age+'岁');
}
}
let p=new Person('mu', 18);
document.onclick=p.showName.bind(p);
//----------------------------------------------------
//普通函数：根据调用我的人 this老变
//----------------------------------------------------
//箭头函数：根据所在的环境 this恒定
// 输出document对象
document.onclick=function (){
let arr=[1,2,3];
arr.a=()=>{
alert(this);
};
arr.a();
}; 标签：har length 括号 bind cto js对象 就是 简介 ...
原文地址：https://www.cnblogs.com/guotianbao/p/9744646.html
