重要函数方法及知识总结toUpperCase()、sort()、concat()、indexOf()、join('')、

toUpperCase()、sort()、concat()、indexOf()、join('')、map()、innerWidth、innerHeight、innerHTML 、querySelector()

toUpperCase()

JavaScript中的toUpperCase()函数是针对字符串对象的一个方法，它用于将字符串中的所有字母转换为大写形式，并返回转换后的新字符串。具体来说，调用字符串对象的toUpperCase()方法将会返回一个新的字符串，其中原字符串中的所有字母都被转换成大写形式。需要注意的是，toUpperCase()方法不会修改原始的字符串，而是返回一个新的字符串。因此，在使用toUpperCase()方法时，我们通常会将结果赋值给一个新的变量，以便进一步处理或存储转换后的字符串。

function identify(obj){
  return obj.name.toUpperCase()  //英文小写转大写
}
function speek(obj){
    var greeting ="Hello ,I'm " + identify(obj)  //传给新变量
    console.log(greeting);
}
var me = {
  name:'tom'
}
speek(me)

let a = {}

let a = {}
obj.a

obj.a作用是要是里面没有a就会添加一个a进去再读取

sort()

sort 函数，使用这个操作有副作用，它会影响原数组

sortArr函数，修改外界传进来的实参nums，多人协作时可能会带来外界的误解。在编写函数时，不要写这种函数，我们要写纯函数

const nums = [9,2,3,6,7]
function sortArr(arr) {
    return arr.sort()
}
console.log(sortArr(nums),nums); //[ 2, 3, 6, 7, 9 ] [ 2, 3, 6, 7, 9 ]

concat()

[1，2，3].concat([4，5])拼接数组成[1，2，3，4，5]

括号内不传数组时拼接一个空数组，形成一个新数组

const nums = [9,2,3,6,7]
function sortArr(arr) {
    return arr.concat().sort()
}
console.log(sortArr(nums),nums);  //[ 2, 3, 6, 7, 9 ]  [9,2,3,6,7]

indexOf()

indexOf 更好地提供了去重功能 arr.indexOf(1)>=0说明存在,会输出数组下标。如果不存在会输出-1.

var arr = [5,8,6,77,11,66]
console.log(arr.indexOf(7));  // -1
console.log(arr.indexOf(5));  // 0

join('')

JavaScript中的join()方法用于将数组的所有元素连接成一个字符串。你可以在调用join()方法时指定一个字符串作为参数，该字符串将被用作连接数组元素的分隔符，如果不提供参数，则默认使用逗号作为分隔符。

下面是一个简单的示例：

javascriptCopy Code
var fruits = ["apple", "banana", "orange"];
var result = fruits.join(); // 结果为 "apple,banana,orange"

在这个示例中，join()方法将数组fruits中的元素连接成一个字符串，并使用逗号作为分隔符。

你也可以指定其他的分隔符：

javascriptCopy Code
var fruits = ["apple", "banana", "orange"];
var result = fruits.join(" - "); // 结果为 "apple - banana - orange"

在这个示例中，join(" - ")使用短横线和空格作为分隔符。

map()

在JavaScript中，map()是一个数组方法，它会创建一个新数组，其中每个元素都是原始数组中的对应元素执行回调函数后的返回值。
map()方法接收一个回调函数作为参数，这个回调函数可以接收三个参数：当前正在处理的元素、当前元素的索引和原始数组本身。回调函数会对原始数组中的每个元素执行一次，并将返回值存储在新数组中相应的位置。

['asdasd','asdadad'].map(function(item){  console.log(item);return item + '----';})
 //asdasd
 //asdadad
 //['asdasd----', 'asdadad----']

 ['asdasd','asdadad'].map(function(item){  console.log(item);return `<li>${item}</li>`;}) 
//  asdasd
// asdadad
//'<li> asdasd </li><li> asdadad </li>'

需要注意的是，map()方法并不会改变原始数组，而是返回一个新数组。此外，回调函数必须返回一个值，否则新数组中将会存在undefined元素。

querySelector()

在JavaScript中，querySelector()是一个DOM方法，它可以通过CSS选择器来查找文档中的元素。

使用querySelector()方法时，需要将选择器作为参数传递给它，然后该方法会返回与选择器匹配的第一个元素。如果没有匹配的元素，则返回null。

以下是一个简单的例子，演示如何使用querySelector()方法获取id为“my-element”的元素：

Copy Code
const myElement = document.querySelector('#my-element');
console.log(myElement); // <div id="my-element">...</div>

在这个例子中，我们将选择器'#my-element'作为参数传递给querySelector()方法，然后该方法会返回id为“my-element”的元素。

需要注意的是，querySelector()方法只返回与选择器匹配的第一个元素。如果希望获取所有匹配的元素，则应该使用querySelectorAll()方法。此外，选择器可以使用各种CSS选择器语法，例如标签名、类名、属性和伪类等。

innerHTML

在JavaScript中，innerHTML是一个DOM元素的属性，它代表了该元素包含的HTML或XML标记的序列。通过修改这个属性，可以动态地改变元素的内容。

例如，假设有一个id为"myElement"的div元素：

htmlCopy Code
<div id="myElement">
  <p>Hello, this is some text.</p>
</div>

可以使用innerHTML属性来改变这个div元素的内容，比如将其替换为一个新的段落：

javascriptCopy Code
const myElement = document.getElementById('myElement');
myElement.innerHTML = '<p>Now the content has changed!</p>';

在这个例子中，我们获取了id为"myElement"的div元素，并将其innerHTML属性设置为新的HTML字符串。这会导致原来的内容被替换为新的内容。

需要注意的是，使用innerHTML属性会导致浏览器重新解析和渲染元素的内容，因此在频繁更新大量内容时可能会影响性能。另外，当从用户输入或其他不可信的来源获取HTML内容时，应格外小心，以避免出现安全漏洞。除了innerHTML还有innerWidth、innerHeigth

`innerWidth`和`innerHeight`

在JavaScript中，innerWidth和innerHeight是指当前窗口的内部宽度和高度，即网页可视区域的大小，不包括浏览器的工具栏、菜单栏、滚动条等非网页内容。innerWidth和innerHeight属性通常用于确定网页元素的位置和尺寸，以便使其自适应或响应用户界面的变化。

例如，如果您想让某个元素始终位于可视区域的正中央，您可以使用以下代码：

javascriptCopy Code
var element = document.getElementById("myElement");
element.style.position = "absolute";
element.style.top = (window.innerHeight/2 - element.offsetHeight/2) + "px";
element.style.left = (window.innerWidth/2 - element.offsetWidth/2) + "px";

这段代码将获取窗口的innerWidth和innerHeight属性，并将元素的位置设置为居中。请注意，这种方法只会在窗口大小发生变化时才重新计算元素的位置，因此在进行响应式设计时需要特别小心。

重要函数方法及知识总结