JavaScript小记

var box = document.getElementById('box');
var $box = $(box);

var $box = $('#box');
var box1 = $box[0];       // 方法一
var box2 = $box.get(0);   // 方法二

window.addEventListener('load', function() {
    // 页面的全部资源加载完才会执行，包括图片，视频
})
document.addEventListener('DOMContentLoaded', function() {
    // DOM渲染完即可执行，此时图片、视频还可能没有加载完
})

const alsoHuge = BigInt(9007199254740991);
// ↪ 9007199254740991n

console.log(typeof 2);               // number
console.log(typeof true);            // boolean
console.log(typeof 'str');           // string
console.log(typeof []);              // object  []数组的数据类型在 typeof 中被解释为object
console.log(typeof function(){});    // function
console.log(typeof {});              // object
console.log(typeof undefined);       // undefined
console.log(typeof null);            // object    null 的数据类型被 typeof 解释为 object
console.log(typeof BigInt(10));      // bigint

console.log(2 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false  
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true    
// console.log(undefined instanceof Undefined);	 // 报错
// console.log(null instanceof Null);	// 报错

function Person(name, age) {
    this.name = name;
    this.age = age;
}
function Dog(name, age) {
    this.name = name;
    this.age = age;
}
var p = new Person('zs', 18);
var d = new Dog('小花', 8);

console.log(p instanceof Person);       // true
console.log(d instanceof Person);       // true
console.log(p instanceof Object);		// false

console.log((2).constructor === Number);  				// true
console.log((true).constructor === Boolean);  			// true
console.log(('str').constructor === String); 			// true
console.log(([]).constructor === Array);  				// true
console.log((function() {}).constructor === Function);  // true
console.log(({}).constructor === Object);               // true

function Person(name, age) {
    this.name = name;
    this.age = age;
}

var p = new Person('csm', 21);

console.log(p.constructor.name); 	// Person

// 改变原型
Person.prototype = {
    name: 'zs',
    age: 18
};

var p1 = new Person('csm', 21);

console.log(p1.constructor.name); 	// Object

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype = {
	constructor: Person,
    name: 'zs',
    age: 18
};
var p = new Person('csm', 21);
console.log(p.constructor.name); 	// Person

console.log(Object.prototype.toString.call(2));    			// [object Number]
console.log(Object.prototype.toString.call(true));			// [object Boolean]
console.log(Object.prototype.toString.call('str'));			// [object String]
console.log(Object.prototype.toString.call([]));			// [object Array]
console.log(Object.prototype.toString.call(function(){}));	// [object Function]
console.log(Object.prototype.toString.call({}));			// [object Object]
console.log(Object.prototype.toString.call(undefined));		// [object Undefined]
console.log(Object.prototype.toString.call(null));			// [object Null]

// 数据类型判断
function typeOf(obj) {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}

var result = “a” < 3; // false，因为“a”被转化成了NaN

{} == false  <=> Number({}) == Number(false) <=> NaN == 0  // false

{} == {} // false  两者指向的不是同一个地址

console.log(Math.pow(2, 5))		// 32
console.log(2 ** 5) 			// 32

let str = 'hello My word!'
console.log(str.startsWith("hello"));//true
console.log(str.endsWith('!'));//true
console.log(str.includes('My'));//true

console.log('foo'.padStart(4,'a'));//afoo
console.log('foo'.padEnd(4,'a'));//fooa

console.log('foo'.padStart(3,'a'));//foo
console.log('foo'.padEnd(3,'a'));//foo

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

//ES6
const name = 'zhangsan', age = 20;
const html = '<div>
                   <p>${name}</p>
                   <p>${age}</p>
              </div>';
console.log(html);

let arr = [1, 2, 3, 4, 5];

arr.forEach((num, index) => {
    arr[index] = num * 2;
});

let doubled = arr.map(num => {
    return num * 2;
});

let array = [1, 2, 3, 4, 5]
let find = array.find(function(item) {
    return item === 3
})
console.log(find) // 3 (返回的是值，只输出符合的第一个值，没找到则返回undefined)

// 当Array()中的参数只有一个的时候，此时的参数就代表了数组的长度，只有参数大于等于2的时候才会返回，参数组成的新数组。
Array()//[]
Array(3)//[,,,]
Array(1,2,3)//[1,2,3]

// Array.of无论参数有几个最后都会返回参数组成的数组。
console.log(Array.of())//[]
console.log(Array.of(3))//[3]
console.log(Array.of(3).length)//1

function arrayof{
    return Array.slice.call(arguments);
}

Array.from({length:3}, () => 'jack') //["jack", "jack", "jack"]

let array = {
    0: 'name', 
    1: 'age',
    2: 'sex',
    3: ['user1','user2','user3'],
    'length': 4
}
let arr = Array.from(array)
console.log(arr) // ['name','age','sex',['user1','user2','user3']]

let set = new Set([1,1,2,5,5,6,7,8,9])
console.log(Array.from(set))  // [1, 2, 5, 6, 7, 8, 9]

//将数组中布尔值为false的成员指为0
Array.from([1, ,2,3,3], x => x || 0) //[1,0,2,3,3]
 
//将一个类似数组的对象转为一个数组，并在原来的基础上乘以2倍
let arrayLike = { '0': '2', '1': '4', '2': '5', length: 3 }
Array.from(arrayLike, x => x*2) //[4,8,10]
 
//将一个set对象转为数组，并在原来的基础上乘以2倍
Array.from(new Set([1,2,3,4]), x => x*2) //[2,4,6,8]

Array.from('abc') //['a','b','c']

const myMap = new Map().set(true, 7)
console.log(myMap); //Map(1) {true => 7}
console.log([...myMap]); //[true ,7]

const arr = Array.from({length: m}, () => Array(n).fill(0))

var aLi = document.querySelectorAll('li');
var arr = [];
for (var i = 0; i < aLi.length; i++) {
	arr[arr.length] = aLi[i]
}

var arr = Array.prototype.slice.call(arg);  // 方法一
var arr = [].slice.call(arg);   			// 方法二

oldarr.__proto__ = Array.prototype;

Array.from({length:3}, function() { return 1}) // [1,1,1] 初始化并赋值

var arr = [1,2,3,4];  
arr.splice(0);

var arr = [1,2,3,4];  
arr.length = 0;

<script type ="text/javascript">  
　　var arr = [1,2,3,4];  
   arr = [];
</script>

function unique (arr) {
  return Array.from(new Set(arr))
  // return [...new Set(arr)]
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

function unique(arr){            
    for(var i=0; i<arr.length; i++){
        for(var j=i+1; j<arr.length; j++){
            if(arr[i]==arr[j]){         
                arr.splice(j,1);
                j--;
            }
        }
    }
	return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     
    //NaN和{}没有去重，两个null直接消失了

function unique(arr) {
    var result = []
    for (var i of arr) {
        if (!result.includes(i)) {
            result.push(i)
        }
    }
    return result
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
   // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]      //NaN、{}没有去重

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!');
        return;
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array.indexOf(arr[i]) === -1) {
            array.push(arr[i]);
        }
    }
    return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
   // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]      //NaN、{}没有去重

function unique(array) {
    var obj = {};
    var unique = [];
    for(var i = 0; i < array.length; i++) {
        if(!obj.hasOwnProperty([array[i]])) {
            obj[array[i]] = 1;
            unique.push(array[i]);
        }
    }
    return unique;
}

    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]   //所有的都去重了

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
        console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

function arrayNonRepeatfy(arr) {
  let map = new Map();
  let array = new Array();  // 数组用于返回结果
  for (let i = 0; i < arr.length; i++) {
    if(map.has(arr[i])) {  // 如果有该key值
      map.set(arr[i], true); 
    } else { 
      map.set(arr[i], false);   // 如果没有该key值
      array.push(arr[i]);
    }
  } 
  return array;
}
 var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
 console.log(arrayNonRepeatfy(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]
// {}没去

function unique(arr){
    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr));
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

function unique(arr){
    let result = []
    let obj = {}
    for (let i of arr) {
        if (!obj[i]) {
            result.push(i)
            obj[i] = 1
        }
    }
    return result
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr));
// [1, "true", 15, false, undefined, null, NaN, 0, "a", {…}]

