JavaScript 速成课
js 速成课笔记
- 1、变量及如何设置
- 2、数据类型
- 3、字符串
-
- 3.1 拼接
- 3.2 属性和方法
- 3.3 方法连成串
- 4、数组 Array
-
- 4.1 创建数组
- 4.2 Array 使用的一些小方法
- 4.3 使用举例
- 5、对象语法
-
- 5.1 输出指定的参数
- 6、解构赋值
- 7、For、while、For...of..
- 8、迭代数组方法
-
- code 示例
- 9、条件语句的注意
- 10、function 函数
-
- 10.1 普通函数
- 10.2 箭头函数
- 11、DOM 文档树结构
-
- 11.1 从 DOM 中获取 html 元素
如有错误，请指正
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-uxtitle>
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 1li>
<li class="item"> Item 2li>
<li class="item"> Item 3li>
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` 的参数
qSA 可以放 id、class、tag 的名字