js 的学习笔记

JS中常用的输出方式(五种)
1、alert(“要输出的内容”);
在浏览器中弹出一个对话框,然后把要输出的内容展示出来 alert都是把要输出的内容首先转换为字符串然后在输出的
2、document.write(“要输出的内容”); 注意不要少了扩号
直接的在页面中展示输出的内容
3、console.log(“要输出的内容”);
在控制台输出内容
4、value ->给文本框(表单元素)赋值内容
->获取文本框中(表单元素)的内容

<input id="demo"></input>
<script>
document.getElementById("demo").value = "要给#search这个文本框添加的内容";
</script>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "a";
</script>

5、innerHTML/innerText ->给除了表单元素的标签赋值内容

<p id="demo"></p>
<div id="div1"> </div>
<script>
document.getElementById("demo").innerHTML = "you need walk"; 
document.getElementById("div1").innerText = "you need walk and run";
</script>

js 对象赋值和复制的区别 参考

一、赋值（=）
赋值是将某一数值或对象赋给某个变量的过程，分为：
1、对基本数据类型：赋值之后两个变量互不影响

let a = "yyh";
let b = a;
console.log(b);  // yyh
a = "change";
console.log(a);   // change
console.log(b);    // saucxs

2、对引用数据类型（即对象）：赋值后两个变量具有相同的引用，指向同一个对象，相互之间有影响

let a = {
    name: "a",
    book: {
        title: "You Don't Know JS",
        price: "45"
    }
}
let b=a
b.name="b"
document.write(a.name)  //b a.name 也从a变了b
document.write(b.name)  //b

通常在开发中并不希望改变变量 a 之后会影响到变量 b，这时就需要用到浅拷贝和深拷贝。

二、浅拷贝
let b = Object.assign({}, a); 也可以写成 let b={…a}
两个作用一样，将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

let a = {
    name: "a",
    book: {
        title: "You Don't Know JS",
        price: "45"
    }
}
let b={...a}
b.name="b"
a.book.title="i do know js"
document.write(a.name)         //a
document.write(b.name)         //b
document.write(b.book.title)  //i do know js

上面代码改变对象 a 之后，对象 b 的基本属性保持不变。但是当改变对象 a 中的对象 book 时，对象 b 相应的位置也发生了变化。

三、深拷贝
let b = JSON.parse(JSON.stringify(a));
深拷贝会拷贝所有的属性，并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不影响。

let a = {
    name: "a",
    book: {
        title: "You Don't Know JS",
        price: "45"
    }
}
let b = JSON.parse(JSON.stringify(a))
b.name="b"
a.book.title="i do know js"
document.write(a.name)     //a
document.write(b.name)     //b
document.write(b.book.title)   //"You Don't Know JS"改变a 后b没有变

但是该方法有以下几个问题：（1）会忽略 undefined（2）会忽略 symbol
（3）不能序列化函数（4）不能解决循环引用的对象（5）不能正确处理new Date()（6）不能处理正则

js动态变量名
1.用eval，例子：

var Thread_num=5;
for(var i=1;i<=Thread_num;i++){
eval("var set_" + i + "=" + i);
}
alert(set_5);

2.方法1占内存，建议用数组代替

var Thread_num=5;
var arr=[];
for(var i=1;i<=Thread_num;i++){
arr[i] = i;
}

3.动态的对象名
为动态对象名加方括号

<p id="demo"></p>
<script>
let a="name"
obj = {[a]:"Runoob" , "url":"www.runoob.com" }//为动态对象名加方括号
document.getElementById("demo").innerHTML = obj.name + " " + obj.url;

函数的写法 参考
把js函数看成对象更合适，即可以给变量赋值，又有属性和方法
1、 function声明

function myFunction(a, b) {
    return a * b;
}

2、函数表达式;JavaScript 函数实际上是一个 匿名函数 (函数没有名称)。
函数存储在变量中，不需要函数名称，通常通过变量名来调用。

var x = function (a, b) {return a * b};
var z = x(4, 3);

3、用Function() 构造函数，（Function()）是内置的 JavaScript 函数构造器

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