function flatArr(arr) {
	var newArr = [];
	arr.forEach((val) => {
		if (Array.isArray(val)) {
			newArr = newArr.concat(flatArr(val))
		} else {
			newArr.push(val)
		}
	})
	return newArr;
}

function flatArr(arr) {
   return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? flatArr(cur) : cur), [])
}

// join()
function flatArr(arr) {
	return JSON.parse(`[${arr.join()}]`)
}
// toString()
function flatArr(arr) {
	return JSON.parse(`[${arr.toString()}]`)
}

function flatArr(arr) {
  	return arr.flat(Infinity);
}

[1, [2, [3]]].flat(2) // [1, 2, 3]

[1, 2].flatMap((x) => [x, x * 2]) // [1, 2, 2, 4]

function randomsort(a, b) {
    return Math.random() > .5 ? -1 : 1;
    //用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
}
var arr = [1, 2, 3, 4, 5];
arr.sort(randomsort);

// es6 写法
arr.sort(() => Math.random() - 0.5);

var arr = [
    {name:'zopp',age:0},
    {name:'gpp',age:18},
    {name:'yjj',age:8}
];

// 方法一
function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    }
}
console.log(arr.sort(compare('age')));

// 方法二
console.log(arr.sort((a,b) => a.age - b.age));

const arr = ['a', 'b', 'c']
[...arr.keys()] // [0, 1, 2]
[...arr.values()] // ['a', 'b', 'c']
[...arr.entries()] // [[0, 'a'], [1, 'b'], [2, 'c']]

