js part1

最新推荐文章于 2024-09-05 17:23:44 发布

Xiaozhu1624

最新推荐文章于 2024-09-05 17:23:44 发布

阅读量132

点赞数

分类专栏：笔记文章标签： js

本文链接：https://blog.csdn.net/Xiaozhu1624/article/details/109906930

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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();