4、自调用函数，实际上是一个 匿名自我调用的函数 (没有函数名)

(function (e) {
    document.getElementById("demo").innerHTML = "Hello!"+e;
})('我是参数');

5、箭头函数，注意箭头函数定的都是匿名函数使用它就要赋值给一个变量或自调用
箭头函数表达式的语法比普通函数表达式更简洁。
(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式(单一)// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

const x = (x, y) => x * y;//单一表达式可省return和大括号

当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}也可以写成单一参数 => {函数声明}
没有参数的函数应该写成一对圆括号:() => {函数声明}

const x = (x, y) => { return x * y };

单个参数=>单一表达式

const x = y => 5 * y ;//去掉return时必须同时去掉{}

使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。
箭头函数是不能提升的，所以需要在使用之前定义。

6、函数提升（Hoisting）提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的的行为。因此，函数可以在声明之前调用：

myFunction(5);
function myFunction(y) {
    return y * y;
}

数组处理函数

1、filter方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。不会改变原始数组。
语法：array.filter(function(currentValue,index,arr), thisValue)
也就是做为参数的函数返回一个条件，filter判断元素是否符合条件，然后组成一个所有合条件的元素的新数组

var ages = [32, 33, 12, 40];
var a = ages.filter(item=>item>10);//去掉return时必须同时去掉{}
document.write (a);

2、some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
会依次执行数组的每个元素如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
array.some(function(currentValue,index,arr),thisValue)
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。

var ages = [32, 33, 12, 40];
var a = ages.some(item=>item>10);//去掉return时必须同时去掉{}
document.write (a);//返回true

3、map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。注意： map() 不会改变原始数组。
也就是用元素做为参数中的函数的参数计算返回的结果组成的结果集

var ages = [32, 33, 12, 40];
var b=ages.map(item=>item-10);//去掉return时必须同时去掉{}
document.write (b);//输出22,23,2,30

用途举例：js从数组中的对象取出特定字段并生成新的数组

let arr = [
  {
    'id': 1, 'name': '小红','add':'张巷'
  },
    {
    'id': 2, 'name': '小明','add':'姆湖严家'
  },
 ]
let new_arr = arr.map(obj => {return obj.name})
document.write (new_arr) //生成新的数组输出小红,小明
let new_arr_obj = arr.map(obj => {return({name:obj.name,add:obj.add})})//键名可有引号''也可省略
document.write (new_arr_obj[0].name) //生成新的对象数组输出小红

用途举例：改变数组指定列并生新数组

let new_map  = arr.map((item) => {
  let new_item=item; 
  new_item ['add'] = item.add+"1号"
  return new_item
  })
  document.write (new_map[0].add)

4、push() 向数组的末尾添加一个或更多元素，并返回新的长度。
注意： 新元素将添加在数组的末尾。
注意： 此方法改变数组的长度。
提示： 在数组起始位置添加元素请使用 unshift() 方法。

var ages = [32, 33, 12, 40];
var b=[30, 13, 15, 40]
 b.push(ages);
document.write (b);//输出30, 13, 15, 40,32, 33, 12, 40

5、splice() 方法从数组中添加或删除元素。
array.splice(index,howmany,item1,…,itemX)

参数 描述index 必需。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany 可选。规定应该删除多少元素。必须是数字，但可以是 “0”。
如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX 可选。要添加到数组的新元素

如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
也就是原数组分成了两个数组，原数组保留没有被删除了元素，删除的元素又组成一个新数组用来返回

var ages = [32, 33, 12, 40];
ages.splice(0,1)//可以不用赋值
var b=ages.splice(0,1) //分成了两个数组
document.write (ages);//输出 12, 40
document.write (b);//输出 33

6、concat() 方法用于连接两个或多个字符串
实例联接两个数组

let arr = [
  {
    'id': 1, 'name': '小红','add':'张巷'
  },
    {
    'id': 2, 'name': '小明','add':'姆湖严家'
  },
 ]
let arr2=[  {
    'id': 1, 'name': '小红','add':'张巷1'
  }]
arr3 = arr.concat(arr2);
document.write (arr3[2].add); //显示张巷1

json转换
函数 描述
JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。