function add(a, b){
    return a + b;
}
let num = [22, 33];
add(...num) // 55

//ES5中
Math.max.apply(null, [3,2,5])
//在es6中的写法
Math.max(...[3, 2, 5])
// 等同于Math.max(3, 2, 5);

var obj = {name: "feng", color: ["yellow", "blue"]};
var obj1 ={...obj}
obj1.color.push("red")
console.log(obj)    // { name: 'feng', color: [ 'yellow', 'blue', 'red' ] }

// arguments对象
!function(){
    const arr = [...arguments];
    console.log(arr)
}(2,3)    // [2,3]

// Dom返回的对象
console.log(Array.isArray([...document.getElementsByTagName("li")])) // true

// 字符串转数组
let str = 'hello'
let arr = [...str]
console.log(arr)  // ['h', 'e', 'l', 'l', 'o']

var obj = {
    a: 100,
    b: 200
}
var a = obj.a
var b = obj.b
var arr = ['xxx','yyy','zzz']
var x = arr[0]

//ES6
const obj = {
    a: 10,
    b: 20,
    c: 30
}
const {a,c} = obj
console.log(a)
console.log(c)

const arr = ['xxx','yyy','zzz']
const [x,y,z] = arr
console.log(x)
console.log(y)
console.log(z)

var [a] = []     // a就是undefined;
var [a, b] = [1]  // 同样a的值是1，b 的值就是undefiend;

//以下都是会报错的Example
var [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};

let {name, age} = {name: "aaa", age: 12}
name	// "aaa"
age		// 12

let {age, name} = {name: "aaa", age: 12}
name	// "aaa"
age		// 12
let {foo} = {name: "aaa", age: 12}
foo		// undefined

let [a,b,c,d,e,f]="goudan"
a	// g
b	// o
...
f	// n

let {length: len}="goudan"
len // 6

let coll = new Set([3,5,"feng","true"]); // 放数组
console.log(coll) // Set(4) {3, 5, "feng", "true"}
// ps: 初始化的参数必须是可遍历的，可以是数组或自定义遍历的数据结构

coll.add(22).add('hello')
console.log(coll) // Set(5) {3, 5, "feng", "true", 22, "hello"}
coll.delete(3)
console.log(coll) // Set(4) {5, "feng", "true", 22}
coll.clear()
console.log(coll) // Set(0) {}

coll.forEach(item => console.log(item));	  // 3 5 feng true
for (let item of coll) {console.log(item);}   // 3 5 feng true

// Set 转 Array
const arrFromSet = Array.from(coll)
console.log(arrFromSet) // [3,5,"feng","true"]

let arr = [1,1,12,3,3,true,true,NaN,NaN]
let unique = [...(new Set(arr))]
console.log(unique)//[ 1, 12, 3, true, NaN ]

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

function copyArr(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
     res.push(arr[i])
    }
    return res
}
var arr = [1,2,3,4,5]
var arr2 = copyArr(arr)

var arr = [1,2,3,4,5]
var arr2 = arr.slice()

var arr = [1,2,3,4,5]
var arr2 = arr.concat()

var arr = [1,2,3,4,5]
var arr2 = [...arr]

function deepClone(obj){
    var newObj= obj instanceof Array ? [] : {};
    for(let item in obj){
        newObj[item] = typeof obj[item] == 'object' ? deepClone(obj[item]) : obj[item];
    }
    return newObj;
}

var array = [
    { number: 1 },
    { number: 2 },
    { number: 3 }
];
var copyArray = JSON.parse(JSON.stringify(array))
copyArray[0].number = 100;
console.log(array); //  [{number: 1}, { number: 2 }, { number: 3 }]
console.log(copyArray); // [{number: 100}, { number: 2 }, { number: 3 }]

let obj = { name:"goudan"}
let obj2 = { name:"xiaofei",age:12}
obj2.__proto__.sex = "man"
console.log(Object.assign(obj,obj2));//在obj的__proto__对象上面也会有sex属性

var receiver = {};
Object.assign(receiver, 
    {
    	type: "js", 
    	name:"file.js"
	},
    {
    	type: "css"
	}
)
console.log(receiver); // {type: "css", name: "file.js"}

//实现 deepAssign({a: {b: 1, c: 2}}, {a: {c: 3}});
//=> {a: {b: 1, c: 3}}

