前端学习——JS学习

1. 定义变量，关键字 var、let、const

这里主要是对var、let做比较

/** 
	1. var存在变量提升、let不存在变量提升 
**/
console.log(a); // undefined（通过）
var a = 10;

console.log(a); // ReferenceError: a is not defined（报错）
let a = 10;

/** 
	2. var可以多次声明、let不可以多次声明 
**/
var a = 10;
var a = 20;
console.log(a); // 20

let a = 10;
let a = 20; // Uncaught SyntaxError: Identifier 'a' has already been declared

简单说一下const的使用

/**
	1. const声明一个只读的变量，声明后，值就不能改变
**/
const a = 10;
a = 20;  // TypeError: Assignment to constant variable.

/**
	2. const必须初始化
**/
const a;  // SyntaxError: Missing initializer in const declaration
const a = 10; // ok

/**
	3. const并不是变量的值不能改动，而是变量指向的内存地址所保存的数据不得改动
**/
const obj = {
	age: 17
}
obj.age = 18;  // ok

obj = {		//  SyntaxError: Identifier 'obj' has already been declared
	age: 18
}

2. 定义变量，数据类型

var length = 16;                                  // Number 通过数字字面量赋值 
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

3. 数组变量的操作

1. 添加元素

let arr=[1,2,3,4];
arr.push(5);
console.log(arr);	//得到[1,2,3,4,5]
console.log(arr[0]);		//访问元素

const array = ['apple', 'banana', 'cherry'];  
const element = 'banana';  
  
if (array.includes(element)) {  	//查看是否包含某个元素
    console.log(`数组包含元素: ${element}`);  
} else {  
    console.log(`数组不包含元素: ${element}`);  
}

4. 对象的操作

1. 创建对象

let person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

2. 访问对象属性

let name=person.lastname;
let name=person["lastname"];

3. 添加新属性

//创建obj对象
let obj = {};
//为对象添加动态属性
obj.userName = "admin";
obj.passWord = "123456";
//输出
console.log(obj);    

4. 删除属性

//创建obj对象
let obj = {};
//为对象添加动态属性
obj.userName = "admin";
obj.passWord = "123456";
//移除属性
delete obj.passWord;
//输出
console.log(obj);   

5. 两个对象合并

let arr1 = {
	a:1,
	b:2,
	c:3
};
let arr2 = {
	d:4,
	e:5,
	a:6
};
// 拓展运算符，后面相同的属性覆盖前一个
let arr3={...arr1,...arr2};

6. 定义函数

var dog = {
	sayHello() {
		console.log(this);
	}
};

7. 添加函数

// 假设我们有一个已有的对象  
let myObject = {  
  name: "John",  
  age: 30  
};  
  
// 现在我们给这个对象定义一个函数  
myObject.sayHello = function() {  
  console.log("Hello, my name is " + this.name);  
};  
  
// 调用这个函数  
myObject.sayHello();  // 输出: "Hello, my name is John"

5. JSON 字符串

let text = '{ "sites" : [' +
    '{ "name":"Runoob" , "url":"www.runoob.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

// JSON字符串转换JS对象
obj = JSON.parse(text);

// JS对象转JSON字符串
let text2 = JSON.stringify(obj);

6. window全局变量

在JavaScript中，window对象是一个全局对象，代表了浏览器窗口。所有全局变量和函数都是window对象的属性和方法。当你在代码中声明一个全局变量或函数时，它实际上是成为了window对象的一个属性或方法。

定义window属性

window.myGlobalVariable = "Hello, world!";

使用window属性

// 使用window对象定义的变量非常简单，通过window对象来访问它。
console.log(window.myGlobalVariable); // 输出: "Hello, world!"