- 定义变量的三种方式
var: 全局作用域
let: 局部作用域 可以被重新赋值
const: 常量,需要设置初值,不能被重新赋值 - 数据类型
String :const name = 'kobe'
Numbersconst age = 30
/const rating = 4.5
Booleanconst isCool = true
nullconst x = null
undefinedconst y = undefined
/let z
object
symbol - String的属性和方法
String - 字符串
const s = 'hello World'
获取字符串长度:
console.log(s.length)
大写:
console.log(s.toUpperCase())
小写:
console.log(s.toLowerCase())
截取(起始位置,截至位置):
console.log(s.substring(0,5))
分割(分割依据):
console.log(s.split(''))
Arrays - 包含多个值的变量
创建方式1:
const numbers = new Array(1,2,3,4,5);
console.log(numbers)
创建方式2:
const fruits = ['apples',oranges,'pears',10,true];
console.log(fruits);
访问其中一个:
console.log(fruits[1]);
添加:
fruits[3] = 'grapes';
添加到末尾:
fruits.push('mangos');
添加到开头:
fruits.unshift('strawberries');
去掉最后一项:
fruits.pop();
检查是否是数组:
console.log(Array.isArray(fruits));
得到某个值的索引:
console.log(fruits.indexOf('orangles'));
object - 对象类型(键值对)
const person = {
firstName: 'Kobe',
lastName:'Bryant',
age:18,
hobbies:['basketball','music','movies'],
对象中可以嵌套:
address:{
street: '50 main st',
city: 'Los Angeles',
state:'MA'
}
}
console.log(person);
访问单个值:
console.log(person.firstNmae,person.lastName);
console.log(person.hobbies[1],person.address.city);
解构赋值(从person对象中取出):
const {firstName,lastName,address:{city}} = person;
console.log(firstName);
console.log(city);
添加属性:
person.email = 'kobe@gmail.com';
console.log(person);
Arrays of objects 数组对象
const todos = [
{
id:1,
text:'Take out trash',
isCompleted: true
},
{
id:2,
text:'Meeting with Boos',
isCompleted: true
},
{
id:3,
text:'Take out trash',
isCompleted: true
},
];
console.log(todos);
console.log(todos[1].text)
JSON向服务器发送的数据
const todoJSON = JSON.Stringify(todos);
console.log(todoJSON)
Loop循环
For
for (let i =0;i < 10;i++){
console.log('For Loop Number: ${i}');
}
while
let i = 0;
while(i < 10){
console.log('While Loop Number: ${i}');
i++;
}
循环数组
for (let i =0;i < todos.length;i++){
console.log('todos[i].text');
}
for(let todo of todos){
console.log(todo.id);
}
高阶数组方法
forEach(loop),,map(可以让我们从数组中创建新数组),filter(可以根据条件创建新数组)
forEach
todos.forEach(function(todo){
console.log(todo.id);
});
map(返回一个数组)
const todoText = todos.map(function(todo){
return todo.text;
});
console.log(todoText);
filter
const todoCompleted = todos.filter(function(todo){
return todo.isCompleted === true;
}).map(function(todo){
return todo.text
})
console.log(todoCompleted );
条件语句
if
const x = 10;
if(x == 10){
console.log('x is 10')
}
double equal(==)不会关注数值类型,只关注值
const x = ‘10’;
if(x == 10){
console.log('x is 10')
}
triple equal(===)会关注数值类型
const x = ‘10’;
if(x === 10){
console.log('x is 10');
}
else{
console.log('x is not10');
}
else/else if
const x = 5;
if(x === 10){
console.log('x is 10');
}
else if(x > 10){
console.log('x is greater than 10');
}
else{
console.log('x is less than 10');
}
or(||)
const x = 4;
const y = 11;
if(x > 5 || y > 10){
console.log('x is more than 5 or y is more than 10');
}
and(&&)
const x = 6;
const y = 11;
if(x > 5 && y > 10){
console.log('x is more than 5 or y is more than 10');
}
三元操作符(ternary operator)
const x = 10;
const color = x > 10 ?(?代表than) 'red' : (:代表else) 'blue';
(if x > 10 color =‘ red' else color = 'blue')
console.log(color)
switch
const x = 10;
const color = x > 10 ?(?代表than) 'red' : (:代表else) 'blue';
swicth(color){
case 'red' :
console.log('color is red');
break;
case 'blue':
console.log('color is blue');
break;
default:
console.log('color is not red or blue')
break;
}
面向对象基础
function(函数)
function addNums(num1,num2){
console.log(num1 + num2);
}
addNums();
addNums(5,4);
添加默认值
function addNums(num1 = 1,num2 = 1){
console.log(num1 + num2);
}
addNums();
添加返回值
function addNums(num1 = 1,num2 = 1){
return num1 + num2;
}
console.log(addNums(5,5));
箭头函数
只有一个表达式:
const addNums = (num1 = 1 , num2 = 1) => console.log(num1 + num2);
addNums(5,5);
想要return什么则:
(只有一行时不需要写return,写了会报错)
const addNums = (num1 = 1 , num2 = 1) => num1 + num2;
console.log(addNums(5,5));
forEach和箭头函数
todos.forEach((todo) => console.log(todo));
//通过实例化函数来实例化对象
function Person(firstName, lastName, dob) {
this.firstName = firstName;
this.lastName = lastName;
this.dob = new Date(dob);
this.getBirthYear = function() {
return this.dob.getFullYear();
}
this.getFullName = function() {
return `${this.firstName} ${this.lastName}`;
}
}
//实例化对象
const person1 = new Person('John', 'Doe', '4-3-1990');
const person2 = new Person('Mary', 'Smith', '3-4-1980');
console.log(person1);
console.log(person2.dob);
console.log(person2.dob.getFullYear());
console.log(person1.getBirthYear());
console.log(person1.getFullName());
//通过实例化函数来实例化对象
function Person(firstName, lastName, dob) {
this.firstName = firstName;
this.lastName = lastName;
this.dob = new Date(dob);
}
//原型
Person.prototype.getBirthYear = function() {
return this.dob.getFullYear();
}
Person.prototype.getFullName = function() {
return `${this.firstName} ${this.lastName}`;
}
//实例化对象
const person1 = new Person('John', 'Doe', '4-3-1990');
const person2 = new Person('Mary', 'Smith', '3-4-1980');
console.log(person1);
console.log(person1.getBirthYear());
console.log(person2.getFullName());
//类
class Person {
constructor(firstName, lastName, dob) {
this.firstName = firstName;
this.lastName = lastName;
this.dob = new Date(dob);
}
getBirthYear() {
return this.dob.getFullYear();
}
getFullName() {
return `${this.firstName} ${this.lastName}`;
}
}
//实例化对象
const person1 = new Person('John', 'Doe', '4-3-1990');
const person2 = new Person('Mary', 'Smith', '3-4-1980');
console.log(person1);
console.log(person1.getBirthYear());
console.log(person1.getFullName());
DOM
//单元素选择期
document.getElementById('id');
document.querySelector('id')
document.querySelector('.class')
document.querySelector('tag')
//多元素选择器
document.getElementsByClassName('class')
document.querySelectorAll('.class')
document.querySelectorAll('tag')
//遍历
const items = document.querySelectorAll('.class');
items.forEach((item) => console.log(item));