// 只有两个对象
function deepAssign(obj1, obj2){
    for(var item in obj2){
        obj1[item] = typeof obj2[item] === 'object' ? deepAssign(obj1[item], obj2[item]) : obj2[item];
    }
    return obj1;
}

// 通用
function deepAssign() {
  var args = Array.from(arguments);
  return args.reduce(deepClone, args[0]);

  function deepClone(target, obj){
    if(!target) target = Array.isArray(obj) ? [] : {};
      for(key in obj){
        target[key] = typeof obj[key] ==="object" ? deepClone(target[key], obj[key]) : obj[key]
      }
    return target;
  }
}

var m = new Map();
o = {p: "Hello World"};
m.set(o, "content");	//使用set进行添加元素 这里的键值是一个对象
console.log(m.get(o))
// "content"

let map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  document.write(key);
}
// "F"
// "T"
for (let value of map.values()) {
  document.write(value);
}
// "no"
// "yes"
for (let item of map.entries()) {
  document.write(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
// 或者
for (let [key, value] of map.entries()) {
  document.write(key, value);
}
// 等同于使用map.entries()
for (let [key, value] of map) {
  document.write(key, value);
}

// Object 只能用字符串作为键
const obj = {}
obj['key1'] = 'value1'
obj[1] = 'value2' // 这里的 1 会被转换为 "1"
console.log(obj) // { '1': 'value2', key1: 'value1' }

// Map 可用任何类型作为键
const map = new Map()
map.set('key1', 'value1')
map.set(1, 'value2') // 数字 1 不会被转换为字符串
console.log(map) // Map(2) { 'key1' => 'value1', 1 => 'value2' }

// Object 迭代（无序）
console.log(Object.keys(obj)) // ['1', 'key1']

// Map 迭代（有序）
console.log([...map.keys()]) // ['key1', 1]

// Map 直接获取大小
console.log(map.size) // 2

// Object 需要手动计算大小
console.log(Object.keys(obj).length) // 2

const s = 'aaa_aa_a'
const r1 = /a+/g
console.log(r1.exec(s))  // ["aaa", index: 0, input: "aaa_aa_a"]

const r2 = /a+/y
console.log(r2.exec(s))  // ["aaa", index: 0, input: "aaa_aa_a"]

// 再执行一次
console.log(r1.exec(s))  // ["aa", index: 4, input: "aaa_aa_a"]
console.log(r2.exec(s))  // null

function doadd() {
    if (arguments.length == 1) {
        alert(arguments[0] + 10);
    } else if (arguments.length == 2) {
        alert(arguments[0] + arguments[1]);
    }
}
doAdd(10) // 20
doAdd(30, 20) // 50

var foo = 1;
(function foo() {
     foo = 10; 
     console.log(foo);
}())
// ƒ foo() { foo = 10; console.log(foo) }

// ES5
function(a, b){
    if(b == null){
        b = 0
    }
}

// ES6
function(a, b = 0){
    ...
}

// ES5 用arguments
function test (a, b = 1, c) {
    console.log(arguments.length)
}
test('a', 'b') // 2

// ES6
function test (a, b = 1, c) {
    console.log(test.length)
}
test('a', 'b') // 1

// 注意：Function.length统计的是 没有默认值的参数的个数

//JS
var arr = [1,2,3]
arr.map(function(item){
    return item + 1
})

//ES6
const arr = [1,2,3]
arr.map(item => item + 1)
arr.map((item, index) => {
    console.log(index)
    return item + 1
})

let pow = x => x*x

let person = (name) => ({
    age: 20,
    addr: 'beijing'
})

// 箭头函数 this
const obj = {
  name: 'Alice',
  say: () => {
    console.log(this.name) // undefined (继承全局作用域的 this)
  },
}
obj.say()

// 普通函数 this
const obj = {
  name: 'Alice',
  say: function () {
    console.log(this.name) // "Alice" (this 指向 obj)
  },
}
obj.say()

// 箭头函数 不能作为构造函数
const Person = (name) => {
  this.name = name
}
const p = new Person('Alice') // TypeError: Person is not a constructor

// 普通函数 构造函数
function Person(name) {
  this.name = name
}
const p = new Person('Alice')
console.log(p.name) // "Alice"

// 箭头函数 ...args
const add = (...args) => {
  console.log(args) // [1, 2, 3]
}
add(1, 2, 3)

// 普通函数 arguments
function add() {
  console.log(arguments) // Arguments(3) [1, 2, 3]
}
add(1, 2, 3)

// 箭头函数 不支持 `bind/call/apply`
const obj = {
  value: 42,
}
const arrowFn = () => {
  console.log(this.value)
}
arrowFn.call(obj) // undefined

// 普通函数 支持 `bind/call/apply`
const obj = {
  value: 42,
}
function normalFn() {
  console.log(this.value)
}
normalFn.call(obj) // 42