js part1
程序员文章站
2022-06-11 20:45:57
...
javaScript:动态效果，html是人体，css是五官、皮肤，js就是动作，情商，懂
var:用 var 声明变量，也是全局变量。在任何一个代码块中声明都可以访问（这很神奇，但 也需要你更加小心会覆盖变量值，造成全局变量污染。
let:let 是有代码块作用域的,会严谨一点，不会污染全局。
const：存在代码块的作用域。不同的是，const 声明 的变量不能被修改，且在初始化的时候必须赋值。
如果你给那个变量又强行赋值，那就会报错
continue:会跳出循环的一个迭代，（后序还会运行）
break：到了就会戈然而止
var Things=[0,1,2,3,4,5]
for (var i = Things.length - 1; i >= 0; i--) {
if(Things[i]==3){break;}
console.log(Things[i])
};
//continue54210
//break:54
<script>
//for 循环
const array = [1, 3, 5, 10, 12, 15, 20];
for (let i = 0; i < array.length; i++) {
console.log(i,"==>", array[i]);
}
</script>
es6
//for in 遍历数组
console.log("-----------遍历数组");
const array = [10, 12, 23, 45, 5, 6, 20];
for (let index in array) {
console.log(index,"==>", array[index]);
}
<script >
//for in 遍历对象
console.log("-----------遍历对象");
const obj = {
num : 45212546585, name: "张三", age : 35, des : "我叫张三"
}
for (let key in obj) {
console.log(key,"==>", obj[key]);
}
</script>
tips:for in:遍历对象是key in obj[key],遍历数组就是index。
<script >
//for in 遍历对象
console.log("-----------遍历对象");
const obj = [
{num : 45212546585, name: "张三", age : 35, des : "我叫张三1"},
{num : 45212546586, name: "张si", age : 35, des : "我叫张三2"},
{num : 45212546587, name: "张sir", age : 35, des : "我叫张三3"},
]
for (let index in obj) {
console.log(index,"==>", obj[index]);
for(let key in obj[index]){
console.log(key,"==>", obj[index][key]);
}
}
</script>
For of 是 ES6 的语法，可以遍历数组，还能遍历字符串中的字符等。
forEach:可以对数组进行调用。
//forEach 遍历数组，用函数作为参数调用
const array = [10, 12, 23, 45, 5, 6, 20];
array.forEach(function(v) {函数参数v就是遍历的值，
console.log(v);
});
console.log("------------");
//forEach 遍历数组，用箭头符返 回当前行 （“变量 =>”方式 ）
array.forEach(item => {
console.log(item);
});
test
let arr2 = ["张三", "李四", "王五"];
//try
try {
let i = 1;
let type = typeof i;
console.log("type=", type);//number
//throw
if (!("number" === type)) throw "必须是数字类型";
if (i === 0) throw "被除数不能等于零";
for (; i < arr2.length; i++) {
if (i == 2) {
//continue
continue;
}
console.log(i + "====>" + arr2[i]);
}
} catch (err) { //catch
console.log("err msg=>", err);
}
dom操作
<body>
<div class="productBox" id="app" name="myapp">
<div class="productTitle">苹果 15 元一 斤 </div>
<span class="productTag">标签：水果 、苹果、生鲜</span>
<p class="des">这个苹果是东南亚苹果，超级好吃 。 这个苹果是东南亚苹果，超级好吃这个苹果是东南亚苹果，超级好吃 .</p>
</div>
</body>
<script>
console.log("getElementById============>");
let app = document.getElementById("app");
console.log(app);
console.log("getElementsByName============>");
let myapp = document.getElementsByName("myapp");
console.log(myapp[0]);
console.log("getElementsByClassName============>");
let box = document.getElementsByClassName("productBox");
console.log(box[0]);
</script>
createElement 是创建一个元素。参数是元素的标签名称，如：button、div、span、input、
select 等。如下是创建一个按钮。
createTextNode 是创建文本。
console.log("createElement============>");
var button = document.createElement("button");
//createTextNode
var text = document.createTextNode("保存");
//用 appendChild 把 text 放到 button 里
button.appendChild(text);
//用 appendChild 把 button 放到 app 里
app.appendChild(button);
//创建一个属性样式
let style = document.createAttribute("style");
style.value = "background-color: burlywood;";
hasChildNodes：是否有子节点
函数
<script>
function 函数名(参数 1,参数 2){
//TODO
return 返回; //如果需要返回，就返回然后拿个变量赋
}
</script>
函数作为参数的函数（回调）
<script>
//callFun 是另外一个函数
function myfun04(msg,callFun) {
//调用 callFun
let v1;
callFun(msg);
}
//调用方式 1
myfun04("hello，你好！",function(str){
console.log(str);
});
myfun04("我是张三",str=>{
console.log(str);
});
</script>
函数调用缺省传参：在 JS 中调用函数时，可以不传递参数。也就是说如果函数本身有参数，但是调用的时 候故意不传或者漏传参数，都是可以的。
<script >
function myfun03(num,msg) {
let str = "msg="+msg+",num="+num;
return "结果=>>"+str;
}
//调用,不传任何参数
var rs = myfun03();
console.log(rs);//结果=>>msg=undefined,num=undefined
//调用,传第一个参数，第二个参数不传。也是可以的
console.log('------------------------')
var rs = myfun03(8);//结果=>>msg=undefined,num=8
console.log(rs);
//调用,传第二个参数,如果第一个参数不传
//需要指定第一个参数是 null 或者 undefined
var rs = myfun03(null,"dada");
console.log(rs);//结果=>>msg=dada,num=null
</script>
javascript 高级
在 ES6 中就出现 了声明类 class、类继承 extends、模块化编程等，各种炫酷的新特性，为前端和后端的交流、沟通是团队协作的重要一环。
创建对象
<script>
var obj = {};
//对象属性
obj.id = "003";
obj.name = "张三 ";
obj.sex = "男 ";
//声明 run 方法
obj.run = function(){
let num = 5;
if(this.sex=="男") num = 10;
console.log("大家 好，我 叫 "+this.name
+"，性别是"+this.sex+",我一 天可 以跑"+num+"公里 ");//5
}
obj.run()
</script>
–创建花括号：
var Person = {
//属性
id:null,
name:null,
sex:null,
Tell:{
type:"中国移动", number:"1881682011", other:"des", //定义方法
call:function() {
console.log(Person.name+"的"+this.type+"电话号码（" +this.number+"）"+"每月拨打电话 200 多次 ！");
}
},
//初始化，给对象赋值
init:function(id, name, sex) {
this.id = id;
this.name = name;
this.sex = sex||"男 ";
},
//跑的方法
run:function(){
var num = 5;
if(this.sex=="男") {
num = 10;
}
console.log("大家 好，我 叫 ["+this.name+"]我是 一个(" +this.sex+"),一天跑"+num+"公里 ");
},
}
Person.init("001","李四 ");
Person.Tell.call();
Person.run();
类的定义—声明函数式
function Member() {
this.id;
this.name;
this.age;
this.tell;
/**
* 初始化
*/
this.init = function (id,name,age,tell){
this.id = id;
this.name = name;
this.age = age;
this.tell = tell;
};
/**
* 方法 1
*/
this.call = function() {
console.log("我叫 ："+this.name);
};
let member = new Member();//用function可以直接new
//初始化传值
member.init("01","刘小兰",19,"18816788215");
//调用具体的方法
member.call();
混合：混合模式好处是在扩展新的方法时不影响之前类里的方法，可以在外面写
（类）User.prototype.showName = function(){
console.log("prototype showName 我 :"+this.name);
}
类的定义—Class 声明
class Cart{
/**
* 构造方法
* @param productList
*/
constructor(productList) {
this.productList = productList || [];
}
/**
* 往购物车列表添加一件商品
* @param product
*/
addProduct(product) {
//push 进入,js arraylist添加
this.productList.push(product);
};
/**
显示商品列表
*/
showProdudList(){
//用到了 ES6 的箭头函数
this.productList.forEach(item=>{
console.log(item);
});
}
showProdudList1(){
//用到了 ES6 的箭头函数
this.productList.forEach(function(v){
console.log(v);
});
}
/**
* 从购物车中减 1 件商品
*/
removeProduct(productId) {
//用到了 ES6 的箭头函数、数组方法 filter
//filter()方法是对原数组进行过滤筛选，产生一个新的数组对象
this.productList = this.productList.filter((value,index)=>{
//console.log(index,value);
//被删除的商品不返回。
return value.get("productId") != productId;
});
};
}
let product01 = {
"productId":"01",
"productName":"苹果",
"price":"6.9 元 /公斤 ",
"saleCount":"3 斤",
}
let product02 = {
"productId":"02",
"productName":"苹果",
"price":"6.9 元 /公斤 ",
"saleCount":"3 斤",
}
let shopCart = new Cart();
shopCart.addProduct(product01);
shopCart.addProduct(product02);
shopCart.showProdudList1();