JavaScript 速成课

YLLL-ux

已于 2022-02-21 16:25:41 修改

阅读量759

点赞数 1

分类专栏：学习笔记文章标签： javascript 前端开发语言

于 2021-06-30 23:51:02 首次发布

本文链接：https://blog.csdn.net/weixin_41731854/article/details/118370586

版权

学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

如有错误，请指正😁

1、变量及如何设置

js 的三种变量：var、let、const

var： 全局变量，但是例如在条件语句（if()）中声明了一个变量，在语句外又声明了相同名字的变量，此时就不能用var
let: 可以重新赋值

let age = 30;
// 重新赋值
age = 212;

conts： 无法与 let 一样进行重新赋值

除非确认是要重新赋值，否则用 conts 会更好一点

2、数据类型

String
Numbers
Boolean
null
undefined
Symbol

1、字符串可以用 ’ ’ 也可以用 " " 来引用
2、js 中没有 int、float，所有数字都是 number
3、null 也是一个数据类型

3、字符串

3.1 拼接

传统方式 Concatenation

const name = "john";
const age = 20;
console.log('my name is' + name + 'and i am ' + age);

新方式 template string（模板字符串）

const name = 'john';
const age = 20;
const hello = 'my name is ${name} and i am ${age}';
console.log(hello);

3.2 属性和方法

字符串的长度 length

const s = '12345';
console.log (s.length);

转换成大写 toUpperCase() / 转换成小写 toLowerCase()
截取想要长度的字符串 substring(startnumber,endnumber)
将字符串分割到数组中 split(分割的规则)

3.3 方法连成串

const s = 'number one';
console.log (s.substring(0,3).toUpperCase()); // 输出 NUM

4、数组 Array

js 数组可以保存不同类型的参数

4.1 创建数组

此处列举两种方式

// 方式1 
const array = new Array(1,2,3,4);

// 方式2
const array = ["asd","qwe",49,true];

// 错误方式
const s = [];

js 是动态语言，不必总是声明参数类型

const name:string; //将 name 声明为 string 类型

4.2 Array 使用的一些小方法

此处只列举某些常用值

const array = ['12','ew'];
array.push('jkl'); // 向数组的末尾添加参数
array.unshift(12); // 在数组的开头添加参数
array.pop(); // 去掉数组的最后一项
console.log(Array.isArray(array)); // 判断是否为数组，也可以判断某个值是否为数组中的值
console.log(array.indexOf('ew')); // 获取某个参数的索引值

4.3 使用举例

const book = [
	{
		name: 'san',
		author: 'A'
	},
	{
		name: 'zan',
		author: 'B'
	},
	{
		name: 'fu',
		author: 'C'
	}
]

console.log (book[2].name); // 输出：zan

slice(start,end) : 返回数组中被选中的元素，用新的数组来接收。
参数：start：开始位置的索引；end：选中几个。
demo：

var arr1 = ['张三','李四','王五','赵四']
var arr2 = []
varr2 = arr1.slice(0,2)

console.log(arr2) // 输出 ['张三','李四']

5、对象语法

主要是键值对
数组是使用 [ ] ，对象是使用 { }
每个对象使用 ”,“ 隔开，最后一个不需要

const person {
	firstname:'jack', // key:firstname, value:jack
	firstnumber:23 // key:firstnumber, value:23
	// 对象可以是数组
	myarray:['sad',3423] // key:myarray, value:['sad',3423] 
	// 对象也可以嵌套
	student: {
		xiaoming: 23,
		zhangsan: 34
	}
}

5.1 输出指定的参数

输出上面代码 person 的指定参数

console.log (person.firstname,person.firstnumber);
console.log (person.myarray[1]); // 输出：3423
console.log (person.sutdent.xioaming); // 输出：23

6、解构赋值

当我们创建了一个变量，想将这些变量作为实际变量。

const {firstnumber, myarray, student:{zhangsan} } = person;
console.log (myarray); // 输出：['sad',3423]

7、For、while、For…of…

举例： for ( let i=0; i<4; i++ ) { 具体操作 }

// for 语句
for(let i = 0; i < 3 ; i++) {
	console.log ('hello');
}

// while 语句
let i = 0;
while(i < 3) {
	console.log ('hello');
	i++      ;
}

// for...of...
const person = [
	{
		name: 'as',
		age: 23
	},
	{
		name: 're',
		age: 12
	},
	{
		name: 'zxc',
		age: 34
	},
]

for (let per of person) {
	console.log (per); // 打印 person 的所有参数
}

8、迭代数组方法

forEach、map、filter ，这些方法的参数是函数（function），这些方法会回调函数中的参数

code 示例

const person = [
	{
		name: 'as',
		age: 23,
		isman: true		
	},
	{
		name: 're',
		age: 12,
		isman: false
	},
	{
		name: 'zxc',
		age: 34,
		isman: true
	},
];

/**
* forEach
*/
person.forEach(function(per) {
		console.log (per.age); // 打印所有的 age 参数
});

/**
* map 会返回一个数组
*/
const myname = person.map(function(per) {
		return per.name; 
});
console.log(myname); // 打印所有的 name 参数，形式为：["as","re","zxc"]


/**
* filter 只打印满足条件的参数
*/
const printTrueParams = person.filter(function (per) {
	return per.isman=== true;
});
console.log(printTrueParams);  // 只打印参数为 true 的参数，形式为：{name: 'as', age: 23, isman: true},{name: 'zxc', age: 34,isman: true}


/**
* map and filter
*/ 
const todo = person.filter(function(per) {
	return per.isman === true;
}).map(function(per) {
	return per.age; 
});
console.log(todo); // 输出：[23,34]

9、条件语句的注意

==：不会判断类型，例如： const x='10' if( x== 10) 返回值为 true；但是， ===：就会判断两边的类型

10、function 函数

10.1 普通函数

function addNums (a=1, b=1) {
	return a + b;
}
console.log(addNums(5,5)); // 输出：10

10.2 箭头函数

精简、便捷、清理快、不需要return

const addNums = (a=1, b=2) => a+b; // a+b 也可以加{} ==> {a+b}
console.log(addNums); // 输出：3

11、DOM 文档树结构

11.1 从 DOM 中获取 html 元素

选择器： 单元素选择器、多元素选择器

html 文档：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>YLLL-ux</title>
</head>
<body>

<p id="intro">你好世界!</p>
<p id="intro_1">你好世界!!</p>
<p id="intro_2"><h1>你好世界!!!</h1></p>

<ul class = "items">
	<li class="item"> Item 1</li>
	<li class="item"> Item 2</li>
	<li class="item"> Item 3</li>
</ul>

</body>
</html>

// Single element
const getID = document.getElementById('intro'); // 使用 id 进行选择
------------------------------------------------
const getID = document.querySelector('h1'); // 查询选择器，可以选择任何东西，例如 class\h1....

// Multiple element
const s = document.querySelectorAll('.item'); // 会选择出所有 `class = item` 的参数